Search the Community
Showing results for tags 'css'.
Found 1,962 results
-
Hello! I've been trying to make a text block fixed in some of my pages, so that when I scroll down trough it, the text will always stay in the same place. And also, if it helps, I'm using wells-template. So far I haven't been too succesfull. For the record, I have almost zero knowledge on coding. Thank you in advance! I've also attached an image in case my words weren't clear enough!
-
Hi, Anyone knows how to make a color on a hover effect on a image? I know how to make grayscale and other effects, but in this case i have a black/white image and a green colorgrade that i want on on the image when hover. Best Regards Jacob
-
Site URL: https://alpaca-salamander-4jsa.squarespace.com/ Hi! I have what I'm hoping is a simple question, just out of my league. If you go to the homepage (site password is kEn), halfway down the page I used CSS to customize a block of color to appear behind an image block. However, on mobile the proportions become uneven. Is there a way to fix it on mobile so it looks similar to desktop? Thanks!
-
Site URL: https://lukaseriksen.com Hey guys, I'm currently creating my first website and I'm struggling to integrate a custom inverted cursor on to my site. I found this bit of code digging through another squarespace site, but it doesn't seem to be working on my site. I think the main problem is that "mix-blend-mode: difference" does not seem to be working. I would be super dooper grateful if anyone could help me out with installing this bit of code. My Website: lukaseriksen.com Here is the code I've found: <style> @media (hover: none) { .cursor {display:none !important; } } * { cursor: none; } .cursor { --size: 10px; height: var(--size); width: var(--size); border-radius: 50%; position: absolute; z-index: 99999999999; transform: translate(-50%, -50%); pointer-events: none; } .cursor.cursor-dot { background: #ffffff; /* This defines the color of the cursor */ mix-blend-mode: difference; /* Delete this line if you dont want the circle to invert */ transition: width .6s, height .6s, background-color .6s; transition-timing-function: ease-out; } .cursor-dot.active { --size: 50px; background-color: #ffffff; } </style> <script> $(window).mousemove(function(e) { $(".cursor").css({ left: e.pageX, top: e.pageY }) }); $(window).mousemove(function(e) { $("a") .on("mouseenter", function() { $('.cursor').addClass("active") }) }); $(window).mousemove(function(e) { $("a") .on("mouseleave", function() { $('.cursor').removeClass("active") }) }); </script>
-
Hi all, I've seen some sites where the homepage has got the site header moved below a banner and only just on the homepage. I've been able to find out how to remove the site header but not how to move it down. Any help?
-
Site URL: http://www.1worldprint.co.uk Hi, I have a slight issue with the mobile version of our website and i'm sure there is some CSS that might be able to fix it. http://www.1worldprint.co.uk/ The sliders on the front page on desktop are fine and on my iPhone 8 Plus, i have managed to make it fit within the borders but with smaller phones the text doesn't fit. It there is a way to force the gallery to a certain width on mobiles. I have attached some images to give you the idea as well. Thanks for any help. -
Site URL: https://cbcbellevue.com Hello! I have an events list in carousel and the summary title link doesn't seem easily customizable so I tried inspecting and using what I found there (example below) but I can't get the titles to change to be white (they are on a black background index). Any suggestions for css coding to change all my summary link titles for this specific events carousel? specific page is:https://cbcbellevue.com/youth examples: .sumary-title-link #parent-workshop {color:#FFFFFF;} .sumary-title-link#str's-reality-student-conference {color:#FFFFFF;}
-
Site URL: https://woodliving.dk/ Hi I have added a link in my main menu folder to enable visitors go to a landing page when they click on the menu title. But on mobile this doesn't work. 1. Is it possible to make the link visible in mobile menu? Now I have directly added the landing page(Nordic) to the menu folder Right under link. And it looks good on mobile. If posible I would like "Nordic" to be bold. 2. How so I make "Nordic" bold in mobile only. But on desktop version I now have two "NORDIC" both linking to the same landing page. On the desktop version I want to hide the sub menu item "NORDIC". 3. How do I hide "NORDIC" in the sub menu? Any help would be appreciated. Best regards Thomas
-
Add an image link to squarespace header 7.1
Hudson_mod posted a question in Coding and Customization
Site URL: http://www.theministryofdesign.co.uk Is it possible to add an image to the right of the social icons as a link instead of a button? What I want to do is change the button out for an icon that link through to the 'login' page rather than text or a button. Thanks in advance. -
Site URL: https://dogfish-jaguar-62hg.squarespace.com Hi, I'd like to be able to change the colour of one line of text in my footer. Any ideas? https://dogfish-jaguar-62hg.squarespace.com Password: test123 Thanks! -
Site URL: https://www.inkblotastrology.com/ Hello! My 7.1 website is just one page (the home page) so I hid the mobile hamburger menu using some code. But the issue now is I think the hamburger is still technically there taking up space or something because the header is too wide for mobile now; the whole site doesn't stay centered because the header width is too long with my logo at the size it's at with the hidden hamburger menu. I attached a video to show what I mean. This wouldn't be an issue if Squarespace allowed us to remove the mobile menu, but they don't yet, so it's gonna have to be code. Is there some kind of code that can help my mobile site stay put/centered without scrolling to the right? P.S. I tried finding code to make the hamburger smaller, but none of the code I found worked, or at least it didn't fix this specific problem. Website is inkblotastrology.com Thank you! RPReplay_Final1600279587.mov
-
Site URL: https://www.scrubdesthetics.com/ Can anyone help me figure out why the logo in my site footer is cropping on both the left and right side? I am attempting to make the logo small and look decent on all device sizes but for some reason it keeps cropping. This is the code I'm using now but it doesn't seem to be 100% effective. div#block-yui_3_17_2_1_1599629340594_357495{ margin-left: auto; margin-right: auto; width: 50% !important; height: 0px; margin-top: 30px !important; margin-bottom: 30px !important; } Site password: scrubd
-
How to move logo up/down on the Welcome page?
batilly84 posted a question in Coding and Customization
Site URL: http://www.bathilda.com I am trying to move the logo down (above "ART DIRECTOR | DESIGNER") can't seem to figure how to scoot it down. Help! I'm using Avenue template. Welcome page template is Narrative. -
I'm on 7.1 , and I'm using one of the "headline" sections that gives you a background image with text and button over top. My issue is that by default there is an opacity: 0.15 on the image and it looks washed out. How can I set the opacity to 0 for my background image so it's full color? This code used to work: .section-background-overlay{ opacity: 0; } Now, the above opacity is crossed out and this appears to be controlling the opacity: element { opacity: 0.15; } In the HTML it looks like there are several data controller tags like: data-image-overlay-opacity="0.15" Basically, I'm unclear how to reference this in css as it's not referencing a specific class or ID. How can I set the opacity to 0 for my background image so it's full color?
-
Site URL: https://www.mc3.com/ I'm trying to achieve the same image swap as this site on my website's team page. Our team page is currently built with 1x4 image content blocks. Using the same process and code as this tutorial, I was able to mess around enough to create this. When I'm logged in, it works and looks as intended - see here. But when not logged in, they lose their padding and the 2nd image shrinks, regardless of both being sized at 300x200. See here, live. Two questions: - Any work arounds for this padding and shrinkage (insert Seinfeld quote) issue? - Is there a better way, in general, to do this for 50+ employee images? (100+ respectively)
-
Site URL: http://www.realestategirlguru.com Hi all, I am wanting to change one of the sections on my 7.1 site to not go vertical on mobile. The section is a list section that as a few photos with words underneath and on the desktop it spans 4 wide, however on mobile it then goes to only one photo on top of the next, on top of the next, etc... I'd like to change it so that it shows almost the same on mobile as it does on the web and have multiple horizontal photos next to each other. thanks in advance
-
how to change blog title from H1 to H2 in masonry page
kennedyc posted a question in Coding and Customization
Site URL: https://www.futureparks.org/blogs hi folks, Had a complaint from a client that having multiple H1's in a single page is not good practice for accessibility - they're right and usually most organisations aren't too bothered.....until now. Legislation in UK is changing on 20th Sept where public organisations and public facing charities are mandated to reach WCAG AA and as much of AAA as does not place an 'ureasonable burden' on the organisation. So on the blog index page masonry /blog, each title on each blog card is an H1 - how can I change to H2? I've had a poke around Design-->Fonts--> Advanced etc but can't find anything specific - so I guess custom css to change a class? - <h1 class="blog-title"? I'm still learning the CSS for Squarespace and that's a bit beyond me at the moment and I have the client breathing down my neck! Any help would be gratefully received! Thanks, community 🙂 -
Hello! You wanted me to make a forum to tag you in so I did. @tuanphan, is it possible to make the account text into a svg icon like the picture below? If so please help me if you can. Thanks!
-
Site URL: https://domus-ie.squarespace.com/servicios-proyectos/autoconsumo I think general Animations with 7.1 is a great feature, but I often think if there is a way by coding to "make things" appear before, with less vertical scrolling. Any idea? Thanks a lot! 🤘 -
Hover caption on image - whole image as a clickable link
will_nic posted a question in Coding and Customization
Hi, I have a series of image blocks on the home page which I would like some text (caption) to appear on hover. I have used this code: .layout-caption-overlay-hover .image-caption-wrapper {background:transparent!important; min-height:100%; top:40%!important;} .layout-caption-overlay-hover .image-caption-wrapper h2, .layout-caption-overlay-hover .image-caption-wrapper p{color:white!important; transition:0.5s} Which has pushed the image caption to the center and made the caption background transparent. However it has made only the top 40% portion of the image a clickable link. Is there a way to have the whole image clickable? Cheers, Will. -
Changing Portfolio Nav Link and Logo Link on one page only
Rogueace posted a question in Coding and Customization
Hi everyone, Im hoping there is a solution out there and that someone knows how to do it and can help and teach me! I want to know if it is possible to change the portfolio nav link to go to another portfolio and also if i can have it where if someone clicks my logo it goes to another specific page. -
Floating/sticky e-mail icon that links to contact page
MPMotionDesign posted a question in Coding and Customization
Site URL: http://www.believestudio.co.uk Hi there, I'm not the best when it comes css, html etc so I was just wondering if anybody could help me! Usually I would find a tutorial and just follow that but this was getting a bit complicated for me. I want a floating/sticky button in the left hand corner of my website which links to my contact page. I was thinking about having a little envelope icon instead of text. Thanks in advance for any suggestions and tips. Really appreciate it! Cheers, Mark -
Site URL: http://www.milkandhannahphoto.com Hi all! On my homepage, I'm wondering if it's possible to float a text block over a gallery block? Not a description or caption for each photo/ gallery element, but moving a text block to sit in front on/on top of a gallery block. Any input would be awesome!
-
Hello! I'm creating a photo gallery utilizing portfolio pages and subpages. I chose this option to utilize the pagination feature. 40 subpages is the limit for a portfolio page, so I have had to create another portfolio page to feature all content. (50 total subpages between 2 portfolio pages.) My question is: Is there a way to connect these separate portfolio pages to create a single, continuous pagination for all subpages? TIA! -
Trying to get a feel for the limitations for customizing templates with css/html. I am a bootstrap hobbiest intimately familiar with building creative, responsive websites with that framework. My takeaway from WordPress years ago you can mess with the css, but can't edit the html and the page structure, since that's what the pre-built template is all about. Is this the same with Squarespace, or is it even more limited in some way?
