The Stylisticade Customizable CSS Theme

You can see a demo of the Stylisticade theme by seeing it on our Low Maintenance Web Friendly Website Demonstration, click here to see the Stylisticade theme in action, will open in a new screen. I have put the download link for this theme a little bit lower down in this page. It can be found under the heading named 'download'.

About The Theme

It is open source BSD licensed. Stylisticade is lightweight and deliberately does not use any background images. It uses CSS2, some might say CSS3 for the curves on the top buttons and on the drop down menu edges, but as you may know CSS3 has not actually been finalised yet. The theme comes with drop down menus, but if you do not need them, you can always not use them or even remove them from the style.css file.

Compatibility

The theme is compatible with all modern browsers in more modern versions, like Firefox, Opera, Chrome, Safari etc, the theme is also compatible with Internet Explorer 7 and Internet Explorer 8, you will not see round corners on the buttons or menu in Internet Explorer, but I have heard rumours of Microsoft making a round corner compatible version in the future, hopefully the near future. The Stylisticade theme will also work in the dated Internet Explorer version 6, but you will need Javascript to make the drop down menu work in Internet Explorer 6. In Internet Explorer version 6 the shadow bar I have made under the menu and above the footer of the theme will not show as a shadow in Internet Explorer 6, but it will show as an expansion of around 50 pixels on estimate. That said the theme will still look almost the same except for that detail which should be of no concern.

The License Details

The Stylisticade CSS theme is released under the Creative Commons Open Source BSD License.  You can legally use the Stylisticade theme in as many of your own websites or other peoples, including clients websites as you want so long as you leave our credits in the top of the CSS file as they are. You are not required to put a link from any of your websites web pages back to use. Click here if you want to visit the creativecommons.org website and read the BSD license details, they are very liberal.

What Comes in The Package

• The Stylisticade theme CSS stylesheet named style.css
• A Printer friendly CSS stylesheet named print.css (The print stylesheet will show a white background for printing only, even if you change to a colored background on the style.css file
• An index.html with appropriate XHTML for the index.html page, the same sort of look as the home page of servertosite.com this website.
• A html file named about.html, this contains the appropriate XHTML for a two column page. It is up to you how you use the files, you could even use a two column page as a home page if you need too.
• A html file named contact.html, this gives an example of what a contact form looks like with the Stylisticade theme, go into the XHTML and copy and paste out what you need to make your own contact pages.
• A note name Please Read, so do what the note says, it has some handy tips in it.
• You will also find a folder named Version With Search Bar. This is the Stylisticade theme with a tastefully styled search bar in the header. All the above files are repeated for the search bar version plus their is text notes on this version to read. But apart from that, no need to repeat the file names and if you use the standard stylisticade theme and need a search bar in the future, the upgrade instructions are in the notes. Look at the image just below to see a what the search bar looks like on this version of the Stylisticade theme (Note that in Internet Explorer round corners will be square).

This is How to Link Too Both Style Sheets in the XHTML

We will start with the style.css file first, the link will look as below. Notice how I started style.css with ../ this so that if a web page is sub folder to the main directory, the page will be able to connect to the style.css file. But on some CMS software the href to the stylesheet could be something completely different, some CMS software may have code as the link (The href is the link to the stylesheet):

<link rel="stylesheet" type="text/css" href="../style.css"/>

Directly under that will go the link to the print stylesheet. Take note of the media equals print, this is what lets a web browser that this stylesheet is only to be used for printing and has nothing else to do with the website

<link rel="stylesheet" type="text/css" media="print" href="../print.css"/>

.... Download

The Stylisticade Customizable CSS Theme was released at the end of June 2010, click here to download it. This theme also comes with out Low Maintenance Web Friendly Website Package click here if you have not seen it already... I also have plans to make one for Drupal some time hopefully in the not too distant future

We Are Going to Look into Some of the CSS ID's and Classes in the Stylisticade Style.css Stylesheet and Where to Make Changes and Other Tips Like That

We will look at where we can start making some changes... But first things first. Before you start making any changes I would recommend making one or more back up copies of the style.css style sheet at all times and when you make progression you are happy with, save another copy of the style.css stylesheet, so if you mess something thing up from there, you can always go to the back up copy of that style sheet and go from that  reference point. When  you are doing web development think Back Up's and think security, although the only security thing you will need to worry about when it comes to stylesheets is making sure that file permissions are set to 644 for the style sheets on your live web space, oh did I say just the CSS files set with file permissions of 644, it is most likely that you will need to set every single file that you ever have in your web space to file permissions of 644 (644 also looks like -rw-r--r-- if there are any other w's or r's in there meaning the file permissions are no longer set at 644 can result in a possible nightmare if you leave your pages with other file permission settings). Please take note of this even if a file is a zip file or pdf file, it is still a file and security is still security.

Lets Start With the Header

Find the CSS as below and you have the ability to change the header height: 85px to height: whatever you want in px. (If you were wondering why I have left of a ; at the end of the height, it is because you can leave off the ; on the last style of every class or id, but do not try doing that on any parameter's before the last parameter or your stylesheet simply will not work. This is just to shave of a very small amount of file size from the css file, you get an even smaller file size by compressing the style sheet, if you do compress it please remember to put my credits and the license details back in the top of the stylesheet. Thankyou very much).

#header{
position: relative;
height: 234px
}

To Change the Color of the very top bar at the very top of the Stylisticade theme, find the CSS as below and change the hex color #292835 to whatever color matches to your needs. You can also change the height of the top bar here too.

#outop{
background-color: #292835;
height: 39px
}

