Modify Header Menu Custom Template
Permalink
I want to change the font size of the Header Menu Custom Template. I have searched forums and Google for hours. Can someone tell me where to find the font setting?
I can change the font from the main Edit page interface. But the font size does not change.
Thanks in advance.
I can change the font from the main Edit page interface. But the font size does not change.
Thanks in advance.
Just found this post and I was trying to do the same thing. Where you have suggested "create your own template by copying it to 'public_html/blocks/autonav/templates/your_template_name.php" I think should be "create your own template by copying it to 'public_html/blocks/autonav/templates/header_menu.php" In other words, just keep the same file name that you copied. That worked for me.
Adajad,
Thanks for your speedy and helpful reply. I have tried many variations on the suggestion you made and none have made any change at all. I am baffled. Attached is my main.css file.
Thanks for any help,
Walt
I am running 5.6.0.2 on Ubuntu server 12.04 LTS
Thanks for your speedy and helpful reply. I have tried many variations on the suggestion you made and none have made any change at all. I am baffled. Attached is my main.css file.
Thanks for any help,
Walt
I am running 5.6.0.2 on Ubuntu server 12.04 LTS
This sort of thing is very easy to find using the web developer tools available with Chrome or Firebug (a Firefox plugin).
If you post your site URL I can take a quick look and tell you where you need to edit the font size.
John
If you post your site URL I can take a quick look and tell you where you need to edit the font size.
John
John,
Thanks for taking a look. I did just now at your suggestion install firebug but I still don't know where to look.
We arehttp://www.msgkmg.com
Thanks,
Walt
Thanks for taking a look. I did just now at your suggestion install firebug but I still don't know where to look.
We arehttp://www.msgkmg.com
Thanks,
Walt
I believe you can find some videos on YouTube on the basic usage of FireBug.
So, I'd start with changing line 29 in /themes/default/main.css:
You can of course add something like this below:
Reload the page in your browser. You may need to clear the cache if you don't see the change immediately.
Hope that helps,
John
So, I'd start with changing line 29 in /themes/default/main.css:
font-size: 13px; to font-size: 20px;
You can of course add something like this below:
font-weight: bold;
Reload the page in your browser. You may need to clear the cache if you don't see the change immediately.
Hope that helps,
John
Hello John,
Thanks for the reply. I am twice as baffled. The line number you refer to has no bearing to my main.css file. I have looked at the main.css in all my files and there is no reference to font-size? I am hoping to find that kind of a line. I have a almost completely unmodified installation.
I am sitting with the server at my feet. I have all the root access I need. How in the world can I not find that line. I am using Kate and or Bluefish to show me the line numbers.
Thanks for any additional leading. I am stumped.
Walt
Thanks for the reply. I am twice as baffled. The line number you refer to has no bearing to my main.css file. I have looked at the main.css in all my files and there is no reference to font-size? I am hoping to find that kind of a line. I have a almost completely unmodified installation.
I am sitting with the server at my feet. I have all the root access I need. How in the world can I not find that line. I am using Kate and or Bluefish to show me the line numbers.
Thanks for any additional leading. I am stumped.
Walt
From Firefox and a view source of your home page, line 37 shows:
<link rel="stylesheet" media="screen" type="text/css" href="/index.php/tools/css/themes/default/main.css" />
Clicking on that link brings up your main.css file, line 26:
That's the font-size:13px; that I'm talking about.
The line #'s may not exactly match the actual source files, but should get you in the general area...
If you have shell access, run this from your /themes directory to show you anywhere 13px shows up in any file:
<link rel="stylesheet" media="screen" type="text/css" href="/index.php/tools/css/themes/default/main.css" />
Clicking on that link brings up your main.css file, line 26:
#page #header ul.nav-header li{float:left; padding:2px 0px; margin-left:16px; margin-bottom: 0px; color:#999; font-size:13px; margin-top:0px }That's the font-size:13px; that I'm talking about.
The line #'s may not exactly match the actual source files, but should get you in the general area...
If you have shell access, run this from your /themes directory to show you anywhere 13px shows up in any file:
fgrep -r 13px *
Thanks for searching and for teaching me how to use firebug. Very very handy.
However changing that font did not do anything. I have grepped all around looking for the size and for the nav-header controller.
Could there be a height restriction somewhere that forces the font to fit inside a certain dimension? If the height is not big enough for the font then it gets automatically reduced?
Thanks for taking the time to help.
Walt
However changing that font did not do anything. I have grepped all around looking for the size and for the nav-header controller.
Could there be a height restriction somewhere that forces the font to fit inside a certain dimension? If the height is not big enough for the font then it gets automatically reduced?
Thanks for taking the time to help.
Walt
You have an error in your main.css (supplied above) on line 35.
Should be:
Should be:
ul.nav-header{ font-family:arial, sans-serif !important; font-size:60px !important;}
Hello adajad,
Thanks for the tip. I have tried many many variations on the theme you sent. For some reason not a single one of them makes a difference. Something else is overriding this size. Could there be a height restriction somewhere that forces the font to fit inside a certain dimension. If the height is not big enough for the font then it gets automatically reduced.
Below are some of the things I tried. I tried them all again with the page header clarification.
Thanks for the tip. I have tried many many variations on the theme you sent. For some reason not a single one of them makes a difference. Something else is overriding this size. Could there be a height restriction somewhere that forces the font to fit inside a certain dimension. If the height is not big enough for the font then it gets automatically reduced.
Below are some of the things I tried. I tried them all again with the page header clarification.
ul.nav-header{ font-family:arial, sans-serif !important; font-size:60px !important;} ul.nav-header{ font-family:arial, sans-serif; !important; font-size:60px; !important;} ul.nav-header{ font-family:arial, sans-serif; !important; font-size:60px !important;} #page #header ul.nav-header{ font-family:arial, sans-serif !important; font-size:60px !important;}
From a fresh 5.6.1.b4 install directory at the shell:
Gives these results:
If changing the one in main.css to font-size:20px !important; doesn't change anything, either the cache needs to be cleaned (best to disable all caching including override cache during development), or you have code somewhere else changing it.
Check for packages/overrides here:
http://www.msgkmg.com/index.php/dashboard/system/environment/info/...
If you can't find anything by then I would suggest a clean install :(
fgrep -r 13px themes/default/*
Gives these results:
themes/default/main.css:#page #header ul.nav-header li{float:left; padding:2px 0px; margin-left:16px; margin-bottom: 0px; color:#999; font-size:13px; margin-top:0px } themes/default/typography.css: /* customize_body */ font: normal normal 13px Arial; /* customize_body */ themes/default/typography.css:h5{ font-size:13px; line-height:16px }
If changing the one in main.css to font-size:20px !important; doesn't change anything, either the cache needs to be cleaned (best to disable all caching including override cache during development), or you have code somewhere else changing it.
Check for packages/overrides here:
http://www.msgkmg.com/index.php/dashboard/system/environment/info/...
If you can't find anything by then I would suggest a clean install :(
John,
Thanks for your help. I will see what happens after the upgrade to 5.6.1. Other than that I will do a clean install.
Thanks again,
Walt
Thanks for your help. I will see what happens after the upgrade to 5.6.1. Other than that I will do a clean install.
Thanks again,
Walt
If clearing the cache (both site and browser) doesn't do it, then you can add inline styles to your template instead (and then again clear your caches). Inline styles always take precedence.
Thanks adajad,
If the upgrade reinstall of 5.6.1 does not help things then I will start experimenting with inline styles.
Walt
If the upgrade reinstall of 5.6.1 does not help things then I will start experimenting with inline styles.
Walt
The custom template you are referring to can be found in 'public_html/concrete/blocks/autonav/templates/header_menu.php'. You can create your own template by copying it to 'public_html/blocks/autonav/templates/your_template_name.php' and edit the template to your liking (http://www.concrete5.org/documentation/how-tos/designers/change-how... ).
Now, for changing the font in the header menu you can add just one simple line of code in your themes main.css file. After looking in the autonav template you can see the menu has a class called 'nav-header', so you can add your own styling to that class (in main.css):
That is the easiest way (!important added to be sure your style isn't overridden somewhere else).
You can also add inline styles in the template file or create a view.css in a slightly different folder structure in the templates folder. Let me know if you want me to expand on that topic, or if the above is sufficient.