Easy CSS tricks for the Wizard

From HostBaby Wiki

Jump to: navigation, search

Contents

Design your own style sheet

If you are CSS Savvy and want to create your own CSS page, you can go to

www.yourdomain.com/style.css

to get the current CSS file you are using. Once you have made edits you can send us the file and any new images and we can get those into place for you. Or if you like send us an email and we'll email you the CSS file.


If you are not CSS savvy, CSS is pretty simple and there are great tutorials about using CSS at http://w3schools.com/css/

Also, if you use Mozilla Firefox, there is a great "add-on" extension for Firefox called Firebug. Firebug allows you to "inspect elements" of your site, so you can see what the CSS and HTML are easily.

Firefox is available for both PC and Mac systems, and it's free, just go to http://www.mozilla.com/firefox/

Firebug is also available for both PC and Mac systems and is free, though you must have Firefox first. To get Firebug, just go to http://getfirebug.com

Modify the fonts

You can use a little CSS to modify the fonts in the template.

In your wizard administration panel, under settings, there is a box called "head."

That box will put content in the header area of each page of your template, and that will help you overwrite some of our standard CSS, which is the language used to tell the template how it should look.

Example code to change a font: 


<style> body { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 15px; } </style>


That tells the template that anywhere in the body of the template, the font should be Trebuchet MS, but if that font isn't available, it can try arial, and if that's not available, then helvetica, and if that's not available than basically any font that is sans-serif. Then it says the font size should be 14 pixels high and that the space between each line should be 15px.

Bear in mind -- you will want to stick with "standard fonts" -- meaning, fonts that come factory-installed on both Mac and PC computers. If you use a font that you download and love, then the chances are good only YOU will see it. The user must have the font on *their* computer in order to see it. Smile Here is a list of common fonts to all Mac and PC computers:

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

As always - any questions, simply ask. Smile

Hide Email sign up form

Paste this code into your <HEAD> Box 

<style> #emailsignup {display:none; visibility:hidden;}</style>

Modify the background

  • Background Color: 
<style> body {background: #000000;} </style>

The "#000000" is the value that represents black and "#FFFFFF" is white, modifying between those variables will give you all the available web colors... for example, a simple red color is "FF0000", green is "00FF00", and blue is "0000FF".

  • Background Image: 
<style>
body {
background-image: url('http://ImageURL.com/image.jpg');
background-repeat: repeat; }
</style>

Replace the http://ImageURL.com/image.jpg with the address of your image, and to remove the repeating simply change "repeat;" to "none;".

Retrieved from "http://hostbaby.org/wiki/Easy_CSS_tricks_for_the_Wizard"
Personal tools