Popular Posts Tabbed Widget for Jetpack

[ilovethistrack]

Hi, i use this plugin on my site: http://www.ilovethistrack.com. I’d like to modify some things (remove borders, change the colors, write links in capital letters…) In short, I’d like my widget looks like to this one : http://www.blastedinspiration.com/

PLEASE, can someone tells me how can i do that ?

Here is the plugin’s style.css :

.clear{ clear: both; }

.pptwj-tabs-wrap{ padding: 3px 0 0; }
.pptwj-tabs-wrap ul{ list-style: none outside none; margin: 0; padding: 0; }
    .pptwj-tabs-wrap .tab-links{ background: #eee; height: 26px; margin: 0; padding: 0 5px; position: relative; }
        .pptwj-tabs-wrap .tab-links li{  border: none; display: inline; float: left; margin: -4px 3px 0 0; padding: 0; }
            .pptwj-tabs-wrap .tab-links li a{ background: none; color: #999; display: block; float: left; font-weight: bold; font-size: 12px; padding: 7px 7px 4px; text-decoration: none; text-transform: uppercase; }
            .pptwj-tabs-wrap .tab-links li a.selected, .pptwj-tabs-wrap .tab-links li a:hover{ background: #4C5360; border-radius: 5px 5px 0 0; color: #fff; text-decoration: none; }

.pptwj-tabs-wrap .boxes{ border: 1px solid #e5e5e5; border-radius: 0 0 3px 3px; position: relative; }
    .pptwj-tabs-wrap .boxes ul{ padding: 2px 0 0; }
        .pptwj-tabs-wrap .boxes ul li{ border-bottom: 1px solid #e5e5e5; font-size: 13px; overflow: hidden; margin: 0; padding: 5px 8px; }
        .pptwj-tabs-wrap .boxes ul li.odd{ background: #fff; }
        .pptwj-tabs-wrap .boxes ul li.even{ background: #fcfcfc; border-left: none; border-right: none; border-top: none; }
            .pptwj-tabs-wrap .boxes ul li a{ color: #333; }
            .pptwj-tabs-wrap .boxes ul li a:hover{}
            .pptwj-tabs-wrap .boxes ul li img{ background: #fff; border: 1px solid #e5e5e5; float: left; margin: 0 7px 0 0; padding: 2px; }
            .pptwj-tabs-wrap .boxes ul li a.item-title{ overflow: hidden; }
            .pptwj-tabs-wrap .boxes ul li .meta{ color: #888; font-size: 90%; }

    .pptwj-tabs-wrap .boxes ul.tab-filter-list{ border: none; margin: -1px; background: #4C5360; padding: 0; text-align: center; }
        .pptwj-tabs-wrap .boxes ul.tab-filter-list li{ border: none; padding: 2px 8px 3px; }
    /*.pptwj-tabs-wrap .tab-filter-list{ display: inline-block; border: 0 !important; }*/
    .pptwj-tabs-wrap .boxes ul.tab-filter-list a{ color: #ddd; font-size: 11px; margin: 0 8px; text-decoration: none; text-transform: uppercase; }
    .pptwj-tabs-wrap .boxes ul.tab-filter-list a.selected, .pptwj-tabs-wrap .boxes ul.tab-filter-list a:hover{ color: #fff; text-decoration: none; }

.pptwj-loader{ background: #fff; left: 0; opacity: 0.4; position: absolute; text-align: center; top: 0; width: 100%; }
    .pptwj-loader img{}

[photocurio]

I’m not totally sure what you are asking. Do you want to know what CSS rules will make your site look the way you want? If so, I suggest you study CSS, perhaps at Team Treehouse.

If you want to know how to over-ride the plugin’s built-in stylesheet, first I’d look at the plugin’s README file. If there is no help there, I’d post on the plugin’s own support page: Popular Posts Tabbed Widget for Jetpack. The author seems to respond to questions.

I think you have a valid question btw. All plugins with stylesheets should have a method for customizing CSS.

[ilovethistrack]

Thanks for your answer. I wanted to know how to over-ride the plugin’s built-in stylesheet. I already asked to the author some help but he’s unavailable right know that’s why i tried here..

I know I have to modify some lines in the css but I don’t know which ones. So if someone can help me, it’ll be deeply appreciated.

[photocurio]

You can find the CSS you need to modify by option-clicking on something on the page and selecting Inspect Element. Or, use the Firefox add-on Firebug.

You should know that if you modify the plugin, and then update it, all your changes will be overwritten.

[Author]

Posts