How to format twitter plugin

[tititemowo]

Hi

I’ve added the twitter widget and its plain white and does’t really stand out on the page like I want it to.
Is there a way to format the colors and or design of the widget?

Currently the font of the url is larger than the widget (in the sidebar) itself and extends outside the lines? Is there a way to reduce the font size also?

Topic

[Jason Bobich]

Hello,

These kinds of things are CSS customizations you’ll need to make to the theme. I’ll provide you with some selectors the theme uses that you can use to get started.

.tb-twitter_widget { ... }
.widget ul.tweets li { ... }
.widget ul.tweets li .tweet-wrap { ... }
.widget ul.tweets li .tweet-text { ... }
.widget ul.tweets li .tweet-time { ... }

And here’s some more information about how I just found these and how you can apply your CSS customizations —

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[tititemowo]

Thanks appreciate guidance. can you just confirm that the customization to ensure the text stays within the widget it the li. tweet-wrap function?

Thanks

[Jason Bobich]

can you just confirm that the customization to ensure the text stays within the widget it the li. tweet-wrap function?

Apologies, but I’m afraid I don’t quite understand what you’re asking here. What are you trying to do?

[tititemowo]

Hi

Thanks for the quick response. I am currently seeing text fall outside the widget area, and wanted to confirm that in order to get this text to fall within the widget area i have to configure the text wrap command to ensure text wrapping in the box takes place.

I hope this makes sense…

here is the screenshot of what I am seeing

[IMG]http://i47.tinypic.com/hv9heb.jpg[/IMG]

[Jason Bobich]

You could try something like this in your Custom CSS option.

.widget ul.tweets li { word-wrap: break-word; }

http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

I’m still not sure that’s going to look all that great. You may want to consider using a Sidebar Layout where you have more room to work with.

[tititemowo]

Thanks.

Is there a way to change the color of an individual widget border? E.g. i have a plugin on the home page, the widget areas has a grey border which I think is part of the blvd theme, can I change this to white? This would solve an issue for me…

[IMG]http://i45.tinypic.com/29dwe9j.jpg[/IMG]

[tititemowo]

Just to be clear, I don’t mean the plugin border shading, I mean the actual grey box that hold it in, like the rest of the blvd theme boxes above…thanks..

[Jason Bobich]

You’d use your developer inspector to see how the theme targets widgets. Then you’d copy that selector to your custom CSS and apply your own border color.

[tititemowo]

Many thanks, will give this a try.

[Author]

Replies