Customize the main menu in the adaptive theme

Category: 

  • Question

gianinch@mit.edu

Hi all,
I would like to customize the appearance of the main menu (and in general of other blocks) in the MIT adaptive theme. I found in this community that the way to do that is using the CSS Injector but I don't understand what css file I need to modify to customize the theme as I want.

12/11/17

amrichar@mit.edu

Hi there! The CSS injector is the right way to go. You don't modify the CSS file directly, rather you override it with your own CSS. So you are looking at it blind and rewriting your own CSS code from scratch essentially.

One thing that helps me is by using the Inspector in Firefox (Ctrl+shift+c while you're on a page). You can click "inspect" on an element and it will show you what CSS is currently modifying it. For example, on this site, the inspector tells me the CSS for the bar is called navigation.css and has 93 rules. I can look through that code and modify the parts I'd like to. For example, if I want to change the blue color to white, I find this line:
#header-wrap a:link,
#header-wrap a:visited {
color: #3bbefc;
}
to change it, I write this into my CSS injector:

#header-wrap a:link,
#header-wrap a:visited {
color: #FFFFFF;
}

and have it apply to all pages. It requires a lot of trial and error, but I encourage you to use the developer tools to make things easier.

3/6/18