Hi,
First, let me thank you for taking the time to help me out on this.
I’ve been trying several days now to re-style the menubar to match the theme of our web application but have limited success. Would love to see a detailed example (application code and css) that i can model after to change the look and feel of menu, menu-items, etc. Any help will be appreciated.
Thanks,
Paul
Menubar is complex and has many elements that can be styled.
If you can be more specific with what you want to do we would be able to help you better. Also it will depend on which theme you are using as a base (Reindeer, Runo, Chameleon, …)
There are lots of posts in the forum about that already.
Like :
How to set a style name and change the background picture
Make the bar grey
Hi Mathias,
Sorry, my question seems loaded but that’s because I don’t even know where to start.
I’m using the Chameleon as the base theme. I wanted to have the menubar look like the “Activiti Explorer” open source tool… (see below)
I have gone through the Forum and read every topic that is related to Menubar but I have not found one with sufficient details to help me implement the look and feel that I want for our application. I tried adjusting the properties listed below but I can’t seem to control them. Changing the dials does not change the look and feel of the menu bar.
/* Menubar */
.v-menubar {
text-align: center;
background: transparent;
border: none;
color: white;
text-shadow: none;
font-size: 16px;
}
.gwt-MenuItem {
background : grey;
color : black;
}
.gwt-MenuItem-selected {
background : blue;
color : white;
}
For the personal (“Clint Cate”) menu, i’d like to have the drop down similar to the google menu.
For displaying arrows, you need to make a png file with the arrow on transparent background and then use CSS to put that image as background (search for css background)
If you have more specific questions I will be happy to answer them.
Thanks Mathias! That works well. I was able to get the up arrow to show when i select the menu. However, I’m not able to have image stayed once the menu is clicked.
.system .v-menubar-menuitem.v-menubar-menuitem-system-menu {
float:left;
background: none;
padding: 0 10px 0 10px;
color:#fff;
text-shadow: none;
font-size: 16px;
height: 50px;
line-height: 50px;
}
.system .v-menubar-menuitem-system-menu.v-menubar-menuitem-selected {
background: url(images/bluebar-bg-selected.png) no-repeat 50% 100%;
}
Do you know what selector of the chameleon theme i need to set?
Is there one for active?
Thanks,
Paul
It would be helpful to find out all the selectors that controls the look and feel of the menu, menuitem, selected, hover, active, etc… Do you know where I can located this information? I think I can take it from here after i know where to code the css.
Thanks,
Paul
You can get some styles in the book, some others from the chameleon/reindeer theme but it is impossible to make a complete list.
You need to use firebug/web inspector to know the style of what you actually need.
Ok, thanks Mathias.
Paul