Answers from tuanphan - Page 9

tuanphan's post in Lightbox-only caption photo gallery with CSS? was marked as the answer March 6

You can use a CSS code like this (Website > Website Tools > Custom CSS)
[data-slide-url]:after { display: block; color: black; z-index: 99999; position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); } [data-slide-url="u912u88ef4rhh05pptrzi3tazv1pr4"]:after { content: "Feral Goats on Slievecarran"; } [data-slide-url="1kv0c7bmb7tf9i671nq7zlvzvor0nf"]:after { content: "Bouleevin-Sunrise"; } [data-slide-url="9fdxxom6mdst2k89vrmsk0tph2qbgg"]:after { content: "Doonties-Gateway-Dingle-Peninsula.jpg"; } Result

To find data-slide-url, you can open lightbox > right click anywhere on the page > Inspect
It will show a box on right or under screen > You can search data-slide-url
it will show all

tuanphan's post in Exclude universal line padding code for 1 specific block was marked as the answer March 6

To achieve Page Content Only, Exclude Footer, use this CSS code
/* Apply padding to all Line blocks */ #page article .sqs-block-horizontalrule { padding-top: 10px !important; padding-bottom: 10px !important; }

tuanphan's post in How can I use code to change the Summary Block type styles? was marked as the answer March 6

You can use this to Website > Website Tools > Custom CSS
/* Summary title */ a.summary-title-link { font-size: 38px !important; }

tuanphan's post in Preserving A Two Column Desktop Layout on Mobile was marked as the answer March 5

Use this new code for Rodeo page
@media screen and (max-width:767px) { div#page-65d295500d3ab3468b02453f>.row:nth-child(n+2) { column-count: 2; column-gap: 0px; } }

tuanphan's post in CSS issues since moving to 7.1 was marked as the answer March 5

Use this code to bottom of Code Injection > Footer
<script> $(document).ready(function(){ $("article section:first-child").append('<div id="brush"></div>'); }); </script>

tuanphan's post in When hovering on the NAV menu was marked as the answer March 5

You can use this code to Website > Website Tools > Custom CSS
div.header-nav-item>a:hover { font-weight: bold !important; } .header-nav-folder-content { background-color: gray !important; }

tuanphan's post in Can't get section background to show full image or the portion I want was marked as the answer March 5

Password is incorrect

tuanphan's post in How to make adjustments to Carousel was marked as the answer March 5

Keep Shop Now button then add this code to Custom CSS box, the code will hide button + turn button link to image link
section[data-section-id="65e08a2615ebd7100f986d8a"] { li.list-item { position: relative; } .list-item-content__button-container { position: static; } .user-items-list-carousel .list-item-content__button-container a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; border: none !important; } .user-items-list-carousel .list-item-content__button-container { position: static !important; transform: unset !important; } a.list-item-content__button.sqs-block-button-element:before { visibility: hidden; } .user-items-list-carousel__slide { pointer-events: initial !important; user-select: unset !important; } .user-items-list-carousel__gutter { cursor: pointer; } .list-item-content--hidden { display: block !important; }}

tuanphan's post in Change slideshow controls was marked as the answer March 5

You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) { body.homepage svg.mobile-arrow-icon { display: none; } body.homepage .user-items-list-banner-slideshow__arrow-icon-background.mobile-arrow-icon-background-area { width: 20px !important; height: 20px !important; bottom: 0 !important; background-color: transparent !important; border: 1px solid white !important; } body.homepage .mobile-arrows { bottom: 0px !important; } }

tuanphan's post in Change Social Icon Email Link was marked as the answer March 5

With Custom CSS, the code format will be like this
id/class name { CSS value; } Code Injection Header/Footer, the code format will be like this
<style> CSS code </style> or
<script> JS code </script> or
<link rel="stylesheet" href="url" /> With <style>, usually add to Code Injection Header
<script> will be Code Injection Footer
(but you insert it in Header or Footer, it will also run)
With Contact Page, add this code to Contact Page Header Code Injection
<style> header#header a.icon[href*="contact"] { display: none !important; } </style>

tuanphan's post in Dropdown font, underline and background colour was marked as the answer March 5

You can use this code to Website Tools > Custom CSS

span.header-nav-folder-item-content { background-position: 0 20px !important; }

tuanphan's post in Video Aspect Ratio for Mobile on Courses was marked as the answer March 4

Try this code to Website Tools > Custom CSS
/* Course - mobile - video */ @media screen and (max-width:767px) { .course-item__lesson-content .course-item__video-container { height: 250px !important; min-height: unset !important; } }

tuanphan's post in How to reduce my site to one page on mobile but keep the others on desktop version? was marked as the answer March 4

To hide nav on mobile, use this code to Website > Website Tools > Custom CSS
@media screen and (max-width:767px) { .header-nav, .header-burger { display: none !important; } }

tuanphan's post in different horizontal spacing in different dropdown menus was marked as the answer March 4

You can use this CSS code
.header-nav-folder-content { left: 0 !important; right: unset !important; margin-left: -1em; }

tuanphan's post in Changing the header color on my home page ONLY was marked as the answer March 4

You can use this code to Website > Website Tools > Custom CSS
body.homepage header#header, body.homepage .header-background-solid { background-color: #000 !important; } body.homepage div.header-nav-item>a { color: #f1f !important; }

tuanphan's post in Limit excerpt character count on Blog page 7.1 was marked as the answer March 4

Use a code like this
.blog-excerpt-wrapper { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } If you mean this page https://lisagaron.com/blog

tuanphan's post in How to add a strike through to text on carousel was marked as the answer March 3

