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.

Title on page and category menu bars?

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, 07:25 PM

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.

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, 08:55 PM

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

Feb 13, 2012, 09:16 PM

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 09:20 PM.

#7

Feb 14, 2012, 06:19 AM

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

Feb 14, 2012, 06:43 AM

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.

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, 06:45 AM

juggledad

23,667 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.

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, 08:46 AM

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 09:13 AM.

#14

Feb 14, 2012, 09:20 AM

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 09:29 AM.

#15

Feb 14, 2012, 09:24 AM

ARealpolitik

130 posts · Jun 2010

bad link to code...

#16

Feb 14, 2012, 09:31 AM

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

Feb 14, 2012, 09:45 AM

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.

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, 07:15 AM

juggledad

23,667 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

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, 08:42 AM

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.