Social media on top right Montezuma

It would be helpful if there was a picture/drawing of how the grid is build up.

It is helpful to think of the column classes as widths, rather than absolute positions. The 12 column grid is 960px wide, so each column is 80px (960 / 12). The 80px is somewhat approximate, depending upon how big a margin (space) you specify between columns when you select your grid (Appearance > Montezuma Options > CSS Settings > Choose CSS Grid).

An element with a class of col4 will therefore be 4 x 80 = 320px wide, an element of class col7 will be 7 x 80 = 560px wide. So the position of any element will depend up on the width(s) of the elements to the left. As I mentioned earlier, the important thing is to make sure the column classes add up to 12, so the entire width ends up being 960px.

This allows for a lot of flexibility in designing your layout. For example, if you wanted a sidebar on the left as well as on the right, you could design a virtual template by copying the page.php template and change it so it looks like this:

<div id="widgetarea-left" class="col3">
   <?php dynamic_sidebar( 'Widget Area LEFT' ); ?>
</div>
<div id="content" class="col6">
   [the code for the main content]
</div>
<div id="widgetarea-one" class="col3">
   <?php dynamic_sidebar( 'Widget Area ONE' ); ?>
</div>

The two sidebars would be 3×80=240px wide and the main content area would be 6×80=480px wide, for a total of 960 (240+240+480).

I put the social media on col4 instead of 5. How can I lower it until it’s on the same level of the menu titles (home, contact etc).

You will want to adjust the class of your menu bar to col8, then, so the widths still add up to 12. That will also help align the social buttons above the widget area, as the menu will then be the same width as the main content. If the media buttons are too far to the right, you can adjust it with this CSS:

#acx-social-icons-widget-4 {
    float: left;
    margin-left: 20px;
    margin-top: 25px;
}

The float: left property will push the buttons all the way over to the far left of the container, as a starting point. Then use the margin-left and margin-top properties to adjust how far you want to move the buttons to the right and down.

You also want to add a media query that re-centers the buttons on smaller viewport sizes:

@media only screen and (max-width: 767px) {
#acx-social-icons-widget-4 {
       float: none;
       margin-left: 0px;
   }
}

As a note, you want to learn how to use a web debugging tool like Firebug or Chrome Developer Tools (I use mostly Chrome DevTools). It will help you figure out what CSS rules are in effect for a particular element so you can override them. It’s what I use to look at your site.

By the way, i get this message all the time:
“Your theme needs to be fixed for plugins to work…

Do not worry about this warning message. Unfortunately, some plugins don’t realize that header.php isn’t the only place where wp_head() can be called. wp_head() is being called, but not from the virtual header.php file. You can ignore this warning.

If I can help you with something design wise just let me know.

Thank you for your offer, I might take you up on it some day. I like helping people out with this theme, because I think it is the best theme as far as being able to customize it. If you wish to look at how some others are using the theme, you can browse through the sites at the BytesForAll Showing-off thread. My favorite examples right now are Silver Lake Art Garage, Raise A Child, Cartidea, Mondo Moda Bimbo, Rishona Campbell, and Beard Food. It’s a very diverse collection that illustrates how much you can do with the theme.

Thanks for explaining the grid, it makes a lot more sense now. I use Firebug all the time, but sometimes I still can’t figure out things with it because there are so many stylesheets. The more I work with this theme though, the better I understand but there is alas a lack of knowledge with me when it comes to CSS (working on that).
I adjusted the social media icons now, it is better but I am not able to shove them more to the left, so I suppose I just leave it like this and start working on the design now, because there is also a lot to do there ??
As a member of Bytes For All I take a peek sometimes at what others make. You to me are a wizard with all the solutions you mention. I do like the examples of websites you mentioned, it is surely fantastic what people can do with this versatile theme especially Silver Lake Art and Beard Food. Thanks again for your help!

I use Firebug all the time, but sometimes I still can’t figure out things with it because there are so many stylesheets.

If you look at the CSS in the right pane of the FireBug window, you’ll see that the rules are arranged according to their selector’s specificity; the rules which have the highest specificity appear at the top. It’s usually not necessary to know exactly which CSS file contains the rule, unless that file happens to be read in after your custom CSS; then you’d have to create a selector with a higher specificity. But if you do want to see in which file a rule is located, click on the link to the right of the rule (e.g., style.css:1317) and FireBug will switch to the Style Editor, opening up the correct file (style.css) and displaying the line (1317) where the rule is located. If you want to switch back to the code, click the Inspector menu item.

Fantastic tip Crouch! Thanks ??