Jump to content

lornem

Member
  • Posts

    43
  • Joined

  • Last visited

Everything posted by lornem

  1. https://forum.squarespace.com/profile/231994-beyondspace/ Hi, that worked. Thanks so much. I have a couple of more questions if you don't mind. 1) How do I add color to the overlay if I don't want to use white? I tried this code but it didn't work /* --- White Image Overlay --- */ .gallery-grid-image-link { opacity: 0.6; } .gallery-grid-image-link:hover { opacity: 1.0; transition: opacity 0.1s ease; color: #ffcc00 } 2) How do I change the image description color so it's lighter and it doesn't stand out so much? I tried this code but it didn't work /* --- Gallery Font Style --- */ div.gallery-caption-wrapper p.gallery-caption-content { font-family: 'proxima-nova' !important; font-color: #ff3300; font-size: 24px; }
  2. Using Squarespace 7.1 Fluid Engine Hi there, I am trying to add a white 50% opaque overlay to all images on the website I am editing. I've tried several tutorials on editing list or gallery item blocks, but nothing I do seems to have an effect on the carousel elements. What I'm aiming for is the images to look faded in their default (main) state and when they are hovered over, they become brighter (their original color, with no overlay). So I am trying to have the images and thumbnails to look faded with 50% white by default and when you hover over an image or thumbnail their image will show in full color. I want this effect to apply to the (Wilde, Guardians, Meraki) images on the homepage and all thumbnail images in the (Wilde, Guardians, Meraki) store pages. I do not know which "Selector" to use in the code. I want to use CSS to accomplish this. Here's the code I have but it's not working. Thanks .sqs-block-image:hover { filter: grayscale(0) } Here's the video I was watching that sort of explains it. https://youtu.be/u9aIzizxcUI?si=mb9DzV4hKxmY_62O
  3. @paul2009 Thank you for the reply. đź‘Ť
  4. Hi, I am using Squarespace 7.1 I want to wrap text around an image so the text flows around the image. I read you just hold down on the image and move it over the text and when the image turns blue you release it and the text will wrap around it. I've tried this in Edit Mode but it doesn't work. What am I doing wrong.
  5. Hi, I notice in the Site Styles there's a default of 3 H tags. H1, H2, H3, H4 I need a separate style that uses a different font and was wondering if I can I add another Tag like H5? How would I do this?
  6. Hi, I have 2 questions How Do I Customize Slider Text only 1) I am trying to change the: font for the slider banner only. I want to be able to add a custom font for it and change the size, color, letter spacing to below. color: #ffffff; font-family: Anton; font-size: 75px;; font-weight: 500; letter-spacing: 0.3px; text-transform: none; How Do I Customize Navigation Text Only 2) I want to make the Navigation to have a Weight of: 600. Currently the navigation is using the P3 (weight of 300) in Site Styles. If I change the weight in site styles then it will change the weight for every P3 element which is not what I want. I only want to change the weight for the navigation so it looks bolder. Thanks
  7. 1) The white logo get's lost on the dark and busy slider images. What code would I use to add a subtle semi-transparent black drop shadow beneath my logo and the menu? 2) How do I Make My Navigation "Clicked" State red #FF0000 instead of black so it is more visible against the dark slider images? I looked through the Site Styles and could not see an option for this.
  8. Wow that worked great thank you. 1) The white logo get's lost on the busy backgrounds. Is there a way to add a subtle black drop shadow beneath my logo and the menu. Would Something like this work? filter: drop-shadow(0px 0px 20px #6D6875); 2) Also, the "clicked state of the menu item is black. So "home" is black when clicked and doesn't show up well on the sliders. I went through (Site Styles > Colors) but didn't see an option for adding a color to the clicked state. I want to change the "clicked" state to "red" #CE2424 so whatever page a person is on that page's menu item would be red.
  9. Question #1 Hi, Ok I found this tutorial that uses: "Squarespace Auto Layouts". https://www.thestyledsquare.com/blog-content/how-to-create-a-rotating-hero-banner-with-squarespace-auto-layout I followed the tutorial here and added the code. It works perfectly but it needs "Arrows" to be enabled to work. If I turn off (hide) "Arrows" then the hero banner stops auto scrolling through the images. (Edit Content > Design > Style > Navigation > Arrows) Question: How can I add code to CSS to "hide" the slider arrows and still allow the banner images to auto scroll? ___________________________________________________________________ Question #2 Question: How do I Make my Logo and Navigation "White" only on my Homepage and keep them black on all other pages?
  10. Hi, the code below is for a transparent header. How would I change the code if I want it to work for a page other than the homepage. The page I want to use is: /test ________________________________________________ .homepage #page section:first-child { padding-top: 0 !important; }
  11. Ok, Thanks. I changed it but I see nothing.. No type. Nothing has changed on the page.
  12. Ok thanks. Do I copy just the #ID Number or all the code below it too? Please tell me if this code is correct? OK, my ID Number is: id="collection-6568a75112118c18ed22f78e" I added it to the code below. Does this look correct? { body id="collection-6568a75112118c18ed22f78e" { .header-title-logo a:after { content: "CONTEMPORARY ARTIST"; position: absolute; top: calc(~"70% + 70px"); left: 50%; transform: translate(-50%,-50%); z-index: 9999; font-size: 48px; color: white; width: 100%; text-align: center; font-weight: 500; letter-spacing: .6rem; text-shadow: #999 0px 0 0px; }
  13. Yes that's close but it does not animate automatically. If the images would scroll automatically then yes that would be what I'm trying to achieve.
  14. Hi, I have not made the page yet. If it is not the homepage then I'm wondering how I would name it if it's named: Test1
  15. Hi, I have a questions related to animated gallery images in Squarespace. 1) I want to add Text and a Button over the Gallery in Squarespace. The page is not the homepage but it will be named: test I want a a white #ffffff Title "PLAN FOR SUCCESS AND REACH NEW HEIGHTS" and a Red #b00000 "Learn More" button with white text that reads "Learn More" over the animated Gallery in Squarespace. (see attached image) Heading Font: Futura PT Weight: 500 Line Height: 1.4 em Letter Spacing: 0.05 Button Font: Poppins Weight: 400 Letter Spacing: 0.05 1) How would I code the above to add it to my CSS page so it looks like the image below? Also, I read in this forum, (but cannot find it) that there is a plugin or company that makes it simple to add text and buttons to an animated gallery in Squarespace. Does anyone know the name or have a link. Thanks.
  16. Hi, I have CSS code I want to use in a page of mine. I want to use the code not on my homepage but in my page named: test But as you can see the code was used in my previous homepage: body.homepage but how do I change it (word it) so the code works in my page named: test Should it read? { body.test { .header-title-logo a:after { content: "CONTEMPORARY ARTIST"; position: absolute; { body.homepage { .header-title-logo a:after { content: "CONTEMPORARY ARTIST"; position: absolute; top: calc(~"70% + 70px"); left: 50%; transform: translate(-50%,-50%); z-index: 9999; font-size: 48px; color: white; width: 100%; text-align: center; font-weight: 500; letter-spacing: .6rem; text-shadow: #999 0px 0 0px; }
  17. Hi, I want the header to be transparent like this code allows but... .homepage #page section:first-child { padding-top: 0 !important; } Question: How do I use this code not on the homepage but on a different page? my page is named: Test1
  18. I want my banner to animate (scroll) through the images and I want static text (a title) and button to appear on top of the animated images. _______________________________ I have tried to accomplish this from within Squarespace with no success. Test 1 - First I created a new Section then added a portfolio which has multiple images but to see all images they need to be clicked. (This doesn't work for me). Test 2 - Then I created an animated slideshow but it does not allow you to add text or a button.
  19. Hi, using Squarespace 7.1 I have set my slideshow to: Slideshow Full (Full Bleed). The slideshow is set to Medium (75) for height. Medium (75) looks good on desktop but it looks too tall (too square) on mobile. Question: Is there a way to change the slideshow height so it's different for Desktop and Mobile? I want it to stay at Medium (75) on Desktop and I want it less vertical on mobile so it looks more horizontal on mobile. Currently if I change it, it affects both and on mobile.
  20. Hmmm. The lack of response makes me think this maybe a problem for the fluid design in Squarespace 7.1 If someone could let me know if this is not possible or provide a solution I would appreciate it. Thanks.
  21. How do I add a text block and button in Squarespace 7.1 so they don't overlap when browser resizes?
Ă—
Ă—
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.