How to edit your Online Business Builder templates

created by Daniel Gundi on May 10, 2012 3:16 AM, last modified by Daniel Gundi on Nov 22, 2012 4:13 AM
Version 3


    Note:     This tutorial applies to the legacy Business Catalyst templates. You can follow the below method to modify any template, however the file names may differ.

    Follow the steps in this customization guide for the pre-built templates to update your site's appearance. You'll learn how to:

    • Add your own logo to the template.
    • Change the hero image of the template.
    • Change the color of any elements on the template.
    • Change the layout of the template.

    Note: The template used in this guide is Template 1. This guide is written for people with a very basic understanding of CSS.

    If you don't know any CSS, see the article on: CSS from the ground up.

    Preparation

    Tools to use when customizing templates

    1. Firefox - Internet Browser (download)
    2. Colorzilla - Eye-dropper, Color-picker. A Firefox Add-on
    3. Firebug - Web developement tool, A Firefox Add-on (download)

    Installation

    1. Install Firefox first.
    2. Open Firefox
    3. Go to the Colorzilla page in Firefox and click the Add to Firefox button
    4. Go to the Firebug page in Firefox and click the Add to Firefox button

    Files to edit when implementing customized formatting:


    1 - screen.css, which resides in the StyleSheets folder.

    Note: 4 CSS stylesheets are linked to the templates. Don't worry about the last 3 stylesheets for now.

    • screen.css - CSS for the look and feel of the templates
    • Box.css - CSS for modal windows. Don't worry about this one.
    • ModuleStylesheets.css - CSS for modules e.g. catalogs, products, announcements etc.
    • base.css (leave this alone) - CSS for the template layout (based on Blueprint CSS Framework 0.6).

    2 - Main template and sub template in Site-Wide Templates.

    Using Colorzilla to pick colors

    So you want to change the colors of the template, but you'd have to know how to get those color values. The easiest and cheapest way to pick colors is to use Colorzilla, the Firefox add-on. Colorzilla lets you pick colors from anything on the browser or from its built-in palettes. It gives you the color's hexadecimal or RGB value so you can use it for CSS.

    1. Double click on the Colorzilla button.

      colorzilla-1-ps.png

    2. You can pick your color using the Picker, or Palettes by clicking on the Palettes tab. Each color will produce three types of values. Hexadecimal (Hex) is the most popular type used in CSS.
      colorzilla-2-ps.png

       

    3. You can access the Colorzilla menu by right-clicking the Colorzilla button. At the moment our Picker (the image above) only displays a small selection of colors. To increase the amount of colors go to Options > Color Picker and click on 64 x 64 palette.

       

      colorzilla-3-ps.png

    4. To activate the Colozilla crosshairs, click on the Colorzilla button once; click on it again to deactivate Colorzilla.
      1. The box with red dotted border denotes the hovered element.
      2. The Colorzilla button also shows the sampled color of whatever the crosshairs is targeting. To sample a color simply click anywhere within the browser.
      3. The status bar displays the RGB value, hexadecimal value, coordinates of the crosshairs and the element targeted by the crosshairs. You can customize the status bar by going to Options > Statusbar Format...
        colorzilla-4-ps.png

    Using Firebug to customize the Online Business Builder templates

    Since the CSS stylesheet (screen.css) controls the look and feel of the templates, you'll need to edit screen.css in order to customize the template. The easiest way to locate the relevant CSS selectors on screen.css is to use Firebug, the Firefox add-on.

    1. Click on the Firebug button to open the Firebug panel.

      firebug-1-ps.png
    2. Enable Firebug. Note the other enable link below for offline contents.

      firebug-2-ps.png
    3. This is the Firebug panel. Whatever you edit, add or remove inside this panel will not affect the actual HTML, CSS or Javascript codes etc. It's like your playground.
      1. You can increase or decrease the size of the panel by dragging the edge up or down.
      2. This is the HTML section since the HTML tab is selected. You can edit the HTML by double clicking on any part of the code and the changes can be seen in real time. Again, this doesn't change the actual code.
      3. This is the style panel (note the Style tab is selected). This is where you play with the CSS styles on the page. The style panel will show the styles of whatever HTML element is selected, and where it's located, on the page or in an external file.
        firebug-3-ps.png
    4. Notice the light blue tint on parts of the webpage. The tinted area is the HTML element we have hovered over in the HTML panel. Select an HTML element in the HTML panel and the CSS content of the style panel will change; this is how you find out which HTML element is using which CSS properties.
      firebug-4-ps.png
    5. This time we hover over the div#header-left element. The light purple tint is the padding and the light yellow tint is the margin.

      firebug-5-ps.png
    6. In order to change the front-page image you'll have to edit the Main Template in Site-Wide Templates. If you want to create your own front-page image you'll need to know the correct dimension. All the front-page images of the OBB templates are 600px wide and 216px high. If you can't remember the dimensions you can always use Firebug to figure it out (or you can just right click on the image and the click properties to get the size of the image). To find the dimensions of the front-page image (or any HTML element) click on the Inspect button and hover the cursor over the front-page image (or any HTML element). Press the Esc key to turn off Inspect mode.
      firebug-6-ps.png
    7. To customize the background of your OBB template, select the body

      element in the HTML panel. Notice how you can see the body

      selector (body { }) in the style panel now, that's what we're going to edit.

      firebug-7-ps.png

      When you hover over a CSS property you'll be able to see a round grey icon on its left hand side.
      firebug-8-ps.png

      You can disable the CSS property by clicking the grey icon. Notice the change in real time; being able to disable CSS properties like this can help you debug CSS problems using the process of elimination.
      firebug-9-ps.png

      Click on the background value to edit it (learn how CSS background works). Again, even though you'll be able to see the changes in real time this won't affect the actual CSS file. You'll have to copy what you've edited and add it to the actual CSS file.
      firebug-10-ps.png

    8. Here are the steps to add your own logo to the OBB template: 
      1. Make sure your logo isn't larger than div#placeholder-logo. Use the Firebug inspect mode to target <div id="placeholder-logo"> and get the dimensions of the <div> container. Any logo smaller than 300px wide and 126px high should be pretty safe.
      2. Upload the logo.
      3. Add <img src="url-of-the-logo.jpg" alt="Name of your business" /> within <div id="placeholder-logo"> in Main and Sub Template in Site-Wide Templates.

    Explanation of common selectors of screen.css

    Note: the CSS below are based on the screen.css of Template 1, so some of the values might be different.

    In the order of appearance:

    Customizing body text and body background

    body { color: #444; background: #193441 url(/images/cssimg/bg-1-9.png) repeat-x;}
    • color: #444 is the body text color.
    • background: #193441 is the body background color, url(/images/cssimg/bg-1-9.png) is the URL of the background image, repeat-x means that the background image will repeat horizontally.
    • To make the background image repeat vertically use repeat-y and to stop the image from repeating use no-repeat. To remove the background image simply remove url(/images/cssimg/bg-1-9.png) repeat-x from the background property.

    Customizing the headings

    h1, h2, h3, h4, h5, h6 { color: #91AA9D;}
    • If you want to give each kind of heading a different color simply break them up into: h1 { color: #000 }, h2 { color: #666 } and so on.
    • You can change the font by adding e.g. font-family: "Lucida Grande", Verdana, Arial, sans-serif;. Note how the quotation mark is used for Lucida Grande due to the spacing in the name.

    Customizing the logo text

    Note: in some templates, div#placeholder-logo (i.e. <div> with the Id name "placeholder-logo") is used as a selector instead of a#logo (i.e. <a> with the Id name "logo")

    a#logo { color: #4a8797; font-size: 36px; font-weight: bold; text-decoration: none;}
    • font-size: 36px is the size of the text.
    • font-weight: bold is the weight of the text. For regular weight use normal.
    • text-decoration: none removes decoration (e.g. underline) from text. This is needed because anchors have underlines by default.

    Customizing the navigation menu

    td.menu-item { color: #fff;}td.menu-item-hover { color: #FFE76A;}td.menu-item-selected { color: #D1DBBD;}td.submenu-item { background: #f9f9f9; color: #000; font-size: 11px; padding: 6px !important;}td.submenu-item-hover { background: #4A8797; color: #fff; font-size: 11px; padding: 6px !important;}td.submenu-item-selected { background: #000; color: #fff; font-size: 11px; padding: 6px !important;}
    • td.menu-item i.e. <td> with the class name "menu-item", represents the menu item and gives it white text color: #fff;. To change the background of menu item just add e.g. background-color: #000; (black background).
    • td.menu-item-hover represents the hover state of the menu item.
    • td.menu-item-selected represents the selected state of the menu item i.e. the active menu item.
    • td.submenu-item represents the submenu item.
    • td.submenu-item-hover represents the hover state of the submenu item.
    • td.submenu-item-selected represents the selected state of the submenu item.

    Customizing Links

    a:link, a:visited { color: #35616D; text-decoration: none;}a:hover, a:active { color: #35616D; text-decoration: underline;}
    • a:link represents the default link state.
    • a:visited represents the visited link state.
    • Both a:link and a:visited have #35616D colored text and no text underline (text-decoration: none;). You can break them up if you want them to have different styles e.g. a:link { color: #1969bc; } and a:visited { color: #eeeeee; }.
    • a:hover represents the hovered link state.
    • a:active represents the active link state, i.e. when the link is clicked.
    • Note that link styles must be in this order: link, visited, hover and active. If you want to know why check out Link Specificity by Eric Meyer.

    Modifying CSS stylesheets

    Now that you've identified the styles you want to change, and experimented with how it will look with firebug, it's time to make permanent changes to your CSS stylesheets.

    To do this, use FTP to download your CSS stylesheets (all stylesheets are in the /StyleSheets/ folder) and modify them in a text editor or a program like Dreamweaver or CSSEdit for Mac.

    Alternatively, you can modify them in your site by using the file manager. The File Manager is found under the Recent Items tab on the far right, after you hover over any menu tab. You can either download the CSS file, or click "Edit" to edit the stylesheet online.

    More Resources