Increase Drupal Admin Menu font size in different ways

I love the Drupal Admin Menu module (in fact, I almost can't live without it!), but I guess I'm getting old because I find the microscopic font hard to read ;) Others have this problem as well, but it hasn't been made configurable yet, so here are your options:

0. Use the Admin Menu Toolbar

Admin Menu comes with 2 options. If you just enable the main Admin Menu module, then the font is small. If you enable the Admin Menu Toolbar module, then the font is bigger and matches the core Toolbar better. The Admin Menu Toolbar module used to be kind of buggy but I tried it recently and it was working pretty well. Just make sure to disable the core Toolbar module afterwards or you'll have 2 toolbars.

Pros:

  • Easy to do.
  • No CSS required.

Cons:

  • Requires enabling an additional module. (It really should be the default configuration!)

1. Change the font size in the browser

Most browsers let you adjust your font size. For example, Control + will increase your font in Firefox, Chrome, and others.

Pros:

  • Easy to do.
  • No CSS required.

Cons:

  • Must repeat steps when starting new browser windows.
  • Other things on the page increase as well which may or may not be desirable.

2. Modify your custom theme

If you have a custom theme and only need the Admin Menu to be adjusted for that theme only, you can add some CSS to your theme like:


#admin-menu-wrapper a {
font-size:16px;
}

and then refresh your caches. Where the CSS goes depends on your theme.

Pros:

  • Change will affect any page using that theme.

Cons:

  • Requires a CSS change.
  • You must know how to update your theme.
  • Change will ONLY affect any page using that theme. Other themes are not affected.

3. Modify a custom module

If you have a custom module and want the Admin Menu to be adjusted for all themes, you can add some CSS to your module as follows:

Create mymodule.css

Put this in your mymodule.css file:


#admin-menu-wrapper a {
font-size:16px;
}

Update your module code

Update mymodule.module to add the css file upon init:


function mymodule_init() {
drupal_add_css(drupal_get_path('module', 'mymodule') . '/mymodule.css');
}

and then refresh your caches.

Pros:

  • Change will affect any page using any theme.

Cons:

  • Requires coding.
  • You must know how to update your module.

4. Use CSS Injector

If you want the Admin Menu to be adjusted for all themes without a custom module, you can use the CSS Injector module as follows:

  1. Install and enable CSS Injector
  2. Clear the cache
  3. Go to: [yourdomain]/admin/config/development/css-injector
  4. Click create a new rule
  5. Add a Title (e.g. Admin Menu Font Size Adjustment) and the CSS, e.g.


    #admin-menu-wrapper a {
    font-size:16px;
    }

  6. Click the Save button.

Pros:

  • Change will affect any page using any theme.
  • No custom theme or module is required.

Cons:

  • Requires an extra module.

5. Get a magnifying glass!

:P

Pros:

  • Low tech.

Cons:

  • You might lose it.

Cheers and happy eyes!

Comments

How about using Admin Menu

How about using Admin Menu toolbar style module that comes with admin menu ???

Seems to work (without overlay)

If the overlay is enabled and you are on the overlay, it isn't behaving, but I don't like using the overlay anyhow... so I'll try this. Perhaps I will update the post to be "How to add custom CSS to your Drupal site in different ways" rather than being specific to Admin Menu.

Will try again

When I used it awhile back (a year ago?), it was buggy. I will try again!

At nr. 3. you probably want

At nr. 3. you probably want to use mymodule.css and drupal_add_css()

Yes!

Sorry... I wrote it up too quickly and had javascript on my brain. All fixed, thanks :)

use Chrome/Firefox Stylish

use Chrome/Firefox Stylish extension.

Will try it!

Sounds cool... will try it.

I'm a Speaker at DrupalCon Portland