PageTitle Bar Background Color

Hello.
I would like to know how to change background color for the "PageTitle Bar". I don't see how to change it in the Theme Editor. I have also downloaded the theme but I can't find where to make my change.
Any ideas?
My portal is 2004s.
Thanks.

Hi Senthil.
It didn't work, I changed "Background Color of Standard Toolbar" and "Background Color of Emphasized Toolbar".
As far as I know "Page Title Bar" is an iview on its own: com.sap.portal.pageToolbar. It contains "history", "back" and "forward" links and the current Page Title.
Toolbar iview is com.sap.toolAreaIview, it contains the search box.
In my instalation they have different colors, as I changed the color for the Portal Tool Area.
I also tried changing Complex Elements -> Menu Bar and Complex Elements -> Link Bar, but didn't work either.
Any other ideas?
Thanks.

Similar Messages

How to save status bar background color in local settings(Windows Phone 8.1)

I have given the user the freedom to change background colour and save it in local settings. But I am confused on how to save the status bar colour settings because I want to give the user the freedom to choose from 4-5 colours where background of status bar
can be changed.
public static void SaveStatusBarColor()
// get status bar color
var statusBar = StatusBar.GetForCurrentView();
var color = statusBar.BackgroundColor;
// convert color to hex string
var hexCode = color.HasValue ? color.Value.ToString() : "";
// store color in local settings
ApplicationData.Current.LocalSettings.Values["StatusBarColor"] = hexCode;
public static void LoadStatusBarColor()
// get color hex string from local settings
var hexCode = ApplicationData.Current.LocalSettings.Values["StatusBarColor"] as string;
if (string.IsNullOrEmpty(hexCode))
return;
// convert hexcode to color
var color = new Color();
color.A = byte.Parse(hexCode.Substring(1, 2), NumberStyles.AllowHexSpecifier);
color.R = byte.Parse(hexCode.Substring(3, 2), NumberStyles.AllowHexSpecifier);
color.G = byte.Parse(hexCode.Substring(5, 2), NumberStyles.AllowHexSpecifier);
color.B = byte.Parse(hexCode.Substring(7, 2), NumberStyles.AllowHexSpecifier);
// set the status bar color
var statusBar = StatusBar.GetForCurrentView(); // Exception Line
statusBar.BackgroundColor = color;
}This is what was suggested to me. Initially the app runs and saves the settings.But when the app is closed and restarted again it crashes.

Hi shriyansh,
Where did you call the method SaveStatusBarColor() and LoadStatusBarColor()?
I have called your SaveStatusBarColor() in the OnNavigatedFrom method and called the LoadStatusBarColor() in the OnNavigatedTo method, it worked very well in my side.
So I can not reproduce your issue.
Here are my code and result, please try to check it:
public class test
public Color colors { get; set; }
public sealed partial class MainPage : Page
List<test> testdemo = new List<test>();
public MainPage()
this.InitializeComponent();
testdemo.Add(new test() { colors = Colors.Red });
testdemo.Add(new test() { colors = Colors.Green});
testdemo.Add(new test() { colors = Colors.Gray});
testdemo.Add(new test() { colors = Colors.Blue });
this.NavigationCacheMode = NavigationCacheMode.Required;
public static void SaveStatusBarColor()
// get status bar color
var statusBar = StatusBar.GetForCurrentView();
var color = statusBar.BackgroundColor;
// convert color to hex string
var hexCode = color.HasValue ? color.Value.ToString() : "";
// store color in local settings
ApplicationData.Current.LocalSettings.Values["StatusBarColor"] = hexCode;
public static void LoadStatusBarColor()
//get color hex string from local settings
var hexCode = ApplicationData.Current.LocalSettings.Values["StatusBarColor"] as string;
if (string.IsNullOrEmpty(hexCode))
return;
// convert hexcode to color
var color = new Color();
color.A = byte.Parse(hexCode.Substring(1, 2), NumberStyles.AllowHexSpecifier);
color.R = byte.Parse(hexCode.Substring(3, 2), NumberStyles.AllowHexSpecifier);
color.G = byte.Parse(hexCode.Substring(5, 2), NumberStyles.AllowHexSpecifier);
color.B = byte.Parse(hexCode.Substring(7, 2), NumberStyles.AllowHexSpecifier);
var statusBar = StatusBar.GetForCurrentView();
statusBar.BackgroundColor = color;
statusBar.BackgroundOpacity = 1;
protected override void OnNavigatedTo(NavigationEventArgs e)
LoadStatusBarColor();
protected override void OnNavigatedFrom(NavigationEventArgs e)
SaveStatusBarColor();
private void ChangeColorButton_Click(object sender, RoutedEventArgs e)
var statusBar = StatusBar.GetForCurrentView();
statusBar.BackgroundColor = testdemo[Convert.ToInt32(Mytextbox.Text)].colors;
statusBar.BackgroundOpacity = 1;
The result:
Best Regards,
Amy Peng
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey.

