How is Montezuma suited to non-coders?
 

Hi all,
I've been lurking here since setting up Montezuma a few days ago. This is the first website I will have built. I am very familiar with the Wordpress backend but I am not an experienced coder. That said, I am willing to learn. I have managed small things like changed the header to my logo (although it looks quite poor). I don't know how to do things like change the general colour scheme and stuff like that. I see on the showing off tab that some websites look radically different.

Is there a general forum topic that covers basic coding issues with Montezuma? I see that the community is helpful (I have seen juggledad has solved a myriad of issues) but I can't seem to find them.

Thanks in advance

If you're not a coder, then you'll need to learn some minimal HTML and CSS, because it's the CSS which really impacts the appearance of your site, and you'll be digging often into Montezuma's virtual CSS pages (Appearance > Montezuma Options > CSS Files) to make your changes.

I like this CSS tutorial to start with. Then you'll want to know how to create selectors to target the elements on your page. And then, you must master one of the web debugging tools like Firebug (a free extension for FireFox) or Chrome Developer Tools, which comes built-in with Chrome (I mostly use Chrome DevTools). Those tools will help you see the structure of your page, as well as what CSS rules are affecting specific elements on your page so you can change or override them.

Thank you very much for the response. I have started learning HTML and CSS (basic stuff) but knew nothing of the debugging tools. Thanks!

Once you get the basics down, and you want to do more advanced stuff, like moving the menu on a separate line, creating special category pages, or adding/subtracting sidebars, you'll want to read the documentation that's included within the Montezuma Options pages:

CSS Options > Editing CSS: Explains about the 12 column grid system, and how elements are assigned class names (col#) so they fit within the 12 column grid. Useful if you want to move your menu to a separate line, or if you want to adjust the width of the sidebar relative to the width of the main content.

CSS Options > Google Fonts: Explains how to add additional Google Fonts to your site (you may also want to read this post to get rid of the font "flicker" that occurs when your page loads). If you want to change the default font for your site, you'll want to edit or override the font-family property for the body element in the content.css virtual file.

Main Templates: how the templates system works. Useful if you want to create a special template for a specific page where, for example, you don't want a sidebar (i.e., you need more space on the page).

Thanks for the info Crouching Bruin. I'm wondering one or two things.

I have my menu set up at the top. I don't really like this and would love to set up another menu. How do you go about changing the menu and personalising it a bit more?

With Montezuma, you have to work back & forth between 1) the virtual template files, which determine what content you see (and generally where that content appears), and 2) the virtual CSS files, which styles the appearance of the content.

If you go to the header.php template file (Appearance > Montezuma Options > Sub Templates > header.php), you'll see the code which creates the header portion of your pages. In the bottom third you'll see this function call:
This PHP function call to wp_nav_menu causes "menu1" to be output. Basically, if you don't like where the menu is located, just cut out this bit of code and paste it somewhere else, either another place inside the header, or into a totally different subtemplate, like footer.php if you want your menu at the very bottom. The main thing that you have to remember is to adjust the class names (col#) to make it work well within the responsive grid system. That is, if you look at the code above, you'll notice that the default menu has a class of col7, because it's on the same row (or line) as the logo area, which has a class of col5. The class numbers for elements on the same row should add up to 12 for the responsiveness to work correctly. So if you want to put the menu on a totally separate row, all by itself, you want to give it a class of col12, and, because you're freeing up the space to the right of the logo area, you'll also want to adjust the class of the logo area to col12 as well.

Once you get the menu to the location that you want, you'll then use one of the web debugging tools that I mentioned earlier (Firebug or Chrome Developer Tools) and see what CSS rules are in effect for the menu. If you're using Chrome DevTools, then you'll mostly want to learn how to inspect the CSS rules (scroll down about halfway down to the Styles section). Once you figure out what rules you want to change, you can go to the virtual CSS file where the rule is located and change it there (most of the CSS for style menu1 should be found in the menus_menu1.css file), or you can add a rule to the end of the various.css file to override the existing rule (CSS files can be found by going to Appearance > Montezuma Options > CSS Files).

What's nice about Montezuma is that it is easy to play around with something like this. If you happen to screw up the appearance very badly, you can restore the header back to the default appearance by clicking the button at the bottom that has the circular arrow and reads subtemplate-header (don't click the Reset ALL button unless you want to restore the default settings of all options, including templates, CSS files, and header information). You should also regularly back-up your settings so you don't accidentally lose your work by going to the Export Import section, copying the contents of the Current Montezuma Settings field into a text editor like Notepad, and saving it on your local computer.

Thanks CrouchingBruin. This is a wealth of information and it will take a bit of trial and error for me to get to grips with it.

Take for example your Venice Buddhist website. You have the logo and image at the top (I presume the logo is col3 and the image is col9?) and then underneath that you have your menu. This looks good similar to something i would like to do, only I want my logo centered in the middle of the page if this was the case.

Regarding the menu, I'm also looking to get rid of the default stars graphic with something else. Do you know where the menu is for this?

Regarding the Chrome Dev or Firebug, I don't really understand these tools or what they do and so wish to avoid them for the time being.

You really have helped my understanding of how the "everything adds up to 12" system works, even if I can't implement it effectively yet.

The element on the left is the site title which is inside the logo-area DIV, while the element on the right is a carousel slider that was added as a widget to a widget area that I created in the header. The logo-area has a class of col4 while the widget area has a class of col8. The menu was moved to a different row DIV and given a class of col12.
So you want your site title centered in the header, and underneath that you want your menu. That is fairly easy to do. As I mentioned, move the code for the menu in it's own DIV, so it looks something like:
So in the code above, you can see that the DIV for logo-area has a class of col12 (changed from its default value of col5), and is contained inside a existing DIV called banner with a class of row. The menu was moved to a new DIV with an ID of rowMenu and also a class of row. So the general rule is col# DIVs are nested inside a row DIV, and each row DIV has elements whose col# class add up to 12.

This is all done using CSS. Study the code in menus_menu1.css. Look for the section starting with this comment:
The menu items have a set of italics tags (<i></i>) prepended to them by a Javascript function that executes when the page loads. The italics elements are then styled by the CSS rules in this section. The important thing to note is that the background image is set to this file:
/wp-config/themes/montezuma/images/menu-icons-0090d3.png
This file contains all of the default menu icons. You can make changes to this file to: 1) change the color of the blue images to a different color, 2) change the images completely. You can also create your own image file and use that. The Silver Lake Art Garage and TrendPerMixMedia are examples of sites that use a custom menu image file. Silver Lake Art Garage uses an array of the alphabet in a range of colors and opacities, while TrendPerMixMedia uses a very small simple file which just contains two images.

The faster you learn one of these tools, the faster you'll be able to see not just how your site is structured, but how someone else's site is created. The tools also allow you to make changes "on the fly" so you can play around with the look before actually making changes to the Montezuma files; it will really save you some time.

Keep playing around with your site, it's the best way to learn.

When I was a beginner (and after 7 years, I still am :) ) I found a lot of help at http://www.w3schools.com/ They explain the code and then allow you to try it out so you can see the results of what you do.

Good luck, Zenith Blue!