Customizing W3.CSS

[jza]

Good day,

I am trying to use the W3.css framework with one of the free templates. The issue is that none of my modifications to W3.css appear to be coming through... For example, if I was to change the w3-black class from:

.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}

To:

.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#CCC!important}

I would expect the background colour of this DIV to go from black to grey, but that is not the case, it stays black.

<div class="w3-top">
  <div class="w3-bar w3-black w3-wide w3-padding w3-card">
    <a href="#home" class="w3-bar-item w3-button"><b>BR</b> Architects</a>
    <!-- Float links to the right. Hide them on small screens -->
    <div class="w3-right w3-hide-small">
      <a href="#projects" class="w3-bar-item w3-button">Projects</a>
      <a href="#about" class="w3-bar-item w3-button">About</a>
      <a href="#contact" class="w3-bar-item w3-button">Contact</a>
    </div>
  </div>
</div>

 

[niche]

http://bdavidxyz.com/blog/how-to-name-css-classes/

[jza]

Thank you but I'm not sure that answers my question... I'm making changes to the existing classes in W3.css and the changes aren't coming through.

[dsonesuk]

Make sure changes appear after existing, beit a link to custom css file (best option) or editing of existing w3-css template css file (worst option, update will overwrite changes), then clear cache, history etc.

Edited October 29, 2020 by dsonesuk

[jza]

The changes did appear after exiting and I was linking to a copy of W3.css hosted on my web server. I opted to call the file and any of my own classes I just wrote them in the style tags.

[dsonesuk]

Hitting cntrl F5, usually show latest changes.