Twitter – how do I remove the stupid border?

The CSS behing called by the Twitter widget looks like this:

.twtr-widget .twtr-tweet {
border-bottom:1px dotted #DDDDDD;
overflow:hidden;
}

So you’ll need to make sure to override that in your styles.css

I’ve tried that. Nothing works.

Here’s what the Twitter code looks like:

[Code moderated as per the Forum Rules. Please use the pastebin]

And these are the customizations I’ve made:

.twtr-hd {
display:none;
}
#twtr-widget-1 .twtr-bd, #twtr-widget-1 .twtr-timeline i a, #twtr-widget-1 .twtr-bd p {
color:#808080 !important;
font-family:arial;
}
.twtr-ft {
display:none;
}
#twtr-widget-1 i {
display:block;
font-size:90%;
}
.twtr-widget .twtr-tweet {
border-bottom:0px dotted #DDDDDD;
overflow:hidden;
}

Any other ideas?

You’re kind of in a pickle. The CSS to style that is being called straight into the widget, so its styles will override yours.

You’re either stuck with it or you need to find another way to make your CSS load after the widget’s CSS.

forcing it might work:

try to add this to the end of custom.css:
.twtr-widget .twtr-tweet {border:none!important;}

alchymyth – that worked!

Thank you both for your help!!

*face palm

Thanks alchymyth, for achieving what I couldn’t.

i don’t realy like this !important to force styles, but in this case, if the style is loaded from an external style sheet, after the internal styles, there is no choice.