-
Posts
61 -
Joined
-
Last visited
Recent Profile Visitors
The recent visitors block is disabled and is not being shown to other users.
peterbjerg's Achievements
-
Remove ALL code from header? Sure (Remember.. goal is, only to show captions in Lightbox mode, and to captions change instantly when going from one image to the next. I dont mind "ease out", but I dint want delay/overlapping.)
- 336 replies
-
PLEASE, could any one solve this problem of captions not changing fast enough with image shift in lightbox view. " when the next or previous image is chosen in lightbox, the caption for the previous image still shows for 1/2 seconds overlapping with the caption for the current image." Site/page: https://arnoldmikkelsen.squarespace.com/europa Password: Citron I only added captions to two first images on page, but that is enough to reveal the "hanging captions" problem Code I use (including Java scrips). Injected into Header <script> document.addEventListener("DOMContentLoaded", function () { // configure the classes we're looking for const listClass = "div.gallery figure"; const linkClass = "div.gallery-strips-item-wrapper a, div.gallery-grid-item-wrapper a, div.gallery-masonry-item-wrapper a"; const lightBoxCaption = "lightbox-caption"; const lightboxSlideSelector = "div.gallery-lightbox-list figure[data-slide-url='{0}']" // select all gallery elements, find their captions // if they exist then extract the slide id and add a new caption element // to the lightbox slide const n = document.querySelectorAll(listClass); for (var i = 0; i < n.length; i++) { const a = n[i].querySelector(linkClass); const c = n[i].querySelector("figcaption"); if (a && a.href && c) { const id = a.href.split("=")[1]; const lbSelector = lightboxSlideSelector.replace("{0}",id); const lb = document.querySelector(lbSelector); const cp = document.createElement("figcaption"); cp.className = lightBoxCaption; cp.innerHTML = c.innerHTML; lb.appendChild(cp); } } }); </script> <style> figcaption.gallery-caption { display:none; } figcaption.lightbox-caption { position: relative; margin-right: auto; margin-left: auto; width: auto; bottom: auto; max-width: 1000px; font-family: source code pro; color:grey; font-size: 14px; } </style> <style> .gallery-lightbox-background { opacity: 1.0; } </style> <style> .gallery-lightbox-item[data-in=false] .gallery-item-description { opacity: 0; transition: opacity 0.1s ease-out; } </style>
- 336 replies
-
peterbjerg started following Customize with code
-
peterbjerg started following Gallery Caption workarounds for 7.1? and Adding Padding on left/right of Gallery Grid
-
Any one knows a solution to this problem? " when the next or previous image is chosen in lightbox, the caption for the previous image still shows for 1/2 seconds overlapping with the caption for the current image."
- 336 replies
-
peterbjerg started following creedon
-
peterbjerg reacted to a post in a topic: Fixed AND transparent header/menu. How?? (SS 7.1)
-
peterbjerg reacted to a post in a topic: Fixed AND transparent header/menu. How?? (SS 7.1)
-
peterbjerg reacted to a post in a topic: how to change font color with code, please help. (Squarespace 7.1)
-
Dear @tuanphan I just used your code here to expand lightbox. But there is a problem. The larger light box shown is in landscape mode, and severely crops the original square image. Is there a way to simply make the light box larger, but adopt to the original image format? (or otherwize SQUARE lightbox, OR that image in lightbox automatically adjust content to fit lightbox, to fit lightbox frame? Site and page: https://gatsstudio.squarespace.com/art-shop/p/leaving-pompeii Password: Lemon Sincerely.. Peter The code I used .gallery-lightbox-item img { object-fit: cover !important; }
-
Site URL: https://peterbjerg.dk I would like some tips and advice on setting up a Squarcespace site for best possible basic LinkedIn integration. For example: - How to make blog post also "automatically" appear on LinkedIn, do I manually control which blogposts also post on LinkedIn? (similar to the facebook option) - How to make sure blog image layout/format looks correct on LinkedIn - What text will be posted on LInkedin, the full text? or my summary text? - And how can I share the other way around, ie. from LinkedIn to the squarespace site? IMPORTANT Its for a client for whom I make a squarespace 7.1 site. I cant really test it with her LInkedIn account. But I can test it with my own site (that is the older version of squarespace). Does it make a difference if its the older type or 7.1?
-
Site URL: https://anja-bo-site.squarespace.com How IS IT, that I change font color for specific text only on a specific page? I know I can inject code under "settings > advanced" But I have forgotten everything I have learned from @tuanphan about injecting code. Not his fault, Ive just been way from it to long , but I can pick it up quickly if helped 🙂 The page is a portefolio page with four headlines that each link to a subpage: This is the page: https://anja-bo-site.squarespace.com/ydelser-alt SITE CODE IS: Appelsin! Now it has black fonts, I want some not yet chosen color (say red), so that its still readable when background photo is active. I ONLY want to change the four headlines on this page, not the menu or anything else general. Thanks guys!
-
peterbjerg reacted to a post in a topic: Fixed AND transparent header/menu. How?? (SS 7.1)
-
Want different logo on homepage than all other pages
peterbjerg replied to talya_pdx's topic in Customize with code
Wonderfull, THAT worked!! Could you also tell me what code to add to center the image/alt logo horizontally? -
peterbjerg reacted to a post in a topic: Want different logo on homepage than all other pages
-
Want different logo on homepage than all other pages
peterbjerg replied to talya_pdx's topic in Customize with code
@tuanphan I tried, but it did not work. Site: https://arenastrategy.squarespace.com/cover-page Password: Arenasite All together, the exiting code for this page is: <style> /* hide footer */ footer#footer-sections { display: none; } /* remove padding top first section */ article>section:First-child { padding-top: 0 !important; } /* hide burger menu */ .burger-box, .header-nav-list, .header-actions { display:none !important; } /* hide logo */ .header-title-logo img { visibility: hidden; } </style> ADDING your code, but with link to my image, looks like this, but didnt work 😞 Maybe you can help? <style> /* hide footer */ footer#footer-sections { display: none; } /* remove padding top first section */ article>section:First-child { padding-top: 0 !important; } /* hide burger menu */ .burger-box, .header-nav-list, .header-actions { display:none !important; } /* hide logo */ .header-title-logo img { visibility: hidden; } .header-title-logo a { background-image: url(https://static1.squarespace.com/static/5e3832dd5baacc6c9cad3ad6/t/5e7d04f045189a6da48c2121/1585251568273/Arena-logo-white.png); background-size: cover; background-repeat: no-repeat; } </style> -
Want different logo on homepage than all other pages
peterbjerg replied to talya_pdx's topic in Customize with code
Hi @tuanphan, Can I use this script for a version 7.1 site too? Client want different color site logo ONLY on landing page/"cover page". I also need to know how to center the logo. I should change the image location url to what ever I get as url adress from uploading alt version of site logo, correct? -
Hi @brandon MAYBE this is just what I need. Not sure yet. This code has great styling of text for light box view, BUT.. I need to show my gallery in Simple Slideshow mode. And in this mode, the image description text is missing the semi-transparent backgound box, and also, the text appears as one long line and doesnt include all the text. Can you help me to correct the script, so that I will get all the text in a nice way in Simple Slideshow view? Site: https://arena-2.squarespace.com/approach 4th section (only slide show gallery on that page). Password: Arenasite I already added your code to the site wide footer and with the CSS editor. Thanks!!
- 336 replies
-
Fixed AND transparent header/menu. How?? (SS 7.1)
peterbjerg replied to peterbjerg's topic in Customize with code
With this transparency turned OFF 😞 .tweak-transparent-header:not(.header--menu-open) .header-announcement-bar-wrapper { background: transparent !important; } -
Fixed AND transparent header/menu. How?? (SS 7.1)
peterbjerg replied to peterbjerg's topic in Customize with code
@tuanphan Hmm... Transparency only works on some of the pages. For example, on this page: https://amal-testsite.squarespace.com/services2 The header background turns solid black??? -
Fixed AND transparent header/menu. How?? (SS 7.1)
peterbjerg replied to peterbjerg's topic in Customize with code
Thank YOU.. You ARE THE BEST!!