Changes to the font for Education Theme Navigation Buttons

[GJudy]

I would like to make changes to the education theme navigation font on the menus.

I would like to increase the size of the font.

I would like to make it bold

I would like to change the orange default. f47529 to something lighter. Maybe ffe500. Even a silver or light gray as a contrast with the white would work for me. If I knew how to change it at all, I would experiment with different colors.

I find the orange doesn't show up on most of the colors styles. It does show up pretty well for black, but that is all.

http://websiteforu.barjd.com if you need to see the theme in action.  I really like this theme and have been complimented on the crisp, clean look.

Do I use Genesis Simple Hooks or the Custom CSS plugin?  I have trouble getting any satisfactory action with the hooks.

Thank you for your help.

[CharlieL]

Just open the stylesheet often namned style.css (in the theme-folder). It should be opened in a wordprocessor like Notepad, Notepad++ or something alike. NOT in Word or OpenOffice Writer because they will add a lot of crap to the code that will destroy your file. To be on the safte side it is always good to start with a backup of the file (save a copy in a BKP-folder).

In the CSS you will find different commands in a certain order, often with an overview at the beginning of the stylesheet.

Look for the sections with Primary and Secondary navigation. Or make a search in the document for "menu". That is a good way to not miss any command. As long as you change colors and backgrounds you are pretty safe. Even moderate changes of font sizes and font-families will usually work well. But if you begin to change widths, heights, margins and paddings you can easily mess upp the outcome.

Menues are a tricky thing because there are so many different modes in the interaction with the user, but with a systematic approach you will succeed.

One trick that I often use is to add some clear background-colors like red, blue, green, orange and so to those commands that I think will affect the part I am working on. Then it is much easier to see what the commands really are targeting and how different DIVs affect each other. You may add the color to the end of the code with something like this:

.menu-primary {
border-bottom: double #ddd;
border-top: double #ddd;
background-color: red; /*added by me as a mark*/
}

When you are pleased with what you got you should delete the last line, with the background-color, if you not ment use it in the layout.

And always remember, if you are working with a webhost outside your own computer, that you have to send the stylesheet via FTP to your host for every single change. You also have update the browser in order to see the outcome. Therefore it might be easier to make the changes in the stylesheet on the server.

If questions arise on what the certain codes stands for you may consult this page: <a href="http://www.w3schools.com/css/default.asp " title="W3Schools.com"> W3Schools.com</a>

Text within these signs /*comment*/ will be omitted when a web browser reads the code, so there you may add your own notes.

Happy Coding!

 

[GJudy]

Thank you. These tips worked great.  I chose  #FFCC00, more of a gold shade and enlarged the font by one point.  A couple little things that seem to work for me.

[CharlieL]

Nice to hear it worked for you. Now, you can easily go further with CSS. It is fun even if it sometimes can be very challenging, but there are tons of tutorials out there. So you are not without help.

Good luck!

[Michael]

Thanks for this thread.  I am having the same issue as Gjudy in that I am trying to change the font colors in my primary nav bar.  I am also using the Education child theme.

I have been able to change the color of the font when you "hover" over the menu items and the current menu page font color and the font sizes for the menu items.  But I can't find that lighter color that is the main color (without hovering over), in order to make it a bit darker to stand out better on the light background.

Charlie, I tried what you suggested and could not find anything in the css that looked remotely like your suggested syntax and was hoping you might be able to take a look and give me some guidance.

The website is http://www.visibility911.org

I've also got another thread open on how to code the upper right and left of the header to have a repeating image at the header like the bg-top.jpg file just below the header.  Any suggestions for help with that would be great too!

Thanks!

[CharlieL]

Hi michaelwolsey,

Well, I will try to help. As I don´t have the Education-theme installed I can´t directly see what happens to the Theme. Now, I myself is working on the Eleven40-theme, but I can open the CSS-file for the Education-theme. I can also get some help of the Firebug-plugin for Firefox and for Chrome there aslo is a code-checker built-in, when you right-click on the page ( I don´t know the English name of it). So please, keep that in mind that my advice is based on other tools.

First your menu. Look for this code:

<code>
.menu-primary a, .menu-secondary a {

    color: #FFFFFF !important;  /*Change to color: #000000 !important; That is six zeros, which gives you black, or use any color you may want*/
    display: block;
    position: relative;
    text-decoration: none;

} </code>

The !important property will always be applied no matter where that rule appears in the CSS document. So that´s a way to override later code in the CSS. CSS is said to cascade as the later properties in the stylesheet will replace the former all the time. Sometimes the construction makes that you still want to keep a certain property by adding: !important. That was done in this case and it was therefore easier to discover.

