Search the Community
Showing results for tags 'custom-css'.
-
Site URL: https://www.adrianvieni.com/photo I'm looking for some insight into custom CSS to help organize my image gallery blocks on the photography page of my website. The site is built on the Hawley template in squarespace 7.1. Is it at all possible to create keyword filters that can help people sort through images in a gallery block, instead of me manually sorting the images into separate gallery blocks or individual pages? For example, since you can add a title or description to each image in a gallery block, could I possibly add keywords to each image upon upload (eg. Portrait, Travel, etc) and create a simple menu or nav on the page above the gallery block that lets people select one, and auto filter to show them only those images tagged with those keywords? I feel like the simple solution would be to create a different gallery block or carousel for each genre of work, or to create a dropdown under the Photo tab in the nav, nest various galleries in there, and manually separate these things. However, I think it would be a very intuitive feature to be able to sort, based on keyword tags, in one gallery, similar to how you can filter by brand on most web stores. Thanks!
-
Site URL: https://www.pccf.gives/ Hello! I am trying to update the style of the "text" font for the banners on my website. I uploaded the custom font (Design/custom css/manage custom files) but now when i try to change the "text" style to the uploaded font (AmsterdamFour) it is not appearing as an option. Did i do something wrong? I don't want to change my headings for the rest of the site if possible. Thanks in advance!
-
Custom CSS for two in a row product blocks on mobile
hello321 posted a question in Coding and Customization
Site URL: https://www.pappishop.com/ Hello, I hope that you are well! I decided to put two product blocks towards the bottom of my websites homepage. On desktop view, the product blocks are side by side (two in a row). However, on mobile view, the images grow in size and stack instead of keeping the format two in a row. Is there a custom CSS to make two product blocks side by side (two in a row) on mobile view? For reference, here are the product blocks I am talking about (desktop version): -
Site URL: https://www.jimisaband.com/ Hello! I have placed a logo in my footer and it looks fine on desktop but is HUGE on mobile. It takes up the entire mobile screen. Any ideas on how I can fix this? website is jimisaband.com The template I used it Kitui, a 7.1 template
-
Site URL: https://uk.thenueco.com/pages/survey Hi Does anyone know if it's possible to have customs buttons like the below example? https://uk.thenueco.com/pages/survey Thanks
-
Site URL: https://www.lukmanipese.com Hi there, On the desktop the "|" looks great and separates the three headings nicely. On mobile it looks clunky (I've added screenshots as my website has a password) With custom css is there anyway to remove the "|" off the mobile version only? Appreciate your help!
-
Site URL: https://www.michalgrzymski.com Hi everyone! I have a problem - my custom font Inter is showing only on desktop (all browsers) and not on mobile. I have read many threads on this forum and nothing helped. My website address is michalgrzymski.com The Inter font is used for everything except the body text. Any idea what to do? 😇 Custom CSS code: @font-face { font-family: 'Inter'; src: url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e87bfcd7e554019945eb90/1642626044252/Inter.woff2') format('woff2'), /* Super Modern Browsers */ url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e87bf767faf14f2c0711d3/1642626039316/Inter.woff') format('woff'), /* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e8932f1e9b475edc6664af/1642631984266/Inter.eot'), url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e832a0060c2d3f4ea7fc5e/1642607266623/Inter.ttf') format('truetype'), /* Safari, Android, iOS */; } .sqs-block-image .design-layout-collage .image-title p { font-family: 'Inter';} .sqs-block-image .design-layout-collage .image-subtitle p{ font-family: 'Yantramanav';} h1 { font-family: 'Inter'; font-weight: 700; font-style: bold; font-size: 72px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1em } h2 { font-family: 'Inter'; font-weight: 450; font-style: Regular; font-size: 33px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1em } h3 { font-family: 'Inter'; font-weight: 400; font-style: Regular; font-size: 18px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1em } body { font-family: 'Yantramanav'; font-weight: 400; font-style: Normal; font-size: 16px; letter-spacing: 0em; text-transform: None; line-height: 2em } .sqs-block-button .sqs-block-button-element { font-family: 'Inter'; } .sqs-block-image .image-block-outer-wrapper.design-layout-collage .image-button-wrapper .image-button a { font-family: 'Inter'; } .Header-nav { font-family: 'Inter'; } .has-site-title .Header-branding{ font-family: 'Inter'; }
-
Site URL: https://paigeowen.ca For some strange reason there is no customization for the Well's Template mobile menu. I've done some CSS to change the font, background, etc. How do I add and change the mobile menu hover. Another question - is there a way to change "MENU" to a + there is no option to change "Menu". Thanks!
-
Troubleshooting custom underline background image
Anele0610 posted a question in Coding and Customization
Site URL: https://lavender-caper-k5h2.squarespace.com/ Hello, I have a problem with my website that i can't figure out. i have a custom underline background image, it works perfectly on all pages, but on footer the bottom padding is ridiculous. It should be the same everywhere, but only on the footer is bad. Can you see what the problem is there? 😞 Website: https://lavender-caper-k5h2.squarespace.com/ Thank you, Anele -
I made some light changes to backgrounds and text styling via custom CSS to get the layout rolling before deciding what, if any Js would be needed. I've noticed that upon reloading to the site, the custom CSS changed only load when I go back to the custom CSS menu. If I am in 'Pages' and select a page that has already been styled with a new background, the background does not load until I go back to the custom CSS details menu. Has anyone else experienced this? (I am a developer- albeit new to Square Space- so please don't tell me to hire one. I need to sort this out for future reference. I've looked at the console and do not see any buggy issues happening there). Thank you in advance for your time and energy. Cheers, Charlie
-
Hide header action button on single page (not all pages)
sigune100 posted a question in Coding and Customization
Hello, I am trying to hide the Header action button on a single page. I don't want to hide the button on all pages. Just one page. Can anyone advise me on how to do this? TIA! -
7.1 Help Custom Code to Lower Nav Bar to Line Up with Logo
dom_p posted a question in Coding and Customization
Site URL: https://walrus-bamboo-ngjt.squarespace.com/?p Hi, I am wondering if someone can help me figure out how to lower my nav bar to align with the baseline of my logo. I don't know much about coding. I've attached a screenshot of the homepage as the site isn't live. Thanks in advance! -
How to align text to bottom of logo image in the footer?
hellomw posted a question in Coding and Customization
Site URL: https://www.no-frames.com/photo-test/category/Lifestyle Hi, 1. Is there a way to align the baseline of the text to the bottom of an image to the left of it? 2. Can I control the size of the image and the height of the footer? -
Site URL: https://themillgym.squarespace.com Hi, I am building multiple member areas for a client. But i don't want to display every page. Basically I am first building a blog page and then linking the blog posts to another page because I can better customise what we are trying to display. So I want all the blog pages in the member area hidden in the navigation. I know I can hide the page like normal but then all the links to the other page get broken. Does anyone know how I can customise what appears in the navigation? Thank you Ryan
-
Site URL: https://www.thehairranch.com/ Hello! I'm trying to adjust the opacity of the white header on the mobile site. Tried all sorts of things. Nothing working. Any ideas? -
Site URL: https://www.whitefishlakecharters.com/booknow Hello! I have embedded some script for a calendar and booking module for Fareharbor on this client's site. What you are seeing below is the BOOK NOW page from navigating to it from the menu. Sometimes this calendar and booking module has a mind of it's own and is not visible on the actual website but I see it when I'm on the backend of SS. (See images below) HOWEVER! When I'm on the backend, it shows perfectly fine. See below. I've also noticed that these elements do not show on tablet or mobile 😞 . I have implemented this type of Fareharbor booking on other SS sites and it has worked like a dream. Not sure what I did wrong on this one. ANY help welcomed. THANK YOU!
-
Site URL: https://www.thehairranch.com/ So odd. On the desktop site, all 3 quotes appear. On the mobile site, only 2 quotes appear (the second column from Kristen and third column from Eileen). The quote from Tammy (the first one or left side) is missing. Cannot figure this out. Been looking for 2 days now. I must have hid it somehow? Any suggestions? Thank you in advance!
- 2 replies
-
- 1
-
-
- custom-css
- code
- (and 3 more)
-
How to change image on hover in a Simple List section?
mirgart posted a question in Coding and Customization
Site URL: https://rhombus-chimes-c2yj.squarespace.com/config/design I'm very new to CSS, but I'm learning so much thanks to this community! I'm redesigning my company's website and on the "About Us" page I created a Simple List section to show each team member's picture, name, and job description. I like the look of it (spacing, font size, margins) and can't seem to get the exact same look using something other than the Simple List format, like image blocks. I want to hover a second image onto each individual picture. I've found helpful codes to hover on an individual image, but I'm not finding anything about hovering with "list item" content. On the website, if you scroll down, you'll be able to see the two areas I've tried this out on. The first one has individual codes for each team member and what I want the media content to look like with the hover effect. The section below that is the Simple List section that I'd actually like to use (because I like the spacing, font size, etc.). I found codes to create a grayscale to color hover effect, but I don't know where to begin on hovering a second image. Also, how do I create a code that targets only one specific Simple List section and not every list section I have on the site? -
Site URL: https://www.isgropastries.com Looking to add a character limit to the text area fields in the following product form: Example of the product form here Select add to cart to view the form. Character limit of 35 needed for the Custom Message field. I found this plugin from Squarepaste but it says it does not work on product forms. Any help would be great!
-
Change location of pagination navigation
larsarchitects posted a question in Coding and Customization
I'd like the pagination on sub-pages to be centered between the line demarking the footer and the line I created demarking the end of the page text. Would this be adding padding to the bottom of the pagination to orient it higher in it's content box? You can see from this picture that the pagination does not appear centered between the lines (though it is centered between the sections). How would one go about making this edit? This is the website: https://gar-conch-fhlx.squarespace.com/password: larslangberg -
Dear Community, I have a dual language setup and added the following code to each of second language pages via PAGE HEADER CODE INJECTION: <div dir="rtl"</div> But now the spacing between the Facebook and the Instagram Icon in the header is too wide (see screenshot). I tried to fix it via Custom CSS but was not successful so far. Any help would be appreciated. Thank you! Sho2000
-
Hello Squarespace Expert. I attached screenshot below about the next icon above the footer. Is there anyone can help me on how to remove it? Thank you. The website is in 7.0 version.
-
How to edit / customise search box placeholder text
therealmiguel posted a question in Coding and Customization
Site URL: https://miguelmateas.com/daily-picks Good morning! Does anyone know how to edit the placeholder text in the search box from "Search" to something else? Thank you in advance of your help! Miguel -
Site URL: https://sponge-dalmatian-cgjy.squarespace.com/ Hello all, I have a portfolio page as my cover page currently with the layout Hover: Fixed. I have icons that are supposed to be transparent as the hover images, but Squarespace is adding a black overlay on top of them. A Squarespace agent let me know that this is an known issue but that I would currently need to use custom coding to get rid of the overlay. I was wondering if anyone here could help me out? The website is password protected, the pw is 123. I've attached a screenshot of what I mean - I do not want the gray background there. If there's also a way to reduce the actual transparency of the image itself through custom coding so that the project titles can be seen and not just blend in, that would be great as well.
-
Hey, I would really love if someone can help me customize some stuff on my site, so that they have the ability to be light boxed like in the video down below! This would be great if I can get the light box code because I have been searching for it for a very long time! Thanks! IMG_3813.MP4
