Need help? Check out our Support site, then


Social Media Icons

  1. Hi,

    Ive used a text widget and absolute positioning to place some social media icons in my header, but they seem to jump around. They look different in the customisation window (where you enter css, change fonts etc) to when the page is open in a normal window. Is there a way to get them to sit where I want them to and not move?
    I'm using the twenty eleven theme.
    Thank you

    The blog I need help with is kirilynanne.com.

  2. a) You could try something like this:

    #text-3 {
        margin-top: 7.4%;
        position: absolute;
        right: 5%;
        top: 0;
        width: 20%;
        z-index: 9999;
    }
    #text-3 a img {
        border: 0 none;
        height: 25%;
        width: 25%;
    }

    b) Or you could add custom links to your menu, and then use CSS to insert the images as background images to these links (and change their position).

    c) But in my opinion these icons don't look good in your header. I would put them in the sidebar.

    d) The three images aren't exactly equal (63x61, 62x59, 59x60), so they won't look exactly the same or exactly aligned. Regardless of where and how you'll decide to place them, you need to correct the images in an image editing application then upload the corrected versions.

  3. This isn't needed:
    border: 0 none;
    It's the default - I just forgot to delete it.

  4. Thanks for your help. I decided to try them out in my menu. I've added the custom links and then tried to add a background image but its not showing up.... this is what I put in:#menu-item-179 {padding-left: 200px;
    background: url'http://kirilynanne.files.wordpress.com/2013/08/facebookgreen.png';}

  5. You're welcome.

    For a bg image to the menu links you'd start with something like this:

    #menu-item-179 {
        float: right !important;
        text-indent: -99999px;
    }
    #menu-item-179 a {
        background: url("http://kirilynanne.files.wordpress.com/2013/08/facebookgreen.png") no-repeat scroll 0 0 transparent;
        height: 60px;
        width: 60px;
    }

    But before you try any more of these gimmicks, you should stop and reconsider, because apparently you're unaware that the theme you're using has a responsive layout. Drag the browser window to make it narrower and see what happens.

  6. Yes I see the problem oh dear...
    Please excuse my inexperience. I am completely new to CSS and have just been doing my own research and trying things. Do you have any tips of how to fix what I have messed up or is it better to just start over with all the coding. (Is the fact that I used absolute positioning the problem? )
    If not I understand - I know your typically not supposed to mess with CSS unless you know what your doing and others don't have the time to give in-depth lessons. Thanks for your reply

  7. "Excuse"? There's nothing to excuse! This is a forum where we try to help one another and learn from one another. (And I'm not an employee, I'm a volunteer who chose to reply to you.)

    The problem isn't absolute positioning or any other operation per se, the problem is that the theme shrinks to adapt to different screen resolutions and devices, so you cannot use absolute values like px to position or size things. For example, to move your menu-item-179 to the right you used a 200px left padding, then you used a 280px left margin. You now understand that this won't do when the theme doesn't have a fixed width: in a narrower screen this will make the item drop to a second line. Notice I made it float right instead.

    I don't really know what you should do, because I don't know what your final aim is (yesterday I saw the social cons, today I'm seeing the "Hello there" image, don't know what's next). If you're not going to need any of the widgets that produce content automatically (such as the Recent Posts widget or the Tag Cloud widget), then maybe you could select the no-sidebar template and try to arrange everything in the content of the page. Or maybe you could turn the theme from flexible to fixed width. Or maybe simple continue experimenting and learning. Start completely over? I wouldn't say so: what you've done so far is very elegant.

  8. ("simple" -> "simply")

  9. Thanks so much (again!)... this has really helped me understand. I don't know where I would be without this forum!

    If I used percentages rather than px would that fix the layout issues then?
    Yes I have really just been experimenting... hence all the changes.(social media icons are staying in the menu now - once I get them working, I'm yet to try out your suggestion)
    As you said, I will not be using widgets that produce content automatically - just for text and images. If I was using the no side-bar template, I could still arrange pictures, and text side-by-side using positioning?
    If I did want to change it from flexible to fixed width, how would I go about doing this?

  10. "If I used percentages rather than px would that fix the layout issues then?"
    Generally yes (provided you understand what the precentage refers to in each case).

    "If I was using the no side-bar template, I could still arrange pictures, and text side-by-side using positioning?"
    You mean absolute positioning? Probably not. You can easily set the alignment of images to left or right, and you can enclose anything in divs and set the divs to float left or right, adjust their margin, padding etc.

    "If I did want to change it from flexible to fixed width, how would I go about doing this?"
    You'd start with this:

    #page {
        width: 1000px;
    }

    (Or you can switch to a fixed-width theme.)

  11. Thanks again for the advice! I've changed to the one column layout and have been using floats now... much simpler too!
    I do have one problem with the social icons - the background is now working, but on hover, they disappear. I can't figure out what's wrong!
    this is what I have tried:

    #menu-item-180 a :hover {
    background: url('http://kirilynanne.files.wordpress.com/2013/08/untitled-25.png') no-repeat scroll 0 0 transparent;
    opacity: .7;
    }

  12. Glad to hear the good news, and glad you're a fast learner!

    The icons disappear because of this:

    #access li:hover > a, #access a:focus {
        background: none repeat scroll 0 0 #F4FFDD;
    [ETC]
    }

    As you understand, this says #F4FFDD bg color and no bg image when you hover over any menu item.

    Try turning this:

    #menu-item-179 a {
        background: url("IMAGE URL HERE") no-repeat scroll 0 0 transparent;
    [ETC]
    }

    to:

    #menu-item-179 a, #menu-item-179 a:hover {
        background: url("IMAGE URL HERE") no-repeat scroll 0 0 transparent !important;
    [ETC]
    }

    (Same thing for item 180, of course.)

Topic Closed

This topic has been closed to new replies.

About this Topic