Reply to comment
MAYO theme's name is taken from a phrase "MAke Your Own" and "MAYOnnaise" which I love ;-). As the name describes itself, MAYO is developed to be a theme that provides users easy way to customize and create a theme they like.
MAYO is developed based on the experience with PIXTURE theme. However, it takes full advantage of Drupal 7's color module and advanced theme settings. MAYO is simple but flexible. You can customize the look of your MAYO theme easily from theme settings page. It does not require you to have the good knowledge of CSS, HTML and PHP.
Below is the samples I have created by customing MAYO theme. Each of them was done within a few minutes without leaving the theme settings page.
What can be customized from the theme settings page?
- Color of most of the theme elements (base, page, header, sidebar, node, footer). In many cases, you can specify text color, link color, background color and border colors of each element.
- Base font and heading font type (either Serif or Sans-serif) and base font size.
- Page layout options such as width of the site (fixed width layout or liquid layout), margins, sidebar layout and width, etc.
- Styles such as menubar styles and round corner for node/sidebar block.
- Detail layout of header area contents (logo, site name, slogan, search engine box)
- You can easily upload and add your own image as the background of the header area. (You can use both background image and logo at the same time).
- Watermark of the header area which is added over the header gradation or header background images.
- Other miscellaneous options such as toggle to display/not display breadcrumbs.
The template files it uses are page.tpl.php and comment.tpl.php only (+ maintenance_page.tpl.php for maintenance mode). For all other elements, the standard template files that comes with Drupal Core will be used. This makes MAYO highly compatible with Drupal's Core.
Below are the screenshots from the MAYO's theme settings page. You can see that there are many things you can easily customize.
Other features
- Improved in-site search form. You can place it to the header area with ease.
- You can add controls to increase/decrease text size of the site. (It uses Javascript and jQuery).
- Supports Superfish and Nice Menus drop-down menu modules.
- Supports some extra regions such as footer columns (details to be explained later).
- Can be used not only for light color based site, but also for the dark color based site.
- Unlike PIXTURE theme, it does not use images (except for gloss black menu bar image). So the loading and displaying is fast.
Although MAYO has high customizability, it is not a heavy theme. It's simple. If you don't use header background image and gloss black menubar, there's no image used for MAYO. Even the gradation of the header area and round corner for sidebar block and node are done with CSS (CSS3). So I think it's pretty light weight compared with my PIXTURE theme.
The image below illustrates the regions MAYO theme supports.
You can put up to 4 columns to the footer, top block column, bottom block column area. Width of a column is automatically calculated based on the number of columns you set. (If you set 3 columns, each column width is 33% of the total footer width).
You can use up to two sidebars. In addition, each column block in top and bottom block column region has its own box style like sidebar blocks, and the height of them are automatically adjusted and equalized to the tallest one so that they looks nice and neat.
The position of the sidebar (either left or right of the content) can be easily configured at the theme settings page.
Note
Using Superfish/Nice Menus
If you want to Superfish or Nice Menus for the pulldown menus, do the following steps. (1) Disable primary and secondary menu at the theme settings page. (2) Assign Superfish or Nice Menu's menu block to either Menu bar or Submenu bar region at the /admin/structure/block page.Using dark color based theme
One of the characteristics of the MAYO theme is that it supports both light color and dark color sets. We developed MAYO to be looked nice in either light color and dark color cases. However, the message (status, warning, error) colors are defined in the Drupal Core and it would not match the dark color sets. So we have created own CSS for the messages for the dark color sets. You need to check the option of 'Use dark message colors' in the theme settings page if you use a dark color set.Using header background image
If you use liquid theme, you should be aware that the header area width expands as the browser's window size is widen.If the header background image you choose is not wide enough, the image repeats, which may make the header area abit ugly. We recommend that you prepare and use the header image at least 1600px wide for the liquid layout. Of course, this is not an issue for fixed layout.
Round corners for sidebar block and node
By using CSS3 and browser specific stylesheet properties, round corners for sidebar blocks and node are supported by major browsers such as Fireforx, Safari, Google Chrome and Opera except for IE. We have decided not to support round corners for IE with Javascript since may slows down the page display. So if you are IE users, please wait for the future version of IE that supports CSS3's border-radius property.Admin theme
We recommend you to use Seven for the admin theme even though MAYO can be used for the admin theme as well as regular site theme.Downloading MAYO
Please download the latest version of MAYO theme from the project page at drupal.org.MAYO Theme
http://drupal.org/project/mayo