Theme Style Sheets contain much of the rendering and style information for your site. Your Style Sheet file will contain all the information to organize your
layouts and
borders.
To create a new style sheet for your theme, simply create a new .css file in your themes directory and link to it from your info.php file. (
See Creating a Theme for details)
Each theme will have at least 1 style sheet file to setup the Layouts and Borders for the site. In addition, your style sheet can provide some extra, optional styling to help customize some of the built in features of the TextSide Engine (for example, the Management Links, the Navigation Part, and the Tabs you see while editing a lot of the built in parts). These are covered in more detail below.
You can also look at a
Sample CSS file that shows a complete CSS for the theme that this site is currently using.
Management links are the links that you see near the top left and right of your pages that allow you to edit a page, enter edit mode, view the Control Panel, etc.
You can style these links by providing style information for "#SiteManageLinks" (for the right hand side links) and #TemplateBar (for the left hand side links).
Heres an example that was used for this site:
...
/*=======================
Site management / edit page links.
(Overrides what is in common.css)
========================*/
/* Site management links */
#SiteManageLinks{
font-size: 10pt;
right: 0px;
top: 0px;
position: absolute;
z-index: 100;
margin:0px;
font-family: "verdana";
text-align: right;
background-image:url(<?=$directory?>images/header/top.gif);
padding-left: 5px; padding-right: 5px;
color: #EFEFEF;
height: 25px;
}
#SiteManageLinks a {
color: white;
}
#TemplateBar {
padding: 0px;
padding-left: 5px;
padding-right: 5px;
font-size: 10pt;
color: #FFF;
height: 25px;
background: none;
}
...
The Navigation Part is a built in part that comes with the Engine that allows you to quickly create navigation links to the rest of your site:
TextSide provides some default styling for this navigation bar, but you can override it to provide styling thats unique for your theme.
To style the navigation part, you want to provide styling for the .navigationContainer class. This refers to a unordered list of items. For reference on how to style list items using CSS, you can check out
Listutorial.
As reference, the styling for the above screenshot is:
/*=======================
Style the navigation bar.
========================*/
.navigationContainer {
border-top: 1px solid #E0E0E0;
}
.navigationContainer ul{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Verdana, sans-serif;
font-size: 12pt;
text-align: center;
}
.navigationContainer li {
margin: 0px;
}
.navigationContainer a {
display: block;
padding: 4px;
height: 24px;
background: url(<?=$directory?>images/navback2.gif);
color: #4B4B4B;
}
.navigationContainer ul .active a{
background: url(<?=$directory?>images/navback2over.gif);
}
.navigationContainer a:link, .navigationContainer a:visited{
text-decoration: none;
color: #4B4B4B;
}
.navigationContainer a:hover{
background: url(<?=$directory?>images/navback3over.gif);
}
Many parts make use of the global "EditTabs" styling to provide tabs for their management. For example:
Example use of the tabs within a template:
<div class="editTabs">
<ul>
<li class="selected" ><a href="..."><span>HTML</span></a></li>
<li ><a href="..."><span>Preview</span></a></li>
<li ><a href="..."><span>Images</span></a></li>
<li ><a href="..."><span>Upload</span></a></li>
</ul>
<div class="editTabsUnderline"></div>
</div>
TextSide provides a very plain default styling for these tabs that will work for many themes. However, your theme can also provide its own styling to customize the tabs. To provide your own styling, you can create rules that aplpy to the li tag under the div class of "editTabs". The active tab will be labeled with the class of "selected".
Here is some sample code that creates the rounded edge tabs seen in the above screen shot:
/*=======================
Edit Tabs. Shared by most
parts for their edit page. Overrides
the simple tab style in common.css
========================*/
.editTabs {
font-family: verdana;
line-height: 1.6;
}
.editTabsUnderline {
border-top: 1px solid #C4C4C4;
}
.editTabs li a{
color: #3399E7;
background: url(<?=$directory?>/images/tabs/tab2-left.gif) left top no-repeat;
border: 0px solid #fff;
}
.editTabs li a span{
background: url(<?=$directory?>/images/tabs/tab2-right.gif) right top no-repeat;
}
.editTabs li a:hover {
background: url(<?=$directory?>/images/tabs/tab2-left-hover.gif) left top no-repeat;
color: #000;
}
.editTabs li a:hover span {
background: url(<?=$directory?>/images/tabs/tab2-right-hover.gif) right top no-repeat;
}
.editTabs .selected a {
border: 0px solid #fff;
color: #000;
background: url(<?=$directory?>/images/tabs/tab-left.gif) left top no-repeat;
border-bottom: 1px solid #fff;
}
.editTabs .selected a span {
background: url(<?=$directory?>/images/tabs/tab-right.gif) right top no-repeat;
}
.editTabs .selected a, .editTabs .selected a span {
font-weight:bold;
}
.editTabs .selected a:hover {
background: url(<?=$directory?>/images/tabs/tab-left.gif) left top no-repeat;
}
.editTabs .selected a:hover span {
background: url(<?=$directory?>/images/tabs/tab-right.gif) right top no-repeat;
}
Loading...