Public Forums 71,145 posts

[steelgoddess Friend steelgoddessJoin date: January 2010Posts: 17Downloads:0Uploads:1 Thanks: 2 Thanked: 1 times in 1 posts]

#150625

I created two module positions above the header–

a) for the life of me, I can’t get the links go properly go horizontal and be styled…
Pretty much I am looking for something like the footer menu, just white.. nothing fancy..
No matter what I do, or have done over these hours have given me what I need.. help! please..
They are an imported menu module.. I will even recreate a menu module if I have to, if I can get it to style like the footer. I used these modules in yootheme templates before with no issue in getting it style properly.

b) I have them a set padding, and floating left and right respectively. On a fluid setting I notice everything else moves… however these modules stay put. It looks kind of silly. Is there a way to get them to move with the rest of the template.

thanks in advance.I am at my wits end with that little block. thanks!

---

Attachments:

1. 

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#341462

Hello,
Without looking into your code I can only guess. But you could make use of template styling of footnav. In any case: your issue looks as being unable to find the specific selectors for your modules.
If you create an extra module position, for example topright, you could wrap it within a div with id “steelgoddess-topnavright”. Now you have a hold to manipulate it in css.

<div id="steelgoddess-topnavright">
<jdoc:include type="modules" name="name-of-your-module" style="xhtml" />
</div>

For styling it as footnav is styled now just adapt the code.
Code in template.css is like this:

/* Foot Links ---*/
#ja-footer .ja-footnav {
float: right;
font-size: 100%;
margin: 0 0 10px;
overflow: hidden;
position: relative;
width: 75%;
}

.ja-footnav ul { float: left; line-height: normal; }

.ja-footnav li {
border-left: 1px solid #999;
display: block;
float: left;
padding: 0 10px;
}

.ja-footnav li a {
color: #666;
display: block;
font-weight: bold;
line-height: 1;
text-decoration: none;
text-transform: uppercase;
}

.ja-footnav li a:hover, .ja-footnav li a:active, .ja-footnav li a:focus { color: #333; }

.ja-footnav .ja-firstitem { border-left: 0; padding-left: 0; }

You could use part of this style by copying the rules for the list tags and change the selector: for example change class .ja-footnav to #steelgoddess-topnavright

Good luck,
Micrantha

[Author]

Posts