Customized theme, CSS & sprites, help PLEASE

  • Resolved dkchi2010

    (@dkchi2010)


    11 years, 8 months ago

    The theme already had a sprite for the social media buttons. Need to add additional buttons. Created the new sprite, finally got it to show properly but cannot get the others buttons linked. Still only the two icons linking correctly.

    https://www.snowcityarts.org

    here is my header code:

    <a href="https://facebook.com/snowcityarts"><span id="fb_icon"><p>Connect on Facebook</p></span></a>
					<a href="https://twitter.com/#!/snowcityarts"><span id="tw_icon"><p>Follow us on Twitter</p></span></a>
<a href="https://pinterest.com/snowcityarts"><span id="pt_icon"><p>View us on Pinterest</p></span></a>
<a href="https://www.youtube.com/snowcityarts"><span id="yt_icon"><p>Watch us on YouTube</p></span></a>

    (I’ve not listed all the links because they’re not working. Only Facebook and Twitter – the originals)

    And here is the CSS code:
    [CSS unnecessary – We can access that through the website]

    OMG-I’ve been pulling my hair for a week. Any help will be greatly appreciated.
    dk

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It’s not clear which buttons have the problem and what the problem specifically is.

    Thread Starter dkchi2010

    (@dkchi2010)

    Thanks for the quick response.

    Only the Facebook and Twitter buttons work, even with the CSS code identifying the others, such as Pinterest (pt_icon) and then the link info in the header.

    What am I missing?
    dk

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The only reference to the sprite is through the #fb_icon selector, so I can’t see how any other element that doesn’t have an ID of “fb_icon” can load the sprite.

    Thread Starter dkchi2010

    (@dkchi2010)

    But the “tw_icon” works. And if I add the url on each of them, it repeats the entire image.

    As you can tell, I’m totally new to sprites.

    thanks for the help.
    dk

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    First look back at the tutorial about sprites. That’s not how you use sprites. You don’t show all of the sprite at once. You only show a section of the sprite and move it around with background-position.

    I think you may need the support of a CSS forum like https://csscreator.com/forum , as this is not a WordPress matter.

    Thread Starter dkchi2010

    (@dkchi2010)

    Right, I knew it wasn’t a specific ‘wordpress’ issue, but I’d gotten really good help here before being a noobie. Not so much in regular tech forums. But, I’ll give it a shot and I thank you again.
    dk

    I took a look at your site and coding. I noticed you can get to the Pinterest site by hovering your mouse just under the Pinterest icon. Would it be possible for me to get a copy of your sprite? I could mess around with it in Dreamweaver and see if I can figure out what is happening. I think it does have to do with background-position.

    Thread Starter dkchi2010

    (@dkchi2010)

    OK, I’ve got everything working except I cannot get the last icon, Vimeo, visible. And it’s really thanks to you Andrew by that simple statement of moving it with the background position. Thank you, thank you. I’ve tried various numbers for the last icon and can’t get it visible. One last help??

    Thanks loads

    Thread Starter dkchi2010

    (@dkchi2010)

    I got, I got it. WOO HOO!!!

    Thank you all!!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Customized theme, CSS & sprites, help PLEASE’ is closed to new replies.