DWUser.com

Empowering Web Creativity

MaxiMenu KnowledgeBase – Advanced CSS Customizations

If you're an advanced user and are comfortable with editing CSS (or SCSS), you can make advanced customizations to a menu's CSS code.  This allows for modifications beyond the options offered in the Styles Panel, such as specifying non-standard fonts.  Please note that accidentally making errors while editing the CSS can cause a menu's styles to become corrupted, sometimes requiring the theme to be reset.  It's recommended that you only edit the CSS if you're familar with making code modifications.

To enable editing of a menu's styling source code, select File > Advanced Preferences... in the editor.  In the Advanced Preferences dialog, set
Allow Editing of Style Source Code to Yes:

Advanced preferences

Once you have updated this option, you'll be able to access a Manually Edit Style Code... button at the bottom of the Styles Panel:

Edit button

If you accidentally introduce any errors, a warning will be shown when you close the source editing window.  In this case, re-enter the code view and correct any mistakes.

Example: Using a Custom Font

Suppose you want to use a custom font that you've embedded in your page, such as Brandon Grotesque from Typekit.  Here's an example of how the style source code might appear:

/*TEMPLATENAME:Macro*/
  /*data-mm2effect="{effect:'fade', direction:'up', duration:130}"*/
  $theme-main: #4f6993;
  $theme-hover: #2C3E50;
  $theme-text: #EEE;
  $theme-text-hover: #FFF;
  $theme-use-slight-shadow: true;
  $theme-font-family: Verdana,Arial,Helvetica,sans-serif;
  $theme-font-size: 11px;

In this example, you would want to update the $theme-font-family variable:

/*TEMPLATENAME:Macro*/
  /*data-mm2effect="{effect:'fade', direction:'up', duration:130}"*/
  $theme-main: #4f6993;
  $theme-hover: #2C3E50;
  $theme-text: #EEE;
  $theme-text-hover: #FFF;
  $theme-use-slight-shadow: true;
  $theme-font-family: brandon-groteque,sans-serif;
  $theme-font-size: 11px;
          

Note that custom fonts may not always appear correctly until you preview the entire page in a browser.

Example: Adjusting Font Size and Style

Suppose you want to have separate font sizes or styles for the top- and submenu-level menu items.  To make this adjustment, first locate the lines that control the top-level menu's text styles:

  $top-title-font: $baseFont;
$top-title-size: $base-title-size;
...
$top-desc-font: $baseFont;
$top-desc-size: $base-desc-size;

The first two lines control the title styles for top-level buttons; the second two lines control the top-level subtitle styles (subtitle text is less commonly used in a menu).  Suppose you wanted to make the title text larger – say, 15px – and bold.  Here's the change you would make:

  $top-title-font: bold $baseFont;
$top-title-size: 15px;
...
$top-desc-font: $baseFont;
$top-desc-size: $base-desc-size;

If you want italics or bold italics, use italic or bold italic instead of bold before the $baseFont variable.  In the same way, these lines control the submenu styles:

  $sub-title-font: $baseFont;
$sub-title-size: $base-title-size;
...
$sub-desc-font: $baseFont;
$sub-desc-size: $base-desc-size;

They can be changed in the same manner.

We're Here to Help!

If you have any questions about this article or about using MaxiMenu, please let us know by opening a support ticket below.

 
Log In
  Reset Password...
 
Why create an account?
  • Manage support tickets and purchases
  • Access to free extensions
  • Special discounts and offers
  • Access to member-only forums
Create Account
100% Spam-Free Guarantee
(Optional)
 

Use the following form to ask a question or submit a support request. An appropriate staff member will reply as soon as possible (usually within a few hours).
Contact Us / Create Support Ticket
 
To attach files, you must Sign Up or Log In.

You have no items in your basket.  Featured products:

XML Flash Slideshow v4 Flash Audio Kit for Dreamweaver

Home | Customer Satisfaction / Refund Policy | Privacy Policy | jQuery Slider | Top of Page

© 2003-2018 DWUser.com / Magnetic Marketing Corp.  All rights reserved.