Create a CSS File
A CSS file can be associated with a layout template or container by giving it the same filename and placing it in the same folder. When a layout template (or container) is applied to a webpage (or pane), the associated CSS file is automatically applied. Example: These three files are automatically associated with each other:
- MyLayout.ascx
- MyLayout.css
- MyLayout.doctype.xml
CSS files are applied hierarchically. If a style is defined for an element in multiple CSS files with equal specificity, the last CSS that mentions the same element overrides the style definitions in previously loaded CSS files. By default, the CSS files are loaded in this order:
- default.css (~/Portals/_default/default.css) — The default CSS for the website.
- module.css (~/DesktopModules/mymodulename/module.css) — The CSS for every module type that appears on the page.
- skin.css (~/Portals/PortalID/Skins/SkinPackageName/skin.css) — The master CSS for the theme must be called skin.css.
- MyThemeTemplate.css (~/Portals/_default/Skins/SkinPackageName/MyThemeTemplate.css) — The CSS for a specific layout template.
- container.css (~/Portals/PortalID/Containers/ContainerPackageName/container.css) — The master CSS for all containers in your theme.
- portal.css (~/Portals/PortalID/portal.css) — The CSS that can override elements in the installed themes. Website administrators can use this to override any styles in the theme or containers.
Note: These style sheets are not required. You can also store all your styles in one master theme style sheet (skin.css). However, if you combine your container styles and your theme styles in one CSS file, then the container will display properly only when used with your theme.
Steps
Example
layout template
<div id="login_style" class="user">
<object id="dnnLOGIN" codebase="LOGIN" codetype="dotnetnuke/server">
<param name="CssClass" value="user" />
</object>
</div>
CSS
#login_style .linkseparator{
color: white;
font-weight: bold;
}
Comments
0 comments
Please sign in to leave a comment.