7TK
-
Posts
31 -
Joined
-
Last visited
Reputation Activity
-
7TK got a reaction from Lesum in Changing Input Headings on Lightbox Forms to Different Language
Amazing! Thank you again, Lesum!! 👍
-
7TK reacted to Lesum in Changing Input Headings on Lightbox Forms to Different Language
@7TK Great! Here's the updated code. You can remove the previous code and add this one:
#collection-64f79ac25b5b893aaa092e3a { .field.first-name .caption-text { visibility: hidden; } .field.first-name .caption-text:before { visibility: visible; content: "Nombre"; } .field.last-name .caption-text { visibility: hidden; } .field.last-name .caption-text:before { visibility: visible; content: "Apellidos"; } .address .field:nth-child(n+1) .caption-text { visibility: hidden; } .address .field:nth-child(2) .caption-text:before { visibility: visible; content: "País"; } .address .field:nth-child(4) .caption-text:before { visibility: visible; content: "Dirección Línea 1"; } .address .field:nth-child(6) .caption-text:before { visibility: visible; content: "Dirección Línea 2"; } .address .field:nth-child(8) .caption-text:after { visibility: visible; content: "Ciudad"; } .address .field:nth-child(9) .caption-text:after { visibility: visible; content: "Provincia"; } .address .field:nth-child(10) .caption-text:after { visibility: visible; content: "Código Postal"; } span.description.required { visibility: hidden; } span.description.required:before { visibility: visible; content: "(obligatorio)"; } } -
7TK reacted to Lesum in Changing Input Headings on Lightbox Forms to Different Language
@7TK You can try adding this code snippet under Custom CSS panel:
#collection-64f79ac25b5b893aaa092e3a { .field.first-name .caption-text { visibility: hidden; } .field.first-name .caption-text:before { visibility: visible; content: "Nombre"; } .field.last-name .caption-text { visibility: hidden; } .field.last-name .caption-text:before { visibility: visible; content: "Apellidos"; } .address .field:nth-child(n+1) .caption-text { visibility: hidden; } .address .field:nth-child(2) .caption-text:before { visibility: visible; content: "País"; } .address .field:nth-child(4) .caption-text:before { visibility: visible; content: "Dirección Línea 1 (required)"; } .address .field:nth-child(6) .caption-text:before { visibility: visible; content: "Dirección Línea 2"; } .address .field:nth-child(8) .caption-text:after { visibility: visible; content: "Ciudad (required)"; } .address .field:nth-child(9) .caption-text:after { visibility: visible; content: "Provincia (required)"; } .address .field:nth-child(10) .caption-text:after { visibility: visible; content: "Código Postal (required)"; } } This code will convert the form field input labels (first name, last name, country, address line 1, address line 2, city, state, and zip) from English to Spanish, but it will only affect the page you shared in your post.
Let me know how it goes. Thanks!
-
7TK got a reaction from tuanphan in Scrolling marquee cutting off descender text
Thanks so much, @tuanphan! 👍 That fixed it! 😀
-
7TK reacted to tuanphan in Scrolling marquee cutting off descender text
Add to Design > Custom CSS
/* Show marquee text */ .Marquee { overflow: visible !important; } svg.Marquee-svg { overflow: visible !important; }
-
7TK got a reaction from creedon in Need to change hamburger icon colour after it's clicked
Wow - this worked immediately! Thank you SOOOOO much, creedon! 😀
-
7TK reacted to creedon in Need to change hamburger icon colour after it's clicked
Replace, make a copy somewhere, your CSS with the following.
<style> div#canvasWrapper { background-image : url( https://static1.squarespace.com/static/53514fd4e4b095a1b0b3a6bb/t/62d56f6fb8e3714244383a66/1658154863809/Dark+Green-2.png ); background-position : center center; background-size : cover; background-repeat : no-repeat; } .ctrl-button .icon-hamburger:before, h1.logo.logo-image, h2.logo-subtitle, nav.main-nav { -webkit-filter : invert( 100% ); filter : invert( 100% ); } .sqs-mobile-nav-open .ctrl-button .icon-hamburger:before { -webkit-filter : unset; filter : unset; } form, p { color : #fff8dc; } </style> This is for v7.0 using the Forte template and specific to the poster's need.
Let us know how it goes.
-
7TK reacted to tuanphan in How to remove white space in mobile view
Add to Design > Custom CSS
@media screen and (max-width:640px) { body#collection-62896865f236c476d5d8b0e0 div#canvasWrapper { height: 100vh; } }
-
7TK reacted to tuanphan in Increasing thumbnails per row in gallery
It looks fine to me. Can you take a screenshot & explain?
-
7TK reacted to tuanphan in Increasing thumbnails per row in gallery
Add to Design > Custom CSS
@media screen and (min-width:1920px) { div#block-yui_3_17_2_1_1652133655209_1816 .slide { width: 16.6666% !important; clear: none !important; } div#block-yui_3_17_2_1_1652133655209_1816 .slide:nth-child(6n+1) { clear: left !important; }}
-
7TK got a reaction from tuanphan in Reducing number of grid blocks per row in specified width range - new question
Update: I was able to resolve the additional problems mentioned above by using the following code posted by @dvgdvgdvg
Thank you @tuanphanand @dvgdvgdvg!
@media screen and (min-width:768px) and (max-width: 1024px) { .blog-basic-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; grid-column-gap: 40px !important; } .blog-basic-grid .blog-list-pagination { grid-column-end: 3 !important; } } -
7TK reacted to dvgdvgdvg in Basic grid blog - switching from 3 to 2 columns at medium screen widths breaks layout (7.1)
I actually just finally found the cause! It was the pagination links that were breaking the layout. I changed the "grid-column-end" setting on the pagination (from 4 to 3) and now it works perfectly. Here's the CSS in case it's helpful for anyone else:
@media screen and (min-width:768px) and (max-width: 1024px) { .blog-basic-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; grid-column-gap: 40px !important; } .blog-basic-grid .blog-list-pagination { grid-column-end: 3 !important; } }
-
7TK reacted to tuanphan in Reduce font size of <previous and next> project in mobile version
Insert once, It will work all projects. Add to Design > Custom CSS
@media screen and (max-width:767px) { h2.item-pagination-title { font-size: 12px !important; } }
-
7TK reacted to derricksrandomviews in How do I delay the appearance of a back-to-top button?
You can use this code in place of what you have but try it out on one page first. It worked on my 7.1 lab site. It requires a markdown block on any page you want it to work with. Don't put it in the footer of a page. It won't work there.
<style>
.back-to-top {
background-color: #000000;
color: #FFFFFF;
opacity: 0;
transition: opacity .6s ease-in-out;
z-index: 999;
position: fixed;
right: 20px;
bottom: 20px;
width: 50px;
height: 50px;
box-sizing: border-box;
border-radius: 0%;
}
a.back-to-top {
font-weight: 1000;
letter-spacing: 2px;
font-size: 14px;
text-transform: uppercase;
text-align: center;
line-height: 1.6;
padding-left: 2px;
padding-top: 14px;
}
.back-to-top.show {
opacity: 1;
}
</style>
<a href="#top" id="back-to-top" class="back-to-top" style="display: inline;">Top</a>
<script>
var link = document.getElementById("back-to-top");
var amountScrolled = 250;
function addClass(el, className) {
if (el.classList) {
el.classList.add(className);
} else {
el.className += ' ' + className;
}
}
function removeClass(el, className) {
if (el.classList)
el.classList.remove(className);
else
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
window.addEventListener('scroll', function(e) {
if ( window.scrollY > amountScrolled ) {
addClass(link, 'show');
} else {
removeClass(link, 'show');
}
});
</script>
-
7TK reacted to Agha_Waqas in reduce number of grid blocks per row for specified width range
Hi, i just write a code for your request. please apply it on your CSS editor
@media (min-width:751px) and (max-width:1024px) {
.blog-basic-grid {
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}
}
-
7TK reacted to tuanphan in Gallery Caption workarounds for 7.1?
Add to Design > Custom CSS
/* hide 1 lightbox caption */ body.gallery-lightbox-body-hide-overflow .gallery-lightbox-item-wrapper+.gallery-item-description { display: none; }
-
7TK reacted to brandon in Gallery Caption workarounds for 7.1?
This is an update to let you know that I've added just a couple lines of CSS to fix the issue with the lightbox caption delay/lag issue. The lines are added at the end of the CSS in the original post. They are:
transition: opacity 0.1s ease-out; .gallery-lightbox-item[data-in=false] .gallery-item-description { opacity: 0; } Special note to those who mentioned the issue: @kinapark , @IvanOB , @ed.design , @JohnS123
-
7TK reacted to ShaneV in Gallery Caption workarounds for 7.1?
<script> document.addEventListener("DOMContentLoaded", function() { function render(checked, index) { (function(p, show) { var map; var values; var messageValue; var messages; var name; var type; var k; map = document.querySelectorAll(p ? p : 'section.gallery-section,\x20.gallery-lightbox'); name = map.length; for (; name--;) { values = map[name].querySelectorAll(show ? show : '[class*=\x27-item\x27]:not([class*=\x27item-\x27])'); type = values.length; for (; type--;) { messageValue = values[type].getElementsByTagName('img')[0]['alt']['trim'](); if (messageValue && messageValue.includes("png") == false && messageValue.includes("jpg") == false) { messages = document.createElement('div'); messages.className = 'gallery-item-description'; messages.textContent = messageValue; values[type].appendChild(messages); } } } })(checked, index); } render(); }); </script> Here is an deobfuscated version of the original script. It works the same but is much more human readable. It also does not include image file names if they end in "png" or "jpg."
-
7TK got a reaction from Beyondspace in Gallery lightbox captions in 7.1
Thank you, bangank36! I will look for the javascript solution in that thread. 🙂 I may ask for clarification if I run into any difficulty!
-
7TK reacted to Beyondspace in Gallery lightbox captions in 7.1
It will be easier to use javascript since it will help fetching the caption from the image/slide, that you can edit the text directly in editor.
But there is a trick that require more effort from you to find the slide id and manually adding the caption into custom css. Each slide has unique id that can be used to target like so
For js solution, join this topic for previous answer
-
7TK got a reaction from Beyondspace in Gallery lightbox captions in 7.1
Hello All,
I've been reading earlier threads on how to make captions appear when viewing gallery pics in lightbox view.
I'm wondering if injecting special code into my gallery page header is the only way to achieve this. If so, I'll need to upgrade to a business plan. (I'm currently on a personal plan in 7.1.)
I just want to be sure this is the only way to do this, before I go ahead and change plans.
Thanks for any help you can provide!
Sincerely,
7TK
-
7TK reacted to tuanphan in Background video for desktop and photo for mobile devices?
Add to Design > Custom CSS
/* mobile */ @media screen and (max-width:767px) { /* hide video */ [data-section-id="60ad671deb90291962e54ad5"] .section-background div { visibility: hidden; } /* set new image background */ [data-section-id="60ad671deb90291962e54ad5"] .section-background { background-image: url(https://cdn.pixabay.com/photo/2021/06/21/20/15/bee-6354562__340.jpg); background-size: cover; background-repeat: no-repeat; background-position: left center; } }
-
7TK reacted to tuanphan in Background video for desktop and photo for mobile devices?
You mean this section?
“The unchanging beauty of God brings a joy surpassing all the most desired pleasures of earth.”
-
7TK reacted to tuanphan in Background video for desktop and photo for mobile devices?
Hi. Q1 Possible. Can you share site url? We can give some code to achieve this.
Or you can add 2 section with video background - image background. We can give the code to show video on desktop, show image on mobile