Search the Community
Showing results for tags 'custom-css'.
-
Can anyone help me with a custom css code to change the color of hyperlinks on hover in all pages? Using SS 7.1 Thanks!
-
My font scales down in size when I reach a certain browser pixel size (roughly over 2000px wide). How do I stop this!? You can see in the attachments where the correct screenshot has the heading text set to 8.1rem and paragraph set to 1.2 rem but then all of a sudden in the incorrect screenshot it scales down? Help! Is there some custom code I can add to make sure my font never scales down?
-
Hello, the dropdown view on desktop is great. I cannot replicate it in the mobile nav. This is what I have set up: .Header-nav-folder a {border-bottom:1px solid #ffffff} .Header-nav-folder{box-shadow: 5px 5px 15px rgba(0,0,0,0.25)} .Header-nav-folder a {padding-bottom:.5rem!important; } .Header-nav-folder{background:linear-gradient(to bottom, #fccb90,#f6854e) } /* dropdown items color */ .header-nav-item:hover a { color: #b0ddc9 !important; } .header-nav-folder-item a { font-color: #b0ddc9 !important; } #mobileNav .main-nav.mobile-nav a { background:linear-gradient(to bottom, #fccb90,#f6854e) } /* mobile dropdown items color */ .main-nav.mobile-nav hover a { color: #b0ddc9 !important; }
-
I am having trouble adding font to sections where it is not necessarily allowed. Is there a code I can find for this? I have had to add font to the section above for it to be able to be a matching "header" on the section below. I cannot create a header in the same section in the section I want as I believe the section is a menu. If I add a header(title), it is small and I can't adjust the font. See photo.
-
Site URL: https://supernatlparks.com I am building my first 7.1 site, and I used an Auto Layout list to organize content on my home page. Mostly, I like how this works: It seems like will make editing the page easier, and make it easier to keep the layout working between desktop and mobile, while using cards. However, I have realized that the images in an Auto Layout card aren't clickable, only the button. That's a pretty big problem for an e-commerce site. I want people to be able to get to the products as easily as possible. Does anyone have a solution for linking each image to a URL? (The same as the button would be nice, but manual is no problem.) I don't mind using CSS and/or scripts to accomplish this.
- 30 replies
-
- 2
-
-
- custom-css
- script
- (and 3 more)
-
Hello squarespace community, I've always disliked the way that squarespace shows it's menu options in the mobile view, but I've never been able to get the code right to fix it. Instead of showing the nested view after clicking a folder, I would like for the available pages to smoothly display underneath that folder as a drop down menu with the appropriate arrow directions too. This means hiding the 'back' link which I think have the right code for: .header-menu-controls-control[data-action="back"] { display: none; } I've attached a rough example of what I would like for the menu to do. HUGE thanks if you can also help with the CSS for the arrows to display on folders in the desktop view too!!
-
Site: https://countryhousereskin.squarespace.com/ Hi! I'm trying to figure out how to move the title + description + button text to appear on the images on hover. This is what I currently have: And this is what I am trying to achieve: Any help would be greatly appreciated! Thank you in advance.
-
Hi, I added some custom code for the gradients on the website www.advancingagency.com and it looks fantastic for mac users in any browser. However, when pc users open it in any browsers, they see the attached image, not the video view I also attached. What could I do to make sure the site has the same view? 1729802831_ScreenRecording2023-02-03at5_35_48PM.mov
-
I added this code to design > custom CSS, from a recommendation on another post on how to add background images to all blog posts. /* Site background image */ body[class*="collection-type-blog"] { .section-background, .page-section { background: transparent !important; opacity: 80% } & { background-image: url(https://static1.squarespace.com/static/600a59513babe51392084795/t/63dd7683ab977736bbd31344/1675458179121/unsplash-image-WsEbnsnKbUE.jpg); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; background-color: transparent !important; }} If I don't add the line that specifies opacity, I don't see my background image, but when I do, even the pictures I add inside the post are now opaque. I just want my background image to be opaque, not the foreground images. Here is my website with some examples. Any one who can help, I'd greatly appreciate it. Thank you! https://www.electricwellness.com/science/emf-mechanisms-of-action -
Hi there! I’m trying to create a summary block that points readers/users to other parts of my website. I have article pages, but they’re not designed as blog posts. I don’t have blog posts or products. Does anyone know how to create a summary block that points to regular pages of my site? In case it’s helpful, I’m using a 7.1 template. Thank you!
-
Hi, How do you adjust spacing / padding between social icons in the footer? Thank you. -
I am wondering if there is a way for me to add a button to my site to "register" for a conference and then automatically send them a PDF email confirming registration. Thanks for any help!
-
Site URL: https://www.no-frames.com/photo-test Hi, I am using the tagcoud filter block and would like to be able to indicate what tag has been clicked on/currently viewing. Is this possible? -
Hi, I've uploaded a font from my computer and for me everything it's okei, it works. But my client, in her laptop, doesn't see the new font. What's worng? This is the code I'm using, thanks! @font-face { font-family: 'Simula'; src: url('FontURLhttps://static1.squarespace.com/static/63bee4b2762f11070ab07a68/t/63bee54f62a29d3e4b327466/1673454927235/Sharp+Type+-+Simula+Book.otf'); } h1 {font-family: 'Simula';} h2 {font-family: 'Simula';} h3 {font-family: 'Simula';} h4 {font-family: 'Simula';} h5 {font-family: 'Simula';} h6 {font-family: 'Simula';} p {font-family: 'Simula';}
-
Hello, Site Url: https://layeredbrissa.squarespace.com/ PW: bless304 (Please refer to attached image) I would like to adjust the look of the custom selections on my product page. When I add multiple selections the alignment with the product image is off and doesn't look good. My main solutions/questions to resolve this is: 1) How do I put 2 selections per line, instead of 1 per line? 2) How do I reduce the overall sizing of the product selections so that it stays alligned with the image?
-
The website I'm building (unfortunately I'm not able to give a url), has 5 sections to it. On the home page I want the name of each section with an image behind it. Basically what I want is for all 5 images to be visible on the page so that visitors don't need to scroll down at all. I can just adjust the sizes to make it fit on my screen, but as soon as someone else goes on the website to approve the draft, it doesn't work because their laptop has a different size screen. -
Site URL: https://www.brandivanderwolfphotography.ca/home I have a custom font on my website "Jonathan" . Previously it worked fine on all platforms up until a month ago, when it stopped getting viewed as a script font on Safari and iOS (as far as I can tell) and just shows as a Serif font. Nothing had changed in my CSS. It still views fine on Chrome. Current CSS: font-face { font-family: ‘Jonathan’; src: url('https://static1.squarespace.com/static/612805b13766f76daeb68027/t/61a8f67ff8c4752974f59c16/1638463103868/Jonathan.otf'); src: url(https://static1.squarespace.com/static/612805b13766f76daeb68027/t/62c36a9f6b8df8606be4ec2e/1656973986230/Jonathan.ttf) } h3 { font-family: 'jonathan'; font-weight: 540; font-style: normal; font-size: 45px; letter-spacing: 0.1em; text-transform: normal; line-height: 1.3em; } Thank you for any help!
-
Hello! i’d like to turn my nav menu into a collapsed hamburger menu and turn the options into filters to the projects below. Both on Desktop and Mobile. For mobile also I’d like to make sure the menu is on the left instead of on top. thanks!
-
Hi My website is this: https://www.buildingpictures.pt/ I recently updated an image that is on my homepage (you can see the attachment) and added code in the "Custom CSS". By the way, the code I added is this one: .slider { width: 100%; overflow: hidden; } .slider .slider-image{ background-image: url(https://static1.squarespace.com/static/6022c2a79dbc57670b6d4774/t/63d954e075fa58624953250c/1675187425184/Banner+that+is%CC%81+on+site_02+copy.jpg); width: self; height: 150px; background-size: 2530px 129px; animation: slide 50s linear infinite; } @keyframes slide{ from{background-position-x:0px; } to{background-position-x:-2950px; } } I also added this HTML code on the home page, where the image is: <div class="slider"> <div class="slider-image"> </div> </div> Before this image appeared on desktop and mobile, but now it only appears on desktop. Can anyone help me understand why this is happening? What can I do to resolve this situation? It would be great if someone could help. Thanks, Building Pictures
-
I've successfully added an embeded Google Sheets monthly calendar display on my Squarespace site. I want to be sure that an updated display of the page happens daily. At the moment Google Sheets is updating to conditionally highlight the current day on the spreadsheet calendar, but because my hosted web page is static visitors may see an older cached version of the page with an earlier date highlighted. I was thinking to add a blindly displayed date (white on white or something like that) representing TODAY on the web page above or below the calendar to introduce new web content so the page would be forced to refresh each day for folks with older cached content in their browsers. Can anyone recommend a code block value to do this? There are examples I've found of how to display current year that dynamically updates for copyright displays but not date. Any suggestions for this or other means to bust cache?
-
Hi there, Is there any chance to customize cursor, so that will change for arrow when hovering over a gallery block in Brine template? For example same style as gallery in Wells template. Cursor change for left arrow for previous image and right arrow for next image. Is there any custom-css to add this style? Thank you.
-
Hello! I'm having trouble fixing the spacing/margins between flex divs on larger screens (specifically a macbook pro 15-inch at 2800x1800 Pixels). I've added coding to make the layout work on larger screens, but it doesn't work on ones that are wider than what I own. Anyone have a solution? https://level44media.squarespace.com/
-
Hi everyone, I'm not a pro CSS person, but I'm using this code to put a header image at the top of every page: a {text-decoration-line:none !important;} .header-announcement-bar-wrapper {background-image:url('URL HERE'); background-repeat:no-repeat; background-size:cover;background-position: center;} .header {background-color:rgba(0,0,0,0)!important} It works. Now I want to add a thin black line at the bottom to separate it from the page. Like 2 pixels. I've tried putting it into my image and that causes huge problems with different renderings, especially mobile, but it also renders differently on different browsers and widths. Is there a CSS way to add a black line all across my banner image at the very bottom? Thank you.
-
Hello - I have applied site-wide animation to a client's site and have also applied custom CSS so that a different animation style applies to two specific code blocks of text. This custom CSS is only working when site-wide animation is off. Does anyone know how I can have both applied and working at once? If helpful, the custom code I applied came from here and I added the block IDs: https://www.rebeccagracedesigns.com/blog/animate-text-on-squarespace-website
-
I'm sure this isn't an unique question but I have custom background images on my site as well as text that is sized to fit the images on those pages. I also have a custom background video on my home page. On desktop, they look fine but on mobile the imagery and text are off. Is there a CSS code I can add that will resolve this?
