Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'custom-css'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location

Found 97 results

  1. Hello! Is there anyway to customize search result page? I have Clay template. I would like to have only photos + titles in search result, without descriptions, filenames or anything else. Does anyone know how to hide them? Thank you
  2. Hello everyone, I'm currently working on a site where I've put the call to action button in a pill-shape like this: .Header-nav.Header-nav--primary .Header-nav-inner > a:last-of-type, .Mobile-overlay-nav.Mobile-overlay-nav--primary > a:last-of-type { border: 2px solid white; padding: 10px 30px; border-radius: 300px; } The only issue is that on all other pages but the landing page the background is also white! Please can someone help me write a code to have a white border on the landing page, but black on all other pages. Thank you so much in advance
  3. I am wanting to move my primary navigation to "bottom left" - which is below the logo. The header background color is black, and the navigation font is white. The main color of the site is also white. When I move the nav to "bottom left" it blends into the background (because they're the same color) .. it doesn't stay in the header (black background). Anyone know a way around this? Colors are set, client wants black and white. And also wants the nav underneath the logo, not to the right or any other layout.
  4. Working on a site and the client wants the captions in the gallery block I set up to have an opaque background, or just appear entirely underneath the photo. Anyone know how to create a solid background behind captions in a gallery block with css? Preferably that spans the entire image horizontally? I've got the caption position set to "bottom left" right now, which creates a transparent background, but it wraps the text and keeps everything on the left side. If I select "left" as the caption position, there's no background at all. So, I need css to either: a) Make the background that appears in the "bottom left" caption position setting transparent AND make it span the full width of the image or b) Create a background for the "left" caption position setting OR c) Somehow detach the caption to appear underneath the image Any ideas?
  5. Hello everyone! I'm using the Supply template on my website (https://www.snjc.world/), I know it's an old one that's not updated anymore but I really like the sidebar menu. The only thing that I really don't like about this theme is the lack of customization regarding the cart button. I was wondering if anyone knew how to tweak it a bit just to match the rest of my website, changing the font to match my theme and also replace the gradient in the background by a solid black or grey color. If anyone knows a bit of CSS to change those two points that would be great ! Thank you, Sam.
  6. Hello! I am trying to get a site wide background image for by site. Nothing I have found has worked. I am in the brine mojave template.
  7. Hello, I am attempting to change the code for my Audio Blocks in the Fiver template to match my site colors (I use the audio blocks to post episodes of a podcast.) I was able to change the background color of the main bar and the color of the tile font but can not seem to change the author text color, play button or progress bar (one trick was to realize the title font was set for the LIGHT setting, not the DARK setting of Audio block). Was hoping for some suggestions. Here's the code I've been using and thank you in advance Tim. .sqs-widgets-audio-player { background: #2f518f !important; background: -webkit-linear-gradient( #2f518f) !important; border: 02px solid #fff952 !important; border-radius: 0px 0px 0px 0px; color: #fff952; } .audio-author { color: #fff952 !important; } .audio-title { color: #fff952 !important; } .volume .bar.active { border-right-color: #fff952 !important; } .volume .bar { border-right-color: #fff952 !important; } .progress { background: none repeat scroll 0 0 #707070 !important; } .controls { color: #fff952 !important; }
  8. How do I remove the banner image on a page in mobile and/or tablet view using the Mojave template? https://www.jarnanaturbruksgymnasium.se/ Thanks for your help. Kind regards, Ronald
  9. Hello. I am using code blocks so that I can customise, format and size my text in different areas throughout my website, without it affecting the general style of the website on a whole. I am not a fan of the general text box because I can not customise the text exactly how I want it. For example I do not want my H1, H2 or H3 titles to be really big, but I do want some text on my website to be bigger or styled differently in certain areas to stand out and grab attention, which is why I am using the code blocks. However, I am finding that the code blocks are not scaling correctly for mobile. On desktop they look fine and give the visual impact I am looking for, but on mobile because they are not scaling properly, some of the text gets cut off or is just way too big. For example, in one code block I am using the following code: <center> <font size="5em" color="#ffffff"><span style="line-height:1.5em"><li style="list-style: none;">Let's get people talking.</li></span></font> <font size="7em" color="#ffffff"><span style="line-height:1.5em"><li style="list-style: none;">Let's create something EXTRAORDINARY together!</li></span></font> <font size="4em" color="#ffffff"> <span style="line-height:2.5em"> <li style="list-style: none;">I'm ready when you are.</li></span></font> </center> Which on a desktop looks like this: But on a mobile it looks like this: I am using em instead of px because I read that this is meant to help with the scaling, and in most cases this is fine across my entire site, but for some reason it is not here. How can I use code blocks to create custom text for visual impact on my site, but still have it scale down so it looks just as good on mobile? Thanks.
  10. Hi, I would like to have the "additional info" for my product on my website to be shows as a menu that when you click on it, it will expand and show the extra information. It is not possible to do so with the built-in options in Squarespace so I was wondering if anyone has any ideas for how to do this. An example is shown here:
  11. I've applied a css shadow to all of my in-page images. However, there are a few images that I don't want to have this shadow. Is this possible, and how can I achieve? So far I've added this code to give all images shadows. .image-block-wrapper { box-shadow: -1px 2px 10px 4px rgba(0,0,0,.1); } I've been trying to target the image ID for the few images that I do not want to have a shadow: #yui_3_17_2_1_1573606191721_472{ box-shadow: none !important;} This is finicky. I can get it to work sometimes, but then upon saving the page and viewing in the browser the shadow is back. When I go back to check, it looks like the ID is different. Seems like there's not a static ID for each image. URL: https://grape-tuatara-n6mp.squarespace.com/checking-accounts P: sitehelp If you scroll down on this checking page, I'm trying to remove the shadow from the image with 3 cell phones. Side note: I also have a shadow applied to cards on my homepage. Unsure if this effects anything. .sqs-block-image .image-block-outer-wrapper.image-block-v2 { box-shadow: -1px 2px 10px 4px rgba(0,0,0,.07); } Please help!
  12. Hey my website is dopesagittarius.com I have tried every version of css recommended on the forums to get the home text to disappear from my website but it wouldn't dissapear. Please advise on how I can get this done thanks in advance.
  13. I am creating a custom code section on my home page and want to use css-grid to style it. Everything works fine except when I try to use the minmax function with fr units. This is a common way of having elements stretch evenly across a container but then stack when the window is resized and the min width (250) is reached. However this isn't working for me in Squarespace. Any thoughts on why? I'm using Chrome, so fr units and css-grid is compatible. grid-template-columns: reapeat(auto-fit, minmax(250px, 1fr); This seems to work, but it's obviously not what I want: grid-template-columns: reapeat(auto-fit, minmax(250px, 300px); Here is my full code: <div class="home-services-container"> <div class="service-card service1"> <h3> Creative<br /> Engagement </h3> </div> <div class="service-card service2"> <h3> Ideation + <br />Innovation </h3> </div> <div class="service-card service3"> <h3> Career <br/> Coaching </h3> </div> </div> CSS: .home-services-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 16px; } .service-card { display: flex; flex-direction: column; justify-content: flex-end; color: #401025; height: 200px; width: 1fr; padding: 32px; border-radius: 8px; box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.1); background-repeat: no-repeat; background-position: -150px -80px }
  14. Uploaded appropriate custom font with corresponding CSS. Displays perfectly on my desktop, but it is not displaying on mobile or other computer devices. I attached a shot of my desktop with correct font display and another with how it displays on another machine as well. Here's my CSS: @font-face { font-family: 'DDCHardware-Condensed' !important; src: url(https://static1.squarespace.com/static/5dbc769f84db5059f6c87f00/t/5dbc8428b92bed4d9511d522/1572635688629/DDCHardware-Condensed.otf) format('otf'), url(https://static1.squarespace.com/static/5dbc769f84db5059f6c87f00/t/5dcb146116bdca031ccabd84/1573590113731/DDCHardware-Condensed.woff) format('woff'), url(https://static1.squarespace.com/static/5dbc769f84db5059f6c87f00/t/5dcb146516bdca031ccabe09/1573590117928/DDCHardware-Condensed.woff2), format('woff2'), url(https://static1.squarespace.com/static/5dbc769f84db5059f6c87f00/t/5dcb146be26ca30c117f06c9/1573590123497/DDCHardware-Condensed.eot) format('eot'); } .Index-gallery-item-content-heading { font-family: 'DDCHardware-Condensed', } h1 { font-family: 'DDCHardware-Condensed', } h2 { font-family: 'DDCHardware-Condensed';
  15. Hi all, Im using the Carson template. Im currently working on my website however im stumbling into a problem. I want to enlarge this area (see picture). When I hover on top of the white dot you see the text (commercial reel), Currently the area is as big as te blue square. Is there a way to make this the size of the green sqaure? (I made the squares in photoshop). Looking forward to your answers/suggestions!
  16. Hello! I'm attempting to add a 'Make An Appointment' button to the header of my website so patients can make easily reach my office. I would ideally add it to the bottom right corner where the social media icons are currently located and use it to link to a 'Contact' page. My URL is 'www.alextatemmd.com' and my template is Miller. Any assistance would be greatly appreciated!
  17. Hello, Firstly, thank you to the various contributors and the community on this forum for the numerous times I've found solutions whilst customising my squarespace website. I'm using the Bedford template, and have created a slideshow banner on the home page. As standard the images and overlaying headings fade in and out. I wanted the text to remain static. I fixed this issue with the below custom css, which works fine when viewing the site on a desktop. However this doesn't fix it when viewing on a mobile device, and the text transitions in and out with the image. Can anyone help me out? Link to site: https://www.candelastudio.co.uk/ Thank you /*Removing fade transition from index gallery */ .sqs-active-slide { opacity: 1 !important; }
  18. hello i have an image that is centered on my page in desktop and tablet view, but in mobile view it gets pushed off center to the right. i have no idea how to fix this. any suggestions?IMAGES ARE OF DESKTOP VIEW AND MOBILE VIEW. i need the laptop to be centered.
  19. It's possible I'm overlooking something totally obvious, but I'm trying to figure out the CSS to create an in-page dropdown menu that someone would click on and have the option to click on links to multiple other pages or files. I don't just want a standard button that links to one thing. I'm looking to create something like pictured in this image: Please help! Thanks!
  20. Hello, I cannot find the css to shrink my footer and remove this empty space. The text in the footer is positioned in the footer top block. Can anyone help me?
  21. Is it possible to use CSS or other coding to turn on the ability for users to pinch-to-zoom on images in Lightbox view on mobile devices? (It would have to be the usual zoom in/out gestures, in Lightbox mode, on a Gallery Page.) I don't understand why Squarespace still doesn't allow this. Every other website and gallery maker I know of does it, as it's a hugely useful feature for photography and art given how small mobile screens are. Thank you!
  22. Hello all, I would like to change the default menu icon + interaction to the one I found on this code-pen page: https://codepen.io/yousafkhan/pen/XWWJQyp I'm using the Sofia template. Does anyone know how I'd be able to do this?
  23. Hi! I'm creating a page in the Avenue template. When viewed on a desktop there is an image on the left, and text to the right (see "M", attached). When viewed on a mobile device, the image comes first, with the text below (see "D", attached). I'd like to swap the positions of the 2 blocks on the mobile device. That is, I'd like the text first, followed by the image below. How can I do this? Thank you!
  24. could some of you Squarespace wizards help me remove the line under my linked text. You will see from my homepage that it effects the aesthetic quite a lot and i'm unsure how to solve the problem... www.industry-studios.com i would like to remove this underlining site wide and if possible replace it with a colour fade. any help would be great!
  25. Hey all, I am trying to add a "typing" animation to a headline, kind of like SS used to have on its home page, so that a series of words replace each other in a continous rotation to give the impression they were being typed directly on the page (see example here). I installed the code, CSS and JavaScript from CodyHouse, which seems to be working in part, but cannot get the animation to actually work and replace each word. This is the page I'm working on. I think it might be an issue with SquareSpace not running the JavaScript properly but I'm not sure how to fix it. Any ideas?
×
×
  • Create New...