Project

General

Profile

Paste
Statistics
| Branch: | Revision:

root / drupal7 / sites / all / themes / mayo @ bfb52287

Name Size Revision Age Author Comment
  color d7f58da2 about 10 years Florent Torregrosa Switch MAYO on version 7.x-2.0 to be adaptative.
  css f066bdb5 over 9 years Assos Assos Weekly update of contrib modules
  images d7f58da2 about 10 years Florent Torregrosa Switch MAYO on version 7.x-2.0 to be adaptative.
  inc d7f58da2 about 10 years Florent Torregrosa Switch MAYO on version 7.x-2.0 to be adaptative.
  js d7f58da2 about 10 years Florent Torregrosa Switch MAYO on version 7.x-2.0 to be adaptative.
  layouts bfb52287 over 9 years Assos Assos Weekly update of contrib modules
  sass f066bdb5 over 9 years Assos Assos Weekly update of contrib modules
  templates bfb52287 over 9 years Assos Assos Weekly update of contrib modules
LICENSE.txt 17.7 KB d7f58da2 about 10 years Florent Torregrosa Switch MAYO on version 7.x-2.0 to be adaptative.
README.txt 8.02 KB 578c6d8f about 10 years Assos Assos Weekly update of contrib modules
config.rb 948 Bytes d7f58da2 about 10 years Florent Torregrosa Switch MAYO on version 7.x-2.0 to be adaptative.
logo.png 3.44 KB f7a2490e over 10 years Assos Assos git mv htmltest drupal7
mayo.info 5.26 KB bfb52287 over 9 years Assos Assos Weekly update of contrib modules
screenshot.png 77.4 KB f7a2490e over 10 years Assos Assos git mv htmltest drupal7
template.php 7.55 KB d7f58da2 about 10 years Florent Torregrosa Switch MAYO on version 7.x-2.0 to be adaptative.
theme-settings.php 45.1 KB bfb52287 over 9 years Assos Assos Weekly update of contrib modules

Latest revisions

# Date Author Comment
bfb52287 02/04/2015 10:41 PM Assos Assos

Weekly update of contrib modules

f066bdb5 12/17/2014 10:52 PM Assos Assos

Weekly update of contrib modules

578c6d8f 06/18/2014 10:38 PM Assos Assos

Weekly update of contrib modules

d7f58da2 05/16/2014 10:53 PM Florent Torregrosa

Switch MAYO on version 7.x-2.0 to be adaptative.

f7a2490e 02/13/2014 03:56 PM Assos Assos

git mv htmltest drupal7

View revisions

README


MAYO - original theme for Drupal 7 from PIXTURE STUDIO

MAYO 7.x-2.x is the original theme with responsive layout and other responsive features. Also the theme is
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.

MAYO Responsive (7.x-2.x) borrows from Jeff Burnz and his great work on AdaptiveTheme https://drupal.org/project/adaptivethemeS

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.

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.

What can be customized from the theme settings page ?

MAYO's theme settings page provides many options you can select/customize. Below are the summary of what you can customize.

  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.

  2. Base font and heading font type (either Serif or Sans-serif) and base font size.

  3. Page layout options such as margins, sidebar layout and width, etc. There are now settings for Big
    Screen Sidebar Layout, Tablet Sidebar Layout, and Smalltouch Sidebar Layout. Also you can adjust the Media
    query for each device type, but caution is advised in changing the defaults. Be careful using Pixle Units in
    the Sidebar Layout settings as it could have undesired behavior on some device sizes. % units seem to work
    best.

  4. Styles such as menubar styles and round corner for node/sidebar block.

  5. Detail layout of header area contents (logo, site name, slogan, search engine box).

  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).

  7. Watermark of the header area which is added over the header gradation or header background images.

  8. Other miscellaneous options such as toggle to display/not display breadcrumbs.

9 You can add font resizing control to the header (default is OFF)

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.

In addition to the customization features listed above, it supports following drop down menu modules.

Superfish module http://drupal.org/project/superfish
Nice Menus module http://drupal.org/project/nice_menus

Regions

MAYO supports the following regions.

+-----------------------------------------+
| +-------------------------------------+ |
| | Header | |
| +-------------------------------------+ |
| Menu |
| Submenu |
| +-------------------------------------+ |
| | Banner Top | |
| +-------------------------------------+ |
| +-------------------------------------+ |
| | Top Top Top Top | |
| | Column1 Column2 Column3 Column4 | |
| +-------------------------------------+ |
| +---------+ +-------------------------+ |
| | Sidebar | | Highlighted | |
| | | | | |
| | | +-------------------------+ |
| | | +-------------------------+ |
| | | | Content | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| +---------+ | | |
| | | |
| +-------------------------+ |
| +-------------------------------------+ |
| | Bottom Bottom Bottom Bottom | |
| | Column1 Column2 Column3 Column4 | |
| +-------------------------------------+ |
| +-------------------------------------+ |
| | Banner Bottom | |
| +-------------------------------------+ |
| +-------------------------------------+ |
| | | |
| | Footer Footer Footer Footer | |
| | Column1 Column2 Column3 Column4 | |
| | | |
| | ----------------------------------- | |
| | Footer | |
| +-------------------------------------+ |
+-----------------------------------------+

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.
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.

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.

How to use superfish/nice_menus module?

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.
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.

Dark color theme

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.

Header backgroud 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 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.

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<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.

Changing default color set

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.

Also available in: Atom