Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #21862

    HI there,

    I have a few questions regarding the social media icons displayed on the Flashlight theme:

    -Can I change the color? I would like the Facebook icon to be “Facebook” blue, and twitter to be “twitter” blue.

    -Can I change the size? My site is heavily focused on social media and I would like them larger to stand out.

    -Can I add Pinterest to the list of icons on the bottom? And possible remove the RSS feed icon? The removal of the RSS is still a maybe but I definitely need to add Pinterest.

    Thanks in advance for your help!

    -Casey

    #113368

    Hi Casey,

    You can change the color by replacing the images found in wp-content/themes/flashlight/images/skin-minimal/. The following are the images you need to replace:

    -icons-rounded-facebook.png

    -icons-rounded-rss.png

    -icons-rounded-twitter.png

    As for the pinterest, kindly open wp-content/themes/flashlight/sidebar.php and find this code:

    echo " <li class='rss'><a href='".avia_get_option('feedburner',get_bloginfo('rss2_url'))."'>RSS</a></li>";

    replace it with:

    echo '	<li class="pinterest"><a href="http://your_pinterest_url">Pinterest</a></li>';

    replace http://your_pinterest_url with your pinterest account url.

    Then add this code in your Quick CSS or custom.css:

    .social_bookmarks .pinterest a {
    background: transparent url(../images/icons-pinterest.png) 0 0 no-repeat;
    }

    Finally add your icon in wp-content/themes/flashlight/images/ make sure you name it icons-pinterest.png

    Hope this helps.

    Regards,

    Ismael

    #113369

    I’m sorry if this is such a lame question, but when you tell me go into such things like “wp-content/themes/flashlight/images/skin-minimal/” is that through when I am in wordpress (if so, where do I find it?) or is it through my files in my host site? Or somewhere else that I am not even mentioning?

    I have found kind of what you are mentioning but I’m not sure if it is exactly it, and I just want to double check before I go changing around everything!

    Thank you for answering this basic question! :)

    #113370

    Hi Casey,

    It is through your files located on your host site. You can access it via ftp. For more information regarding ftp and how to use it, check this site: http://codex.wordpress.org/FTP_Clients

    Regards,

    Ismael

    #113371

    Ok, so I did everything you said to do. This is what happened… I got rid of the RSS feed, and where the RSS feed was I can now scroll over that and it will have a link to go to Pinterest. The only thing is that my my facebook and twitter icons are still the same round gray, and where I thought my Pinterest logo would be, it is completely blank. You can see at http://www.bpoyandjo.com/sneakpeek

    This leads me to believe I did my icon replacement wrong. When I went to go find my new icons, I googled the icon images, found ones I liked, shrunk the size own to be VERY small, saved it as a .png file, and then replaced the image files with those… so I am supposing I did that wrong?

    How would replace these correctly?

    ALSO, am I able to fit four link/icons in that area? I wanted to add in Instagram too… how would I go about doing that if possible?

    THANK YOU SO MUCH!!!

    #113372

    I tried to check the icon path but http://www.bpoyandjo.com/sneakpeek just redirects me to http://bpoyandjo.com/ and I just see a coming soon page – please make sure that we can see the website too.

    #113373

    I did follow your instructions to insert Pinterest icon and link but the link works and the icon doesn’t. I mean the Pinterest icon is not visible, have a look http://www.lucyphotographics.com/ Thanks

    #113374

    It seems like the icon code is missing. Insert following code into custom.css:

    .social_bookmarks .pinterest a {
    background: transparent url(../images/skin-minimal/icons-rounded-pinterest.png) 0 0 no-repeat;
    }

    .social_bookmarks .tumblr a {
    background: transparent url(../images/skin-minimal/icons-rounded-tumblr.png) 0 0 no-repeat;
    }

    #113375

    As I am trying to change the rss icon to a 500px logo I followed the exact steps as written in this thread. However I am not able to change the icon, it is just not showing up. Can somebody please assist me?

    thanks in advance.

    my website url is xvlphotography.nl

    #113376

    Hi,

    I can’t find your RSS icon? Why do you need a 500px icon? That is too big. Replace the rss image found in wp-content/themes/flashlight/images/skin-minimal/. icons-rounded-rss.png

    Regards,

    Ismael

    #113377

    Hi Ismael,

    That’s correct, because I already followed the steps in this thread.

    I created an icon from the icons-rounded.psd file. the new logo looks like this : http://xvlphotography.nl/?attachment_id=764. First I called it icons-rounded-rss.png and replaced the old one. But that wasn’t working either.

    As for the css styling code, does it need to be the exact phrase or do the two dots in front of the url mean the rest of the path before the images folder?

    #113378

    I think you used the wrong quote symbols for the link code.

    Replace

    <li class=“500px”>

    with

    <li class="500px">

    and make sure that the http://xvlphotography.nl/wp-content/themes/flashlight/images/skin-minimal/icons_rounded_500px.png image exists and that the browser can display it (eg my browser just shows a placeholder icon).

    #113379

    Hi,

    Thanks a lot for your help … for some reason the image doesn’t show up. Now I changed it to a .jpg and the placeholder icon is gone.

    I changed the code as you mentioned and still no icon in the sidebar.

    #113380

    Hi,

    I think you should replace this code:

    <li class=“500px”>

    with:

    <li class=“rss”>

    Regards,

    Ismael

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Changing scoial media icons’ is closed to new replies.