ADVANCED: Full CSS Editor

From HostBaby Wiki

Jump to: navigation, search

So you know a little CSS or want to hire your own designer to help you customize your wizard site. This is now possible!

Editing the CSS is not for the novice, and you should feel pretty confident in your skills or have the help of a professional designer before you make any edits to your style sheet. But this tool offers you the ability to completely customize the look and feel of your wizard site, within the minor constraints of the wizard's HTML structure. For more information on how the wizard is built, you can click here: http://www.hostbaby.com/designers/ to download a copy of our designer kit. :)


Getting Started

The first thing you'll need to do is pick a base style and publish your site.

Log in at http://www.yourdomain.com/hostbaby2/ (making sure to replace yourdomain.com with your actual domain)

Now click on Website, then Style/Color/Theme.

If you're doing a complete overhaul, it really doesn't matter what template you choose -- just that you choose one and publish. However, if you just want to make minor tweaks to an existing template, choose that template, and then publish.

NOTE: You can also add small CSS changes by using CSS in the header box. Find the header box at the bottom of the settings page. Any CSS you write in this box will override the template. Don't forget, you'll need to wrap your CSS in <style> tags!

Once done, go back to Style/Color/Theme and scroll allllllll the way to the bottom:


Stylecolortheme.png


Click on 'Load Advanced CSS Editor.' This will take you to a screen that shows you the existing CSS for the template, which you can either wipe clean to add your own, or modify at your pleasure.



Csseditor.png


Once you're done making changes, just hit Save. No need to re-publish. Changes go live immediately. :)

WARNING: Once you change the style.css with the Advanced CSS Editor, you will not be able to change templates without contacting us via phone or email!

There you have it - complete visual control over the Wizard!

Personal tools