Apostrophe Now! : Editing Your Theme's CSS: The Advanced Editor

Editing Your Theme's CSS: The Advanced Editor

Jan 16
Posted By: Dana Vachon
0

We know that our themes won't fit everyone's preferences. That's why we created the Simple Appearance Editor, which lets you pick colors and fonts easily. Just click on the left-hand menu at the top of your site (the one named after your site) and pick "Customize Appearance" to get started.

But for some users, this is not enough. You might want to change things that are not covered by the Simple Appearance Editor. We understand that. So for you, we've provided a way to add CSS (Cascading Style Sheets) rules to your site directly.

First, if you're already a CSS master, you'll be in heaven. just click "Customize Appearance," then "Advanced Editor," and lo and behold a CSS editor window appears. Dive in and start editing. Keep in mind that the built-in inspector of your browser (or Firebug, for Firefox fans) is a big help in figuring out what element you want to style.

Now, for beginners, we understand you need some help getting started. So we'll give you some pointers on how to work with CSS and some specific tips on CSS and Apostrophe.

First, W3Schools offers an amazing tutorial on CSS. If you are new to CSS we highly recommend you check it out.

Next, to get started, go to your site, click on the upper left hand menu, and pick "Customize Appearance." Then click "Advanced Editor."

A text editor appears, initially empty apart from an introductory comment. You can add CSS code here that changes the appearance of your site, then click "Preview" to check out what it will do, or click "Save" to apply the changes to your live site right away. We recommend previewing first.

This blank sheet is applied after the standard style sheet for your theme. So anything you put here "wins." For example, if you're in the Georgia theme, and want to change the background from yellow to blue without using the Simple Appearance Editor, you can add:

body
{
  background-color: blue;
}

(If you want a specific shade of blue, enter the hex code for the color, instead of the word blue. This site can help you.)

That bit of code tells the website it's more important to have a blue background than the yellow found int he original theme.

While editing colors is fun, we know you want to do more substantive things (and things you can't do with the Simple Appearance Editor). We'll give you some more advanced examples, but first some general tips to help you avoid trouble.

TIP: Use Firebug or Chrome's built-in inspector to browse the markup and CSS of your pages and discover the tags and classes that you want to apply CSS rules to.

TIP: Notice that each of the major content areas with an "add content" button has a corresponding class. There are many classes in the markup but you should concentrate on these and avoid styling by id or by classes with numbers in them.

TIP: When setting the width of the major content areas, keep in mind that Apostrophe will automatically generate scaled images that match your width as long as you specify that width in pixels (not as a percentage) and use a straightforward selector like:

.a-default-template .a-area-body

You can get away with using percentages if your changes are not dramatic. When percentages are used, the default sizes for the generated images are kept large enough to accommodate the original intended purpose of the area within a reasonable range of screen sizes.

TIP: When specifying fonts, remember to choose "web safe" fonts. If you choose something that's not web safe, also specify fallback fonts so that people who don't have your fanciest font choices on their computers still see something suitable. You can find a list of "web-safe" fonts here, including some good fallback choices.

TIP: if your styles don't appear to have any effect, try being more specific. For instance, try overriding

.a-home-template .a-area-body

Not just:

.a-area-body

Different themes may use rules that are more or less specific, so you may have to tailor your overrides a bit.

A Great Big Fancy Example

/* Change the logo font */

.a-header .a-area-logo .a-button-title {
  font-family: Tahoma, Geneva, sans-serif;
}

/* Make the "body content" narrow, turning it into a left sidebar */

.a-home-template .a-area-body, a-default-template .a-area-body
{
  width: 300px;
  padding-top: 10px;
}


/* Make the "sidebar content" wide, turning it into a body on the right */


.a-home-template .a-area-sidebar, .a-default-template .a-area-sidebar
{
  width: 600px;
}


/* Move the search bar where we'd like it */


.a-search.global
{
  right: 100px;
  top: 40px;
}


/* We don't want the text of the logo centered */


.a-area-logo
{
  text-align: left;
}


/* We don't want the text of the logo underlined */


.a-area-logo a
{
  text-decoration: none;
} 


/* This site is just a blog with no subpages, so hide the navigation completely */


.a-nav-main.tabs
{
  display: none;
}


/* We don't want to show the author's name with posts */


.post-author
{
  display: none;
}


/* A nice border at the top of the main content of the page */


.a-page-container
{
   border-top: 2px solid #64645E;
}


/* Remove an unwanted border from the logo's button */


.a-area-logo .a-button-link
{
  border-bottom: none;
}


/* Set the background of the page footer */


.a-footer
{
  background-color: #F1E8DA;
}


/* Change the color of the text of the footer */


.a-footer .aRichText
{
  color: #000000;
}


/* Make the media and blog page body areas a little narrower and

  float them to the right */


.a-media .a-content, .a-admin .a-content, .a-blog.a-engine .a-content, .a-blog-admin .a-content .a-content 
{
  width: 70%;
  float: right;
}

Tags: CSS

Apostrophe is easy to learn.

Editing Your Theme's CSS: The Advanced Editor

A Great Big Fancy Example