Search the Community
Showing results for tags 'css'.
-
I have used a code block to display an image and when the mouse hovers over it, a Gif will start playing. I want to make the entire code block/image/gif clickable to send me to another site. All the working codes I have found was a clickable text that shows up underneath the code block/image. Any suggestions? -
Site URL: https://plums-elephant-58lh.squarespace.com/ Completely new to squarespace and coding in general so be nice!! Followed a tutorial online to get the SVG uploaded and replace the transparent PNG file. SVG logo keeps disappearing. What's weird, is if I go into CSS and click on a line then it will reappear. Problem is it does not show up on any devices 🤪 https://plums-elephant-58lh.squarespace.com/ test01 is the password Can anyone help me out with this?
-
Edits to Keyline under header? Squarespace 7.1
AnnieTimmins posted a question in Coding and Customization
Site URL: https://gar-cow-cwsx.squarespace.com/ Hello! I've added a keyline under my header of 1px. There are two edits I'd like to make. 1. I'd like the keyline to end at the site margins rather than being full bleed (same as the keylines in the footer). 2. I'd like the header keyline ONLY on the projects page to be #38402e (follow the colour theme - at the moment is isn't visible) Can anyone help? Thanks! Site password: bertie -
Site URL: https://gar-cow-cwsx.squarespace.com/about-2 Hello! I'm trying to get some text to scroll horizontally across the screen, I think it's called a scrolling text ticker. The effect I'd like is on the home page of this site https://www.everydaymassive.com/ ("one of the big five transform safety...") On my site I'd like the text to be on the about page, between Philosophy and Services. This would be the copy "resident driven and environmentally friendly build and design" My site password is: bertie
-
Site URL: https://raheracreative.squarespace.com/ Password: studio@raheracreative Hello, Im still in the process of designing this webpage, but I want a image to scroll pass at full width. I tried to use a modified version of this code: https://codepen.io/heymagruder/pen/pbKgGj , on the home page top banner. The image however isn't showing as full width. I want the clouds to float by with no edges showing. I have used my own cloud image https://static1.squarespace.com/static/60fe0b14cd76e61f9a397ca8/t/60fe150d9ea4691d98fa166b/1627264274340/Rahera+Creative+Banners_clouds.png This is the code I used in a code block on the home page: <div id="back"> <div class="cloud"></div> </div> <style> #back { background: no-repeat center center fixed; height: 50vh; } .cloud { background-image: url('https://static1.squarespace.com/static/60fe0b14cd76e61f9a397ca8/t/60fe150d9ea4691d98fa166b/1627264274340/Rahera+Creative+Banners_clouds.png'); background-position: 0px 0px; background-repeat: repeat-x; height: 100%; opacity: 0.8; } @keyframes cloud { 100% { background-position: -1900px; } } .cloud { animation: cloud 100s linear infinite; } </style> And this is the code I used in the custom CSS // Home page - Cloud Image Size // div#block-yui_3_17_2_1_1627264387252_6900 { padding-left: 0; padding-right: 0; max-width: 100%; } sorry if its butchered - still learning.
-
Site URL: https://www.cleanplate.co.nz/home Hi There, What I would like to achieve is something like the following images - adding a background colour to the UI card, and adjusting the padding so that the text sits inside the card on the Blog Carousel and the Blog Landing Page, but I am not sure how to achieve it as I can't see the classes to target. Any suggestions welcome. a) Blog Carousel on the home page https://www.cleanplate.co.nz/home b) Blog Landing Page https://www.cleanplate.co.nz/blog -
Site URL: https://moushi.co/blog Hey SS Circle Members, I'm slowly, reluctantly moving into 7.1 and have a question maybe @tuanphan could help with that might help others. I'm using a Summary Block to pull the latest post from my blog, and then the active blog is underneath. As you can see on moushi.co/blog, the first two posts are the same which is of course a problem. How do you suggest I remove the first post from the actual blog page? so that the Summary Block above serves as the main "Most recent" section for the latest post, and the following posts exist in the blog below. I've expressed my frustration to the 7.1 Product team that it's really not made for writers or bloggers at all but alas, it is what it is for now. Thank you for any and all your help.- 5 replies
-
- 1
-
-
- blog
- summary-block
- (and 1 more)
-
Site URL: https://www.cleanplate.co.nz/e-cookbook Hi There, I am working on a page for a client where we have embedded and externally hosted PDF Flip eBook into an iframe. I have noticed that while on desktop, everything looks fine, but on mobile, the ui controls gets trimmed off at either side in spite of the overall width of the iframe being set at 100%. The classes I want to target are (I think): .pdff-ui-wrapper .pdff-ui-controls with of width of 99% for mobile or suchlike But using the CSS editor within Squarespace, it doesn't recognize the classes as they are not 'native' to the project. Does anyone know of a quick fix for this or another way apart from how I have added the iframe? I have looked online and am a bit confused. Best regards.
-
Site URL: http://www.studiojci.com/ Hello! I am currently creating a Cover-Page for our website and I was wondering if it was possible to stop the auto-scroll feature for the images and add big arrows to the middle left and right sides where people can navigate through the images instead. For reference I am using a Squarespace 7.0 Avenue Family template so I cannot do a blank page and full bleed gallery block which I assumed would have been my alternative. I am also using the TRADE layout as my cover page. Thank you for any and all help you may be able to provide! -
Site URL: https://helix-marigold-76hn.squarespace.com/ I need a secondary menu with dropdown function. It works in my code pen but when i move it to squarespace it doesn't seem to work, on desktop but works on mobile. any suggestions? codepen: https://codepen.io/jilldiane/pen/ZEKXdpe site:https://helix-marigold-76hn.squarespace.com/ pw: 1234 thanks
-
Site URL: https://www.swarovskiwellbeingweek.com/monday Hey legends, I'm just wondering how I can still have the main desktop menu links in white font to be visible on the images, but to change them to black so they're visible on the mobile menu (which changes the menu background to white so the whole menu is invisible). Thanks heaps! -
Changing color of hamburger menu bars on desktop
jimricco posted a question in Coding and Customization
Hey folks. i found some CSS to change my normal nav menu on desktop to the ol hamburger. but!, i need to change it from black to white so it pops on my image better. any help greatly appreciated ; ) here's what i used to get the hamburger on the desktop. .header-burger { display:flex!important} .header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;} .header-nav, .header-actions {visibility:hidden!important} .burger-box div { display: none; } .burger-box { background-image: url(https://image.flaticon.com/icons/svg/876/876207.svg); background-size: contain; background-repeat: no-repeat; background-position: center center; } Thanks agin! -
Site URL: http://www.southernsunevents.com http://www.southernsunevents.com PW: sse2020 My home page has the logo featured on the banner image and the traditional logo spot hidden via css. I've got my nav links spaced apart as I want them like this: I want the typical top center logo for the rest of my pages but it's knocking down my nav links because they are too big based on how I've set them for the home page layout. Is there a way to customize the nav links just for the index page and have everything standard for the rest of my pages? Thanks!
-
Site URL: http://www.ryanewanchuk.com Password: SquarespaceDemoHelp! Hi, I am working on my site, and I've decided to use it as a sandbox to try to do some more advanced things. In particular, I am trying to figure out how to make my navigation bg colour change to match the bg colour of a section on scroll. I'd like it to change when 90% of the next section is visible. An example of this is at https://www.bynd.com/ I'm sure this would involve anchors and javascript, but I was curious if there was a simpler way to accomplish this? -
Place Logo Image in Bottom Right Corner of Hero Image
tinymachine posted a question in Coding and Customization
Site URL: http://www.theblackgryphon.com Howdy– So, I'm trying to position a logo to the bottom right of the hero/header image. I've been trying to mess around with absolute positioning but I keep hitting a wall. Maybe I'm just not looking at it from the right perspective? Any help is super appreciated. -
I have a SS 7.0 site using the Horizon template. When I select a product and the popup to enter more information comes up, the Add to Cart button is being hidden. When I look at the popup form via the SquareSpace editor, the button is there. I have tried all sorts of options with .sqs-system-button and .sqs-editable-button, but I can't get the button to show up. It is a sensitive site, so I can't post the URL here, but can send it to you directly. When I use Inspect, I can get the button to show up by editing this part of the CSS: body:not(.button-style-default).button-style-outline .sqs-editable-button, body:not(.button-style-default).button-style-outline .sqs-editable-button-color { background-color: transparent; color: rgba(255,255,255,.9); } However, when I try to use this same code (and change background-color from transparent), then nothing is happening. Thanks!
-
Site URL: https://www.nutrilee.nl/ Hi guys, A couple of weeks ago I noticed that the thumbnail images in my recipe carousel (on my home page) are larger than the ones in my blog carousel. The content width of both carousels are L. So when I change the recipe carousel to content width M, then it is smaller than the other carousel. Is there something I can do, maybe with CSS to make the recipe carousel the same size as the blog carousel? Or are the image sizes too large maybe? Thanks! - Kimmylee
-
[Hi I'm Flo] Create a javascript text generator
Floblo posted a question in Coding and Customization
Site URL: http://www.hidearvirgule.com Hello guys, I'm from France, may I ask for your help: I want to make a page where I can generate some random words/ pictures clicking on a button. Is that possible with javascript, and if so, how can I incorporate it in Squarespace page ? Thank you so much for reading me, have a good night Flo- 4 replies
-
- 1
-
-
- javascript
- code
- (and 3 more)
-
Site URL: https://weedwise.squarespace.com Hi. I have been asked by a designer to create a site where the menu at the top has two different background colours. One for the logo and a second for the navigation. The active page would have a yellow line underneath. I have attached a screenshot. Does anyone know how I can achieve this please? I am not a coder. Thank you! Lynne Pw: W33dw1s3
-
I'd like to use the Lightbox Anything plugin to display some speaker bios, instead of having them click through to their individual pages. Is it possible to add the lightbox to a summary block, without having to replace all the source URLs individually for each post? Is it also possible to use the lightbox anything plugin for a URL such as /speakers/speaker-name? This doesn't seem to work for me. Thanks!
- 5 replies
-
- 2
-
-
- lightbox
- summary-block
- (and 1 more)
-
I was looking at another site made on squarespace recently (amandafarias.nyc), and was wondering how to achieve horizontal gradient overlays over an image and add text on top. I do think that these changes (on that site specifically) were made using CSS because the gradient modified as the page width changed. I was wondering if anyone knew how to code for something like this? thank you.
-
Site URL: https://orb-accordion-ydzr.squarespace.com/config/pages/60e7d1ab8592fe3a589150ab Heya. I'd like to have an image pop-up while hovering over certain words in the body text of a paragraph block. It would be great if the words appeared as text links. Here is an example of what I'd like to achieve: https://hoodzpahdesign.com/ My page is currently unpublished, I don't know how to allow you access to it. Thank you.
-
Code/plugin for checkbox chart pricing table?
ampddesigns posted a question in Coding and Customization
Hi! Has anyone come across any code/plugin to create a checkbox pricing table like this? Through search I've found a handful of great list-like column tables, but none with checkboxes so far, so thought I'd double check! -
Hello! I'm relatively new to Squarespace and/also a designer and/also an engineer. I'm putting together my portfolio website at the moment. I was considering the possibility of adding a frame-by-frame style moving image that would 'play' during scroll. You know the type of animation — I believe Apple made it popular on their site with the now canonical airpods animation. See for example: https://levelup.gitconnected.com/how-to-create-frame-by-frame-moving-image-on-scroll-effect-30ce577c63c2 My question is this to the experts out there: is this possible using the code injection features of Squarespace? If so, how might I go about commissioning someone to add this capability to my Squarespace site such that I could then use it in various places? I'm asking this way rather than my normal inclination which would be to spend lots of time exploring and trying as I'm trying my level best to prioritize how I use my time. It may be that it makes more sense to have an expert do it than me learning how, as much as that would be my normal way about things. Julian
-
Site URL: http://www.welovecheese.org Hi, I would like to add a 'basket total' on the header of my website next to the cart option. This total would be the amount all of the products add up to and therefore would increase with the more items in the basket. This is such common place on lots of websites but squarespace do not offer it. I was wondering if there was a code I could add to achieve this? I have added an example from the tesco website just as a guide. Any help would be greatly appreciated! Thank you. 😀
