Need help? Check out our Support site, then


Facebook and Twitter icons

  1. Hi there,

    I am sure this has been asked before, but I couldn't find an answer. How do I get a Facebook icon on my blog. I am hoping to have it where I also have my follow @imveryapedotcom. Also, can that @imveryapedotcom be changed into an icon?

    Sorry if this is an overly simplistic question.

    The blog I need help with is imveryape.com.

  2. How do I get a Facebook icon on my blog?

    There are a few different options for integrating Facebook into your WordPress.com blog. Check out this help page for a list:
    http://en.support.wordpress.com/facebook-integration/

    Also, can that @imveryapedotcom be changed into an icon?

    I think you may have updated since you posted your question here because I didn't see "@imbveryapedotcom" on the http://imveryape.com/ home page just now when I checked it.

    I did notice that you have added a Facebook and Twitter icon at the bottom left. I found that the links for those icons are hard to click because they fall behind the footer element because of how you moved it. To fix that, you can try updating the z-index for the widget container for those icons like this:

    #text-2 {
    	z-index: 99;
    }

    Aside: while I was looking at your site, someone walked by behind me and commented on how cool it looked. :) I thought that was neat.

  3. Thank you so much @desingsimply. I just plopped in that CSS code without adding or editing anything, I hope that is right. It worked, so I am guessing I didn't need to modify anything.

    That is great to hear that somebody thought it looked cool. It is really testament to how much you guys have helped me because I know NOTHING about CSS. You guys are really awesome, and very helpful.

  4. Thanks! I love that you're having a good time and I really like seeing how your blog is shaping up! Just out of curiosity, where was the background photo on http://imveryape.com/ taken?

  5. It is just alongside downtown Calgary, a small area call Rotary Park. I try my best to find local bands to cover, so I thought that background would appeal to the local audience.
    Ya, I am having a lot of fun with it. Sometimes the longer blogs like this recent one http://imveryape.com/2013/05/20/confessions-of-a-music-writer/ feel like hard work, but when you are done it is great to look back at what you have accomplished.
    I asked this question before and received an answer right away, but I did not quite understand it. What would be the steps if I wanted to change up the background image for each post category (hidden gems, best new music etc.). I currently have a CSS code that puts a single background image in all archive pages, and I assume I would need to edit that if I were going to make a different background picture for each section. Any tips? I am guessing this is the most complicated question I have asked.
    Again, you guys are awesome. And thank you for everything. Back to work!

  6. Hi!

  7. Hi!
    I am totally new to WordPress and trying my best to understand the settings,can you please help me with my below queries?

    1.I was wondering how can I add the big icons of Facebook and pin interest on my right side bar?

    2.How can I add a background image to my sidebar,currently its blank and looks very incomplete.

    3.The fonts on my side bar is way to big, when I customize the fonts on the body text, seems the body text does change along with the sidebar fonts...confused..???

    3.The theme I am using is Adelle & my website is letstrycreating.com

    Awaiting for your reply

    Regards,

    Noor

  8. What would be the steps if I wanted to change up the background image for each post category (hidden gems, best new music etc.).

    You could target each page separately by using the body classes.

    To find a body class, right-click anywhere on the page and select the "Inspect Element" option. That should pull up a panel showing the HTML and all of the CSS that applies to the highlighted HTML element.

    Look back through the HTML until you find the <body> tag and look at the "class" attribute. There should be a space-separated list. You can use those at the beginning

    I currently have a CSS code that puts a single background image in all archive pages, and I assume I would need to edit that if I were going to make a different background picture for each section. Any tips?

    I suspect you mean this:

    body.archive, body.single {
    	background: url('http://imveryape.files.wordpress.com/2013/06/p1010540-e1372183596767.jpg');
    	background-repeat:no-repeat;
    	background-attachment:fixed;
    	background-position:0 0;
    	background-size:100% 100%
    }

    So, to change that to target just category pages, for example, you would change "body.archive, body.single" to "body.category"

    And to change the background to one specific page, you can find the body class that applies to just that page.

    Let's look at a specific example:
    http://imveryape.com/category/best-new-music/

    Has this HTML body tag:

    <body class="archive category category-best-new-music category-395639 logged-in admin-bar custom-background typekit-enabled single-author mp6 debug-bar-maximized theme-menu-maximized highlander-enabled highlander-light customize-support">

    See how there is a class specific to just the best new music category? It's "category-best-new-music" and there is also one specific to just this page by ID number: "category-395639"

    To use the "category-395639" class to target CSS to just that page, you would do something like this:

    body.category-395639 {
    	background: url('http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png');
    	background-repeat:no-repeat;
    	background-attachment:fixed;
    	background-position:0 0;
    	background-size:100% 100%
    }

    I used a WordPress logo in that example (it's small so it stretches funny), but you can change the url() value to a different image.

    Keep in mind that CSS also has a cascade. That means that if there is more than one CSS rule that applies to the same thing, the most specific one will be used. If there happens to be more than one rule that applies to the same thing and the rules are equally specific, then the latest one in the list will be used. This means that the order of the rules matter and you will want to put rules that apply to a more general set of pages like "body.category" if you wanted to target a specific category like the best new music category differently, you would want to make sure the "body.category-395639" rule comes after the "body.category" rule.

  9. @hobnobnoor, welcome! Would you mind please creating a separate help request at http://en.forums.wordpress.com/forum/css-customization/#postform since your questions are about a different theme?

  10. @hobnobnoor, actually, here are the answers to the questions in one go. However, please post additional questions in a separate request!

    1.I was wondering how can I add the big icons of Facebook and pin interest on my right side bar?

    I checked http://letstrycreating.com/ and I see you found how to add the icons. Nice work!

    2.How can I add a background image to my sidebar,currently its blank and looks very incomplete.

    To add a background image to the sidebar in the Adelle theme, add the following to your Appearance → Themes → Customize → CSS panel:

    .site-main .widget-area {
    	background: #f8f8f8 url(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png);
    }

    Change the image link inside url() to use a different image.

    The #f8f8f8 value in that rule is the background color. It will show through if you use an image with transparency in it. If your image doesn't have transparency, you can leave #f8f8f8 out.

    3.The fonts on my side bar is way to big, when I customize the fonts on the body text, seems the body text does change along with the sidebar fonts...confused..???

    The fonts in the widgets on the http://letstrycreating.com/ page look the same size as the other fonts to me. Except the widget titles, which are larger. If you're referring to the widget titles, can you please re-ask the question in a separate help request at http://en.forums.wordpress.com/forum/css-customization/#postform ?

    Last note: I noticed you tried to change the main menu banner color manually in the Adelle theme, but the flags at the sides didn't change. This is the fix for that:
    http://en.forums.wordpress.com/topic/adelle-theme-changing-all-colors?replies=6#post-1329414

  11. Hi @designsimply. Thank you so much for the help. Thank you for all the detail, it really makes all the difference. The only thing I haven't been able to do is right click on the screen and get an option called "inspect element", so I haven't been able to get the body class.

  12. Oh, and I haven't made any changes on "Best New Music" because I don't have a pic for it yet. That will be Friday's chore.

  13. hey design simply: you are simply too good! thanks a ton, sweet of you to reply me,however my other queries for which you redirected me i shall place my query there,but before i forget i changed my sidebar background with your help....Thanks a ton..........!!! see you in the other forum xxo!

  14. @ design simply - I really liked the sidebar style of this website and the way the widgets are placed http://www.heygorg.com/..can u help me with something similar for my site as well http://www.letstrycreating.com :)

  15. The only thing I haven't been able to do is right click on the screen and get an option called "inspect element", so I haven't been able to get the body class.

    Make sure you are using a browser that has web inspector tools built in such as Chrome or Firefox. http://browsehappy.com/

    The built in tools for the latest version of Firefox are quite good, but there is an add-on called Firebug is also very good: http://getfirebug.com/

  16. @hobnobnoor, you should post separate questions in separate help requests at http://en.forums.wordpress.com/forum/css-customization/#postform

  17. ok no problem..thank you!

  18. Thank you, that worked amazingly. Hidden Gem page picture all done!

Topic Closed

This topic has been closed to new replies.

About this Topic