Creating the CSS of the Theme
To add the CSS code that defines the formatting rules for your template you must create the file in folder ~/App_Data/Sitefinity/WebsiteTemplates/Hospital/App_Themes/Green/Globalunder the Sitefinity project. Name the file main.css.
For more information about the folder structure required by Sitefinity, see Working with themes. For more information about structuring Telerik Hospital website, see Preparing your working environment.
After adding the file to folder Global, you must define the classes that style the main elements in Telerik Hospital template.
Here is a sample code for customizing the Menu, Header, Logo, Slogan, Main and Footer elements that were defined in
body
{
margin: 0px;
padding: 0px;
font-family: Arial;
font-size: 12px;
color:#444;
line-height: 20px;
background-color: #f3f3f3;
}
a {color: #45631d;}
a:hover {color: #000;}
a img {border: 0px;}
.sfPublicWrapper {
border: 4px solid #dedede;
background-color: #fff;
}
.Header {
height: 300px;
position: relative;
background-image: url(../documentation/images/header_background.jpg);
}
.Menu {
background-color: #444;
position: relative;
float: left;
}
.Logo {
padding-left: 100px;
color: White;
height: 100px;
padding-top: 50px;
}
.Logo h1
{
font-size: 25px;
font-weight: bold;
margin: 0px;
}
.Logo h2
{
font-size: 15px;
font-weight: normal;
color: #767d6b;
margin: 0px;
}
.Slogan
{
padding-left: 60px;
padding-top: 0px;
color: #FFFFFF;
}
.Slogan h3
{
font-size: 15px;
font-weight: bold;
margin: 0px;
}
.Slogan h4
{
color: #c5cfb5;
font-size: 12px;
margin: 0px;
}
.Footer
{
background-color: #efefef;
position: relative;
padding-top: 20px;
}
.Main h2, .Sitemap h2
{
font-size: 16px;
font-weight: bold;
line-height: 1.5em;
padding-bottom: 5px;
border-bottom: 2px solid #ccc;
margin-bottom: 15px;
margin-top: 15px;
}
.Main p
{
margin-top: 10px;
margin-bottom: 10px;
}
.Main img
{
padding: 3px;
background-color: #ececec;
border-right: 1px solid #aaa;
border-bottom: 1px solid #aaa;
}
You are not limited to these rules and are free to change them to make your pages look and behave the way you want.
Use the following code to style the navigation menu in the header.
.RadMenu_hospital
{
position: relative;
float: left;
width: 100%;
height: 75px;
line-height: 75px;
background-color: #444;
}
.RadMenu_hospital .rmSlide
{
line-height: 35px;
}
.RadMenu_hospital a
{
text-decoration: none;
color: #ccc;
background-color: #444;
border-left: 3px solid #444;
border-right: 1px solid #555;
}
.RadMenu_hospital .rmExpanded, .RadMenu_hospital a:hover
{
border-left: 3px solid #598025;
background-color: #333;
}
.RadMenu_hospital .rmSlide a
{
border-left: 3px solid #598025;
background-color: #333;
}
.RadMenu_hospital a:hover
{
background-color: #598025;
color: #fff;
}
.RadMenu .rmHorizontal .rmText
{
padding: 0px !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
.RadMenu .rmHorizontal .rmLink
{
padding-left: 0px !important;
}
You are not limited to these definitions and can change them to meet your needs.
NOTE: You must add the images that you describe and use in the CSS in folder App_Themes/Green/documentation/images.
After you have defined the styling rules for the elements, you must assign the theme to your template. For more information see Working with themes.
The hospital class which you entered in the Wrapper CSS class (skin) field, when you added and configured the navigation control in the template is now appended to the class of the control – RadMenu and the generated CSS selector that you can use is RadMenu_hospital.