-
Posts
62 -
Joined
-
Last visited
Reputation Activity
-
ItsOK got a reaction from SarahSWD in How To Hide Active Language in the Language Selector Menu on Weglot
Hi Friends!
I've just started using Weglot integration for easy translation of a website for a client (www.salvadorcarrasco.me), and so far, it worked like a charm!
Except for one little thing...
I was wondering if there is a way to hide the active language in the language selector menu. When you're viewing the default English version and click the language selector on the menu, you still see English even though that's already the active language of the website. I would like to only show Spanish on the English version, and English on the Spanish version.
(I saw one message related to the subject but the shared code didn't work for me.)
Thanks in advance for your time!
All the best,
Ozan
-
ItsOK reacted to Beyondspace in How To Hide Active Language in the Language Selector Menu on Weglot
Can I DM you for more detail?
-
ItsOK got a reaction from Beyondspace in How To Hide Active Language in the Language Selector Menu on Weglot
Thank you for your reply, @Beyondspace. Yes, this one has Business Plan.
-
ItsOK reacted to Beyondspace in How To Hide Active Language in the Language Selector Menu on Weglot
I think we need to use some javascript to get the current language you are in and set the appropriate style on it.
Are you in business plan or above one?
-
ItsOK reacted to tuanphan in How Can I Customize Overlay Caption In A Slide Show?
Add to Design > Custom CSS
.sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom .meta-inside { background-color: rgba(0,0,0,0.4); padding-left: 3vw; padding-right: 3vw; } .sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom .meta-inside * { font-size: 22px; }
-
ItsOK reacted to tuanphan in [Share] Accordion Block: Useful code
Squarespace released an Accordion Block a few weeks ago.
Here are some useful code when you use the accordion block (Add to Design > Custom CSS)
#1. Change Dividers Color
/* accordion divider color */ .accordion-divider { color: #ff00ff !important; } #2. Change Arrows Color
/* accordion arrows color */ .accordion-block .arrow { border-color: #ffff00 !important; } #3. Add icons before Accordion Titles
/* Accordion icons before titles */ li.accordion-item .accordion-item__title:before { content: ""; width: 20px; height: 20px; display: inline-block; background-repeat: no-repeat; background-size: contain; background-position: bottom center; } li.accordion-item:nth-child(1) .accordion-item__title:before { background-image: url(https://cdn.pixabay.com/photo/2021/11/02/15/30/tealights-6763542__340.jpg); } li.accordion-item:nth-child(2) .accordion-item__title:before { background-image: url(https://cdn.pixabay.com/photo/2019/10/23/06/30/hamburg-4570577__340.jpg); } li.accordion-item:nth-child(3) .accordion-item__title:before { background-image: url(https://cdn.pixabay.com/photo/2021/02/17/08/02/woman-6023442__340.jpg); } #4. Different Color for Accordion Titles
/* accordion title colors */ li.accordion-item:nth-child(1) .accordion-item__title { color: red; } li.accordion-item:nth-child(2) .accordion-item__title { color: blue; } li.accordion-item:nth-child(3) .accordion-item__title { color: violet; } #5. Change a specific word color in Accordion Content
First make it bold then use this CSS
/* accordion content specific word color */ .accordion-item__description strong { font-weight: normal; color: red; } #6. Accordion Title Background Color
/* accordion title background */ .sqs-block-accordion .accordion-item__title-wrapper { background-color: #32a4e6; } #7. Accordion Content Background
/* accordion content background */ .sqs-block-accordion .accordion-item__dropdown--open { background-color: #262853; color: white; } #8. Add Unordered List in Accordion Content
First, add some text then Underline them
Next, use this CSS
/* Accordion Content - Add Unordered list */ span[style*="text-decoration"]:before { content: ""; display: inline-block; width: 3px; height: 3px; background-color: black; vertical-align: middle; margin-right: 3px; } span[style*="text-decoration"] { text-decoration: none !important; } #9. Accordion Titles – Add Line Break
If you use a Business Plan or higher, you can use another approach in this comment
/* Accordion SubTitle */ li:nth-child(1) span.accordion-item__title:after { content: "Accordion Subtitle 01"; display: block; font-size: 15px; } li:nth-child(2) span.accordion-item__title:after { content: "Accordion Subtitle 02"; display: block; font-size: 15px; } li:nth-child(3) span.accordion-item__title:after { content: "Accordion Subtitle 03"; display: block; font-size: 15px; } Result
#10. Accordion Title-Content Text Size on Mobile only
/* accordion title - content text size on mobile */ @media screen and (max-width:767px) { /* accordion title */ span.accordion-item__title { font-size: 12px !important; } /* accordion content */ .accordion-item__description * { font-size: 10px !important; } } #11. Simple Style 01
Add a Code Block under Accordion >> Use this code
<style> /* accordion title color */ .accordion-item__title-wrapper { background-color: #1a252f; color: white; padding-left: 20px !important; padding-right: 20px !important; } .accordion-item__click-target { padding-top: 15px !important; padding-bottom: 15px !important; } /* make first item round corner */ li.accordion-item:first-child .accordion-item__title-wrapper { border-top-left-radius: 10px; border-top-right-radius: 10px; } /* make last item round corner */ li.accordion-item:last-child:not[data-is-open="true"] .accordion-item__title-wrapper { border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } /* remove divider between accordion items */ .accordion-divider { display: none; } /* accordion content padding */ .accordion-item__description { max-width: unset !important; padding: 20px !important; } /* arrows color */ .plus>div { color: white !important; } </style>
Coming soon.
#12. Accordion Content Link Style
/* Links underline */ div.accordion-item__description p a { border-bottom: 1px solid black; } /* Links font style */ div.accordion-item__description p a { color: red !important; font-size: 30px; font-family: monospace; letter-spacing: 2px; } #13. Add a button inside Accordion Content
First, you need to add a text link. Next, add this CSS to turn link to button
/* turn accordion link to button */ div.accordion-item__description p a { background-color: black; color: white !important; padding-left: 10px; padding-right: 10px; padding-top: 15px; padding-bottom: 15px; border-color: red; border-width: 1px; border-style: solid; } #14. Add an Image inside Accordion Content
Use this CSS to add image to top or bottom of accordion content
/* Add an image into Accordion Content */ /* replace demo image with your image url */ /* nth-child(1) is first accordion item, nth-child(2) is second item... */ /* :before is image on top, :after if image on bottom */ li:nth-child(1) .accordion-item__description:before { content: ""; display: block; width: 100%; /* image width, you can also use px */ height: 150px; /* image height */ background-image: url(https://cdn.pixabay.com/photo/2021/09/15/15/48/seals-6627197__340.jpg); background-repeat: no-repeat; background-size: cover; margin-bottom: 20px; /* space between image-text */ } #14.2. Add Image to Accordion Content (Use JS code)
Suppose you want to add this image
https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg First, you edit Accordion >> Put your cursor at position where you want to add image >> Then enter text: image01
Next, add this code to Website Tools (under Not Linked) > Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('div.accordion-item__description p:contains("image 01")').closest('p').addClass('image-01'); $('<img src="https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg"/>').appendTo('.image-01'); }); </script> <style> .image-01 { font-size: 0; } </style> Result
If adding 3 images, doing this
and use this code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ // image 01 $('div.accordion-item__description p:contains("image01")').closest('p').addClass('image-01'); $('<img src="https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg"/>').appendTo('.image-01'); // image 02 $('div.accordion-item__description p:contains("image02")').closest('p').addClass('image-02'); $('<img src="https://cdn.pixabay.com/photo/2023/11/07/10/06/girl-8371776_1280.png"/>').appendTo('.image-02'); // image 03 $('div.accordion-item__description p:contains("image03")').closest('p').addClass('image-03'); $('<img src="https://cdn.pixabay.com/photo/2023/10/02/14/51/flowers-8289320_1280.png"/>').appendTo('.image-03'); }); </script> <style> [class*="image-0"] { font-size: 0; } </style> #14.3. Add Image to Accordion Content
You can also use this approach
Enter Image Url
highlight the text url > Add same image url (enable Open in New Window)
then use this code to Code Injection or Page Header Code Injection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('div.accordion-item__description p a:contains(".jpg")').each(function() { var $t = $(this); $(this).contents().filter(function(){ return this.nodeType != 1; }).remove(); $t.attr({ src: $t.attr('href') }) .removeAttr('href target'); $(this).replaceWith(function(){ return this.outerHTML.replace("<a", "<img").replace("</a", "</img") }); }); }); </script> <style> div.accordion-item__description img { width: 100%; margin-top: 10px; } </style>
#15. Change Plus/Minus (+/-) to custom icon
Replace demo image urls with your icon urls
/* Plus */ :not([data-is-open="true"]) .plus { background-image: url(https://cdn.pixabay.com/photo/2021/02/06/09/03/man-5987447__340.jpg) !important; background-size: contain; background-repeat: no-repeat; } :not([data-is-open="true"]) .plus div { display: none; } /* Minus */ [data-is-open="true"] .plus { background-image: url(https://cdn.pixabay.com/photo/2021/12/12/22/17/red-squirrel-6867105__480.jpg) !important; background-size: contain; background-repeat: no-repeat; } [data-is-open="true"] .plus div { display: none; } #16. Change style of a word on Accordion Title
See this comment
Wrote by @tuanphan
-
ItsOK reacted to Chrissy1000 in Can I Add an Extra Column to my Fluid Engine Grid?
I am having the same problem! Will return if I find a solution...
-
ItsOK reacted to lostponddesign in Can I Add an Extra Column to my Fluid Engine Grid?
I have the exact same question / issue. I hope someone replies.
-
ItsOK reacted to Claydo in Can I Add an Extra Column to my Fluid Engine Grid?
Hello, is it possible to add an additional column to the Fluid Engine grid? I would like to have three 1:1 aspect ratio square text blocks on this page, but I can't center the middle one, and with one space between each text block I'm left with a misaligned layout. I'm open to any solutions you guys might have for this, and thank you for your help!
-
ItsOK got a reaction from sarahpeller in Tell us about yourself and your business!
Hi!
My name is Ozan Karakoc. I'm a Los Angeles based graphic designer who has 20+ years of experience. My specialty is branding, and I have been working with a wide variety of clients from big players like Google, Toyota, Fox Sports, Pepsi, Sony Pictures, FX, etc., to visionary start-ups and small businesses.
I use Squarespace for both my personal websites and client websites.
In this new group, we may want to discuss why we choose Squarespace to design our portfolios, in what ways Squarespace is better than Webflow, Semplice, Adobe Portfolio and other similar platforms, and how Squarespace should get inspired from some great features those competitors offer.
I really love Squarespace, but I think there are so many small things it can easily take from others to become the absolute best in the field. Maybe we can talk about those in this group.
I wish all fellow designers a successful career, and best of luck.
Sincerely,
Ozan
-
ItsOK got a reaction from elizabethloberg in Tell us about yourself and your business!
Hi!
My name is Ozan Karakoc. I'm a Los Angeles based graphic designer who has 20+ years of experience. My specialty is branding, and I have been working with a wide variety of clients from big players like Google, Toyota, Fox Sports, Pepsi, Sony Pictures, FX, etc., to visionary start-ups and small businesses.
I use Squarespace for both my personal websites and client websites.
In this new group, we may want to discuss why we choose Squarespace to design our portfolios, in what ways Squarespace is better than Webflow, Semplice, Adobe Portfolio and other similar platforms, and how Squarespace should get inspired from some great features those competitors offer.
I really love Squarespace, but I think there are so many small things it can easily take from others to become the absolute best in the field. Maybe we can talk about those in this group.
I wish all fellow designers a successful career, and best of luck.
Sincerely,
Ozan
-
ItsOK reacted to tuanphan in Formatting the Hamburger Menu Overlay on Desktop
Add to Home > design > Custom CSS
.header-menu-nav-item a { padding-top: 1vw; padding-bottom: 1vw; } .header-menu-nav-folder[data-folder="root"] { overflow: hidden; }