Hi, All,
I apologize in advance that my CSS knowledge is a little shaky (i.e. I took a class years ago), but I am writing to get help customizing the colors for a project using the Foundation (default) theme.
So far, I’ve set the font (with the external stylesheet) and “inspected” the code long enough that I figured out how to change the color of the vertical menu header (see code below), but I am still looking to change the color of what I would call (not sure if they are the proper names): the footer, highlighted menu (“Apprenticeship to Sculpture”), “search”, “prev”, and “next” buttons, and the color of the secondary menu (“Cybele” etc.).
Could anyone help me figure out what all of these are called so that I can change them?
Thanks so much!
Claire
Code thus far:
body{
font-family: ‘Libre Franklin’, sans-serif;
}
body.vertical-menu header {
background-color: #A19183 ;
}
Hi,
You can get the hang of this in the browser Inspect tool with some practice.
Here, I’ve replicated what you have and started looking for that blue colour you want to get rid of:
and then changed them to a more helpful highlight:
By copying the CSS pointers found there, which can get a bit long but is probably the smartest thing to do:
.menu .active > a, .toc-block > ul .active > a, .toc-block ul ul .active > a {
background-color:yellow;
}
.button, [class^="numeric-"] label.numeric-toggle-time.button, [class^="numeric-"] label.numeric-toggle-time[type="submit"], [class^="numeric-"] label.numeric-toggle-time[type="button"], [class*="numeric-"] label.numeric-toggle-time.button, [class*="numeric-"] label.numeric-toggle-time[type="submit"], [class*="numeric-"] label.numeric-toggle-time[type="button"], .site-page-pagination > a, [type="submit"], [type="button"], .button.disabled, .button[disabled], .button.disabled:hover, .button[disabled]:hover, .button.disabled:focus, .button[disabled]:focus {
background-color:red;
}
body.vertical-menu {
background-color:blue;
}
The secondary menu links (I assume is what you mean) are just coloured by “a” so any colour you set here will affect all in-text links, including the breadcrumb at the top of the pages:
a {
color:green;
}
Unless you want to be very specific and only select
.sub-menu .vertical.menu li a {
color:green;
}
Thank you, so much! I really appreciate the help.
