Recent Topics

1 May 07, 2008 18:30    

My b2evolution Version: 2.4.2

Hi,
I'm trying to modify the Nautica_2l skin. The only thing I want to do is to push the navigation menu to be right adjusted instead as left as it is now.

I'm totally lost in PHP and CSS so I found this to be very hard. I've spent hours to try to figure it out by looking at other skins but they seams to deal with the menu differently so I can't draw any conclusions from this either.

I've managed to right adjust the individual menu entries but the (of course) I end up with them stacked on top of each other in the right side. I realize (I think) I would have to traverse the menu list in opposite order and some way calculate the length of the entry name and there I get stuck.

Or am I getting everything wrong?

Can anyone offer some clues?
/Lars

2 May 07, 2008 20:52

Lars wrote:

My b2evolution Version: 2.4.2

Hi,
I'm trying to modify the Nautica_2l skin. The only thing I want to do is to push the navigation menu to be right adjusted instead as left as it is now.

I'm totally lost in PHP and CSS so I found this to be very hard. I've spent hours to try to figure it out by looking at other skins but they seams to deal with the menu differently so I can't draw any conclusions from this either.

I've managed to right adjust the individual menu entries but the (of course) I end up with them stacked on top of each other in the right side. I realize (I think) I would have to traverse the menu list in opposite order and some way calculate the length of the entry name and there I get stuck.

Or am I getting everything wrong?

Can anyone offer some clues?
/Lars

If by navigation , you mean :' Blog A - Blog B - Link Blog A - Contact - About this System' etc. above the header ..;

open your ../skins/nautica_2l/style.css

and simply change this:

#menu-top li {
	display: inline;
	float: left;
	background:url(img/menuleft.png) no-repeat left top;
	padding-left: 4px;
}
to this:


#menu-top li {
	display: inline;
	float: right;
	background:url(img/menuleft.png) no-repeat left top;
	padding-left: 4px;
}

and change this:

#menu-top ul {
	background: transparent url('img/bg02-white-left.png') no-repeat left top;
	margin:0;
	padding: 1em 0 0 0;
	list-style: none;
	font-size: 85%;
	float: left;
	padding-left: 20px;
}

to this

#menu-top ul {
	background: transparent url('img/bg02-white-left.png') no-repeat left top;
	margin:0;
	padding: 1em 0 0 0;
	list-style: none;
	font-size: 85%;
	float: left;
	padding-right: 20px;
}

in order to avoid overflow from the top right

then you will get this view #2 instead of #1, if this is what you were looking for ofc, if not please be more descriptive

http://i25.tinypic.com/2krlet.jpg

3 May 08, 2008 03:57

THANKS !
I was almost there it was the change of padding-left to padding-right I missed.

It now looks exactly as I wanted: http://www.dahlbergian.com/blog

The entries (blog names) now come in the opposite order - that was why I wrote I would have to traverse that list in the reversed order but can't find that part - doesn't really matter.

Thanks for your help...
/Lars

6 May 08, 2008 17:03

Your banner looks crap at my res ( 1680x1050) .... good job yer better at making cars huh? ;)

¥

7 May 08, 2008 18:05

OK, I've only checked on my laptop - will check with my other PC
/L

9 May 09, 2008 11:49

That's good - thanks for allerting me :D


Form is loading...