Develop - advanced functionality > Changing fonts in headings

June 22, 2006 at 16:21 GMT

I have a limited knowledge of HTML, but I can do some basic changing if I know where to place the codes. I can see how to adjust content on pages within the content window, by clicking the option for HTML. I just don't know where to insert a different font style, size, and color for the header and the links of my template. Does anyone have a very beginner tip for changing the look of the template at the header? I've seen some fabulous sites and I think I could come up with something more creative if I knew where to start.

June 22, 2006 at 23:09 GMT

Hi Sarah
Most of the site-wide design changes are handled via CSS (Cascading Style Sheets) rather than HTML. Remove the HTML code you have placed in the title, subtitle and navigation fields and work from this one CSS document instead.

Some of this is rather advanced so I am going to give you a general overview. For additional information visit our support page (http://support.mosaicglobe.com/links/66) for some links to CSS resources.

In your login panel, go to 'Manage Site' and select the themes page on the upper right. There you can edit your current theme. After you are done editing the theme save it under a different name and then select 'Users' from the Style Category drop down and select your new theme to view the changes.

Your current style will have the following for your page title:
/*----------HEADERS----------------------*/
/*Site Title*/
#header h1 {
padding: 0px;
margin: 0px;
font-size: 16px;
color: #fff;
font-weight: normal;
font-style: none;
float: left;
}

Try adding the following:
font-family: Blackadder ITC, Arial, Helvetica, Geneva, Trebuchet MS, sans-serif;
(if a viewers computer does not have the font you choose it will try the next one)

Then change the font color:
color: #FFFF00;

That should get you close to what you are trying to accomplish with the header. Be sure that you change the link colors on #header h1 a { } areas to match.

The subtitle #header h2 is right after the header and can be edited as well.
The navigation is handled through the #menu area.

I hope this gets you started. You have some background in HTML so getting up to speed with CSS should be easier. Tinker with your style and feel free to ask questions.
Danny

June 23, 2006 at 01:35 GMT

Thank you for the instructions! I needed to figure out where that screen was under "themes". Now I think I have something that looks decent while I learn more about details and such. In fact, as I was looking for ideas of what I wanted my site to look like this afternoon, I looked at other artists mosaicglobe sites and yours was my absolute favorite! I love the images used in the headers and the centered format. Thank you so much for the great tips. My handmade aesthetic is much more advanced than my computer-skills based aesthetic.