Customizing the Controls through CSS
After you have defined the layout and content for the Telerik Hospital home page, you must customize the appearance of the controls. To do this, you must open the main.css file located in folder ~/App_Data/Sitefinity/WebsiteTemplates/Hospital/App_themes/Green/Global/. By appending the next lines of CSS code to the file, you improve the look of the news, events and image gallery blocks:
.sfeventsList, .sfnewsList, .sfimagesTmbList {padding-left: 0px;}
.sfeventListItem, .sfnewsListItem
{
background-color: #f3f3f3;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 2px;
border-left: 3px solid #ccc;
list-style: none;
list-style-type: none;
margin-left: 0px;
}
.sfeventListItem:hover, .sfnewsListItem:hover
{
background-color: #e0e0e0;
background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e0e0e0));
background: -moz-linear-gradient(top, #f5f5f5, #e0e0e0);
border-left: 3px solid #45631d;
}
.sfeventListItem p.sfeventMetaInfo, .sfnewsListItem p.sfnewsMetaInfo {margin: 0px;}
.sfeventListItem h2.sfeventTitle, .sfnewsListItem h2.sfnewsTitle
{
border-bottom: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding: 0px;
}
.sfeventListItem h2.sfeventTitle a, .sfnewsListItem h2.sfnewsTitle a
{
font-size: 14px;
font-weight: normal;
text-decoration: none;
}
.Main .sfLightboxMode li.sfimagesTmb
{
position: relative;
float: left;
margin: 5px;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
list-style: none;
list-style-type: none;
}
.Main .sfLightboxMode li.sfimagesTmb a
{
display: block;
position: relative;
float: left;
border: 5px solid #efefef;
width: 76px;
height: 76px;
overflow: hidden;
}
.Main .sfLightboxMode li.sfimagesTmb a:hover {border: 5px solid #d5d5d5;}
.Main .sfLightboxMode li.sfimagesTmb a img {padding: 0;}
To meet your needs, you are free to change the code above.
The controls on the home page look fine-tuned. The final result of the tutorial looks like the following screenshot:
