Forums

Keep Theme Styles from Interfering with concrete5

Permalink 2 users found helpful
Can someone please explain this to me, as I have a few sites that I have built where the theme does interfere with the Concrete5 Interface.

-----------------------

From C5 Documentation:

Keep Theme Styles from Interfering with concrete5

When converting existing themes to use with concrete5, a lot of the free css templates out there tend to add some pretty greedy style properties to standard elements (like padding or margins on all li or div tags for example).

This causes some major issues with the way stuff in the concrete toolbar and popups are rendered. An easy way to fix this is to wrap the template markup with a DIV with an ID of page or "wrap" just inside the BODY tag.

Then in your main.css and typography css, prepend the #page or #wrap to each css rule, to limit its scope. This will ensure that these greedy styles only affect the theme's elements, rather than concrete5's toolbar and dialog window as well.

--> An Example would be good... Thanks!
PatrickCassidy
 
adajad replied on at Permalink Best Answer Reply
adajad
an example:

<body>
<div id="myWrapper">
  <div id="header">header content</div>
  <div id="page">
    <div id="leftSidebar">left sidebar content</div>
    <div id="main">main content</div>
  </div>
</div>
</body>

#myWrapper #header{your header styles}
#myWrapper #page{your page styles}
#myWrapper #leftSidebar{left sidebar styles}
#myWrapper #main{main styles}
#myWrapper p{your paragraph styles}
#myWrapper a{your link styles}