-
Posts
150 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by WCS
-
Change section background color around inset background image
WCS replied to Tankgurl's topic in Site Design & Styles
@Tankgurl Oh good! That's fantastic. Happy designing! 🙂 -
@Lakey Hmm let's try it again. I have a feeling there may be a small error as I've tested the code on my site. A couple starter questions: Is the custom font working at least? Are you on 7.0 or 7.1? Where are the poser images on your site? Are they the homepage images? Steps for replacing the code: 1. Keep this CSS 2. Delete this 3. Copy / Paste this in: .design-layout-poster .image-card-wrapper { visibility: hidden; opacity: 0; transition-duration: 0.5s; } .design-layout-poster:hover .image-card-wrapper { visibility: visible; opacity: 1; background-color: green; } 4. Save, exit the CSS box, refresh the page, and then see if the offer effect works. This is what it looked like when I tested it out (and hovered over it): 5. Change "green" to the hex code you want it to be. Click save again. 6. If that doesn't work, please copy and paste ALL your code in (no images) so that we can take a look at it. Please make sure to tag us when responding. 😊 Otherwise, I probably won't see it. To tag someone, type @ and then their username. When it's in a black pill shape (like at the beginning of this post), then you know you've done it right.
-
How to hide an icon on mobile but leave it on desktop?
WCS replied to SelwynGoodman's topic in Customize with code
@SelwynGoodman Oh no, I didn't see your response because you didn't tag me! In the future, click @ and then type the username in. When done correctly, it will appear in a black pill shape like yours does here. Glad @tuanphan got you the finally code! 😊 -
@Johnny87632 Squarespace actually has a helpful overview of anchor links: https://support.squarespace.com/hc/en-us/articles/207135178-Creating-anchor-links Hope this helps and happy designing! 😊
-
@Lakey This should be easy enough to fix! Once we do, I recommend that you copy / paste your CSS into a document for safe keeping. Initial thoughts: The text that says missing opening '{' shows an error in the code and when that happens, the rest of the code may not work. From what I can see, your custom font should display correctly once we fix that issue. There was definitely something deleted above the code I've highlighted in the box below. This is the source of the error. Delete the code in the box and replace it with: .design-layout-poster .image-card-wrapper { visibility: hidden; opacity: 0; transition-duration: 0.5s; }
-
Change section background color around inset background image
WCS replied to Tankgurl's topic in Site Design & Styles
@Tankgurl Thanks for the screenshot! Sorry that didn't work. Try: section[data-section-id="65a3266090ba675b103d2c61"] .page-section.background-width--inset .section-border{ background-color: red !important} -
@JazzyTallCarl Are you a Circle Member? If you are, you can submit a change request and the community can upvote it! The Squarespace team reviews them monthly and responds.
-
@Magmorphius Glad you figured it out! You can also use code instead of targeting a specific section. If you find that the anchor link scrolls too close to the top of the testimonials, you can add code at the bottom of the section above to give a little buffer. <p id="this-text-is-the-id"></p>
-
Change section background color around inset background image
WCS replied to Tankgurl's topic in Site Design & Styles
@Tankgurl Hmm just to confirm, you copied and pasted the CSS exactly as provided? I'd try the following: Copy/paste the provided CSS again and click save. Exit out of the Custom CSS section and refresh the page. Then click back into Custom CSS and see if the section changes color. If you're trying it on a different section, the CSS I'm seeing above is missing a space between the section id and ".section-background", which won't work. -
How to hide an icon on mobile but leave it on desktop?
WCS replied to SelwynGoodman's topic in Customize with code
@SelwynGoodman We can fix that with a little CSS magic! Log into the backend of your website Go to Website > Website Tools > Custom CSS Copy / paste the below CSS and click save @media screen and (max-width:480px) { #block-#######{ display:none }} Please note: This code requires a block # to target the icon. If you share your site, I can update the CSS. As cell phones change, some large phones may show the icon. You can adjust the max with to 770px, which would hide it on some tablet devices as well. -
@Pureform Thank you! I took a look and while I can see your menu icon, I can also scroll to the left and right. This is usually caused by code that adjusts margins. To fix it: Log into the back of your website Go to Website > Website Tools > Custom CSS Copy and paste the below code, then click Save html, body { overflow-x: hidden}
-
@CarinaSpencer Using an achieve drop down instead of the buttons (which look great!) would be the easiest solution. You could also have the category display below the blogs, though that may not be have the desired look your going for. An alternative would be to have your header with the buttons and all the blogs below. When they click on a button, it actually takes them to a new page where there can be an added header for that category. All the buttons would be the same (just duplicate that for each) and you can use a summary block to pull all of those blogs from that category. If you need to display more than 30 blogs, you can use: https://www.squarewebsites.org/squarespace-plugins/p/lazy-summaries Someone else may have a more elegant solution 😊
-
Buttons on Banner Slideshow not aligned with Card/Title
WCS replied to LeeC8's topic in Site Design & Styles
@LeeC8 Can you share the url and let us know what code you used? It looks like you added the white outline, correct? -
Change section background color around inset background image
WCS replied to Tankgurl's topic in Site Design & Styles
@Tankgurl You can modify the color of your sections but if you want to use CSS, following these instructions: Log into your website Go to Website > Website Tools > Custom CSS Put the following in but change "red" to the hex code you want to use: section[data-section-id="65a3266090ba675b103d2c61"] .section-background{ background-color: red !important } -
How to change colours of the buttons on hover
WCS replied to leedbssk's topic in Customize with code
@leedbssk Ah, I see what you mean. Is this on 7.0 and if so, what template are you using?- 7 replies
-
- custom-css
- button
-
(and 1 more)
Tagged with:
-
How to change colours of the buttons on hover
WCS replied to leedbssk's topic in Customize with code
@leedbssk Perfect! Thank you for sharing the link. Try adding this: .list-item-content__button .sqs-button-element--primary:hover{ color: #495A58}- 7 replies
-
- custom-css
- button
-
(and 1 more)
Tagged with:
-
How to change colours of the buttons on hover
WCS replied to leedbssk's topic in Customize with code
@leedbssk Happy to help! Here's code for modifying the header button: // This creates a small transition buffer .header-actions-action--cta .theme-btn--primary-inverse{ transition: transform 0.3s !important} // Change the specified colors .header-actions-action--cta .theme-btn--primary-inverse:hover { opacity: 1 !important; background-color: red! important; color: #495A58} ^ I don't know what color you want the background to be. If you don't want it to change, then you can remove that part of the CSS. For the slideshow button, can you please share a link to your site?- 7 replies
-
- custom-css
- button
-
(and 1 more)
Tagged with:
-
@Callan Of course! Happy designing. 😊
-
@Callan The CSS for this should be: #block-yui_###### .accordion-item__description{ color: white !important } Is that what you were using previously? Sometimes CSS doesn't display on the backend unless you save, leave the Custom CSS window, refresh, and then go back in.
-
Editing/Deleting the Navigation words on header
WCS replied to FundraisingSolutions's topic in Pages & Content
@FundraisingSolutions To remove these from your header, you'll need to make a change outside of that edit area. 1. Log into the backend of your website. 2. Click 'Website' Here you'll see 'Pages' on the left. There are 2 sections with bold headers: (1) Main Navigation (2) Not Linked. Everything under Main Navigation will appear in your navigation bar. 3. To remove the desired pages from your navigation bar, drag them down to below Not Linked. Here are sample images of the before and after: -
Changing company name, moving Squarespace site to new domain
WCS replied to blackstarNL's topic in SEO
@blackstarNL Are you keeping a lot of the same content and adding more pages, or are you reworking everything? -
Changing Monospace in CSS with custom font?
WCS replied to MattyFerg11's topic in Site Design & Styles
@MattyFerg11 Happy to help! Can you share the page with the text? -
Why can't I hide images on Mobile only using the CSS I'm adding?
WCS replied to graphicabyss's topic in Code Blocks
@graphicabyss I'm glad that worked! Happy designing 😊