Skip to end of metadata
Go to start of metadata

The Skin Editor CSS screen has options to edit and import additional styling for a skin.

CSS Settings

Custom CSS

Click the 'Edit Custom CSS' button to open a popup editor for CSS. The editor has colour context to help you read and edit CSS. If you prefer to work in a dedicated CSS editor then 'cut, copy and paste' commands will work in this screen.

The CSS editor popup can be moved and resized as needed.

IE CSS

Click the 'Edit IECSS' button to add specific styling for Microsoft Internet Explorer browsers. Note that the tab position changes to IE CSS. You can also change between Custom, IE and Import CSS by clicking these tabs.

 

The IE CSS section has uses a conditional comment that will detect and send different styling to the stated browser. The default for this is 'if gte IE 8'. Read this Wikipedia article for more on Conditional Comments.

Internet Explorer 10

Note that conditional statements are not supported by Internet Explorer 10 so your IE CSS will not show in that browser. If you wish to target IE10 use this conditional comment in the main Custom CSS screen, after all other related styles.

@media all and (-ms-high-contrast: none) { 
/* IE10 css here - example targets page title */
	#title-heading a {
  		color: #cc3300;
	}
} 

Import CSS

This section will accept additional CSS that you may want to keep separate from Custom or IE code, and is ideal for CSS import statements in the form.

  @import url("import1.css");
  @import url "import2.css";

Using ThemeBuilder resource notation, a CSS file can be imported from the Resource screen.

  @import url("MYSKIN::import1.css");
  @import url "ROOT::import2.css";

Body Classes

CSS classes to add to the HTML body tag. Defaults are: theme-default aui-layout aui-theme-default

Options

The options allow CSS gurus to gain more complete control over the CSS that's sent to the browser. If you disable any of them, you'll generally need to add more of your own CSS to replace the missing styles that these options provide.

Inherit the CSS from the parent layout(s)

By default, a layout will inherit the CSS defined in it's parent layout. 

There may be cases where you want to start from scratch, and not import the Custom, IE and Import CSS from the parent layout in which case you can disable this option.

Revert

The CSS content is applied hierarchically. To revert the CSS back to that used by the parent skin, use the 'Revert' dropdown in the 'Custom CSS' tab of the popup editor.

Notes

You will need to click the 'Save' button to apply any changes made in the 'CSS' screen.

 


  • No labels