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 116 results

  1. Hi there, I was wondering can anyone help me with adjusting the width of the dropdown menu? In addition, how can I adjust to make the background of the dropdown menu transparent/different color? I've tried research and finding on my own but I can't find anything! Currently I'm on version 7.1 so there isn't a specific template i think. My website isn't full done yet, but here it is www.lacylashes.com Here is what I mean, I have attached a photo Thanks!
  2. hello, is there a way to hide the links at the bottom of an event's [individual] page that link to past or future events? CSS
  3. Is it possible to reorganize content on the event-item page? For example, in the event's content section, I have a lightbox form "request a quote". I would like to move the form over to the event-meta-data section (on the left) and have the rest of the content on the right, and all centered in mobile view. Is this possible? Also, is it possible to show the "request a quote" form but not the picture and additional content on the event-list page?
  4. I want to put a phone number, and a link above my top navigation. However I do not see any way to do this within the Hayden Template. Does anyone know how to do this with custom code? Here is a screenshot Of what I am trying to accomplish.
  5. Can I make the gallery carousel larger on mobile?
  6. Hello, I would like to remove the background color from my navigation header but only on some pages. What would be the correct code snippet for it? Is it also possible to make a portfolio grid fullwidth and show a short description under the project title? My website is https://dove-turkey-3mnz.squarespace.com/ Password: cs I use Squarespace 7.1 Thanks for your help!
  7. Hi all, My website link is https://shallot-piano-yxfr.squarespace.com/config/ and the password to see it:11223344. I use version 7.1 and the template is Almar. I want to use my black logo for most of the pages and change it to white in couple other pages. Tried some custom CSS provided on other posts but didn't work. Any help would be appreciated. Attaching my logos... Thanks
  8. How can I increase the size of a carousel on mobile? Also, I have obtained a css code to allow rotating words on the home page, as well as the html for it. But, it doesn't display right on mobile. How do I fix this? Here's the code: // Rotating Word 1 // .rotating-words-1 span:nth-child(2) { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; color: #4FEAAB; } // Rotating Word 2 // .rotating-words-1 span:nth-child(3) { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; color: #4FEAAB; } // Rotating Word 3 // .rotating-words-1 span:nth-child(4) { -webkit-animation-delay: 9s; -moz-animation-delay: 9s; -o-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s; color: #4FEAAB; } // Rotating Word 4 // .rotating-words-1 span:nth-child(5) { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; color: #4FEAAB; } // Rotating Word 5 // .rotating-words-1 span:nth-child(6) { -webkit-animation-delay: 15s; -moz-animation-delay: 15s; -o-animation-delay: 15s; -ms-animation-delay: 15s; animation-delay: 15s; color: #4FEAAB; } // Rotating Words // .rotating-words{ display: inline; text-indent: 5px; } .rotating-words-1 span{ position: absolute; opacity: 0; overflow: hidden; color: #6b969d; -webkit-animation: rotateWord 18s linear infinite 0s; -moz-animation: rotateWord 18s linear infinite 0s; -o-animation: rotateWord 18s linear infinite 0s; -ms-animation: rotateWord 18s linear infinite 0s; animation: rotateWord 18s linear infinite 0s; } // Rotating Animation Keys // @-webkit-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px);} 17% { opacity: 1; -webkit-transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -moz-transform: translateY(-30px); } 5% { opacity: 1; -moz-transform: translateY(0px);} 17% { opacity: 1; -moz-transform: translateY(0px); } 20% { opacity: 0; -moz-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -o-transform: translateY(-30px); } 5% { opacity: 1; -o-transform: translateY(0px);} 17% { opacity: 1; -o-transform: translateY(0px); } 20% { opacity: 0; -o-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -ms-transform: translateY(-30px); } 5% { opacity: 1; -ms-transform: translateY(0px);} 17% { opacity: 1; -ms-transform: translateY(0px); } 20% { opacity: 0; -ms-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; transform: translateY(-30px); } 5% { opacity: 1; transform: translateY(0px);} 17% { opacity: 1; transform: translateY(0px); } 20% { opacity: 0; transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } }
  9. I have two blog pages (one for regular posts and one for work/portfolio. How do I remove metadata from appearing on the work/portofilo blog list and post, but not from the regular blog list and page? I found this thread but I'm not sure how to choose a particular blog page when you have multiple:
  10. 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.
  11. Hi. I just added a html block to my website. It looks perfect on desktop. But, I don't know how to get it to display correctly on mobile. Anybody have an idea? Here's the css code. Thanks! // Rotating Word 1 // .rotating-words-1 span:nth-child(2) { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; color: #4FEAAB; } // Rotating Word 2 // .rotating-words-1 span:nth-child(3) { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; color: #4FEAAB; } // Rotating Word 3 // .rotating-words-1 span:nth-child(4) { -webkit-animation-delay: 9s; -moz-animation-delay: 9s; -o-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s; color: #4FEAAB; } // Rotating Word 4 // .rotating-words-1 span:nth-child(5) { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; color: #4FEAAB; } // Rotating Word 5 // .rotating-words-1 span:nth-child(6) { -webkit-animation-delay: 15s; -moz-animation-delay: 15s; -o-animation-delay: 15s; -ms-animation-delay: 15s; animation-delay: 15s; color: #4FEAAB; } // Rotating Words // .rotating-words{ display: inline; text-indent: 10px; } .rotating-words-1 span{ position: absolute; opacity: 0; overflow: hidden; color: #6b969d; -webkit-animation: rotateWord 18s linear infinite 0s; -moz-animation: rotateWord 18s linear infinite 0s; -o-animation: rotateWord 18s linear infinite 0s; -ms-animation: rotateWord 18s linear infinite 0s; animation: rotateWord 18s linear infinite 0s; } // Rotating Animation Keys // @-webkit-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px);} 17% { opacity: 1; -webkit-transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -moz-transform: translateY(-30px); } 5% { opacity: 1; -moz-transform: translateY(0px);} 17% { opacity: 1; -moz-transform: translateY(0px); } 20% { opacity: 0; -moz-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -o-transform: translateY(-30px); } 5% { opacity: 1; -o-transform: translateY(0px);} 17% { opacity: 1; -o-transform: translateY(0px); } 20% { opacity: 0; -o-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -ms-transform: translateY(-30px); } 5% { opacity: 1; -ms-transform: translateY(0px);} 17% { opacity: 1; -ms-transform: translateY(0px); } 20% { opacity: 0; -ms-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; transform: translateY(-30px); } 5% { opacity: 1; transform: translateY(0px);} 17% { opacity: 1; transform: translateY(0px); } 20% { opacity: 0; transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } }
  12. Hello, I am doing a Price Table with Image Blocks on my website. I would like to emphasize the difference in the price tables by highlighting in bold the new items offered in the more expensive price table. The problem is selecting bold for the subtitle text doesn't make it stand out enough from the regular subtitle text color. What would be the CSS code injection to change the subtitle bold text color for the subtitles?
  13. What would cause this gray block to be there? I can't figure out how to get rid of it. I've tried adjusting the padding and it didn't work. Thanks! Website: johnetterleebooks.com
  14. 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.
  15. 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; }
  16. 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
  17. Hey all, I'm building a site on the Wav template with forced Mobile. I have the menu sliding out so it only covers a small part of the page. But part of page it's not covering is just white. Could someone direct me in having the site visible behind it. https://bell-parrot-x7ly.squarespace.com/ password is password
  18. I wanted to make the background for a certain portion of my index page red, and within that area I wanted to have a series of image buttons, as seen in the image attached. What i the best way to do this? I am using the Hayden Template.
  19. Hi there, I'm trying to remove the logo from my site on squarespace. I've tried the following code on Custom CSS and advanced settings on the specific page I want to remove the logo, still no luck: Custom CSS: body.homepage #logo { display: none } #collection-5751ef224c2f85ec493b876a #logo { display: none } Advanced Tab: <style> #logoImage{ display: none } </style> Any help would be greatly appreciated!
  20. hey guys, my english is not that good but i try to explain my question. I would like to build a one page website with a "scroll lock" effect. Is there any css code or tutorial how to make this effect? You can see this scroll effect at https://workflow-films.de Thank you and best wishes from germany! Dani
  21. I've got image blocks that are set to clickthrough to another page. I wanted those images to have a hover over effect and I have found the code for that but it only works when you add a custom css block to the page. So I get the image to show up but so far can't find a way to link a URL to it. Is there anyway to link a clickthrough URL to a custom css code? Below is the code i'm using <img src="https://static1.squarespace.com/static/53407622e4b0f0bdc6e387dc/t/5dcf181f66e4061a93334439/1573853226998/WinterWandering.jpg" onmouseover="this.src='https://static1.squarespace.com/static/53407622e4b0f0bdc6e387dc/t/5dcf18cc3563fc67fd558d75/1573853393669/WinterWanderingv2.jpg'" onmouseout="this.src='https://static1.squarespace.com/static/53407622e4b0f0bdc6e387dc/t/5dcf181f66e4061a93334439/1573853226998/WinterWandering.jpg’"> The link to the page i'm trying to do it is here www.wraysinclair.com/film - the top one is how I want the clickthrough to work, and the bottom image is how I want the hover effect to work. Does anyone know any code that I could add a clickthrough URL to my custom css block? Specifically the url I want to link to is www.wraysinclair.com/winter-wandering
  22. 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.
  23. Bryant theme: I have a Slideshow Gallery inserted to force a full screen banner slideshow on the home/index page for desktop which works great, but not on mobile; the client would like a single static image for mobile views and nothing works. DEV url is: https://jenniferpurdue.squarespace.com Password: JENP As a stop gap, I set the slideshow gallery for mobile to display: none; as such: @media only screen and (max-width: 812px) { .sqs-gallery-block-slideshow { display: none; } } Removing that CSS displays the full slideshow for mobile again, even after adding the following code in: @media only screen and (max-width: 812px) { #home { background-image:url('https://static1.squarespace.com/static/5d6ed3c5377e890001aee163/t/5dcec8b5b5a1dd2c238cf24f/1573832887083/8724%2Brosewood%2Bave%2Bwest-large-003_LIGHTEST.jpg'); } } and this, with page id: @media only screen and (max-width: 812px) { #collection-5d6ed731fb91660001ed3ead { background-image:url('https://static1.squarespace.com/static/5d6ed3c5377e890001aee163/t/5dcec8b5b5a1dd2c238cf24f/1573832887083/8724%2Brosewood%2Bave%2Bwest-large-003_LIGHTEST.jpg'); } } Screenshots: I would like to use the attached image seen in the desktop view (which is #5 in the gallery) as the static banner image for mobile view. I have the the page's media image set as this image as well. Help, this is driving me mad and time is ticking — anyone? Many thanks in advance!
  24. 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
  25. Hello, My website is multilingual, German and English. I have two variants of every page of my website. On summaries, is there any way to translate the "Read More" link using css. I know how to target the the link to change colours or text, but is it possible to have my website show "Read More" on my English site and "Weiterlesen" on my German site? Greetings from Hamburg, Max
×
×
  • Create New...