- This topic is empty.
-
AuthorPosts
-
December 19, 2013 at 7:16 am #158732ilovethistrackParticipant
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{}
December 19, 2013 at 9:16 am #158751photocurioParticipantI’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.
December 19, 2013 at 9:38 am #158760ilovethistrackParticipantThanks 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.
December 19, 2013 at 9:48 am #158764photocurioParticipantYou 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.