Site Builder – Code Snippets

How to use code snippet
Go to the Site Builder Settings page (here), then paste the code into Custom Code: Site .
Be sure to paste the new code after the last line of existing code (be careful not to paste it in the middle of the existing code).



01. Menu are closed by default


<style>
    #MenuVerticleLeft .the-sub-menu {display:none;} 
    #MenuVerticleLeft .menu-open .the-sub-menu {display:block;}
    #MenuHorzTop .the-sub-menu {display:none;} 
    #MenuHorzTop .menu-open .the-sub-menu {display:block;}
    #TheSiteMenu .sub-menu-container span{cursor:pointer}
    #TheSiteMenu .sub-menu-container span:after{content:"+";margin-left:5px;margin-top:-3px;}
    #TheSiteMenu .sub-menu-container.menu-open span:after{content:"-"}
</style>

02. Menu are always open


<style>
    #MenuVerticleLeft .the-sub-menu {display:block;} 
    #MenuVerticleLeft .menu-open .the-sub-menu {display:block;}
</style>

03. Remove menu background color (transparent background)
For all themes


<style>
    #MenuHorzTop.site-menu-outer, #MenuHorzTop .the-sub-menu, body.left-menu .columns.site-menu-column {background-color: transparent}
</style>

04. Afix social media icons to bottom left corner
For themes with left side


<style>
   @media all and (min-device-width: 645px), (min-width: 645px) {
      .menu-social-media {position:fixed;bottom:10px;left:10px;}
   }
</style>

05. Change menu logo link
**Replace INSERT-URL-HERE with new link


<script>
   $(function(){
      $('#LogoImg').off('click');
      $('#LogoImg').on('click', function() { location.href='INSERT-URL-HERE' });
   });
</script>

06. Remove styles from menu: horizontal lines & background color
For Theme 102 & 102b


<style>
   #MenuVerticleLeft li,
   #MenuVerticleLeft .the-sub-menu li,
   #MenuVerticleLeft li.subpage-active{border:none}
   #MenuVerticleLeft li a:hover, #MenuVerticleLeft li span:hover{background-color:transparent}
</style>

07. Hide Image Count (above captions)


<style>
   .captionarea .caption-image-count{display:none}
</style>

08. Logo text – white text on homepage (only)
Works well for dark background images on your homepage


<style>
   body.home #LogoTextTitle{color:#fff}
</style>

09. Invert PNG logo color on homepage (black to white)
Make a black logo appear white on your homepage


<style>
   body.home #TheMenuLogo img {-webkit-filter: invert(100%);filter: invert(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');}
</style>

Visura Support

Get help with the Visura Platform
Website via Visura

Visura Support is integrated to:
Visura site builder, a tool to grow your photography business
Visura's network for visual storytellers and journalists
A photography & film archive by Visura
Photography grants, open calls, and contests
A newsfeed for visual storytellers