I tried looking for the code to use through the developers tool kit but I couldn't find it. what is the code for those links?
Printable View
I tried looking for the code to use through the developers tool kit but I couldn't find it. what is the code for those links?
It is in tpl_header.php, in the
<div id="navMainWrapper">
section.
Ok, the log in link is on the page, I can't seem to position it with CSS without re-positioning other elements of the page. Maybe there is another CSS setting I could use. Do you know which one? Or could I just specify the position in the code? There is also the home link that I still need to add, I didn't see that one but I will keep hunting, maybe I didn't recognize it near the log in link code. Thanks!
Merry Christmas!
I have the links where I want them now. I entered the exact position in the code on the tpl_main_page.php file. I need to get rid of the bullet points and customize text and color. Not sure the best way to do that.
I also need to get rid of the home link on the bottom. couldn't figure that out. please let me know.
thank you so much for your help so far. I have been really impressed by Zen Cart so far. I started with the Wordpress e-commerce plugin but had a lot of problems with simple things.
I am looking forward to the end result with Zen Cart!
You have transplanted the link code without any identifiers, so it is hard to style specifically. Add an id to the div that holds the links, like
<div id="navLinks">
and then you can style in your stylesheet
Adjust to taste.Code:#navLinks ul {
list-style: none;
font-family: arial verdana sans-serif;
}
#navLinks a {
color: #112233;
}
Note - you seem to have left out the opening <ul> tag, which you should have to start a list. Put it after the <div id="navLinks"> and before the first <li>. Actually, you have a lot of missing tags here. Assuming you want the three links in the upper right, you should change the code from what outputs thisto what outputs thisCode:<td id="navColumnOne" class="columnLeft" style="width: 0">
<div id="navColumnOneWrapper" style="width: 0px"></div></td>
<div style="position:absolute;top:100px;left:700px;width:140px;height:20px;-adbe-c:c">
<div align="left">
<li><a href="http://originoftheliquidman.com/fundraiser_zen/index.php?main_page=login">login/register</a></li>
<li><a href="http://originoftheliquidman.com/fundraiser_zen/">home</a></li>
<li><a href="http://originoftheliquidman.com">film</a></li>
<td valign ="top">
<!-- bof breadcrumb -->
<!-- eof breadcrumb -->
Code:<td id="navColumnOne" class="columnLeft" style="width: 0">
<div id="navColumnOneWrapper" style="width: 0px"></div></td>
<td valign ="top">
<div id="navLinks" style="position:absolute;top:100px;left:700px;width:140px;height:20px;-adbe-c:c">
<ul>
<li><a href="http://originoftheliquidman.com/fundraiser_zen/index.php?main_page=login">login/register</a></li>
<li><a href="http://originoftheliquidman.com/fundraiser_zen/">home</a></li>
<li><a href="http://originoftheliquidman.com">film</a></li>
</ul>
</div>
<!-- bof breadcrumb -->
<!-- eof breadcrumb -->
Ok, I did that. So basically I just created an identifier for those links that I can specifically control in a style sheet?
I will go to the CSS now (which I have been editing in Go-live) to see if I can find the definition to use for this. Or will I have to create a new definition sense we added these links and ID? I think that is what you where getting at with the first part of your post. reads like I need to create a new definition called #navlinks ul, navlinks a.
I will go check it out.
This was a great task, now I understand better how CSS works.
I created an id style called:
#navlinks ul li a
and a another id style called:
#navlinks a:hover
I was than able to customize the font, color, etc. and hover action but I still can't seem to get rid of those bullet points.
It is the <ul> or its <li> that has the bullets, so trying to eliminate them from the <a> element won't work - they don't belong to that.
You need a rule liketo remove the bullets.Code:#navlinks ul {
list-style: none;
}
(#navlinks ul { or #navlinks li { or #navlinks ul li { would all work; keeping the selector high-level and simple is a good practice.)
Cool, done. I added a style id #navlinks ul li and set the list style to none.
I now need to get rid of the home link at the footer. I imagine that is another simple task?