-
Posts
125 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by MayaViolet
-
How can I change the "Pacific" tempate footer top & bottom padding
MayaViolet replied to St Lukes's topic in Code Blocks
By inspecting the element, I can see that the current horizontal rule block has a margin of (margin: 34px 0px) ( see attached screenshot). So, we could apply the following CSS to overrule that margin, of course adjusting similar to padding to match the exact pixel height you'd like. .sqs-block-horizontalrule hr { margin: 0 !important; } -
How can I change the "Pacific" tempate footer top & bottom padding
MayaViolet replied to St Lukes's topic in Code Blocks
Hi @St Lukes - if you add the following code to the custom CSS panel, you will reduce the padding. You can also play around with changing the values from 0 to something like padding: 10px 0px (which would be 10px to top and bottom, or 0px to left and right), or event: 10px 0px 15px 0px (where the targeting direction goes top, right, bottom, left). Let me know if you have any questions! .footer-inner { padding: 0 !important; } -
How to get rid of the white edge around the video background?
MayaViolet replied to mrkttnr's topic in Customize with code
Hi @mrkttnr I think you might have the background width set to inset - changing it to full width I think will solve this problem... but if it doesn't, this code will apply a fix: section[data-section-id="62b7422094e2396356c7ce98"] .section-background { left: 0 !important; right: 0 !important; bottom: 0 !important; } -
How to update social links in site header
MayaViolet replied to hayesma's topic in Customize with code
Hi @hayesma, here is an article that walks you through how to use just CSS to target the specific icon, and replace the source image that Squarespace pulls. It requires you to upload a custom file, but the video shows you exactly how to do so. Lmk if this isn't what you want to do and need further direction! -
Hi @sian75, can you share the link to the site in question so we can provide accurate code for your specific site?
-
How can I change the "Pacific" tempate footer top & bottom padding
MayaViolet replied to St Lukes's topic in Code Blocks
Hi @St Lukes, you can change the status to password protected following these instructions so that we can inspect the site directly to help you develop code to remove the padding correctly -
How Do I remove the footer of one specific page
MayaViolet replied to stvr1974's topic in Customize with code
Hi @stvr1974 - you can drop the following code into the Page Injection section of the specific page where you want to hide the footer. To do so, navigate to "Website" and click the gear icon next to the page in question to access that page's settings. Then head to the "Advanced" tab drop the code in below: <style> footer { display: none !important; } </style> Let me know if you have any questions! -
Flodesk Code- put it only on certain pages?
MayaViolet replied to NikiR's topic in Customize with code
Hi @ariellebrown - You can find SS's instructions on how to insert code for a specific page here, but essentially you will need to remove the code above from your site injection, because this is telling the pop-up to appear on every page of your site. Then, you'll want to navigate to Pages, and click the settings icon next to your Home page title, and navigate to the "Advanced" tab, and page header code injection to paste the code there. Give it a try, and let me know if you still have questions!- 14 replies
-
- code-injection
- code
-
(and 2 more)
Tagged with:
-
Hi @Cinthetic, did you find a solution for a slideshow animation delay?
-
@Lesum Any idea on CSS that will successfully change the placeholder font size? Can't get it to work... Site is here
-
@Cowfish23 I believe you can try to add it via a code block, but it still may not work in a personal plan... worth a shot to try it though?
- 33 replies
-
- events-page
- events
-
(and 2 more)
Tagged with:
-
Make Primary Meta Content The Location on Blog Summary Page
MayaViolet replied to NMB's topic in Customize with code
@ibnibnbattuta did you find the solution? @tuanphan any ideas? Trying to do the same! -
Hi @tayspilates, it looks like it is the same letter-spacing and thickness on both screensizes, but it only appears to be closer/thicker on smaller screens, because you have large characters in a smaller space. To make adjustments, I would play around with the following code while previewing the effects on mobile in edit mode to see what meets your preference! /* Mobile Screen Size Updates */ @media all and (max-width: 768px) { .Marquee h1 { letter-spacing: .0em !important; font-size: 50px !important; } }
-
I believe it was the following? I actually have it not active on the client site because we developed a diff solution, and the code link I found in my email shows up with an error, so not sure what if this will work! <!---Menu Hover--> <script> $('.header-burger').hover(function(){ $('body').toggleClass("header--menu-open"); }); </script> <!---END Menu Hover--->
- 7 replies
-
- css
- javascript
-
(and 3 more)
Tagged with:
-
Make a certain image have an extra long Fade-In
MayaViolet replied to marchbank's topic in Customize with code
Absolutely! If you take note of the animation property, I included the syntax rules: // animation name, duration, timing-function, delay, direction Following that order, you can adjust what currently is set to "0s" to your preferred delay time. Let me know how that works!- 5 replies
-
- code-injection
- images
-
(and 2 more)
Tagged with:
-
@WebShark Ok, the first step would be to set your header style to "Fixed" as referenced here. Then, try applying the follow CSS: /*--- Header Navigation - Fixed Left ---*/ @media all and (min-width: 768px) { /* Navigation Position */ .header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav { margin: 0; position: fixed; left: 0; top: 100px; width: 15vw; } .header-nav-list>div { white-space: inherit; } /* Page Content Width */ main#page { width: 85vw; margin-left: auto; } } Lmk how that works!
-
Yes, solution is definitely possible but I think we need to clarify a few more design details first 🙂 Do you want the navigation to sit fixed on the left side of your site content, meaning it stays present even as users scroll down the page? To do so, we would need to target the header-nav and place it on the left side, but also add a left-margin to the entire site's page content, so they don't overlap. If you can provide your big-picture vision, that would help us be able to develop and share accurate code!
-
Hey @tayspilates - it looks like the "Perks" page has it's own unique password applied to it, so I can't reference the exact example... If you can share that PW, I can target it exactly to see what's going on and to test code, but in the meantime you could play around with a media query (to target only mobile screens), and that specific typeface to adjust for letter-spacing: @media all and (max-width: 768px) { h1 { letter-spacing: .05em !important; } Lmk if you can either share that pw or remove the page-specific pw so I can try to recreate and solve the problem on my end!
-
Flodesk Code- put it only on certain pages?
MayaViolet replied to NikiR's topic in Customize with code
@NikiR great! Are you able to provide me with the URL and password of your website, so that I can give you the exact code? See here for more info on setting a site-wide password.- 14 replies
-
- code-injection
- code
-
(and 2 more)
Tagged with:
-
Making cart font bigger, centering it, changing what it says.
MayaViolet replied to sybfire's topic in Customize with code
Hi @sybfire, try this: div#sqs-cart-container { text-align: center !important; } h2.cart-title { text-align: center; font-size: 50px !important; // insert desired font size here } -
Edit the design of the Quick View Pop Up
MayaViolet replied to nahlah's topic in Customize with code
Hi @nahlah, if you can provide your URL and pw, we can provide exact code to make those edits. Are you comfortable with applying Custom CSS to your site? -
(you may need to apply "!important" after the properties if the code isn't sticking)
-
.header-layout-branding-center-nav-center .header-title-nav-wrapper { flex: 0 0 100%; } .header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav { text-align: left; } .header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-list { justify-content: left; flex-direction: column; text-align: left; } Try the above - Not sure if that is your final preferred outcome?
-
Content Images scrolls over fixed background
MayaViolet replied to uebermut's topic in Customize with code
Hi @uebermut, you should be able to fix the navigation bar with SS's native settings, and then the logo can be targeted with custom CSS to fix it's position. We will need your site URL and password however to provide the correct code! -
Changing H2 size on MOBILE ONLY - CSS code needed
MayaViolet replied to organisedchaosva's topic in Customize with code
@organisedchaosva did @tuanphan's answer not work for you?