The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Popular Posts Tabbed Widget for Jetpack

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #158732

    Hi, i use this plugin on my site: 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 :

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

    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.


    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.


    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.