gallop
-
Posts
15 -
Joined
-
Last visited
Reputation Activity
-
gallop reacted to tuanphan in Change mobile styling on specific block
@olipowell add to Home > Design > Custom CSS
@media screen and (max-width:640px) { div#block-ce591823b8f1025afa01 * { text-align: left !important; } div#block-ce591823b8f1025afa01 { padding-top: 10px !important; padding-bottom: 20px !important; padding-left: 30px !important; padding-right: 40px !important; } }
-
gallop reacted to rdreed in Logo loading screen - code adjustment please
Hi everyone,
I bought a plugin from Squarestud.io and it appears that they dont respond to anyone's emails/facebook/instagram - I assume they have gone bust. Anyway, I need to tweak the plugin and I am not very good at .js and would appreciate some help.
The plugin is a logo loading screen using the site's logo. I am wanting to replace the image source (the existing site logo) with a gif that is stored in the site's CSS stored files - URL below.
Any help is really really really appreciated.
Thank you,
Rob
working site: https://pepper-clarinet-ctnt.squarespace.com/
GIF:
https://static1.squarespace.com/static/5d9db9630e0cb109b5331185/t/5db877bc05d8093cb6fbfe15/1572370384602/mrnice-smiley.gif
Code Injection:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <div class="logoload"></div> <script> $(function() { var loadLogo = $('header').find('img').attr('src'); $('.logoload').css('background-image', 'url(' + loadLogo + ')'); }); </script> <style> .logoload { /* SET BACKGROUND COLOR */ background-color: #fff; /* SET BACKGROUND SIZE */ background-size: 90px; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-position: center; background-repeat: no-repeat; } </style> <script type="text/javascript"> $(window).load(function() { $(".logoload").delay(500).fadeOut("slow"); }) </script>
-
gallop reacted to tuanphan in Logo loading screen - code adjustment please
@rdreed Your code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <div class="logoload"></div> <style> .logoload { /* SET BACKGROUND COLOR */ background-color: #fff; /* SET BACKGROUND SIZE */ background-size: 90px; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-position: center; background-repeat: no-repeat; background-image: url("https://static1.squarespace.com/static/5d9db9630e0cb109b5331185/t/5db877bc05d8093cb6fbfe15/1572370384602/mrnice-smiley.gif"); } </style> <script type="text/javascript"> $(window).load(function() { $(".logoload").delay(500).fadeOut("slow"); }) </script>
-
gallop reacted to tuanphan in Logo loading screen - code adjustment please
Add to Page Settings > Advanced > Header
<script> $(window).load(function() { $('body').css('overflow', 'hidden'); setTimeout( function() { $('body').css('overflow', 'initial'); }, 5000); }); </script>
-
gallop reacted to tuanphan in Hamburger Menu Nav across all devices (version 7.1)
You can replace burger icon with custom three lines (here is an example img)
Add to Home > Design > Custom CSS. Replace current image with three lines icon url
.burger-box div { display: none; } .burger-box { background-image: url(https://static.thenounproject.com/png/3143942-42.png); background-size: contain; background-repeat: no-repeat; background-position: center center; }
-
gallop reacted to inside_the_square in Hamburger Menu Nav across all devices (version 7.1)
Hey @rsmith3074 - I realize you posted this weeks ago but I just now got back onto the forum and wanted to share the answer in case you still needed it! I use CSS to do this; this code does the trick for me. Hope it helps!
.header-burger { display:flex!important} .header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;} .header-nav, .header-actions {visibility:hidden!important}