Joomla Templates

Hey guys! I'm using Transparent Bliss on my website, but I've got a little bug.

I've got menus on both sides of my article, and when I mouse over the right menu items, the highlighting works fine, but when I mouse over the left menu items, the highlighting extends past the right boundary of my menu. I suppose it would be a lot easier if you could see it.

My website

I'm just wondering how I can get both menus looking uniform. I'm sure it's a problem in the css, but I can't seem to track it down. Thanks a lot!

Hi mushboom,

at first, welcome and nice that you use our template. :-)

And not to your mistake.
Go in the backend under:

Extensions >> Template Manager >> Select "Transparent Bliss" >> Edit CSS

Than search in the template.css this lines:

.menu li a {
background-image:url("../images/star.png");
background-position:4px 50%;
background-repeat:no-repeat;
border-bottom:1px dotted #666666;
display:block;
height:20px;
left:1px;
padding:3px;
position:relative;
width:172px;
}

Change the width to 162px and it works. When I see your site, is time for me to go fishing once again. ;-)

Regards,

GermanBear

Thanks so much! I really appreciate the quick and descriptive response. It couldn't have worked better!

Hello again,

one better solution is:

Go in the backend under:

Extensions >> Template Manager >> Select "Transparent Bliss" >> Edit CSS

Than search in the template.css this lines:

#leftinner2 .moduletable {
padding-left: 10px;
}

Change the padding-left to 1px. The same at the lines:

#farrightinner2 {
overflow:hidden;
padding-right:10px;
padding-left: 10px;
}

At attach an image it looks like after the change. ;-)

And it works and sits correct.

Regards,

GermanBear

Just made the change and it looks awesome! I put the padding to 5px so it would sit properly (at least on my browser).

edit: There's a few dots left at the top right of "Home", but it still looks fine :)

looks great :-)

Have a lot of fun with our templates.


Regards,

GermanBear

I see a Edit in your post ;-)

Search in the template.css this lines:

ul.menu {
border-top:1px dotted #666666;
padding-bottom:15px;
width:170px;
}

Insert the red marked line in th ul.menu.

And here remove the red marked lines:

.menu li a {
background-image:url("../images/star.png");
background-position:4px 50%;
background-repeat:no-repeat;
border-bottom:1px dotted #666666;
display:block;
height:20px;
left:1px;
padding:3px;
position:relative;
width:162px;
}

Regards,

GermanBear