Jump to content
ideasvacuum

Colours other than w3.css library

Recommended Posts

I read that it's possible to use colours other than the w3 library colours, for example "w3-win8-lime". I couldn't get that to work

<div class="w3-bar w3-red"> <!-- this works -->
<div class="w3-bar w3-win8-lime"> <!-- this does not -->

 In addition, I'd like to be able to customise the hover colour too......

Edited by ideasvacuum
code edited

Share this post


Link to post
Share on other sites

Only if you specify the colours for class ' w3-win8-lime', w3 have really made a faux pas, doing it this way, its impractical in so many ways. What if you want to change the colour, that means you have to go through html and replace all references to a specific colour and change it to another, or use the current colour class but use a colour that is totally unrelated to specific colour in the classes name.

You apparently need to download w3-win8 colour library, great! more css colours in which only 5% will ever be used.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

So, I downloaded the win8 css, works fine, e.g. w3-win8-cyan as a button colour  - but how to set hover colours?

 "w3-hover-win8-cyan" does not work, nor does "w3-hover-w3-win8-cyan"  - I wonder if this has been overlooked, or there needs to be another library file?

Share this post


Link to post
Share on other sites

Yeah, in fact, looking at w3.css, hover colours are defined thus:

.w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}

So I edited w3-colors-win8.css:

.w3-win8-cyan,.w3-win8-hover-cyan:hover{color:#fff!important;background-color:#1ba1e2!important}

Which works. So it would seem to be an oversight by w3. Do the w3 team keep an eye on the forum?

Share this post


Link to post
Share on other sites

I don't think they would be able to cover every possible colour combinations for a hover effect, so its left to you to supply what is required, and no w3 very very rarely visit this forum.

They do have 'report error' links usually found in footer at bottom at w3schools.com tutorial pages though.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×