Jump to content

Archived

This topic is now archived and is closed to further replies.

Ryan Logan

Social Media Icons

Recommended Posts

Ryan Logan

Hello all. I recently purchased the Business edition of DMS and have been doing some testing.  I'm having trouble with the Social Media icons.  I followed the documentation (http://docs.pagelines.com/tutorials/creating-a-branding-area) and was able to get that to work, which you can see here:  www.ryanleelogan.com.

 

In Pagelines Framework v2, it was so easy to change the icons.  Is there a way, without buying an add-on, to quickly change the icon images?

 

If the answer to the above is, "no", what would get me by is being able to simply get the Font Awesome icons to appear and be able to set their color as needed.

 

I've read over 20 forum posts, the documentation over and over...and I just can't find any easy way to do what I used to be able to do with the icons.

 

The attached image shows what I'm hoping to accomplish.

 

Thank you,

Ryan

Share this post


Link to post
Share on other sites
James B

Hi there, the image showing the end result of what you want to make unfortunately didn't come through.

 

If you're following the example on the docs, you can switch that code to include anything, images, icons.. adjust the colors etc. Please try posting the image again so we can see what you're looking to create and we'll be able to advise the best way to do it :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Ryan Logan

Appreciate the reply.  I've read through the docs and I've tinkered with the code mentioned in the docs.  I don't see how to easily manipulate the icons.

Share this post


Link to post
Share on other sites
James B

Cool, ok if you want to add your own icons, upload the images of the icons you have first so they're in the media library. Then in the textbox you can place your html with the image links like below for each icon you want to appear.

 

        <div class="icons" style="bottom: 12px; right: 1px";>

            <a target="_blank" href="your link goes here" class="rsslink"><img src="url to your rss image" alt="RSS"></a>

            <a target="_blank" href="your link goes here" class="twitterlink"><img src="url to your twitter image" alt="Twitter"></a>

        </div>

 

If you wanted to use the icons and edit the color, you can add the hex value for the color to the css that you copied over from the docs. For example if you wanted a black icon - color:#000000; would be added to that icon's css. You can also change the background color if you wanted it to be white like in your screenshot.

 

.icon-dribbble {
    color:#000000;
    background-color: #ffffff;
    }


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Ryan Logan

Ok, I was able to add my own icons.  Sweet.  How do get the icons to line up side by side, rather than on top of each other?

 

www.savvysouk.com

 

Thank you.

Share this post


Link to post
Share on other sites
Danny

Can you reply and paste the code you're using please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Ryan Logan

Here ya go.

 

<div class="icons" align="right" style="margin-top: 5px;">
    <a target="_blank" href="https://plus.google.com/116003912732221165569" class="gpluslink"><img src="http://savvysouk.com/wp-content/uploads/2013/12/Google-+.png" alt="Google+"></a>
    <a target="_blank" href="http://instagram.com/savvysouk" class="instagramlink"><img src="http://savvysouk.com/wp-content/uploads/2013/12/Instagram.png" alt="Instagram"></a>
    <a target="_blank" href="https://twitter.com/savvysouk" class="twitterlink"><img src="http://savvysouk.com/wp-content/uploads/2013/12/Twitter.png" alt="Twitter"></a>
    <a target="_blank" href="https://facebook.com/savvysouk" class="twitterlink"><img src="http://savvysouk.com/wp-content/uploads/2013/12/Twitter.png" alt="Twitter"></a>
    <a target="_blank" href="http://savvysouk.com/feed/" class="rsslink"><img src="http://savvysouk.com/wp-content/uploads/2013/12/RSS.png" alt="RSS"></a>
</div>

Share this post


Link to post
Share on other sites
Danny

Thats not the code from the Docs page, that code looks like its been ripped from PageLines Framework. You will want to base your code from the HTML and CSS provided on our docs page for the social media icons.

 

http://docs.pagelines.com/tutorials/creating-a-branding-area

 

You could also try removing the line-breaks in the code you have used, as when viewing your site, it has <br /> tags between each icon, which is causing them to gone on a new line. Removing the line-break will resolve this. However, you will most likely need to use padding or margin to give each one space.

 

Your code minus line-breaks should look like this:

 

<div class="icons" align="right" style="margin-top: 5px;"><a target="_blank" href="https://plus.google....912732221165569" class="gpluslink"><img src="http://savvysouk.com/wp-content/uploads/2013/12/Google-+.png" alt="Google+"></a><a target="_blank" href="http://instagram.com/savvysouk" class="instagramlink"><img src="http://savvysouk.com/wp-content/uploads/2013/12/Instagram.png" alt="Instagram"></a><a target="_blank" href="https://twitter.com/savvysouk" class="twitterlink"><img src="http://savvysouk.com/wp-content/uploads/2013/12/Twitter.png" alt="Twitter"></a><a target="_blank" href="https://facebook.com/savvysouk" class="twitterlink"><img src="http://savvysouk.com/wp-content/uploads/2013/12/Twitter.png" alt="Twitter"></a><a target="_blank" href="http://savvysouk.com/feed/" class="rsslink"><img src="http://savvysouk.com/wp-content/uploads/2013/12/RSS.png" alt="RSS"></a></div>

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Ryan Logan

I got the code from James B. (seen within this post).

 

The code, minus the line-breaks did the trick.  I'll look through that doc again, but I'm not sure what I'm going to see...that I didn't see...the first 10 times.

 

Thank you Danny.

Share this post


Link to post
Share on other sites
Danny

Not sure what you mean by not seeing it the first ten times. All the code to add social media icons to your site is provided here - http://docs.pagelines.com/tutorials/creating-a-branding-area

The social media HTML is provided here - http://d.pr/i/BpKx

 

The color variables are here - http://d.pr/i/Do1u

 

With the LESS CSS provided just below that. Following these instructions will allow you to add social media icons with links to your site.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Ryan Logan

Thanks, no...it's totally on me. : )  I'm all set.

Share this post


Link to post
Share on other sites
Danny

Awesome and no problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
KimAnn03

I am using my own uploaded icons and they are transparent. I'd like them to change in opacity when hovered over (which is tricky cause technically there's no background color). Can you help me with the CSS code for it. I used the pageline docs to create the custom code and it is exactly as the docs say to put it in. Here is the html in my text editor in case you need it:

 

<div class="social-bar">
<ul class="zmt zmb">
    <li><a href="https://www.facebook.com/pages/TheCosmicPathcom-with-Stephanie-Azaria/280427811989832" target="_blank"><img src="http://dev.thecosmicpath.com/wp-content/uploads/Facebook.png" alt="icon-facebook"></i></a></li>
    <li><a href="https://twitter.com/StephAzaria" target="_blank"><img src="http://dev.thecosmicpath.com/wp-content/uploads/Twitter.png" alt="Twitter"></i></a></li>
    <li><a href="#" target="_blank"><img src="http://dev.thecosmicpath.com/wp-content/uploads/RSS.png" alt="RSS"></i></a></li>
    </ul>
    </div>

 

Thanks,

Kim

 

http://dev.thecosmicpath.com/

Share this post


Link to post
Share on other sites
Danny

Unfortunately, we do not provide support to user created code. If you require CSS assistance, you can wait and see if one of our users can assist or sign up to a CSS specific forum.

 

What you will most likely need to do is target your own icons/images themselves and then apply CSS to them and then do the same for their hover state CSS.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×