FILES: page.tpl.php, css/blocks.css

Step 1

Open up your page.tpl.php and blocks.css files.

Step 2

Look at our page.tpl.php

You will notice that all of the elements on the page are inside a div tag called “container”. All elements are place within this div. It’s just something to help you keep the page all neat and organized. Next, you need to figure out which blocks you wish modify. The default Drigg template is setup in 3 columns or 3 content blocks. They are all under one universal div called “content”.

Each one has class and id attributes set accordling to each div, to recognize each. Theres left, center, and right content columns, or

<div id="content_left class="column">
<div id="content_center" class="column">
<div id="content_right" class="column"> 

Within each one of these contains blocks which you can change seperately if you wish. Such as someone who is adding more blocks in the left content column other then the default user block.

Heres the code to look for inside of our page.tpl.php file

<?php if (!empty($sidebar_left)): ?><div id="content_left" class="column"><?php print $sidebar_left; ?>

It’s basically saying, if there is no sidebar, then to create it for us. It has the id “content_left” with the stye class “column” assigned to the div.

NOTE: You don’t want to set the style properties directly to our page.tpl.php div tags. For those who don’t know what I’m talking about, it’s this:

<?php if (!empty($sidebar_left)): ?><div id="content_left" class="column" style="text-align:right; background-color:#33FF00;"><?php print $sidebar_left; ?>

The reason being, is that it could interfere with another style rule set within one of our css files. Some of you may argue that it will simply process the dominating rule, but this is a horrible practice in design. That’s why we have seperate css files, to keep everything clean and organized.

Step 3

Look into your blocks.css file. Find the section where it says this:

/* User block */
.block-user ul.menu {
margin: 0;
padding: 0;
list-style: none;
background-color:#33FF00;
text-align:right;
}

This is our whole user menu block. Use this section to change anything youd like within the user menu such as background color, text alignment, etc. Notice above we’ve changed the background color of the menu to a bright green, and aligned our text to the right.

You’ll notice that however you’ve edited the properties of the user menu block, the user name (when logged in) or whatever the name of the user menu is if you’ve edited Mine is “User Login”, it doesn’t affect it. It’s because it has its own properties . Its located in your blocks.css file under .block h2. And you can edit any of these properties accordingly just as you have the other properties of your menu block.

That’s it! Follow the same rules to edit the other blocks content,