Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

Title on page and category menu bars?


  #1  
Old Feb 13, 2012, 07:36 PM
ARealpolitik's Avatar
ARealpolitik
 
130 posts · Jun 2010
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  
Old Feb 13, 2012, 08:25 PM
lmilesw's Avatar
lmilesw
 
10,174 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  
Old Feb 13, 2012, 08:48 PM
ARealpolitik's Avatar
ARealpolitik
 
130 posts · Jun 2010
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  
Old Feb 13, 2012, 09:42 PM
lmilesw's Avatar
lmilesw
 
10,174 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  
Old Feb 13, 2012, 09:55 PM
ARealpolitik's Avatar
ARealpolitik
 
130 posts · Jun 2010
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  
Old Feb 13, 2012, 10:16 PM
lmilesw's Avatar
lmilesw
 
10,174 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  
Old Feb 14, 2012, 07:19 AM
ARealpolitik's Avatar
ARealpolitik
 
130 posts · Jun 2010
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  
Old Feb 14, 2012, 07:43 AM
lmilesw's Avatar
lmilesw
 
10,174 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  
Old Feb 14, 2012, 07:45 AM
juggledad's Avatar
juggledad
 
23,597 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  
Old Feb 14, 2012, 08:29 AM
ARealpolitik's Avatar
ARealpolitik
 
130 posts · Jun 2010
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  
Old Feb 14, 2012, 09:04 AM
ARealpolitik's Avatar
ARealpolitik
 
130 posts · Jun 2010
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  
Old Feb 14, 2012, 09:27 AM
lmilesw's Avatar
lmilesw
 
10,174 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  
Old Feb 14, 2012, 09:46 AM
ARealpolitik's Avatar
ARealpolitik
 
130 posts · Jun 2010
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  
Old Feb 14, 2012, 10:20 AM
lmilesw's Avatar
lmilesw
 
10,174 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  
Old Feb 14, 2012, 10:24 AM
ARealpolitik's Avatar
ARealpolitik
 
130 posts · Jun 2010
bad link to code...
  #16  
Old Feb 14, 2012, 10:31 AM
lmilesw's Avatar
lmilesw
 
10,174 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 &rarr; for a right arrow or &larr; 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  
Old Feb 14, 2012, 10:45 AM
ARealpolitik's Avatar
ARealpolitik
 
130 posts · Jun 2010
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  
Old Feb 14, 2012, 02:54 PM
juggledad's Avatar
juggledad
 
23,597 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
Click image for larger version

Name:	blogfarm.jpg
Views:	304
Size:	15.3 KB
ID:	1770
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #19  
Old Feb 15, 2012, 07:54 AM
ARealpolitik's Avatar
ARealpolitik
 
130 posts · Jun 2010
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  
Old Feb 15, 2012, 08:15 AM
juggledad's Avatar
juggledad
 
23,597 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  
Old Feb 15, 2012, 08:36 AM
lmilesw's Avatar
lmilesw
 
10,174 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  
Old Feb 15, 2012, 09:42 AM
ARealpolitik's Avatar
ARealpolitik
 
130 posts · Jun 2010
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  
Old Feb 15, 2012, 09:45 AM
ARealpolitik's Avatar
ARealpolitik
 
130 posts · Jun 2010
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

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] page &amp; category menu bars longer than header image Vickie Header configuration & styling 4 Jul 23, 2010 10:28 AM
[SOLVED] Page &amp; Category Menu Bars - centre Budun Page & Category Menu Bars 2 Apr 4, 2010 06:45 PM
[SOLVED] Vertical bars in the Category menu cvan Page & Category Menu Bars 4 Sep 4, 2009 03:02 PM
Centering BOTH Page and Category menu bars paulae Page & Category Menu Bars 1 Mar 21, 2009 10:09 AM


All times are GMT -6. The time now is 11:14 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.