Bevel top menu
-
Two quick questions. I would like the text on the top menu to be beveled. Is it possible to do that? Also, I tried changing the font on the menu under the following code:
#pagenav a {
color:#fff!important;
text-decoration:bold!important;
text-transform:uppercase;
font-size:12px;
font-family:Times;
border:none;
}… but the font remained arial or some other font of the sort. Am I doing this wrong?
Thanks!
The blog I need help with is: (visible only to logged in users)
-
I’m seeing a serif font such as Times New Roman in the navigation, is that what you wanted?
By beveled, do you mean shadowed? With serif fonts in smaller sizes that doesn’t work out too well and typically makes things difficult to read. Also give you have a dark background with white lettering, any text shadow is not going to stand out. You would have to use a medium grey color for the shadowing so that there is contrast between both the white and the very dark gray backgrounds.
-
Could you take a look at this page and see how the menu is set up?
http://www.proudthemes.com/demo/daily-headlines/
It is what I really want to accomplish.
On my computer, the menu font looks like an arial or an thin font, but not like a Times New Roman.
-
The menu on the link I posted before also seems to have a border. Is that doable on my menu?
-
Arial is a sans-serif font, like you see here in this reply I’m making. Serif is like the font you see in “leave a reply” right above the reply text box at the bottom of this thread.
On the font on that site, they are using a text shadow in black which of course only shows up when you hover over it with your mouse (red background). This would be how to accomplish that on your site.
#pagenav a { text-shadow: 1px 1px #000000; }To put a border on the top of the individual tabs to make it sort of look 3d, try this and you can adjust the thickness and the color to suit.
#pagenav li { border-top: 2px solid #CCCCCC; } -
One note on text shadows. Internet Explorer clear up through and including IE9 does not support text shadows so no one using Internet Explorer is going to see your text shadows. All other browsers for at least a couple years have supported them, and some even longer.
-
-
-
On this same topic, could I achieve the same look of the navigation menu on the widget that shows the top or most recent posts?
-
Yes, you can achieve something similar using the background images you have in the top nav as below.
#recent-posts-4 ul li a:link {
text-shadow: 1px 1px #000000;
background: url(“http://realagenda.files.wordpress.com/2011/02/darkgrey1.jpg”) repeat scroll center center #000000;
color: #FFFFFF;
}
#recent-posts-4 ul li a:hover {
background: url(“http://realagenda.files.wordpress.com/2011/02/red1.jpg”) repeat scroll center center #FF0000;
}` -
It worked nicely. However, for some reason the nav menu now does not display the red when I pass the mouse over or click on a button. Is there a way to correct this?
Thanks!
-
-
no, I saw the issue on the preview I didn’t actually save the changes. I just tested it.
-
The preview can sometimes not be completely accurate. The stuff we added above would not cause the top menu to get wacky since we specifically targeted that particular widget.
-
Just to make sure though, use the code below. I had missed the opening backtick.
#recent-posts-4 ul li a:link { text-shadow: 1px 1px #000000; background: url("http://realagenda.files.wordpress.com/2011/02/darkgrey1.jpg") repeat scroll center center #000000; color: #FFFFFF; } #recent-posts-4 ul li a:hover { background: url("http://realagenda.files.wordpress.com/2011/02/red1.jpg") repeat scroll center center #FF0000; } -
It worked out beautifully. I will try to figure out how to use this same code to also modify the appearance of the links widget.
-
-
Unsuccessful attempt. I was not able to give the Blogroll the look you helped me with. If you have a minute or two, I would appreciate your assisstance.
-
First off, there are a couple fixes you need to make in your CSS. for the recent posts stuff, the link to the red image has an extra .jpg at the end, and the grey does not have the .jpg at the end. I suspect one of those infamous copy and paste errors. :-)
Use the exact same code, but change #recent-post-4 to #linkcat-119806. I’ve given the code below.
#linkcat-119806 ul li a:link { text-shadow: 1px 1px #000000; background: url("http://realagenda.files.wordpress.com/2011/02/red1.jpg") repeat scroll center center #000000; color: #FFFFFF; } #linkcat-119806 ul li a:hover { background: url("http://realagenda.files.wordpress.com/2011/02/darkgrey1.jpg") repeat scroll center center #FF0000; } -
@realagenda
Excuse me please.@TSP
G’day to you. :) Will you check here please? https://en.forums.wordpress.com/topic/reducing-space-between-photo-widgets-structure-theme?replies=5
- The topic ‘Bevel top menu’ is closed to new replies.
WordPress.com Forums 