Change the background color of a title bar

I'd like to know if it's possible to change the background color of a swing application title bar.
Thanks in advance.

In Windows I think you can change the overall look of the desktop - Standard Windows comes with a bluish scheme, but you can change that, say to something like greenish. On NT you do it using right click on desktop > Properties > Apperance > Scheme etc etc.
So I think Frame title colour is very much a OS specified thing.

Need transparent background color in Spry Menu Bar

Tried every possible combination.
Built a 150x1000 px header in Illustrator with a 20x1000 px rectangle at the bottom for the nav bar, set as a background image in the header within Dreamweaver.
Can not make a transparent (no color) background within Spry Menu Bar: MenuBar1??
Also, my first nav is 'Welcome' that <li></li> is about 6-8 px higher then the rest of the nav bar??
Any help at all would be appreciated, thanks
optionsclinic.net

Have you tried changing the value of the Background colour in your CSS:
ul.MenuBarHorizontal a
    cursor: pointer;
    text-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
    text-decoration: none;
    color: #FFF;
    padding-right: 2px;
    padding-left: 2px;
    display: block;
    background-color: #223F9A;

CSS -- background color doesn't show with scroll bar

I have a nav bar with a background-color that shows up fine if the image opens to the right size. If, however, the window opens small and I have to use the scroll bar to move things over, the color for the nav bar isn't there.
Any thoughts would be appreciated.
Here's the code:
HTML:
<body>
    <div id="Global">
        <div id="navHeader">
            <div id="navBar">
                <ul class="navStyle">
                    <li>Home</li>
                    <li>Chamber Info</li>
                    <li>Event Galleries</li>
                    <li>Contact Us</li>
                    <li>Join</li>
                </ul>
            </div>
        </div>
    </div>
</body>
CSS:
@charset "utf-8";
/* CSS Document */
    padding:0 0;
    margin:0 0;
body{
    background-color:#f1eee3;
#Global{ margin:0 auto;}
#navHeader{
    width:100%;
    height:40px;
    margin:0 auto;
    background-color:#bfbfbf;
#navBar{
    margin: 0 auto;
    width:960px;
    text-align:center;}