First, make text $750 bold
Next, use this code to Website > Website Tools > Custom CSS
.list-item-content__description p strong { font-weight: normal; text-decoration: line-through; } result

tuanphan's post in Resize media image and text on mobile only was marked as the answer March 3

You can add transform: scale(1.5); to this code
section.Intro figure img { width: 100% !important; height: auto !important; left: 0 !important; transform: scale(1.5); }

tuanphan's post in Heading Banner scrolls halfway up when scrolling. was marked as the answer March 3

Can you share site url? We can check easier

tuanphan's post in How do I change "menu" to a hamburger icon on mobile? was marked as the answer March 2

Sorry, misread your questions, to add X icon, use this CSS code
.menu-open + #headerWrapper nav#mobileMenuLink ul>li>a:after { content: "\e01a"; }

tuanphan's post in Custom Button Shapes? was marked as the answer March 1

Have you tried adding an Image Bock
then add a Text Block Join Now over it
?

tuanphan's post in Carousel gallery block - text link in description was marked as the answer March 1

I guess you should see this option

tuanphan's post in Setting up easter egg hunt was marked as the answer February 29

You can edit page where you want to add this > Add a Code Block > Paste code in Step 2

tuanphan's post in How can I make a full image shown in the Slideshow? I fixed the mobile version, but it keeps cropping for web was marked as the answer February 29

Try using this CSS code under your code
@media screen and (min-width:992px) { section[data-section-id="65df9a33454cdb787b43a9b4"] .gallery-fullscreen-slideshow { height: clamp(0px, 53vw, 160vh) !important; } }

tuanphan's post in How to use hover over gifs for my Vimeo video thumbnails was marked as the answer February 29

These pages
https://www.jamesgreenfilm.com/select-works/music-videos
https://www.jamesgreenfilm.com/select-works/commercials
contains "category" in url

but main page has no this

the code target no-category only, so it won't work on another page

you can add * symbol to the code, to make it target both formats
from this code
a.lessons-image[href="/select-works/v/victory-to-the-mimers"] img { content: url(https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExcjFwdWtvYXFoc2N2Mm94Zm05anl1N2doaDZnZjdnZzYxdDFuOHdmcSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/4dCaqOBjqpmmmwWWqZ/giphy.gif) } a.lessons-image[href="/select-works/v/itv-comedy-greggs"] img { content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/02f63b02-d29f-44f0-b1a8-d27fe2429bf6/ezgif-4-2dc2db764b.gif?format=2500w) } a.lessons-image[href="/select-works/v/kid-kapichi-thugs"] img { content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/04f1695d-3ab1-4596-a1c8-fa029ea072bc/ezgif-4-ec4e8873d0.gif?format=2500w) } a.lessons-image[href="/select-works/v/kid-kapichi-death-dips"] img { content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/f982597b-edf6-4ca0-af66-c8f92320a0ac/ezgif-4-eb268ff6d1.gif?format=2500w) } a.lessons-image[href="/select-works/v/mtvcatfish"] img { content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/ee422cbe-ef0c-4909-a3f6-ab980607c7d6/ezgif-4-554f2aeeb6.gif?format=2500w) } a.lessons-image[href="/select-works/v/mtv-thecharlotteshow"] img { content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/75997f68-ea7c-4913-b1a5-7a2c181b0766/ezgif-4-73cab15d19.gif?format=2500w) } a.lessons-image[href="/select-works/v/notion-found-love"] img { content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/b6e98936-e5a0-4a9e-a78a-a6cf769e784a/ezgif-4-41b2c369a1.gif?format=2500w) } a.lessons-image[href="/select-works/v/crows-closer"] img { content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/55045bde-a3c2-46e0-9df9-6892ccd312ea/ezgif-1-32e33704b7.gif?format=2500w) } to this new code
a.lessons-image[href*="/select-works/v/victory-to-the-mimers"] img { content: url(https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExcjFwdWtvYXFoc2N2Mm94Zm05anl1N2doaDZnZjdnZzYxdDFuOHdmcSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/4dCaqOBjqpmmmwWWqZ/giphy.gif) } a.lessons-image[href*="/select-works/v/itv-comedy-greggs"] img { content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/02f63b02-d29f-44f0-b1a8-d27fe2429bf6/ezgif-4-2dc2db764b.gif?format=2500w) } a.lessons-image[href*="/select-works/v/kid-kapichi-thugs"] img { content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/04f1695d-3ab1-4596-a1c8-fa029ea072bc/ezgif-4-ec4e8873d0.gif?format=2500w) } a.lessons-image[href*="/select-works/v/kid-kapichi-death-dips"] img { content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/f982597b-edf6-4ca0-af66-c8f92320a0ac/ezgif-4-eb268ff6d1.gif?format=2500w) } a.lessons-image[href*="/select-works/v/mtvcatfish"] img { content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/ee422cbe-ef0c-4909-a3f6-ab980607c7d6/ezgif-4-554f2aeeb6.gif?format=2500w) } a.lessons-image[href*="/select-works/v/mtv-thecharlotteshow"] img { content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/75997f68-ea7c-4913-b1a5-7a2c181b0766/ezgif-4-73cab15d19.gif?format=2500w) } a.lessons-image[href*="/select-works/v/notion-found-love"] img { content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/b6e98936-e5a0-4a9e-a78a-a6cf769e784a/ezgif-4-41b2c369a1.gif?format=2500w) } a.lessons-image[href*="/select-works/v/crows-closer"] img { content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/55045bde-a3c2-46e0-9df9-6892ccd312ea/ezgif-1-32e33704b7.gif?format=2500w) }

tuanphan

Posts

Joined

Last visited

Days Won

Community Answers

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources