Modifying the Base Theme

Before starting the modification process, it's important to understand the basic structure of the starter theme. The first thing that I look at when modifying a theme is the list of regions defined by the starter theme. In the case of Genesis, I open and look at the genesis_mytheme.info file, which can be found in the /sites/all/themes/genesis_mytheme directory. The starter theme defines the following 12 regions:

Page top Leaderboard Header Help

Secondary content Highlighted content Content First sidebar Second sidebar Tertiary content Footer Page bottom

Figure 13-3 shows the positioning of the standard regions.

Figure 13-3 shows the positioning of the standard regions.

Figure 13-3. Position of the standard Genesis regions on a sample page

One of the reasons that I like the Genesis theme is it provides several powerful features that are simple to use, including the ability to pick the layout of your new site. Genesis provides nine basic layout options in three categories, as shown in Figure 13-4.

genesis-1 Standard 3 column

20em

genesis-ia

20em

24.25%

genesis-1b

24.25%

240px

genes is- 1c

240px

genesis-2 Both sidebars on the right

genesls-2a

20em

20em

genesls-2b

24.25%

24.25%

genes is-2c

240px

240px

genesis-3 Both sidebars on the left

20em

20em

genesis-3a

24.25%

24.25%

genesis-3b

240px

240px

genes is-3c

Figure 13-4. Standard Genesis layout options

I'll choose the genesis-1c layout. It is a standard three-column layout using fixed-width sidebars. Depending on the requirements for your site, you could select another layout option.

To set the desired layout, I'll edit the html.tpl.php file in the /sites/all/themes/genesis_mytheme directory. In the html.tpl.php file I'll change the CSS ID assigned to the body tag from 1a to 1c, as shown here:

<body id="genesis-1c" <?php print $attributes;?>>

The next step is to set the width of your theme. By default, Genesis is set to display as a fluid width-based theme, meaning the theme will stretch to the width of the visitor's browser. For demonstration purposes, I'll change the default width from 100% to a fixed width of 960px by updating the page.css file, which is located in the /sites/all/themes/genesis_mytheme/css directory. There are two CSS IDs that you will need to change: one for IE6 and the other for all other browsers. Find the #container CSS ID in the page.css file and change the two definitions to match the following, by changing 100% to 960px:

#container {

body > #container { width: 960px; /* Width for all other browsers */ min-width: 760px; /* set a minimum width */

After changing the values, save the file and press refresh on the home page of your site. If your monitor supports a resolution of at least 1024x768, maximize your browser window and you will see the affect of setting the site to a fixed width of 960px. There will now be white space on either side of the main section of your website.

Next I'll jazz up the theme by adding color. I'll create a theme that is based on a green color scheme. One of my favorite tools for creating color schemes is found at http://colorschemedesigner.com/. I used the tool provided on that site to generate a green-based color scheme, and will use these colors:

Primary background color: #528544

Secondary color: #287314

Tertiary color: #9CD88C

I'll set the main body background color to the primary background color, and the main section of the site to white by adding the background color definition to the following CSS elements found in the page.css file:

body { padding: 0 I0px; background-color: #528544;

#container { width: 960px; /* Width for IE6 */ background-color: #ffffff;

After adding the values, save the file and return to your sites home page, clicking the browsers refresh button to reload the CSS file. The updates should have changed the colors on either side of the main section of your website to green, with the main section of your site having a white background.

The next change is to make the header of the site stand out from the rest of the site. I'll add four attributes to the #header CSS definition in the page.css file. I'll add a background color, borders at the top and bottom, and set the height of the header to 120px. After updating the #header definition, you should have something like the following:

background-color: #9CD88C; border-top: 6px solid #528544; border-bottom: 3px solid #287314; height: I20px;

After updating and saving the file, reload the homepage of your website to see the effects of the changes you've made.

Next I'll fix the logo and the site title so it renders properly in the header region. I'll first add the following attributes to the #logo CSS id in the page.css file:

position: relative; float: left; margin-left: 20px; margin-right: 50px; margin-top: 30px;

Next I'll add the position, float, and margin top attributes as shown here to #site-name CSS id in the page.css file:

font-weight: bold; /* Bold or else the line heights vary. */

font-size: 2em;

line-height: 1.5;

position: relative;

float: left;

margin-top: 35px;

Next I'll change how the site title is displayed. Instead of displaying the title as a hypertext link (underlined and blue), I'll remove the underline and change the text color. In the page.css file, search for the #site-name a:link and #site-name a:visited CSS IDs and add the text-decoration and color attributes as shown here:

#site-name a:link { text-decoration: none; color: #528544;

#site-name a:visited { text-decoration: none; color: #528544;

After updating the #logo, #site-name CSS IDs, save the page.css file and press the browser refresh button while on the home page of your website. The revised header layout should now look like Figure 13-5.

Figure 13-5. The revised header layout after CSS changes

Figure 13-5. The revised header layout after CSS changes

Building Better Backlinks

Building Better Backlinks

Building effective backlinks can be instrumental in improving search engine ranking for your website and increasing quality traffic. Learn from the Pros How to Build Effective Backlinks in Order to Successfully Generate a High Volume of Quality Visitors to Your Website. Having Links Placed on Important Websites can Even Increase the Traffic of a Popular Website by More than 500.

Get My Free Ebook


Post a comment