Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Themes /

Discuss SilverStripe Themes.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Theme CSS affects Admin Panel Tree


Reply


3 Posts   3777 Views

Avatar
denbear

Community Member, 7 Posts

6 July 2009 at 9:20am

Edited: 06/07/2009 2:01pm

I thought this was pretty odd, so I'm checking to see if anyone else has had a similar issue. I created a new theme for my site by coping the tutorial theme. In the layout.css file, I added the YUI Reset CSS code. Just something I do automatically.

/* Global Resetting (from Yahoo) */
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

fieldset, img {
border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}

ol, ul {
list-style: none;
}

caption, th {
text-align: left;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}

q:before, q:after {
content: '';
}

abbr, acronym {
border: 0;
}

/*End Reset*/

I put it in layout.css because it gets loaded first.

In the typography.css file, I started adding my text styles.

/* Web Page Text Styles */
body {
background:#fff;
font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:0.95em;
}

h1 {
   font-size:2.5em;
   font-weight:bold;
   color:#224C6A;
   margin-bottom:10px;
}

h2 {
   font-size:1.75em;
   font-weight:bold;
   color:#442571;
   margin-bottom:7px;
}

h3 {
   font-size:1.5em;
   font-weight:bold;
   font-style:italic;
   margin-bottom:5px;
}

h4 {
   font-size:1.25em;
   font-weight:normal;
   margin-bottom:5px;
}

h5 {
   font-size:1em;
   font-weight:normal;
   margin-bottom:5px;
}

h6 {
   font-size:0.85em;
   font-weight:normal;
   margin-bottom:5px;
}

p {
   margin-bottom:20px;
   line-height:1.5em;
}

ul, ol {
   margin-bottom:20px;
}

ul li {
   list-style:disc;
   margin-left:35px;
}

ol li {
   list-style:decimal;
   margin-left:40px;
}

blockquote {
   margin-left:20px;
}

When I added the styles for ul, ol, ul li and ol li, I noticed that the tree in the Admin panel suddenly gained a lot of margin on the left side, to the point were the text of the page names was getting cut off on the right side of the box.

I tracked down the issue with Firebug and ended up adding the following code to the cms/css/cms_left.css file.

/* These are styles I added to force the site tree layout to work in the admin panel */
ul li.Root {
   margin:0;
}

ul ul li.Page {
   margin:0;
}

ul ul li.ErrorPage {
   margin:0;
}

ul ul li.BlogHolder {
   margin:0;
}

ul ul ul li.BlogEntry {
   margin:0;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */

That works for the Site Content tab. The others still show a large margin at the second level of the tree, but the impact isn't as bad, so I'm just going to leave it.

My question is, why would defining the style for a generic tag for a theme have an effect on the tree in the admin panel?

Thanks in advance for any insight you can provide.

Avatar
denbear

Community Member, 7 Posts

18 July 2009 at 1:46pm

I did find a solution for this issue. It seems that the typography.css file in the theme/css directory is included when the admin panel is loaded so that you can include typography controls for tinyMCE editor. This file is loaded after the typography.css file in the cms/css directory, so any styles defined in it are potentially effected. I moved my CSS Reset code and the typography styles for my site into another CSS file and included it as a themedCSS Requirement in the Page.php. I removed the additional styles I added to the cms_left.css file. Now, all is right again.

Lesson Learned: Leave the typography.css file alone. To create text styles for your site, create a CSS file for that purpose.

Avatar
Willr

Forum Moderator, 5513 Posts

19 July 2009 at 1:00am

Well if you used a setup like the default theme then yes typography.css will effect the cms. The CMS actually loads a file called Editor.css which is a file you can define to override the cms layout / design, by default BlackCandy (and therefore alot of the themes) include typography.css into editor.css to match the cms / front end so clients can use special class's and layouts and basically get a better integrated feel.

The idea with the typography.css file is it is named spaced '.typography' this class wraps around just the textareas in the cms so it only applies to the textarea and not to the whole cms. See http://doc.silverstripe.com/doku.php?id=typography for a little bit more information.