MillyBanks
-
Posts
80 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by MillyBanks
-
Hi @tuanphan I had deleted the block as it wasn't working but it have popped the code back in if you want to take a look! https://sunflower-eagle-a3h3.squarespace.com/home I would also like the video to appear in front of the text block but can't seem to make z-index work
-
Display multiple dates for same event
MillyBanks replied to KellenMcG's topic in Customize with code
Has anyone found a solution to this? generally the events have just a single day between them but as I am using a event calendar it doesn't make sense on the calendar! -
https://sunflower-eagle-a3h3.squarespace.com/home Having a similar issue with a custom code block. Lots of padding under the video!! In fact I can't seem to target the video specifically to edit anything (like I was able to with the text. I want to be able to bring the video in front of the text 'box' so it looks like the final screenshot and remove the white space under the video.
-
I have yes I found another work around by using a code block. I am just customising now. Do you know how to get the text with the background to appear behind the video? I then need to sort for tablet and mobile view. For mobile I will hide but I would like to have the same display on tablet. Code below - in code block: <video style="width: 100%" playsinline controls controlsList="nodownload" src="https://sunflower-eagle-a3h3.squarespace.com/s/Hornbeam-Wellbeing-And-Training-V-1-Master-Export-Converted_4.mp4"> <source type="video/mp4" src="https://sunflower-eagle-a3h3.squarespace.com/s/Hornbeam-Wellbeing-And-Training-V-1-Master-Export-Converted_4.mp4"> <body oncontextmenu="return false;"> </video> <div class="grey"> <b>At Hornbeam Workplace Wellbeing, we’ve seen the enormous costs to businesses when employee wellbeing isn’t supported properly in the workplace. <br> <br> We’ve also seen the destructive fallout for individuals, their families, and communities.</b> </div> <style> .grey { background: #2e4f69; padding: 50px; text-align: center; color: #ffffff !important; } </style> in CSS : div .grey { position: relative; bottom: 300px; width:35%; right: 250px; color: white; font-size: 15px; line-height:1.5; padding-left: 40px; padding-right: 60px; padding-top: 25px; padding-bottom:25px; } #block-yui_3_17_2_1_1648551184325_14043 { max-width:680px; position: relative; left:6%; right:6%;}
-
Site URL: https://sunflower-eagle-a3h3.squarespace.com/config/pages Hi, I am having an issue with my testimonial slider. I made this using a summary block as I have before but the buttons just aren't working on this website for some reason. I have edited various bits of the code but nothing seems to be effecting the arrows functionality just the design... I want the arrows to work and/or the summary block to transition automatically through the testimonials Any help welcomed asap! //Arrows Summary// .sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous { display:inline-block !important; float: right; position: relative; top: auto; left: -15px; right: 15px; bottom: auto; margin: 0 0 15px 0; padding: 0; background-color: transparent; color: #d1ab13 !important; font-size: 16px; line-height: 16px; text-align: center; cursor: pointer; } //right arrow design .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\E003"; text-align: left; display: inline-block; vertical-align: middle; } //right arrow size & position top to bottom .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-size: 35px; width: 16px; height: 32px; line-height: 32px; } //left arrow design .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\E000"; text-align: center; display: inline-block; vertical-align: middle; } //unsure?// .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\E003"; text-align: left; display: inline-block; vertical-align: middle; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous { margin-right: 10px; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-size: 64px; width: 64px; height: 64px; line-height: 64px; } //left arrow size & position top to bottom .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-size: 35px; width: 16px; height: 32px; line-height: 32px; } //position of the arrows right to left .summary-carousel-pager .previous { position: absolute !important; left: -10% !important; right: inherit !important; top: 45% !important; } .summary-carousel-pager .next { position: absolute !important; left: inherit !important; right: -10% !important; top: 45% !important; }
-
Any other ideas @tuanphan? 🙂
-
It seems to have worked design wise but it won't play. Is it worth trying the video uploaded differently? I was considering uploading directly to the website ideally. Perhaps something like this would work? Thanks so much for your help on this @tuanphan!
-
I am having an issue with my testimonial slider. I have used the follow code (which has worked on another website of mine with the same template etc) but the arrows aren't working to allow scroll of the testimonials. Ideally I would also like the block to automatically slide through the testimonials. Any help appreciated. Website: https://sunflower-eagle-a3h3.squarespace.com/testimonials //Arrows Summary// .sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous { display:inline-block !important; float: right; position: relative; top: auto; left: -15px; right: 15px; bottom: auto; margin: 0 0 15px 0; padding: 0; background-color: transparent; color: #d1ab13 !important; font-size: 16px; line-height: 16px; text-align: center; cursor: pointer; } //right arrow design .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\E003"; text-align: left; display: inline-block; vertical-align: middle; } //right arrow size & position top to bottom .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-size: 35px; width: 16px; height: 32px; line-height: 32px; } //left arrow design .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\E000"; text-align: center; display: inline-block; vertical-align: middle; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\E003"; text-align: left; display: inline-block; vertical-align: middle; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous { margin-right: 10px; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-size: 64px; width: 64px; height: 64px; line-height: 64px; } //left arrow size & position top to bottom .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-size: 35px; width: 16px; height: 32px; line-height: 32px; } //position of the arrows right to left .summary-carousel-pager .previous { position: absolute !important; left: -10% !important; right: inherit !important; top: 45% !important; } .summary-carousel-pager .next { position: absolute !important; left: inherit !important; right: -10% !important; top: 45% !important; }
-
Hi @tuanphan good idea. I have added the video below (ideally would like it to show without youtube branding etc) Other suggestion i've had is to code the two items together in a code block but I am unsure if it will give the desired effect.
-
Navigation and logo position - Brine
MillyBanks replied to MillyBanks's topic in Customize with code
@tuanphan yes I did - the option wasn't avaliable but after tweaking a few other things it appeared!- 3 replies
-
- 1
-
-
- brine-template
- navigation
- (and 1 more)
-
Navigation and logo position - Brine
MillyBanks replied to MillyBanks's topic in Customize with code
@tuanphan password is Hornbeam 🙂 -
Hi @tuanphan - sorry yes the password is Hornbeam I did wonder about a gif image but ideally I want a video to play here - open to suggestions of other ways to display!
-
Site URL: https://sunflower-eagle-a3h3.squarespace.com/home I am trying to stack the logo and navigation bar on the brine template and having some trouble... I have obviously played around in style settings and tried various bits of CSS to stack the logo and the nav but nothing works to stop the nav overlapping the banner. I want to make it look like this (XD mock up)
-
Site URL: https://sunflower-eagle-a3h3.squarespace.com/ I am hoping to be able to display a video like this a bit like the collage image display. Ideally I want to avoid doing this via custom CSS where I arrange each block and need them to be joined together. Does anyone know if it possible to do this?
-
Site URL: https://porcupine-duck-zbe8.squarespace.com/home Hi, I am having an issue with a summary block. I am using as a testimonial slider. The top is all cut off. I can't find anything on the forum that is changing it. The url is above but the section on the index page is /testimonials Can anyone help? 🙂
-
Hi @tuanphan the URL is above - /about I am also doing this on /silver-select with three images
-
Hi @bangank36 I am wondering if you could help. I am arranging some overlapping photographs at the top of my website. Is there a way I can stop them from disappearing behind the navigation bar when the browser is resized? Url: https://porcupine-duck-zbe8.squarespace.com/about //About Header Image #block-yui_3_17_2_1_1643757921884_4266 { position:relative; padding: 0px ! important; margin-top: -12% !important; margin-left: -12% !important; margin-right: -4% !important; } #block-yui_3_17_2_1_1643757921884_4266 { position: relative; z-index: 1; } //About #block-yui_3_17_2_1_1643807699720_2685, #block-yui_3_17_2_1_1643807699720_3678 {border: 5px solid #BBCED8!important; background: #BBCED8!important;} //Block Overlap (on top) #block-yui_3_17_2_1_1643807699720_2685{ position: relative; z-index: 100; top: -18em; right:-40%; left:40%; width: 50% } //Block Overlap (underneath) #block-yui_3_17_2_1_1643807699720_3678{ position: relative; z-index: 90; top: -29em; left: -20%; right:120%; width: 70% } #about .Index-page-content { margin-top: 10px; margin-bottom: -280px!important; }
-
Site URL: https://porcupine-duck-zbe8.squarespace.com/home Hi, I am customising my header and having some issues. I want the social bar to look like this first screenshot and I have tried several different bits of code and adjustments but it just won't work! this is where I am up to >>> Ideally I want this to sit fixed within the bar on various screen sizes and not overlap the below image I have as a header image... I haven't formatted for mobile yet but As you can see this header image also isn't responding well to the different screen sizes Any help would be much appreciated @tuanphan 🙂
-
Hi, I am creating a custom footer and want it to look like this. I am designing on a 13inch screen at the moment and I haven't edited for other devices yet. When I resize my browser the Instagram images and the custom button overlap and and responsive together. I am wondering if there is a way to link them together or basically stop this from happening? The code I have currently is //Footer //Social Icon Tab // @luxamatravel #block-yui_3_17_2_1_1643212297299_4524 { position: relative; z-index:2; left:6.9em; top: 0.0em; } //Rotate #block-yui_3_17_2_1_1643212297299_4524 { writing-mode: vertical-rl; transform: rotate(180deg); } //instagram images #block-yui_3_17_2_1_1643204551067_15575 { padding: 5px; margin-left:1px; margin-right:1em; top:13px; bottom:1em; right:0em; left:3.1em; position:relative; z-index:1; } //Privacy #block-yui_3_17_2_1_1643204551067_41001 { right:50%; left: 50%; padding-bottom:1px; padding-top:8px; } //Social Icons #block-yui_3_17_2_1_1643733898962_12402 {right:50%; left: 50%; padding-bottom:0px} //--On Page Icons .sqs-use--icon {fill:#3F798E!important;} .sqs-use--mask {fill:none!important;} .sqs-svg-icon--wrapper {border-color:none!important} //Favicon #block-yui_3_17_2_1_1643204551067_25302 { width: 50%; height: 50%; margin-left: 40px; padding-top: 10px; padding-bottom:10px; } //Brand and web design by div#block-998919da372c25060c30 a { font-family: 'Mistrully'; font-size:25px; } #block-998919da372c25060c30 { padding-top:10px; padding-bottom: 3px;} /////////// //Hide/Show on Desktop vs. Mobile /* Hide on Mobile */ @media only screen and (max-width: 640px) { #block {display: none;} } // hide on desktop /* Hide this on Tablet - Desktop */ @media screen and (min-width:768px) { #block-yui_3_17_2_1_1643215365514_5609 {display: none;} }
-
Thanks @tuanphan Any ideas why the text is cropping at the top of this? //Testimonials 2 #block-57fe313c0c2af8f6326b h3 {color: #3F798E !important; } //Arrows Summary// .sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous { display: block; float: right; position: relative; top: auto; left: -15px; right: 15px; bottom: auto; margin: 0 0 15px 0; padding: 0; background-color: transparent; color: #56889B !important; font-size: 16px; line-height: 16px; cursor: pointer; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\E003"; text-align: center; display: inline-block; vertical-align: middle; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-size: 64px; width: 64px; height: 64px; line-height: 64px; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-size: 32px; width: 16px; height: 32px; line-height: 32px; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous { margin-right: 10px; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\E000"; text-align: center; display: inline-block; vertical-align: middle; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-size: 64px; width: 64px; height: 64px; line-height: 64px; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-size: 32px; width: 16px; height: 32px; line-height: 32px; } .summary-heading { text-align: center !important; } .summary-carousel-pager .previous { position: absolute !important; left: -6% !important; right: inherit !important; top: 45% !important; } .summary-carousel-pager .next { position: absolute !important; left: inherit !important; right: -6% !important; top: 45% !important; } .summary-header-text{ position: relative !important; padding: 0 0 0 0 !important; left: 5px !important; } //What are you waiting for// section#what-are-you-waiting-for-2 { min-height: unset; } section#what-are-you-waiting-for-2>div { padding-top: 90px; padding-bottom: 50px; } ////////// //Social Media //Header .Header-inner { z-index: 4; width: 100%; } .Header{ z-index: 1000; position: relative; width: 100%; } .Header .Header--bottom {position: fixed;} .Header-social { -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform: rotate(90deg); -ms-transform:rotate(90deg); transform: rotate(90deg); white-space:nowrap; display:block; position: bottom right; padding-top: 0px; margin-left:0px; height: 40px; width: 240px; position: absolute; left: 85%; top: 30px; z-index: 5; } .SocialLinks-link-svg { -webkit-transform:rotate(270deg); -moz-transform:rotate(270deg); -o-transform: rotate(270deg); -ms-transform:rotate(270deg); transform: rotate(270deg); position: absolute; white-space:nowrap; display:block; z-index: 5; overflow: visible; } .SocialLinks-inner { margin-left:40px; } .social-icons-style-knockout.social-icons-color-black .sqs-use--mask {fill: #3F798E;}.social-icons-style-knockout.social-icons-color-black:hover .sqs-svg-icon--wrapper:hover .sqs-use--mask {fill:#3F798E}
-
Thanks @tuanphan - brilliant as always!
-
How to add a border around the image of a card image block
MillyBanks replied to MillyBanks's topic in Customize with code
Thankyou!!! -
How to add a border around the image of a card image block
MillyBanks replied to MillyBanks's topic in Customize with code
Thanks @tuanphan nearly there but it appears a little odd
-
Site URL: https://porcupine-duck-zbe8.squarespace.com/home Hi I have used your code - great post thank you. A couple of issues I wonder if anyone can help with firstly the header font is cropped? I have played around with padding on the section with no change Secondly... It works when I am in the css editor but as soon as I click off the colour/style reverts back to standard. While in the editor : Out of the editor : I am having a similar issue with the first card image too - see below: In the editor : Out of the editor : //Arrows Summary// .sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous { display: block; float: right; position: relative; top: auto; left: -15px; right: 15px; bottom: auto; margin: 0 0 15px 0; padding: 0; background-color: transparent; color: #56889B !important; font-size: 16px; line-height: 16px; cursor: pointer; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\E003"; text-align: center; display: inline-block; vertical-align: middle; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-size: 64px; width: 64px; height: 64px; line-height: 64px; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-size: 32px; width: 16px; height: 32px; line-height: 32px; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous { margin-right: 10px; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; content: "\E000"; text-align: center; display: inline-block; vertical-align: middle; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-size: 64px; width: 64px; height: 64px; line-height: 64px; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-size: 32px; width: 16px; height: 32px; line-height: 32px; } .sqs-block-summary-v2 .summary-heading { font-size: 24px; } .summary-heading { text-align: center !important; } .summary-carousel-pager .previous { position: absolute !important; left: -6% !important; right: inherit !important; top: 45% !important; } .summary-carousel-pager .next { position: absolute !important; left: inherit !important; right: -6% !important; top: 45% !important; } .summary-header-text{ position: relative !important; padding: 0 !important; left: 25px !important; } //What are you waiting for// section#what-are-you-waiting-for-2 { min-height: unset; } section#what-are-you-waiting-for-2>div { padding-top: 90px; padding-bottom: 50px; }
