|
1
|
|
|
2
|
MAYO - original theme for Drupal 7 from PIXTURE STUDIO
|
|
3
|
|
|
4
|
MAYO 7.x-2.x is the original theme with responsive layout and other responsive features. Also the theme is
|
|
5
|
using SASS/Compass to compile CSS. You will still be able to create a normal sub-theme if you need to customize further without getting envolved with SASS. This version uses <!DOCTYPE html> which starts it down the HTML5 path. Very few of the newer HTML5 elements are used at this point.
|
|
6
|
|
|
7
|
MAYO Responsive (7.x-2.x) borrows from Jeff Burnz and his great work on AdaptiveTheme https://drupal.org/project/adaptivethemeS
|
|
8
|
|
|
9
|
The name "MAYO" 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 ways to customize and create a theme they like.
|
|
10
|
|
|
11
|
MAYO is developed based on the experience of developing PIXTURE theme. However, MAYO fully takes advantage of Drupal 7's color module and advaced theme settings. MAYO is simple but flexible. You can customize the look of the MAYO easily from the theme setting page. It does not require you to have the knowledge of CSS, HTML and PHP.
|
|
12
|
|
|
13
|
|
|
14
|
What can be customized from the theme settings page ?
|
|
15
|
=====================================================
|
|
16
|
|
|
17
|
MAYO's theme settings page provides many options you can select/customize. Below are the summary of what you can customize.
|
|
18
|
|
|
19
|
1. Colors of most of the theme elements (base, page, header, footer, sidebar, node, text and link color of most of the elements), or users can choose a color set from the large number of predefined color sets.
|
|
20
|
|
|
21
|
2. Base font and heading font type (either Serif or Sans-serif) and base font size.
|
|
22
|
|
|
23
|
3. Page layout options such as margins, sidebar layout and width, etc. There are now settings for Big
|
|
24
|
Screen Sidebar Layout, Tablet Sidebar Layout, and Smalltouch Sidebar Layout. Also you can adjust the Media
|
|
25
|
query for each device type, but caution is advised in changing the defaults. Be careful using Pixle Units in
|
|
26
|
the Sidebar Layout settings as it could have undesired behavior on some device sizes. % units seem to work
|
|
27
|
best.
|
|
28
|
|
|
29
|
4. Styles such as menubar styles and round corner for node/sidebar block.
|
|
30
|
|
|
31
|
5. Detail layout of header area contents (logo, site name, slogan, search engine box).
|
|
32
|
|
|
33
|
6. 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).
|
|
34
|
|
|
35
|
7. Watermark of the header area which is added over the header gradation or header background images.
|
|
36
|
|
|
37
|
8. Other miscellaneous options such as toggle to display/not display breadcrumbs.
|
|
38
|
|
|
39
|
9 You can add font resizing control to the header (default is OFF)
|
|
40
|
|
|
41
|
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.
|
|
42
|
|
|
43
|
In addition to the customization features listed above, it supports following drop down menu modules.
|
|
44
|
|
|
45
|
Superfish module <http://drupal.org/project/superfish>
|
|
46
|
Nice Menus module <http://drupal.org/project/nice_menus>
|
|
47
|
|
|
48
|
|
|
49
|
Regions
|
|
50
|
=========
|
|
51
|
|
|
52
|
MAYO supports the following regions.
|
|
53
|
|
|
54
|
+-----------------------------------------+
|
|
55
|
| +-------------------------------------+ |
|
|
56
|
| | Header | |
|
|
57
|
| +-------------------------------------+ |
|
|
58
|
| Menu |
|
|
59
|
| Submenu |
|
|
60
|
| +-------------------------------------+ |
|
|
61
|
| | Banner Top | |
|
|
62
|
| +-------------------------------------+ |
|
|
63
|
| +-------------------------------------+ |
|
|
64
|
| | Top Top Top Top | |
|
|
65
|
| | Column1 Column2 Column3 Column4 | |
|
|
66
|
| +-------------------------------------+ |
|
|
67
|
| +---------+ +-------------------------+ |
|
|
68
|
| | Sidebar | | Highlighted | |
|
|
69
|
| | | | | |
|
|
70
|
| | | +-------------------------+ |
|
|
71
|
| | | +-------------------------+ |
|
|
72
|
| | | | Content | |
|
|
73
|
| | | | | |
|
|
74
|
| | | | | |
|
|
75
|
| | | | | |
|
|
76
|
| | | | | |
|
|
77
|
| +---------+ | | |
|
|
78
|
| | | |
|
|
79
|
| +-------------------------+ |
|
|
80
|
| +-------------------------------------+ |
|
|
81
|
| | Bottom Bottom Bottom Bottom | |
|
|
82
|
| | Column1 Column2 Column3 Column4 | |
|
|
83
|
| +-------------------------------------+ |
|
|
84
|
| +-------------------------------------+ |
|
|
85
|
| | Banner Bottom | |
|
|
86
|
| +-------------------------------------+ |
|
|
87
|
| +-------------------------------------+ |
|
|
88
|
| | | |
|
|
89
|
| | Footer Footer Footer Footer | |
|
|
90
|
| | Column1 Column2 Column3 Column4 | |
|
|
91
|
| | | |
|
|
92
|
| | ----------------------------------- | |
|
|
93
|
| | Footer | |
|
|
94
|
| +-------------------------------------+ |
|
|
95
|
+-----------------------------------------+
|
|
96
|
|
|
97
|
As you can see, it supports multiple columns in the top, bottom and footer regions. You can add up to four columns. The width of a column is automatically calculated based on the number of columns to be used. For example, if you add 3 blocks to the footer, then the width of each column will be 33% of the footer width.
|
|
98
|
Each block in the top and bottom columns regions has its own box style just like sidebar blocks. Height of these blocks are equalized to the tallest blocks within the same region so that they look nice and neat.
|
|
99
|
|
|
100
|
Menu and Submenu regions are for those who uses superfish, nice_menus and other drop down menus (see the next section for more details). Position of the sidebar first and the second can be configured from the theme settings page.
|
|
101
|
|
|
102
|
How to use superfish/nice_menus module?
|
|
103
|
=======================================
|
|
104
|
The primary menu and secondary menu does not support superfish and nice_menus. If you want to use one of them, you need to turn off the primary and secondary menu from the theme settings page first. Then, create and configure menu blocks and then assign them to either the 'menubar' or 'sub-menubar' region of the MAYO theme at admin/structure/block page.
|
|
105
|
When you select menubar type 2 (gloss black image background), the type style is applied only to the menubar, and the sub-menubar still uses original menubar style. This is simply because that having two menubar rows of gloss black background image does not look nice from the design stand point.
|
|
106
|
|
|
107
|
|
|
108
|
Dark color theme
|
|
109
|
================
|
|
110
|
One of the characteristics of the MAYO theme is that it supports both light color and dark color sets. We developed MAYO so that it would look nice either 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.
|
|
111
|
|
|
112
|
|
|
113
|
Header backgroud image
|
|
114
|
======================
|
|
115
|
If you use liquid theme, you should be aware that the header area width expands as the browser's window size is widen.
|
|
116
|
If the header background image you choose is not wide enough, the image repeats, which may make the header area a bit 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.
|
|
117
|
|
|
118
|
|
|
119
|
Round corners for sidebar block and node
|
|
120
|
========================================
|
|
121
|
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<9 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.
|
|
122
|
|
|
123
|
|
|
124
|
Changing default color set
|
|
125
|
===========================
|
|
126
|
Please do not change the default color set (MAYO) in the color/color.inc file. You can change other entries but not the default one. Otherwise, it will mess up the entire color changing scheme.
|
|
127
|
|
