[SOLVED] Border On Drop Down Menu »  Show posts from    to     

Icy Phoenix


Archived phpBB Topics (Styles, Mods, Support) - [SOLVED] Border On Drop Down Menu



tc1967uk [ Fri 17 Aug, 2007 08:03 ]
Post subject: [SOLVED] Border On Drop Down Menu
Hi

I've managed to get 'XS Dropdown & OnClick Menus 1.1.0' working in the current IP. I even got it to work properly in Firefox.

However, my lack of HTML/php knowledge is stopping me from tailoring it. Can anyone tell me how to remove the individual borders on the menu? I want one long list, not several cells as per this image.


drop_down_menu



I'd be very grateful for any help.


Zuker [ Fri 17 Aug, 2007 13:42 ]
Post subject: Re: Border On Drop Down Menu
check

forum-buttons

in your .css


pepi [ Fri 17 Aug, 2007 15:35 ]
Post subject: Re: Border On Drop Down Menu
Hi its for style_ice.css

open /templates/mg_themes/style_ice.css
and and at the and
Code: [Hide] [Select]
/* XS Dropdown & OnClick Menus */
#dropmenudiv{
position:absolute;
PADDING-RIGHT: 3px;
PADDING-LEFT: 3px;
PADDING-BOTTOM: 3px;
PADDING-TOP: 3px;
BORDER-RIGHT: #c3cdd2 2px solid;
BACKGROUND-POSITION: left top;
BORDER-TOP: #c3cdd2 1px solid;
MARGIN-TOP: 4px;
BORDER-LEFT: #c3cdd2 7px solid;
BORDER-BOTTOM: #c3cdd2 1px solid;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height:12px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 0px solid #334C9A;
padding: 1px 0;
text-decoration: none;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 0px solid #334C9A;
padding: 1px 0;
text-decoration: none;
}

#dropmenudiv a:hover{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 0px solid #334C9A;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background: #F0F0F0 url(images/bg_row_hover.gif) bottom right no-repeat;
}

for oder style mast edit the colors

Pepi


tc1967uk [ Sat 18 Aug, 2007 11:19 ]
Post subject: Re: Border On Drop Down Menu
I've sorted it

I had to change two numbers to get rid of the divisions between the rows, but still keep the bottom border of the menu itself.

This is the original code


/* XS Dropdown & OnClick Menus */
#dropmenudiv{
position:absolute;
border:1px solid #334C9A;
border-bottom-width: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height:18px;
z-index:100;
}
#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #334C9A;
padding: 1px 0;
text-decoration: none;
}
#dropmenudiv a:hover{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #334C9A;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}
#dropmenudiv a:hover{ /*hover background color*/
background: #F0F0F0 url(images/bg_row_hover.gif) bottom right no-repeat;
}


and this is the edited code:

/* XS Dropdown & OnClick Menus */
#dropmenudiv {
position: absolute;
border: 1px solid #113355;
border-bottom-width: 1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 18px;
z-index: 100;
}
#dropmenudiv a {
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 0px solid #113355;
padding: 1px 0;
text-decoration: none;
}
#dropmenudiv a:hover {
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 0px solid #113355;
padding: 1px 0;
text-decoration: none;
}
#dropmenudiv a:hover { /*hover background color*/
background: #CBDDE5 url(images/ice/bg_row_hover.gif) bottom right no-repeat;
}



As you can see, I've changed the bottom-border-width value in #dropmenudiv{, and also the border-bottom value in #dropmenudiv a{

I thought I should post the solution just in case someone else needs to use it one day.

Thanks to Zuker and Pepi.




Powered by Icy Phoenix