Basics

Clicking on the 'Edit Styles' link for any template will bring you to the main page for style-sets for that template. Here you can see what style-set is currently being utilized for the website (listed as "Currently Selected Styles"), and any other style-sets that are currently available.

Creating new style-sets

There are two ways to create a new style-set. One is to click the link at the top of the style-set page that says "Add a New Style Set". That will pop up a box for you to name the new set. Type in a name, then click 'Add' to add it to the style-set library for that template. With that method, you are starting a new style-set "from scratch" - that is, from the default style-set for that template (labeled 'default' in the style-set library). You can also make a new style-set by starting with another existing style-set and using that as a basis from which to make your customizations. To do this, click 'Save as', type in a name for your new style-set, and click Save to save that set to the library. You will then see your new style-set in the library, and can click 'style editor' next to that new set to make changes to the look of that set.

Editing existing style-sets

To make changes to an existing style-set at any time, just click 'style editor' next to the name of the style-set you want to change, on the main style-set page.

Deleting style-sets

You can remove a style-set from that template's library by clicking the red delete button next to the name of the style-set you want to delete. WARNING - you cannot retrieve a style-set after you have clicked delete. You can't delete the style-set that is currently being used for your website. To delete that style-set, first choose another set to utilize for the site.

Using the style editor

When you click 'style editor' for a style-set on the style-set main page, it will take you to the main style editor window, where you have very fine-grained control over the visual elements of your website. There are quite a few controls in the style editor, which can be a little overwhelming at first glance. However, that is what affords you the flexibility to really control how your website looks, and the use of these visual controls is completely optional, so you can use as many or as few as you like. Also, we're always here to help should you get stuck. Don't be afraid to get in here and play around - the best way to learn is to just mess around with it to see what each control does. You'll notice that as you move your mouse over the styling elements listed on the left, the corresponding part of the website layout on the right will be highlighted in blue to illustrate what that element controls. This isn't always a perfectly clear indication though, as some styling elements are less easily highlight-able than others. Also, don't forget the buttons below the styling elements on the left - save, save as, and cancel changes. Save will save the changes you've made to the existing style-set, 'save as' will save the changes as a new style-set, and cancel changes will take you back to the main style-set page without saving changes.

Styling tabs

We've organized the mass of individual styling elements into a few different types of elements. These are listed at the top of the page and are, as of this writing: Basic Styles, Page Blocks, Blog, and Images. Clicking on one of these tabs will show you the individual styling controls for that type.

Basic Styles

Basic Styles are the most base-level styling elements, and are applied across the board on your website. 'Basic font' controls the appearance of what is called 'body text' - the main bulk of text on your site; basically all text that isn't a header of some sort, or the menu and name. 'Paragraph' also controls the body text, but in this case it controls the spacing between lines, and between letters. 'Link' controls the way a link (that is, text that you decide to link to somewhere else on the web) will appear on your site in the default state, before a viewer moves their mouse over the link. 'Hover link' controls the way a link looks when a viewer has their mouse cursor on a link, but before they have clicked to visit the link. Next there are 5 heading styles that you can set up here. Heading styles are used as consistent styling elements that you can choose to set some text apart from others. For example, titles, section headers in a biography, etc. They are usually voluntary styles, that you will apply to text as you write it. You will have a drop-down menu in the text editor when you are creating your pages, and the 5 header styles here are listed as 'H1', 'H2', etc. If you select some text, then click H1 in the text editor toolbar, that text will appear on the website as however you style Heading 1 on this page. Also, certain headers are automatically assigned to some parts of the templates. You'll see this when you make your site, and can make adjustments to the header styles here, as needed.

Page Blocks

Page Blocks refer to parts of the page layouts for your website. This is where you control how your 'logo' looks (which may be your name, or a title for the website). The text used for 'logo' is whatever you type in for 'site title' under 'site settings' from the admin home page. Other than that these controls are mostly used to control the spacing around and between the different 'parts' of a page on your website. The best way to figure out what each of these design elements does is to play with them - it would take too many words and way too long to try and explain!

Blog

Here is where you can control the look of some elements in your blog, if you decide to use the blog application in your Artcode site. These various styling elements are actually fairly well-demonstrated with the highlight that appears over that element on the design when you move your mouse cursor over the element labels on the left.

Images

This section offers some control over the appearance of elements related to viewing images, according to whichever image-viewing option you have chosen for this template (note that you choose the image option at the template-chooser page, before you ever get into the style editor). If you have chosen thumbnails, you can control the spacing around and between the thumbnail images. If you chose the single-image viewing option, you can control the appearance of the arrows used for flipping between different images, as well as the caption that appears below the image.