Sight theme – adding image sprites and fixing text size.

  • Unknown's avatar
    blackcurrantphotography · Member ·

    Hello, and thanks for looking to help me out. I’ve been on Wp for 3 years but this is my first attempt at changing CSS.

    My first issue is that I’m trying to add images to my top bar menu (just under my header). I have done some reading on a load of sites and created a long skinny bar of images after finding out about image sprites. The site I was looking at had some code and I’ve done my best to follow it, but it doesn’t seem to be working. I’d appreciate if someone could fix the code for me please. I’m not sure that I have put the spacing correctly.

    Looking at my Photoshop image, the centre of each icon is located at:
    40px (Twitter)
    120px (Facebook)
    210px (Instagram)
    270px (Pinterest)
    350px (Blog)
    435px (Contact)

    ******************************************************

    background-image:url(‘http://blackcurrantphotography.files.wordpress.com/2014/01/my-nav-sprite.png’); background-position:-210px 0;
    }

    .custom #menu-item-5748 a:hover { background-position:-210px -40px; }

    .custom #menu-item-5736 a {
    display:block; height:50px; width:50px; padding:0px; margin-left:6px; outline:none; text-indent:-9999px;
    background-image:url(‘http://blackcurrantphotography.files.wordpress.com/2014/01/my-nav-sprite.png’); background-position:-270px 0;
    }

    .custom #menu-item-5736 a:hover { background-position:-270px -40px; }

    .custom #menu-item-5750 a {
    display:block; height:50px; width:50px; padding:0px; margin-left:6px; outline:none; text-indent:-9999px;
    background-image:url(‘http://blackcurrantphotography.files.wordpress.com/2014/01/my-nav-sprite.png’); background-position:-350px 0;
    }

    .custom #menu-item-5750 a:hover { background-position:-350px -40px; }
    .custom #menu-item-5749 a {
    display:block; height:50px; width:50px; padding:0px; margin-left:6px; outline:none; text-indent:-9999px;
    background-image:url(‘http://blackcurrantphotography.files.wordpress.com/2014/01/my-nav-sprite.png’); background-position:-435px 0;
    }

    .custom #menu-item-5749 a:hover { background-position:-435px -40px; }

    .custom #menu-item-5735,
    .custom #menu-item-5734,
    .custom #menu-item-5748,
    .custom #menu-item-5736,
    .custom #menu-item-5750
    .custom #menu-item-5749 { float:right; }

    ****************************

    I am also having problems with getting the text size for posts, body text in pages, lists, and the sidebar menus to be a decent size. I’d like about 14px.

    Thankyou for looking. My site is blackcurrantphotography.wordpress.com
    Kell.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    blackcurrantphotography · Member ·

    I wanted to edit my above post but it wouldn’t let me.

    Basically, I would like to amend the menu called top-bar-menu-social-media so that the layout of the page looks like this. With some text and some images for social media.

    <img src=”http://blackcurrantphotography.files.wordpress.com/2014/01/whatineed.jpg”>

  • Unknown's avatar
    a1jesin · Member ·

    Place a text widget above the “Hi there! I’m Kell.” widget and paste the following HTML code.

    <a href="#" id="icon1" class="social-sprite"></a>
<a href="#" id="icon2" class="social-sprite"></a>
<a href="#" id="icon3" class="social-sprite"></a>
<a href="#" id="icon4" class="social-sprite"></a>
<a href="#" id="icon5" class="social-sprite"></a>
<a href="#" id="icon6" class="social-sprite"></a>

    Change the hrefs to match the links of the icons.

    The paste the following CSS code.

    .social-sprite {
    background-image: url("http://blackcurrantphotography.files.wordpress.com/2014/01/my-nav-sprite.png");
    background-repeat: no-repeat;
    display: inline-block;
    height: 60px;
    width: 65px;
}
#icon1.social-sprite {
    background-position: -10px center;
}
#icon2.social-sprite {
    background-position: -90px center;
}
#icon3.social-sprite {
    background-position: -170px center;
}
#icon4.social-sprite {
    background-position: -250px center;
}
#icon5.social-sprite {
    background-position: -330px center;
}
#icon6.social-sprite {
    background-position: -410px center;
}

    This will get the icons displayed inside this widget. To position that widget under the menu use the following CSS

    #text-1 {
    margin: -75px 0 10px -110px;
    overflow: visible;
    width: 410px;
}

    Replace “text-1” with the ID attribute of this widget.

  • Unknown's avatar
    blackcurrantphotography · Member ·

    Thank you a1jesin. I closed the case because I’d worked out another method of getting the icons I wanted. Thankyou though.
    Now i just need to work out the font resizing.

  • Unknown's avatar
    a1jesin · Member ·

    Nice idea to use CSS to display icons in the place of menus :-)

    Why not implement the same sprite image there, you just need to add background-position property to the CSS code. Atleast try clubbing the normal image with its hovered one so that the hover effect happens instantaneously. Right now the hovered image loads only after placing the cursor over it.

  • Unknown's avatar
    blackcurrantphotography · Member ·

    I’ll give that a shot with the individual hover images. Thank you. =)

  • Unknown's avatar
    thesacredpath · Member ·

    @a1jesin, nice work!

  • Unknown's avatar
    a1jesin · Member ·

    @thesacredpath Thanks! :-)

  • The topic ‘Sight theme – adding image sprites and fixing text size.’ is closed to new replies.