While I am in The Header Part of The Style.css Stylesheet. I am Going to Talk a Bit About the Version of the Stylisticade Theme With the Search Bar in the Header.

First lets look at the CSS that styles the search bar. It is shown below and can be copy and pasted directly into the standard Stylisticade Theme to turn it into the version with the search bar

#header form input[type=submit]{
left: 286px;
left: 282px\9;
padding: 5px 7px 6px 7px;
padding: 6px 11px 7px 11px\9;
border: 0 none;
color: #404066;
background-color: #E9EEFC;
background-color: #E9EDFC\9;
font-weight: bold;
cursor: pointer;
font-family: Arial;
}
#header form input[type=text]{
right: 353px;
padding: 6px 4px 5px 4px;
border: 1px solid #838295;
color: #232536;
}
#header form input[type=submit],#header form input[type=text]{
position: absolute;
z-index:1;
margin: 16px 0px 0px 0px;
border-radius: 12px;
-webkit-border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-moz-border-radius: 12px;
}

Now you will want the XHTML that goes with CSS shown above. Copy and paste all of the below directly under <div id="header"> Oh yeah and definitely change the form action from # and perhaps the input name from search to what is required? The method may need to be changed from post to get instead depending on what the search engine software requires:

<form action="#" method="post"><input type="submit" value="Search" /><input name="search" type="text" maxlength="85" size="34" /></form>

Ok Now Back to The Common CSS in Both Stylisticade Themes. I am Going to Talk About the Footer

To change the height of the footer, simply change where you find height: 59px; and change 59 to anything else. If you want to have one of those huge footer full of lists and other things, you will need to insert the related XHTML into the footer XHTML that will be relating to this theme and then add styles to the stylesheet, like #footer ul{css styling in here} and #footer ul li{css style in here} that would require some decent CSS skills to do, so start getting a feel and increase your knowledge of CSS if you are not up to that stage yet.

#footer{
position:relative;
padding-top:13px;
height: 59px;
text-align: left;
font-size: 14px;
font-family: Arial
}

This Page is a Work in Progress, You Will Find Me Putting New Tips on This Page Every Now and Again. Thanks

Personally Recommended Services and Products Below

KnownHost Quality Managed VPS/Hybrid and Dedicated Servers Click Here

KnowHost is a truly respected VPS/Hybrid & Dedicated server provider. Advantages of VPS over shared hosting: Dedicated RAM, Useable Bandwidth, Unlimited Websites, Shell, More Control.

Web Hosting With ICDSoft. Use Coupon Code: servertosite for 40% Discount Click Here

ICDsoft Shared Web Hosting: Not trapped in. Reliable. servertosite.com is hosted on business plan. I chose the USA servers option... Geeks may lament lack of shell access.

Web Hosting With Stablehost Click Here

Stablehost Shared Web hosting: Not trapped in. Cpanel... Some people may lament lack of subdomain option to go on their domain name. Geeks have limited shell access, host will do other shell things for you.

DotCom and other Domain Names With Moniker Click Here

Having been right into domain names at one stage and having been with a number of different domain registrars... Moniker is the domain registrar I have stuck with and liked. I recommend keeping domain names and web hosting with seperate providers, always, giving you more freedom.

Download Genuine Adobe Photoshop Elements and Other Software Click for USA Site. Click for UK Site. Click for French Site. Click for Swedish Site. Click for German Site.

Adobe Photoshop elements is a budget version of Photoshop, that has most things you will need to edit photos, even put smooth round corners on them if you search for ps elements tutorials, plus make website headings. I use it along with the free open source Windows paint.net along with plugins.