|
#1
Feb 13, 2012, 07:36 PM
|
|
Some people express a problem with navigation on my site: http://www.theblogfarm.com/
So to assist I am thinking maybe I could add a title of sort, at least on the category menu bar, to the left of the drop down menus. Something along the lines of:
Read Articles -> Activities & Interests - Home & Family Life - Our Human Condition - The World Around Us - Writing & Book Reviews
How could I go about doing this?
|
#2
Feb 13, 2012, 08:25 PM
|
|
|
|
10,176 posts · Jul 2009
Central New York State USA
|
|
Just add a custom menu item in Appearance>Menus and use CSS to make it look like it isn't a menu item. You can add a class to the menu item (I added menulabel) in the menu setting and then add something like using the proper color.
HTML Code:
.menulabel a, .menulabel a:hover {
background: #5a85c1 !important;
cursor: default;
}
You of course could just add a div with the text you want and use CSS to position.
__________________
~Larry ( CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
|
#3
Feb 13, 2012, 08:48 PM
|
|
Ata 3.5.1
Thanks Larry but... I am not using custom menus, I am using the old category menu bar. It has been customized using html/css inserts. Is there any way to simply add plain text to the bar?
#menu2 {
border: solid 1px #4D5232 !important;
background: url(/wp-content/themes/atahualpa351/images/sidebarbg04.jpg) repeat top left;
box-shadow: 0 0 10px #333;
-moz-box-shadow: 0 0 10px #333;
-moz-border-radius:5px;
-khtml-border-radius: 5px;
-webkit-border-radius:5px;border-radius: 5px;
}
div#menu2 ul.rMenu {
background-color: transparent;
}
div#menu2 ul.rMenu li {
background-color: transparent;
}
div#menu2 ul.rMenu li.current_page_item a:link,
div#menu2 ul.rMenu li.current_page_item a:active,
div#menu2 ul.rMenu li.current_page_item a:hover,
div#menu2 ul.rMenu li.current_page_item a:visited,
div#menu2 ul.rMenu li:hover {
background: url(/wp-content/themes/atahualpa351/images/sidebarbg04.jpg) repeat top left;
}
div#menu2 ul.rMenu li a:hover,
div#menu2 ul.rMenu li.sfhover {
background-color: transparent;
}
#menu2 .rMenu-hor a {
font-weight: bold !important;
}
.rMenu-ver, .rMenu-ver .cat-item {
margin: 3px;
background: url(/wp-content/themes/atahualpa351/images/sidebarbg03.jpg) repeat top left;
border: dashed 0px #4D5232 !important;
box-shadow: 0 0 5px #333;
-moz-border: solid 1px #4D5232;
-moz-box-shadow: 0 0 5px #333;
-moz-border-radius:5px;
-khtml-border-radius: 5px;
-webkit-border-radius:5px;
border-radius: 5px;
}
|
#4
Feb 13, 2012, 09:42 PM
|
|
|
|
10,176 posts · Jul 2009
Central New York State USA
|
|
In that case use my second idea. Put a div just before %cat with an id and the text you want and use CSS to position and style.
__________________
~Larry ( CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
|
#5
Feb 13, 2012, 09:55 PM
|
|
God how I wish I knew how to do that... it is late and I am tired but even if I wasn't I still wouldn't know where to begin, lol.
Where do I put the div just before %cat (where is the %cat?) and how would I style it? Sorry, I know I am a pain sometimes. I try to remember the stuff I have learned from you guys but do not do it enough, so I forget...
|
#6
Feb 13, 2012, 10:16 PM
|
|
|
|
10,176 posts · Jul 2009
Central New York State USA
|
|
Put the following just before %cats in ATO>Style & edit Header Area>Configure Header Area
HTML Code:
<div id="menulabel">Read Articles --></div>
Once it is there you will have to determine the CSS to position it properly. I can't give you the code for that as it depends on your particular situation. I use Firebug to determine what CSS I need.
The CSS would be something like the following and you would put it in the CSS Inserts box in the theme options.
HTML Code:
#menulabel {
position: relative;
top: 10px;
left: 25px;
}
__________________
~Larry ( CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
Last edited by lmilesw; Feb 13, 2012 at 10:20 PM.
|
#7
Feb 14, 2012, 07:19 AM
|
|
Thanks again Larry, I was so tired last night but this morning I remembered where the %cat was, lol.
Hmmm, did work but stepped down the space between %page and %cat, didn't look to good... It was more or less 'between' the two and created a wide space between the page bar and cat bar. Is there any way to actually put it in the cat bar itself?
|
#8
Feb 14, 2012, 07:43 AM
|
|
|
|
10,176 posts · Jul 2009
Central New York State USA
|
|
You can do most anything but the cat is generated from the %cats code and would require diving into the code that generates it to add text.
If you use absolute positioning on the example div you can just move the text where you want without moving anything else. So the code might be something like.
HTML Code:
#menulabel {
position: absolute;
top: 10px;
left: 25px;
}
#container {
position: relative;
}
I added a position relative to the container ID so the menulabel id would be absolutely positioned in relation to it. The top and left dimensions are arbitrary.
__________________
~Larry ( CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
|
#9
Feb 14, 2012, 07:45 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
You would make your life much easier if you upgraded so you could use the WordPress custom menu. You could install manually Atahualpa in a seperate folder in the themes folder so you have both versions in the theme picker and you could test out 373 and if there were any issues, just reactivate 351.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#10
Feb 14, 2012, 08:29 AM
|
|
Hey Juggledad, I would love to upgrade but a couple important plugins refuse to work properly with newer version.
Thanks Larry, I will play around with it and let you know...
|
#11
Feb 14, 2012, 09:04 AM
|
|
Check it out... you see it adds a space between page and menu bar. Any way to fix this?
I will leave it like this till you see it...
http://www.theblogfarm.com/
|
#12
Feb 14, 2012, 09:27 AM
|
|
|
|
10,176 posts · Jul 2009
Central New York State USA
|
|
You still have the #menulabel set to position: relative. It should be position: absolute. You also don't have #container set to position: relative. The fonts sizes should probably be set to px instead of ems as well.
__________________
~Larry ( CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
|
#13
Feb 14, 2012, 09:46 AM
|
|
Okay, I have got it fairly on mark and it got rid of the space, thanks.
To keep things balanced (centered), how would I place the same 'Article Categories' on the other end of the bar?
Never mind, I figured that out on my own, lol. One last question, if I wanted to place an arrow image next to ' Article Categories' what would be the css?
Last edited by ARealpolitik; Feb 14, 2012 at 10:13 AM.
|
#14
Feb 14, 2012, 10:20 AM
|
|
|
|
10,176 posts · Jul 2009
Central New York State USA
|
|
You could use the CSS for a background image but you would have to put padding to allow for it or you could use the ascii code for an arrow which would be a lot easier. Here is a link to ascii codes. Perhaps 26 or 27 would work
__________________
~Larry ( CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
Last edited by lmilesw; Feb 14, 2012 at 10:29 AM.
|
#15
Feb 14, 2012, 10:24 AM
|
|
bad link to code...
|
#16
Feb 14, 2012, 10:31 AM
|
|
|
|
10,176 posts · Jul 2009
Central New York State USA
|
|
I corrected the link and you can also use the html code for arrows which would be → for a right arrow or ← for a left arrow. You will probably need to use more CSS for styling.
__________________
~Larry ( CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
|
#17
Feb 14, 2012, 10:45 AM
|
|
I used regular type arrows for now.
You guys are great... The good thing is once I have this in code somewhere I can always reference it in the future. My problem is trying to remember things I have learnt in the past. Having some sort of reference point is always good.
Let me know what you think. http://www.theblogfarm.com/
Appreciate your time and all your help Larry, a token of appreciation is on the way... thanks.
|
#18
Feb 14, 2012, 02:54 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
fyi it doesn't look too good in safari on the mac see
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#19
Feb 15, 2012, 07:54 AM
|
|
Thanks JD... Do you know any way to accomplish what I want to do that will work across all platforms? Perhaps build it directly into the bar code in some way?
On another note.. can I do the same thing using a div to position an image in the header? I would like to place an transparent .png image behind everything in the header.
|
#20
Feb 15, 2012, 08:15 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Easiest way is the first suggestion, upgrade so you can use the WordPress custom menu
second choice would be to edit the theme code where it builds the menu (bfa_header_config.php) and add the text (in an <li..>...</li> pair) at the beginning and the end of the <ul> that builds the menu
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#21
Feb 15, 2012, 08:36 AM
|
|
|
|
10,176 posts · Jul 2009
Central New York State USA
|
|
One thing I would try is setting position: relative on #menu2. Then you will also need to set a z-index: 9 on the menu lables. I am not sure this will work but would make the labels be absolutely positioned in relation to the menu 2 instead of the container which MIGHT help.
__________________
~Larry ( CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
|
#22
Feb 15, 2012, 09:42 AM
|
|
Thanks guys, but this is getting too complicated for my small brain. Since I can't live with thinking it looks bad on a Mac I will just take it off for now and re-think other options.
JD, I did the upgrade on another site I have which is basically configured the same as the farm. It removed the excerpts and left nothing but the titles.
I have it enabled here: http://www.digitalcombatsoldiers.com/
|
#23
Feb 15, 2012, 09:45 AM
|
|
It is because of a plugin for excerpt thumbnails... I am messing with it now. I will see if I can get it to work. Thanks
|
|