Moving Home, Login & My Account

[ScriptJunkie]

Hi,

1. I'd like to move the 'Home', 'Login' and 'My Account' links from the very top of the page to just below the banner where the Category text links are.

2. I'd like to keep the Category text links centered, while aligning the 'Home', 'Login' and 'My Account' links to the left.

3. I'd like to then get rid of the white space above the banner where the links currently reside.

4. Lastly, I'd like to change the text for the 'Home' link to 'Store Home' or something similar, because I want to differentiate between the store's home page and the main site's home page.

Cart can be viewed here: http://www.empowermentsanctuary.com/marketplace/

I'm not sure which files to alter to accomplish this. Any assistance offered is much appreciated

Thanks in advance

[ScriptJunkie]

Ok, here's where I am at:

I determined that my original plan was a bad idea, because once a customer logs in, the additional my account and shopping cart links would shove the Category links off the page.

I've been able to successfully move the "Home" and "Login", "My Account", etc. links from the top of the page to just above the Category Navigation links and get rid of the white space at the top of the page.

Problem: I can't get the Home & Login line of links centered on the page.

A look at the code using FF Developer's Toolbar shows me that when I moved it, I incorrectly named it and placed it. I suspect that I need to create a new div id? The trouble is that I'm not familiar with CSS and PHP, so I don't know how to fix it.

I sure could use some help. If anyone has the time to take a quick peek and to then tell me how to resolve this issue, I'd be grateful

Here's the page. Everything on it is aligned just how I want it, except for the Home & Login, My Account, etc. links, which should be centered.

Thanks in advance

[brokensilence]

It looks like those links are nested in the Nav Categories Div element.

Maybe try manipulating some CSS with the navCatTabs anchor tags
#navCatTabs a{ /*Stylesheet commands here */ }

That would be in /includes/templates/YOUR_TEMPLATE/css/stylesheet.css

[ScriptJunkie]

I tried the suggestion, it didn't seem to have any affect. Probably because I've coded it wrong & the links aren't nested properly.

I just don't know how to fix it. I've considered getting ride of the "back" class and coding it just like the other NavCatTabs (i.e. as a UL), but:

1. I don't want it on the same line as the Category links
2. I don't know how to code it to make it show on a separate line
3. I don't know what the effects would be of changing the class, because I don't know what other files the 'back class' is linked to.

[stevesh]

Try:

#navCatTabsWrapper {
color: #04003F;
text-align:center;
}

[ScriptJunkie]

I tried that before and it didn't work so I removed the 'text align:center;', but figured I'd give it another try after you suggested it, just in case the first failed attempt was a hiccup of some sort.

It still didn't work. I stared at it for a long time before I realized...all this time the #NavCatTabsWrapper has been just sitting there commented out. duh!

I removed that and of course it worked.

Thank you Steve


Any suggestions as to how I can keep my sidebox content from being centered? It happened after I changed above change. I'd like that content to be aligned left.

[stevesh]

Not sure why what you've done would center the sidebox contents, but:


.leftBoxContainer, .rightBoxContainer {
border: 1px solid #04003F;
margin: 0 0 1em 0;
text-align:left;
}

[ScriptJunkie]

I think it has something to do with the fact that I totally screwed up the code <grin>.

I found another article here on the forum that may resolve it. I'm putting the code back as it was and then starting fresh using the instructions in this thread

Thanks much for your assistance! I'll post back here when I'm done so others who may be struggling with this will be able to see the resolution.

[ScriptJunkie]

Resolution

Step 1: Follow the instructions in this thread
Step 2: If the links are not centered and you want them to be, navigate to includes/templates/YOURCUSTOMTEMPLATE/common and edit the tpl_header.php file.

Locate this text:

<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
<ul class="back">

and change it to this text:

<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
<ul class="centeredContent">

Note: The above text changes may not be necessary for you. You may be able to center your links by editing the navMainWrapper to include text-align: center;

In my case, the above change was necessary because the class "back" was connected to other aspects of my cart that I did not want centered, so changing the link's class to a generic "centered content" class was the easiest fix.

Make sure you examine your own template to see what's necessary before making changes to template files.

[gjh42]

The <ul class="back"> should really not be in the PHP code - best practice is to keep styling/positioning information in the stylesheet and content information in the PHP files. This is an example of old legacy code that hasn't been fixed yet. Since the containing div is named, the ul doesn't need a separate class:

<div id="navMain">
<ul>

In the stylesheet, add

#navMain ul {text-align: center;}

If there were multiple <ul> elements in #navMain, you might want to give one or more of them an identifying class so they could be manipulated separately, like class="ul1" or class="last".