Custom CSS

awebdev

Hi Team,

When developing a website based on a Shape5 template it is likely that I will need to override some of the CSS styles with my own custom styles.

With the current templates that I use (not Shape5) it is a straight forward process to put the new custom CSS into a single Custom CSS file. When the template loads the CSS definitions in the custom file override the default CSS styles.

Can you please advise how I would add custom CSS styles / overides to a Shape5 template.

Many thanks
A

aman204

awebdev Can you please advise how I would add custom CSS styles / overides to a Shape5 template.

You can simply add your css rule-set which consists of a selector and a declaration block to specific custom.css file and the specific css rule-set should reflect for certain element however clearing browser cache may be required at times in order for changes to reflect

Ref: Guide to know more about css syntax and selectors

Also, It may required to add !important at the end of css declaration like the example below in order to supersede the existing css

body{background:#ccc !important;}

Finding custom.css or you may create a new file with similar name (if it doesnt exist) ::

Shape 5 templates ship with an empty custom.css file in the /css/ subdirectory of your template. Simply add your styles to this file and they will be included in your layout.

awebdev

Thanks aman204,

It is useful to know that the Shape5 template configuration also has a custom CSS file. This makes custom styles a lot easier to implement.

Regards
A

paulus1031

Hi A,

Best of luck with the site and your css

Cheers
Paul