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

HTML & CSS
1

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:

<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

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. :slight_smile:

3

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

Maybe try something like

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

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:

.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

I’m sure there’s a solution, but unless we can see this live, we can only make rough guesses.

7

OK here’s the staging site. http://sawebdev.ca/wordpress/ Thanks.
Charles

8

Hi,

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



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.


#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

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

Hi,

Use the id instead the the aside element


#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

Brilliant! Thanks so much.

Charles