.navStyle{
    font-family:"Eras Medium ITC",Arial, Helvetica, sans-serif;
    font-size:18px;
    padding-top:10px;
.navStyle li{
    display:inline;
    padding-left:20px;
    padding-right:20px;

Does this help?
#navHeader{
width:100%;
min-height:40px;
_height:40px; /**for IE6 only**/
margin:0 auto;
background-color:#bfbfbf;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

What CSS styles affect the background color of new suite bar?

There is a new suite bar in O365. What CSS styles affect the background color of the bar, app launcher button and the Office 365 text in SharePoint Online? I want to hide Office 365 text and add my logo there.

Hi,
What new suite bar did you refer to?
Please check if this image below is what you referred to:
If yes, please note in this forum we mainly discuss questions and feedbacks about the Office client products, as your question is not about our products, I suggest you post the question in Office 365 Community Forum to get support:
http://community.office365.com/en-us/f/default.aspx
The reason why we recommend posting appropriately is you will get the most qualified pool of respondents, and other partners who read the forums regularly can either share their knowledge or learn from your interaction with us. Thank you for your understanding.
If I misunderstood anything, feel free to let me know.
Regards,
Melon Chen
TechNet Community Support
It's recommended to download and install
Configuration Analyzer Tool (OffCAT), which is developed by Microsoft Support teams. Once the tool is installed, you can run it at any time to scan for hundreds of known issues in Office
programs.

New App Launcher Suite Bar in 365: what CSS styles affect the background color?

There is a new suite bar in O365. What CSS styles affect the background color of the bar, app launcher button and the Office 365 text in SharePoint Online? I want to hide Office 365 text and add my logo there.

Hi,
Per my understanding, you might want to change the style of the suite bar and replace the “Office 365” text with your custom logo image.
In Office 365 admin page, we can customize the theme of the suite bar for the whole :
However, as there is no such option can replace the “Office 365” text with a custom icon there, a workaround is that we can use some custom JavaScript to modify the
corresponding HTML source code to display the icon dynamically after the page loaded.
After applying the code snippet below into the master page:
<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("ready");
function ready() {
var logo = document.querySelector("#O365_MainLink_Logo");
var s = '<img style="max-height: 27px" alt="logo" src="/_layouts/15/images/siteIcon.png?rev=38">';
logo.innerHTML = s;
</script>
Every time when users open a page in this site, this custom code will be executed, the “Office 365” text will be replaced by a custom icon:
More information about how to add custom code into master page(similar in SharePoint 2013):
http://techtrainingnotes.blogspot.com/2012/05/adding-javascript-and-css-to-sharepoint.html
What’s more, if doing in this way, we can only replace the “Office 365” text with a custom icon in Office 365 SharePoint Online sites, not the whole Office 365, this
is a fact that you might want to know. For about how to replace that text for the whole organization, I suggest you open another thread in Office 365 forum, you will get more help and confirmed answers there.
http://community.office365.com/en-us/forums/default.aspx
Best regards
Patrick Liang
TechNet Community Support

White bars in document aftre changing background color

I changed the background color of my adobe acrobat 9.5.1 from white to green. However, the transition is not perfect; white bars (sometimes many, sometimes few), possibly evenly distributed, can always been seen (as you can see from the attached picture), which is really annoying. How can I fix it? Many thanks for your patience and help!

Speaking on behalf of Walt
You can copy and paste page thumbnails in both Layout and Word Processing mode.
The problem the O.P. is encountering is probably due to wrap on the image causing an invisible to pop the page and create what appears to be a blank page after.
Of course this is the wrong way to go about creating a sequence of pages with backgrounds.
The background colored box should have wrap turned off
Inspector > Wrap > uncheck Object causes wrap
Menu > Arrange > Send Objects to Background
and be moved to master objects:
Menu > Format > Advanced > Move object to section master
This will now appear as the background to every page in that section.
To reuse the design:
Menu > Format > Advanced > Capture Pages…
Peter

Can I modify a background color of a template - specifically, the navigation bar background?

can I modify a background color of a template - specifically, the navigation bar background?

iWeb has a great toool :
And it's visible here :
And google is your friend :
http://www.google.com/search?q=what+is+a+HTML+Snippet

Color of Navigational Bar background

The background color of the navigational bar is coral....when I click on it, there are no options in the graphic inspector. Is there a work-around for this? I'd like it to be gray, or even white. Thank you.

For most of the themes the background color of the navbar area is not a user defined item. However, with some java code in an HTML snippet you can change it. Put this code, with your selected color number, in an HTML snippet on the page:

<script language="JavaScript" type="text/javascript">

</script>
An example of this can be see on this demo page: Change Navbar Text and Background Color.
OT

How do you make a transparent spry menu that has a background color on sub menus?

Hi i am a total newbie at html and css scripting/coding and i've been working on creating a website of course because im here and i have search and search and i've found a few topics about this but none of them have what i want and it would be helpful if when you post the reply you explain it so hopefully i can add on and learn but i am trying to get the background color on the sub menus #1A1A1A and then the menu it self transparent here is my code it might make no sense at all since im a newbie ;P
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
          margin: 0 auto;
          padding: 0;
          list-style-type: none;
          font-size: small;
          cursor: default;
          width: 100em;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
          z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 18px;
          position: relative;
          text-align: left;
          cursor: pointer;
          width: 10.8em;
          float: left;
          visibility: visible;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          z-index: 1020;
          cursor: default;
          width: 8.2em;
          position: absolute;
          left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
          left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
          width: 15em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
          position: absolute;
          margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
          left: auto;
          top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
ul.MenuBarHorizontal ul
          border: 0px solid #1A1A1A;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
          display: block;
          cursor: pointer;
          background-color: transparent;
          padding: 9px;
          color: #FFF;
          text-decoration: #1A1A1A;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
          font-weight: bold;
          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
          font-size: 18px;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
          background-color: #0048ff;
          color: #EEE;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
          background-image: url(SpryMenuBarDown.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
          background-color:#1A1A1A;
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
          background-color:#1A1A1A
          background-repeat: no-repeat;
          background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
          background-image: url(SpryMenuBarRightHover.gif);
          background-repeat: no-repeat;
          background-position: 85% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
          position: absolute;
          z-index: 1010;
          filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
          ul.MenuBarHorizontal li.MenuBarItemIE
                    display: inline;
                    f\loat: left;
                    background: #222222;

Hi and welcome -
Start with fixing this missing semicolon (in red)
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
          background-color:#1A1A1A;
          background-repeat: no-repeat;
          background-position: 95% 50%;
You will find you will get faster, more accurate help from us if you upload your test page and any dependent files to your server and post a link here. That way we can examine ALL your code

How can change background color of drop down menu navigation?

Hi,
I am using multi level drop-down-navigation menu in my website.
I am get good drop-down menu from htmldrive.net, but problem is how can change menu background color black to other colors.
please help me
Link & code is given below
http://www.htmldrive.net/items/demo/913/Multi-Level-Drop-Down-Menu-Navigation-with-CSS3
HTML Code
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Portfolio</a></li>
<li><a href="#">One Dropdown</a>
        <ul>
        <li><a href="#">Level 2.1</a></li>
        <li><a href="#">Level 2.2</a></li>
        <li><a href="#">Level 2.3</a></li>
        <li><a href="#">Level 2.4</a></li>
        <li><a href="#">Level 2.5</a></li>
        </ul>
</li>
<li><a href="#">Three Levels</a>
        <ul>
        <li><a href="#">Level 2.1</a></li>
        <li><a href="#">Level 2.2</a></li>
        <li><a href="#">Level 2.3</a>
                <ul>
                <li><a href="#">Level 2.3.1</a></li>
                <li><a href="#">Level 2.3.2</a></li>
                <li><a href="#">Level 2.3.3</a></li>
                <li><a href="#">Level 2.3.4</a></li>
                <li><a href="#">Level 2.3.5</a></li>
                <li><a href="#">Level 2.3.6</a></li>
                <li><a href="#">Level 2.3.7</a></li>
                </ul>
        </li>
        <li><a href="#">Level 2.4</a></li>
        <li><a href="#">Level 2.5</a></li>
        </ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
CSS CODE
#nav {
        float: left;
        font: bold 12px Arial, Helvetica, Sans-serif;
        border: 1px solid #121314;
        border-top: 1px solid #2b2e30;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        overflow: hidden;
#nav ul {
        margin:0;
        padding:0;
        list-style:none;
#nav ul li {
        float:left;
#nav ul li a {
        float: left;
        color:#d4d4d4;
        padding: 10px 20px;
        text-decoration:none;
        background:#3C4042;
        background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
        background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
        background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
        border-left: 1px solid rgba(255, 255, 255, 0.05);
        border-right: 1px solid rgba(0,0,0,0.2);
        text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
#nav li ul {
        background:#3C4042;
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
        background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        border-radius: 0 0 10px 10px;
        -moz-border-radius: 0 0 10px 10px;
        -webkit-border-radius: 0 0 10px 10px;
        left: -999em;
        margin: 35px 0 0;
        position: absolute;
        width: 160px;
        z-index: 9999;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
        -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
        -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
        border: 1px solid rgba(0, 0, 0, 0.5);
#nav li ul a {
        background: none;
        border: 0 none;
        margin-right: 0;
        width: 120px;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border-bottom: 1px solid transparent;
        border-top: 1px solid transparent;

Change this:
.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
to this:
.ddsmoothmenu{
font: bold 12px Verdana;
background: #new color code;
width: 100%;
And repeat this on other selectors.
Nancy O.

In Pages 09' how do I change the background colors on the templates?

I have been trying to change the background on one of the templates from red to green for a while. I can't figure it out and i can't find answers online any where that are helpful at all. I just need to changes the background color to what I want it to be and not what the programs sets them too. Any ideas? I'm totally stumped!
Thanks for the help!

Hi Burke,
Here's the result, using Peggy's suggestion:
Process:
Click on the thin strip of red to the left of the title ("THE THOMPSONS") to select the background.
You'll see the small x in each corner, indicating the object is locked.
Go Arrange > Unlock (or press option-command-L) to unlock the object.
Click on the Fill Color well in the format bar, and choose a new colour from the palette.
Go Arrange > Lock (or press command-L to re-lock the object.
Save the result.
Regards,
Barry

Master slide background color

When I select the master slide on the far left (the slightly bigger one), and I deselect "project background" and change the "stage:" to a different color, nothing happens. I am trying to use the solid color (paint can) and I put in my choice of Hex color (005983). When I try the same thing on the individual master slides to the right, I also get nothing. I even changed the Edit>Preferences>Defaults>Background color to the same color. And I get nothing.
I can (and have) put other things (logo, color bar) on the Master slide, and it propigates to the right on the other slides. What am I missing?

There are objects on the main master slide, they are not merged into the background. Yes, you can set the stage color for a normal slide as well:
What do you really want to achieve with selecting a blue color for the main master slide? It will not show up because you have objects on that slide that cover the stage color.
I know, documentation is not very helpful. I have been writing a lot about Captivate to provide some clues, but not about master slides. It is a lot of work to write out documentation and I'm offering everything for free. Same with answers here, where Rod and Rick are also spending many hours trying to provide answers.
Depending on the theme you started with, there can be a project background. You used the white theme. That background will always show up on the main master slide, even when you uncheck Project background. If you want not to see that Project background on a normal slide, but a full blue color, you have to unselect Use Master Slide Background, then unselect Project Background (is dimmed as long as you use Master Slide Background) and then you can use a stage color. Those settings I show in the screenshot.

Spry vertical menu button shows background color instead of image in preview

Hello All, I'm a newbie (to the forum and Dreamweaver) so my apologies if my question is not in good form. I've searched for this issue but cannot seem to find the exact problem I have.
I've created a website (my first) and used the spry menu bar. It works well using the default blue and grey colors for button and hover. However, I decided I want to spruce it up a little and change the buttons to use a background image (rainbow pattern) instead of background color. I internet researched this for some time and watched all the youtube videos people have posted for this process and editing the spry vertical menu bar CSS. Using the .a and hover lines from the CSS, I was able to add my background .jpg image file. In the design view, the button look exactly how I want them to. However, when I attempt to preview in IE, Chrome, or FF, the buttons still have the default colors and no image. I've gone back and deleted the default blue and grey, but then the preview just shows dark grey and white for the buttoms. is there something that I am overlooking that would cause the background color to show instead of the image I have attached to the buttons. I can't figure out why it looks right in DW but not in preview.
BTW, I'm editing a template file and all the pages are updated with the new image buttons, but none of the pages show correctly in preview.
Thanks

Point taken :-)
This is my spry vertical css code. No sub-menus.
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 1px solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
font-weight: bold;
background-image: url(/Images/Rainbow_Button.jpg);
background-color: ;
background-repeat: no-repeat;
background-position: center;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: #666666;
color: #333333;
background-image: url(/Images/Rainbow_Button_Hover.jpg);
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
background-color: #0000FF;
color: #FFF;

PageTitle Bar Background Color

Similar Messages

Maybe you are looking for