search

wet-boew / wet-boew

Web Experience Toolkit (WET): Open source code library for building innovative websites that are accessible, usable, interoperable, mobile-friendly and multilingual. This collaborative open source project is led by the Government of Canada.
https://wet-boew.github.io/wet-boew/index-en.html
Other
1.6k stars 661 forks source link

WET template questions (set-up) #7789

Open jsguy1 opened 7 years ago

jsguy1 commented 7 years ago

Hello,

I am using the WET theme on my web site (still in development) and have some questions below:

WET Theme: http://wet-boew.github.io/wet-boew/docs/ref/theme-wet-boew/theme-wet-boew-en.html

1) How do I change the background colour of the navy blue menu bar? (I am referring to the background colour of the buttons in the menu (i.e. WET project/Implement WET/Contribute to WET) but also the horizontal bar that spans across the screen. The existing navy blue colour is #0E4164.

2) I do not have any sub menus at the present time. Therefore, I do not want the user to see a drop down when they hover over the buttons in the menu bar. How do I disable the drop down for each button?

3) After downloading the theme, I notice there are two locations to add items in the menu bar. The menu items are found in both /ajax/sitemenu-en.html and /index-en.html. I'm just curious why it was set up this way. Why not only have the buttons located in /ajax/sitemenu-en.html ?

Thanks! (I read over the documentation but couldn't find answers to these questions.)

LaurentGoderre commented 7 years ago

There is no simple answer to the first question. You have two choices: 1) to create an override file to change the color (you'd have to recreate the selectors etc) 2) Create a new themefrom that theme, change the SCSS variables and recompile.

The drop down only shows when there is a sub menu, otherwise it doesn't show up

The two menu is for progressive enhancement purposes. The ajax menu adds the submenus bu replacing the whole menu, but if the replacement fails, the original menu still work. You can notice that the top level links are different in the ajax and non ajax. In the ajax, there is no link, it just alows to open the submenu. The non ajax should link to a landing page to reproduce the menu to allow navigating when the menu doesn't work.

jsguy1 commented 7 years ago

Thanks for the info. For the first question I was hoping there was a simple class that needed to be changed, but then I saw the colour being used in multiple places so I see how it's not straightforward. Looks like I'll have to play around with it some more.