Forums

styling lists (ul) messes with concrete5 toolbar look

Permalink
i've styled my ul-lists in the css like so with the list-style "disc":

.textArea ul {margin:0 0 10px 10px;}
.textArea ul li {padding-left: 5px; list-style:disc; font-size:1.3em; line-height:1.4em; margin: 0 0 0 5px; }


so all ul's that are inside a .textArea should get that styling.

unfortunately also concrete5 itself picks the styling up so the layout of the toolbar gets screwd (see attachment).

i am now wondering if it would make sense if all ul-lists that get added with TinyMCE get some class attached to them to distinguish them better from ul-lists inside the toolbar though I wouldn't know how to do that.....

1 Attachment

nerdess
 
Mnkras replied on at Permalink Reply
Mnkras
or just wrap your page in a div with a class and prepend that to your classes
nerdess replied on at Permalink Reply
nerdess
yep I've done that already with the .textArea class (see above) but still the toolbar is messed up.....! it is because for some reason the html for the toolbar is inside the main content div so it inherits all the styling. this is roughly the nesting:

<body>
<nav>nav stuff</nav>
<section id="content" class="textArea">
content stuff goes here
<div class="ccm-page-controls-wrapper">
toolbar stuff
</div>
</section>
</body>


why does the concrete5 toolbar get attached in the middle of the content anyway? why not right after e.g. the body tag?!?
mkly replied on at Permalink Best Answer Reply
mkly
.ccm-page-controls-wrapper gets added when the theme does
Loader::element('footer_required');

My suggestion would be to wrap your content or whatever you are using for your main content section
<style>
#content .textArea ul {margin:0 0 10px 10px;}
</style>
<div id="wrapper">
  <section id="content" class="textArea">
    <!-- content here -->
  </section>
</div>


But honestly, I would just not use textArea it that was an option.
nerdess replied on at Permalink Reply
nerdess
ah i wasn't aware that 'footer_required' loads the toolbar. now i just moved it before the </body> tag and all is good. i can now also get rid of .textArea :-)

thanks!