Replace text with images

3 posts from 2 voices

• Started 2 years ago by Ellina37
• Latest reply from Ellina37
• This topic is resolved

Tags:

No tags yet.

1. 

   Ellina37
   Member

   Hi,
   Please ignore me if that's beyond the scope of the theme support. I think it probably is but if you know a quick way/widget/code of doing it, its muchly appreciated.
   So, I was wondering if there's a way to automatically replace certain words by icons/images in certain CSS classes? I'm assuming there's a way around it in CSS but it will apply to the whole class but not certain words?
   Supposedly a php code is a better solution?
   Just as I said, plz only answer if you're kind enough and have the idea/link already.
   Thank you!
   E.

   Posted 2 years ago #
2. 

   James Morrison
   Former Team Member

   Hey,

   The icons in the header use the CSS image replacement technique to display these links as icons rather than links so it's already baked into the theme.

   There are 2 ways you can do this:

   1.) Set the image as the background instead of the text (as per the header) by adapting this code:

   .social_bookmarks .rss a {
       background: url("../images/skin1/rss_16.png") no-repeat scroll 0 0 transparent;
   }
   
   .social_bookmarks li a {
       border: medium none;
       display: block;
       float: left;
       height: 16px;
       outline: medium none;
       padding: 0;
       text-indent: -9999px;
       width: 16px;
   }

   2.) The alternative is to set a background image as well as the text, eg for a download link you could add an icon. You could adapt this code to acomplish this:

   .my-download {
      background: url(images/my-download-background-image.jpg) no-repeat;
      height: 16px; width: 16px;
      padding: 0 0 0 20px;
   }

   Hope this gets you going in the right direction; let me know how you get on.

   James

   Posted 2 years ago #
3. 

   Ellina37
   Member

   Aha, thank you heaps! Will give it a try.
   E

   Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.