Flyout menu colour/image

Topics: Developer Forum, Project Management Forum, User Forum
Apr 12, 2011 at 8:53 AM

Hi all,

Can anyone point me in the right direction to be able to change the default colour or image for the TravelDiary subpage flyouts css. I've managed to change all the other images but can't find anything for the flyouts - CMSSetup, Sections/Page ASssignment etc. Is it dynamic maybe? Thanks

Apr 12, 2011 at 12:25 PM
Edited Apr 12, 2011 at 12:26 PM

Hi NormanGrey

Maybe it's this one your looking for

_images/subnav_bg.jpg image ?

Navigation.css

table.sublevel
{
 font-size: 13px;
 background: Transparent url(_images/subnav_bg.jpg) repeat-y top left;

and the:

background: #378CCA url(_images/nav_bg_hi.gif) repeat-x top left;

Apr 12, 2011 at 1:30 PM

Thanks Wiper,

I have both those images OK and they are both a dark grey to light grey gradient, but the background to the flyouts is a blue to white gradient! Go figure!

This is my css file in case I'm missing something.

 

Thanks

/* navigation */
table.nav
{
	font-size: 13px;
}

table.nav td
{
	padding-left: 17px;
	padding-right: 17px;
	height: 22px;
	voice-family: "\"}\"";
	voice-family: inherit;
	padding-top: 3px;
}
html > body table.nav td
{
	padding-top: 3px;
}

table.nav_selected
{
    background: #CCCCCC url(_images/nav_bg_hi.gif) repeat-x top left;
	font-weight: bold;
}

a.nav, a.nav:link, a.nav:active, a.nav:visited, a.nav:hover
{
	display: block;
	width: 100%;
}

a.nav_selected, a.nav_selected:link, a.nav_selected:active, a.nav_selected:visited, a.nav_selected:hover
{
	color: #FFFFFF;
}

a.nav:hover
{
	font-weight: bold;
}

.sublevel
{
	/* this is a bugfix for asp:Menu in IE8 */
	z-index: 100;
	position: relative;
}

table.sublevel
{
 font-size: 13px;
 background: Transparent url(_images/subnav_bg.jpg) repeat-y top left;
}

table.sublevel td
{
    background-position: left top;
    padding-left: 17px;
    padding-right: 17px;
    height: 18px;
    voice-family: "\"}\"";
    voice-family: inherit;
    padding-top: 3px;
    background-image: url('_images/subnav_bg.jpg');
    background-repeat: repeat-y;
}

html > body table.sublevel td
{
	padding: 3px;
}

a.sublevel, a.sublevel:link, a.sublevel:active, a.sublevel:visited, a.sublevel:hover
{
	display: block;
	color: #000000;
	vertical-align: middle;
}

a.sublevel:hover
{
	color: #0033cc;
}

table.sublevel_selected
{
    background: url(_images/nav_bg_hi.gif) repeat-x left top;
    font-weight: bold;
    background-color: #CCCCCC;
}

table.sublevel_selected td
{
	padding-left: 17px;
	padding-right: 17px;
	height: 18px;
	padding-top: 3px;
}

a.sublevel_selected, a.sublevel_selected:link, a.sublevel_selected:active, a.sublevel_selected:visited, a.sublevel_selected:hover
{
	color: #FFFFFF;
}
/* end navigation */
Apr 12, 2011 at 2:22 PM

Well, I guess it helps when you create new images to get the height and width right - instead of 192x2px I had 2x192px!