How to style tabs with CSS

Ryan R asked on August 25, 2014 22:42

I know how to clone and then edit a custom web part. My issue is how do I change the look and feel? There are a lot of CSS classes and I am not sure which ones do what. In addition, the graphic files are held in the database and I am not finding a place to delete/overwrite/change them.

Anyone who has worked with these tabs before please point me in the right direction.

Thank you!

Recent Answers


Charles Matvchuk answered on August 26, 2014 19:22

Ryan, the best way to do it when you are learning about Kentico's CSS Classes is to drop the control on the page. Load your page in Mozilla Firefox, have the Firebug add-on installed. Enable the add-on and start selecting the objects on the screen. You will see their specific CSS on the right. You can also change the CSS to get an idea of how it will change the look and feel of the control. Once you have what you want, create the class in your CSS Stylesheet (best for global changes) or on the webpart itself within Kentico, then assign the class to the webpart in its properties or surround with class div's.

0 votesVote for this answer Mark as a Correct answer

Ryan R answered on August 26, 2014 20:26

So I should just be over-riding the CSS in my custom sheet, possibly with the dreaded "!important"?

Of course the procedure that Charles mentions is what I have been doing, just wanted to know if there is an easier/better way.

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on August 26, 2014 21:59

Ryan,

As Charles suggested use a wrapper around your webpart/control and set the styles accordingly. Also, you might check to see if other stylesheets are loading with the tabbed webpart, if they are, simply add your styles after them and this will avoid using the !important indicator.

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.