By geerlingguy on

I'm setting up a new Drupal install, and basing it (roughly) off this template that I developed a few days ago:

http://www.catholicyouthstl.org/ (old link)

I want to keep mostly the same layout, and I have all the basic parts down (they even look nice across IE, Safari, FireFox, and Opera!), but I'm having a bit of trouble with the main 'Links' area on the left side. I'm very, very 'noob' at PHP, so I can't figure out how to get the 'Primary Links' or 'Secondary Links' section to look like the CSS-styled UL that I made on the sample site above.

The main problem I'm running into is that all the links are green, and don't change when I roll over them. I tried adding a custom class in the CSS for the 'ul a:link' section, and that didn't help. I'm about ready to give up and accept the weirdness of having green links with no rollover state, but I don't want to.

I should have the new Drupal site posted after a day or two, but for now it's installed locally on my computer.

⋅ Categories: Drupal 6.x

Comments

gforce301’s picture

gforce301 commented

PHP should have nothing to do with styling your links. Style them in the style.css file for your theme.

marcusthijm’s picture

marcusthijm commented

I'm gonna need some code here.

Can you post the HTML-output (no template-files) and the stylesheet(s) you use for your theme? Maybe you can put them somewhere online?

geerlingguy’s picture

geerlingguy commented

Sorry about that. Here's some of the source from the resulting page:

   <div id="navigation">
		 
        <ul id="main-nav">
        	<li><b>Organizations</b></li>
            <ul id="main-nav-2">
            	<li><a href="http://www.cycstl.net/scouts/index.htm">Catholic Scouting</a></li>
                <li><a href="http://www.cycstl.net/">CYC</a></li>
                <li><a href="http://www.stlyouth.org/">Office of Youth Ministry</a></li>
                <li><a href="http://www.reapteam.org/">REAP Team</a></li>
            </ul>
			<li><a href='/drupal/node/7'>Calendar</a></li>
			<li><a href='/drupal/node/3'>Quick Links</a></li>
			<li><a href='/drupal/node/2'>Staff</a></li>
		</ul>
     </div>

And here's what I have on the page.tpl.php file:

    <div id="navigation">
		<?php if (is_array($secondary_links)) : ?> 
        <ul id="main-nav">
        	<li><b>Organizations</b></li>
            <ul id="main-nav-2">
            	<li><a href="http://www.cycstl.net/scouts/index.htm">Catholic Scouting</a></li>
                <li><a href="http://www.cycstl.net/">CYC</a></li>
                <li><a href="http://www.stlyouth.org/">Office of Youth Ministry</a></li>
                <li><a href="http://www.reapteam.org/">REAP Team</a></li>
            </ul>
			<?php foreach ($secondary_links as $link): ?>
				<li><?php
					$href = $link['href'] == "<front>" ? base_path() : base_path() . $link['href'];
					print "<a href='" . $href . "'>" . $link['title'] . "</a>";
				?></li>
			<?php endforeach; ?>
		</ul>
		<?php endif; ?>
	</div>

And finally, I've placed the CSS file I'm using here:

http://www.catholicyouthstl.org/archstlsite/style.css

Any help would be *greatly* appreciated! I'm kind of stumped.

__________________
Personal site: www.jeffgeerling.com

Jeff Burnz’s picture

Jeff Burnz commented

Why dont you just enable the secondary links meny block, or just create a new menu and enable its menu block in the sidebar. You can nest child links in any Drupal menu and set the parent item to expanded.

In any case, from what I can tell you are asking, you would style them as such:

ul#main-nav {padding: 0;}
ul#main-nav li {list-style: square;}
ul#main-nav li a:link,
ul#main-nav li a:visited {color:#000;}
ul#main-nav li a:hover {color: #AD4D18;}

I think that is pretty close to what you want from briefly looking at your template.

If you want specific styles for child menu items, otherwise these will inherit the above styles;
ul#main-nav ul {}
ul#main-nav ul li {list-style: circle;}
ul#main-nav ul li a {}

Need help with IE?
Learn basic XHTML and CSS first.
Get smart with web specs.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
geerlingguy’s picture

geerlingguy commented

I found the problem!

For some reason (I think this was from my previous, non-Drupal page), I left the following rules in the CSS:

.twoColFixLt #container #sidebar1 a {
	color: #215A51;
}
.twoColFixLt #container #sidebar1 li li a {
	color: #ad4d18;
}

I deleted those two rules, and the colors all returned to normal. I have now fixed the problem! There are about three other very minor issues, but another hour or two coding and I think I'll be ready to get this site live.

Thanks for your help, though! I was almost ready to give up fixing the colors altogether!

__________________
Personal site: www.jeffgeerling.com

Jeff Burnz’s picture

Jeff Burnz commented

Good stuff,

I just noticed I wrote "meny block", lol, "meny" is Swedish for "menu", I get confused what language I am speaking...

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.