SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot charles_i's Avatar
    Join Date
    Apr 2007
    Location
    Toronto, Canada
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS selector problem with adding an image a shaded margin to WordPress plugin

    I'm using a Twitter plugin on a WordPress site. I need to change the title (Twitter: name) to a background image and style a shaded margin around each twitter item - so there is a grey bordered frame with each tweet in a white square inside and a header graphic at the top. Since I have no control over the HTML I'm having trouble writing the CSS selectors that will make these changes. This is the markup of the plugin from view source of the page:

    Code:
    <aside id="twitter-4" class="widget widget_twitter">
     <div>
      <h3 class="widget-title"><span class='twitterwidget twitterwidget-title'>Twitter: name</span></h3>
       <ul>
        <li><span class='entry-content'>first twitter post</span></li>
        <li><span class='entry-content'>second twitter post</span></li>
     </ul>
     </div>
    </aside>
    I've tried adding a background image to all the various classes before the name but none of them work. The same with the grey margin.

    The problem with trying to style stuff in WordPress plugins is it's hard to tell which selector you need to override the plugin CSS and what else is in the cascade that you can't see that's preventing it from working.

    Thanks
    Charles

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by charles_i View Post
    The problem with trying to style stuff in WordPress plugins is it's hard to tell which selector you need to override
    The dev tools in your browser (like Firebug or Chrome's inspector) shows you what rules apply to each item. If all else fails, you can use !important to override everything else, but that's a last resort.

    Do you mean you want to add a background image to the title? Your wording isn't cear, as it makes it sound like you want to remove the text and use a bg image instead, which isn't a good idea anyway.

    I'm sure we can help you get this working, but a bit more info is needed, and preferably a link.

  3. #3
    SitePoint Zealot charles_i's Avatar
    Join Date
    Apr 2007
    Location
    Toronto, Canada
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I want to replace the h3 text with a background image (and add a shaded border). I have a feeling that the answer is a combination of selectors from the all the tags that lead up to the text title. That's where I run into trouble with CSS - when the answer is not just one class but a string of parent and child classes. I've tried !important on individual class names but that didn't work.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Maybe try something like

    Code:
    aside .widget-title {
      text-align: -9999px;
      background: url(image.png) no-repeat 0 0;
      border: rgba(x,x,x, 0.4);
      width: Xpx;
      height: Ypx;
    }
    Not sure what you mean by shaded border, so you may ned CSS3 box-shadow or something. I gave the h3 a width and height to match the bg image.

    It would be better to use an inline image rather than a bg image, though. An h3 is not exactly decoration. Are you doing this because you want a different font? If so, consider web fonts instead of images.

  5. #5
    SitePoint Zealot charles_i's Avatar
    Join Date
    Apr 2007
    Location
    Toronto, Canada
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried that but no luck. I've uploaded a jpg here. On the right sidebar is the twitter feed. As you can see it's picked up the font styles but all of the feeds run together. My designer has designed the twitter portion of the sidebar with a header graphic and a grey border around each separate li feed. So I planned to just do this:

    Code:
    .aside .widget-title{
     background-image:url('images/rick-tweets.jpg');
      background-repeat: no-repeat;
      background-color:#e8e8e8;
      width: 235px;	
      margin:0 0 30px 0;
      line-height:1em;
    }
    
    .twitterwidget-title li {
      background-color:#e8e8e8;
      width: 235px;	
    }
    But whatever I try CSS wise has no effect. Even with !important which should work. As I said at the top the problem is its a WordPress twitter feed plugin - so "aside" and "h3" etc. are all in the plugin's code - I can't change that (or it will be overwritten next time there is a plugin update). That's the problem with WordPress plugins - you can't change the HTML, you can only work with it.

    Hope that helps. Thanks for your time.

    Charles

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    I'm sure there's a solution, but unless we can see this live, we can only make rough guesses.

  7. #7
    SitePoint Zealot charles_i's Avatar
    Join Date
    Apr 2007
    Location
    Toronto, Canada
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK here's the staging site. http://sawebdev.ca/wordpress/ Thanks.
    Charles

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Remove the dot before aside as its a type selector not a class.

    Code:
    aside .widget-title{
     background-image:url('images/rick-tweets.jpg');
      background-repeat: no-repeat;
      background-color:#e8e8e8;
      width: 235px;	
      margin:0 0 30px 0;
      line-height:1em;
    }
    I can't see a "twitterwidget-title" class in the html either so use the twiiter-4 id to target the list elements (assuming the id doesn't change daily).

    e.g.
    Code:
    #twitter-4 li {
    background-color:#e8e8e8;
    width: 235px;
    margin:0 0 10px	;
    padding:5px;
    }
    I tested on your live site with CSS terminal and the changes are applied as expected so will work as long as you put them last in the cascade.

  9. #9
    SitePoint Zealot charles_i's Avatar
    Join Date
    Apr 2007
    Location
    Toronto, Canada
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Almost exactly what I need. Only problem now is that the title graphic is appearing over all 3 sidebar h3 titles. I tried adding this - aside #twitter-4 .widget-title - or this - aside .widget widget_twitter .widget-title - but they both just removed the graphic entirely.

    Thanks also for the CSS terminal link!

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Use the id instead the the aside element

    Code:
    #twitter-4  .widget-title{
     background-image:url('images/rick-tweets.jpg');
      background-repeat: no-repeat;
      background-color:#e8e8e8;
      width: 235px;	
      margin:0 0 30px 0;
      line-height:1em;
    }

  11. #11
    SitePoint Zealot charles_i's Avatar
    Join Date
    Apr 2007
    Location
    Toronto, Canada
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant! Thanks so much.

    Charles


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •