Aanvullende CSS styling

Hieronder staan een aantal voorbeelden van custom CSS styling die je kunt gebruiken via de Manager Wisecat+ configuratie:

/* change the hover color of the primary buttons */

#wise-styling .btn-primary:hover, 
#wise-styling .btn-primary:focus {
  background: #FF1493; /* pink */
  color: #FFFFFF; /* white */ 
}

/* replace first main menu item text with a background image */

@media(min-width:576px){  
  #wise-styling .wise-main-navigation-bar li:first-child span {
    display: inline-block;
    text-indent: -9999px;
    padding-left: 18px;
  }
  #wise-styling .wise-main-navigation-bar li:first-child a {
    padding-left: 17px;
    padding-right: 17px;
    background: url("https://www.bibliotheek.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/home/active.png") no-repeat center; 
    /* replace url above with the desired image on your own domain */
  }  
    
  #wise-styling .wise-main-navigation-bar li:first-child a:hover,
  #wise-styling .wise-main-navigation-bar li:first-child a:focus {
    background: url("https://www.bibliotheek.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/home/hover.png") no-repeat center; 
    /* replace url above with the desired image on your own domain */
  }
}

/* show image instead of text for social media links (example for links starting with "https://www.facebook.com") */

#wise-styling .wise-styling-menu-service-top li a[href^="https://www.facebook.com/"] span {
    display: inline-block;
    text-indent: -9999px;
    padding-left: 18px;
}
#wise-styling .wise-styling-menu-service-top li a[href^="https://www.facebook.com/"] {
    background-size: 16px 16px;
    background: url("https://www.bibliotheek.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/widget/follow-facebook.svg") no-repeat center;
    /* replace url above with the desired image on your own domain */
}