Agent1
(Agent 100)
February 17, 2020, 9:31am
1
Hello!
Do you know how to set the color of the navigation bar to another color?
@CssImport("./CSS/Hem.css")
public class Hem extends AppLayout {
private static final long serialVersionUID = 1L;
@Autowired
private Top top;
@PostConstruct
public void init() {
// Set the top
boolean touchOptimized = true;
addToNavbar(touchOptimized, top.getBarImage(), top.getDrawerToggle());
addToDrawer(top.getTabs());
Tarek15
(Tarek Oraby)
February 18, 2020, 10:41am
2
It can be done using CSS theming:
Create a CSS file in the project’s frontend folder, e.g. frontend/styles/vaadin-app-layout-styles.css
Add the desired declaration using the navbarTop as the id selector
#navbarTop {
background: yellow;
}
Add @CssImport annotation to the top most parent layout
@CssImport(value = "./styles/vaadin-app-layout-styles.css", themeFor = "vaadin-app-layout")
Agent1
(Agent 100)
February 18, 2020, 12:27pm
3
Tarek Oraby:
It can be done using CSS theming:
Create a CSS file in the project’s frontend folder, e.g. frontend/styles/vaadin-app-layout-styles.css
Add the desired declaration using the navbarTop as the id selector
#navbarTop {
background: yellow;
}
Add @CssImport annotation to the top most parent layout
@CssImport(value = "./styles/vaadin-app-layout-styles.css", themeFor = "vaadin-app-layout")
Does not work if I not use themeFor = "vaadin-app-layout"
, but if I do, then I can’t control the size of the bar image.
Do I need to use themeFor
?
Tarek15
(Tarek Oraby)
February 18, 2020, 12:55pm
4
The bar image should be still controllable with the themefor in place, using methods such as setHeight() and setWidth().
Example,
@CssImport(value = "./styles/vaadin-app-layout-styles.css", themeFor = "vaadin-app-layout")
public class AppLayoutWithNavbarMenu extends AppLayout {
public AppLayoutWithNavbarMenu() {
Image img = new Image("https://i.imgur.com/GPpnszs.png", "Vaadin Logo");
Tabs tabs = new Tabs(new Tab("Home"), new Tab("About"));
img.setWidth("250px");
img.getStyle().set("height", "25px");
addToNavbar(true, img, tabs);
}
}
Agent1
(Agent 100)
February 19, 2020, 5:36pm
5
Tarek Oraby:
The bar image should be still controllable with the themefor in place, using methods such as setHeight() and setWidth().
Example,
@CssImport(value = "./styles/vaadin-app-layout-styles.css", themeFor = "vaadin-app-layout")
public class AppLayoutWithNavbarMenu extends AppLayout {
public AppLayoutWithNavbarMenu() {
Image img = new Image("https://i.imgur.com/GPpnszs.png", "Vaadin Logo");
Tabs tabs = new Tabs(new Tab("Home"), new Tab("About"));
img.setWidth("250px");
img.getStyle().set("height", "25px");
addToNavbar(true, img, tabs);
}
}
Thanks. But then I will have some issues with mobile view.
I’m using CSS for both mobile and desktop.