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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...