The other question is about the background-color in the header. Look for this code in the style-sheet:
<code>
#header {

    background-color: #000000 !important; /*this one could be changed to your hearts desire. #CCD1D5 is pretty close to your header image.*/
    background-position: center top !important;
    border-top: 4px solid #EEEEEE;
    margin: 0 auto;
    min-height: 200px;
    width: 100%;

</code>

However, it you want to get exactly the same color as you have in the center of the header, then you should make an image as small stripe of the full height of your excisting image, and you get the correct background-color. Say you call this stripe "header-bg.png" then the line should be changed to this:
<code>
background: url(images/header-bg.png) repeat-x;
</code>
In order to make it work you have to FTP you image-stripe into the images-folder in you themes-folder.

I did accidentally notice that your image in the header is called through http, which to me seems to be an superflous way about. I would have preferred to put the image into the images-folder in the themes folder (where also the style.css is located), which has to be done via FTP. That should make the server´s job a bit easier, and therefore saves energy and bandwidth.

<code>
#header {

    background: url("http://www.visibility911.org/wp-content/uploads/2012/12/vis911webpageheader.jpg") no-repeat scroll 0 0 transparent;
    /*background: url("images/vis911webpageheader.jpg") no-repeat scroll 0 0 transparent;*/

</code>

To me things like the header-image and such must not be available to people that will later contribute with content through the WP-backend.

Hope this will help you.

[Michael]

Hey Charlie-

Thank you so much for your help!  I believe I almost have this problem solved.  The fonts in the nav bar are fixed and I have been working for the past couple of hours on that repeating image in the header.  I am having a minor snag and I am so close...just haven't been able to find that one little part of the code that will fix.

Please view the site at http://www.visibility911.org

As you can see, I have the repeating image installed in the header area and everything looks great, with one minor problem....the repeating background image is 8 or 10 pixels too high and it doesn't line up with the header.

I read what you said about the header image and tried to follow these directions but cannot get the header art to display using the .css file and the code you suggested.  I originally installed the header image through the WordPress back end, which is how I have always done it.  I tried disabling the header image in the WP back-end and installing the header code you suggested (and several variations) in three dozen different combinations and locations to no avail.  I am positive this is a very minor problem and if I can solve this, I think this whole issue can be put to rest.

Thank you again Charlie!  You have been a great help.

Michael

[CharlieL]

Hi Michael,

When I look at your website I get the impression that the only problem is your backgrund-image. It is not too high but a few pixels to low. If you look at the upper edge there is some kind of frame or edge with a darker blue line and a small shadow below it. That part is missing on the background-image.

Usually when I have to make a image that exactly corresponds to another image I use the original and save a copy of it with a new name. If you use the name you already have for the existing background-stripe you must not change in the CSS any more. Just replace the old image with the new one. But you should crop it to a size that is suitable for the purpose. Say you crop the left end. Take the full height and a width, say from the left edge to the gray background. Mark that part and make it the new canvas size, so the main part is cut away. Then you get an exact copy of the background. Send the file via FTP to the images folder.

As an example I give you my path to the folder based on my localhost and the eleven40 theme. You have to translate this to your setup.
E:\xampp\htdocs\wp-content\themes\eleven40\images
Otherwise it seems to work well. So it is just a minor correction.

Hope this helps.

[Michael]

Thank you again Charlie!  I apologize I didn't make it here before you responded but I figured it out using FireBug.  Let me explain what I had to do.  My image was fine because I took the slice directly off the header itself.

First thing I had to do was remove all the bad code I had put in that got me where I was.  Then, using this site from the Education Theme gallery,

http://www.faithchristianacademy.net/

I examined their code because they had used the same theme and essentially done what I needed to do with their header.  Looking over their code, I discovered that they called the image in a wrap, so I did exactly what they did and substituted my specific info-

#wrap {
background: url("http://www.visibility911.org/wp-content/themes/education/images/black/header-bg.png") repeat-x scroll center top transparent;
margin: 0;
padding: 0;

}

Bada bing....worked like a charm.  Thank you for guiding me, I couldn't have done it without your help!  Have a great day!

Michael

[CharlieL]

Michael,

Good you found the cause. CSS can be a challenge to read off, because different properties can greatly change the outcome. Cause and effect are not always obvious. But you solved it and that was the task.

Enjoy the result!

[aprelip]

How do I change the width of the nav bar?

Site address: http://itc.arc.losrios.edu

I would like to add more links to the nav bar without stacking the design.  I would like the "Home" to be right next to the "American River College..."

Thank you.

 

[Author]

Posts