MosaicGlobe Support

The visual elements of your MosaicGlobe page are defined by Cascading Style Sheets (CSS). Every color, border, font size, etc is handled in one document that is separate from the content (HTML).

This tutorial is not designed to teach CSS or HTML but rather to familiarize you with how MosaicGlobe uses CSS to edit existing templates or to create your own. To learn more about HTML and CSS refer to the Resources at the bottom of this page.

We will be looking at a very basic site design as an example (view here) and it's CSS document. You can download the example HTML, CSS and images to experiment with (Download Files). The HTML document includes most page types in one page so you can see how your CSS edits effect the content. The best way to learn how to edit the CSS is to download the files, make changes and see how the HTML is effected.

The CSS Document
Your MosaicGlobe website is organized by HTML into various sections that can each be manipulated visually via CSS (see diagram below). The CSS document for all MosaicGlobe sites follow the same structure (view tutorial.css). First is the Body which defines overall page elements such as backgrounds, fonts and general placement. Within the Body section is a Table called #main. The Main Table holds all the structural element of the site: the Header (titles), The Sidebar (navigation), the Body (site content) and the Footer (along the bottom). These elements are all in the CSS section labled  /*--MAIN TABLE--*/

SECTIONS
td#header: Within the header is the site title (#header h1) and tagline (#header h2) which can be adjusted in the /*--HEADERS--*/ section of the CSS document.

td#nav: Within the nav area is the site menu which can be adjusted in the /*--NAVBAR--*/  section of the CSS document. #menu holds all the page links, The /* MENU buttons */ section is where you can define individual links. The are two areas to edit; Level One is top level (parent) links and Level Two is subpages (child) links. Each link then has three states: unselected (how the links look on the page) selected (how the link looks when your on that page) and unselected:hover (how a link looks when the mouse rolls over it).

td#body: This area contain the content for each page type (blogs, galleries, links, etc.) Each page type contains Page Title (#body h3.pageTitle ) and some contain Category Titles (#body h3.category), both of which can be edited in the  /*--HEADERS--*/ section.

Individual page types can be modified in their section of the CSS document (ie.  /*--JOURNAL/BLOG--*/ ).

td#footer: Defines how text in the footer section looks.

BASIC EDITING
To edit a CSS style navigate to the Manage Site/Themes section of your administrative panel. Find the theme you wish to edit and click the edit link. Now you will see the CSS document for that style. After editing it you may want to save it under a different name and click the "Create Style" button. Now the new theme is in the Style Category called 'Users".

To create a new style click the 'Add a New Style" button on the top of the Themes page. Give you style a name and paste the CSS you developed into the field and click 'Create Style".  Now the new theme is in the Style Category called 'Users". 

Now you can also add your custom images to the new style by selecting edit for that theme. Click on "Edit Style Images" to upload a place your theme images.

It's a good idea to design your styles at your desktop first and then upload them when your ready. However, to view your edits online select the thumbnail image for a quick peek or select the radio button to designate the theme as you current style.

SAMPLES
There are endless ways to change your site. If you see a site you like find the CSS link in the HTML and see how it was done. Following are a couple of basic walkthroughs.

HEADER IMAGE
Let say you would like to add a new header to you page. First think about the width of your style. In our sample file table#main is 750px wide and td#header is 80px high so lets create a header that will fit that size rather than changing the CSS. We're going to add the MosaicGlobe Logo to our header. We created an image that will fit: 230px x 60px (mg_header.gif).

Now we need to upload our image to the site. Select "Add Style Images" then Browse, find our new image and select "Add Image". You will then see the full path to your new image. Copy that path to add it to the CSS document and click "Return to Edit Style".

Under td#header we're going to add the following:

background-image: url(path to my image);
background-repeat: no-repeat;
background-position: left top;

Be sure to replace 'path to my image' with the path to the image you uploaded.
(*note: if your working on the CSS on your desktop first that the path would be you local path)

Now when you look at the HTML page you'll see that the image is there but the Page Title and Tagline are on top of it. Easy fix. To #header h1 and #header h2 add display:none.

BACKGROUND IMAGE
Adding a background image follows the same steps as above but we'll edit the body section of the CSS instead and this time we want the image to repeat.
Lets use a tiling image called flowerBlue_back.gif.

background-image: url(path to my image);
background-repeat: repeat;
background-position: left top;

(*note: if your working on the CSS on your desktop first that the path would be you local path)

RESOURCES
Get the HTML, CSS and images used in this tutorial (download zip file).

You can edit the HTML and CSS files with a text editor such as notepad (pc) or textedit (mac).
However, there are some HTML tools that range in price and can make life a little easier.
Tag (Mac) Text only Editor http://www.talacia.com/products/tag/
CoffeeCup (PC) Visual Editor  http://www.coffeecup.com/html-editor/
CODA (mac)  Text only Editor http://www.panic.com/coda/
Dreamweaver (cross platform) Visual Editor http://www.adobe.com/products/dreamweaver/

Want to learn more? Here are some online tutorials on HTML and CSS.
CSS:
http://www.tizag.com/cssT/
http://www.html.net/tutorials/css/
HTML:
http://www.tizag.com/htmlT/
http://www.html.net/tutorials/html/

Still have questions? Post them to the forums.