A CSS clash - how/where to fix

Permalink
OK - I'm an old user, from way back before the C5 re-write! I am just getting into to v8.5.4 and decided to create a theme by designing some pages in Blocs, a Mac web design application that is based Bootstrap.

So far so good, I can design pages for the theme, then get the code snippets in them and change the links so all the pages work. Everything works well except for one thing. Any instance of an HTML 'li' is rendered with no space between the list items. So the Nav bar has the page names all running one after the other. It also shows in the pagination for a Document Library module, I get 'Previous12345Next' Everything else looks OK, seems to render as I would expect.

So I understand enough to know that what is probably happening is the CSS from Blocs is clashing with the C5 CSS. Is it right that C5 CSS will be the last to be applied, and if so, how can I add some space between the li elements?

Hope that makes sense!

 
madesimplemedia replied on at Permalink Reply
madesimplemedia
Hi

It's good practice to put all your theme CSS in the .ccm-page wrapper so you don't mess with the C5 UI styles and vice versa.

E.g.

.ccm-page ul.nav li {display: inline-block}


That should work if you are using the standard page wrapper class.