2Eyeballs

I am trying to change the color of the sale tag on an entire page with many products, not just on individual product pages. The sale tag is currently black. I want to make it pink. It doesn't work, but my latest attempt was plugging this into css: div#sqs-product-mark-wrapper .product-mark.sale { color: #dc9395 !important;} help!

I specifically got your code to work for the individual products, but how can I make it apply to all products on a page? I tried this code to try to change the color of the sale price only, but it doesn't work: #product-price .visually-hidden .v6-visually-hidden { color: #dc9395 !important; }

@Beyondspace I am also using 7.0 and trying to change the color of the sale tag. I plugged it into my css and it worked once, but then stopped working. thank you for any help'!

A few questions: 1. Can I change the color of the 'Sale' tags? It is currently black and I want it to be a soft red/pink. 2. How to change olor of the 'sale' typeface from white to dark grey? 3. Give 'SALE' word more padding inside the ribbon? 3. How to change the color of the sale price underneath the item photo to be red, so the customer can see the discount. I am using SQSP 7.0. I used this css code: #productList .product .product-mark, #productDetails .product-mark { background: #E77679 !important; padding: 15px; } but it's not working now. Any help much appreciated

Is there css to create space between the title and the price when products are displayed as a gallery? Right now my title and price is smashed together. The link is above. Thanks!

I fixed half of this after finding the 'design' option in the accordion build out area.

Hi, How can I change my font size + color of my Accordion header? It is labeled 'More Information' and is currently too large and too dark. I also want to make the lines bordering the top and bottom of the accordion a different color. And why is the margin for the text in the accordion so large? I'd like that information to stretch all the way across the screen.

This is the solution

Thank you @SaranyaDesigns ! It works, but at the expense of font size. I want to make my font size in the button bigger while maintaining the same smaller size button. Is there a way to do that?

How can I make certain parts of the product description a collapsible field? I want to put 'dimensions' and 'materials' into a collapsible field that you can read but clicking a link that says 'Details and Care' which will then expand the text field. Right now my text under product description looks messy. Is this possible?

Why are my 'Add to Cart' and 'Submit' Buttons so Big? When you navigate to this page of my site: you can see that both buttons are very big. The submit button can be seen at the bottom of the page. However, my other buttons in the site are smaller, which is what I want. If you go to this page of my site: and scroll down, you will see the 'Read More...' buttons are smaller. I'd like to keep all the buttons the same size site wide - this smaller size is ideal. I've attached screenshots too. Thanks!

How can I increase the font size of the text 'Add to Cart' in the button? Find a screenshot attached. I am using SQSP 7.0 Website is: Thank you!

In the product page, how can I make different variants show their matching image when clicked? I am using sqsp 7.0 For example, when you select the color green from the Color option, I want the green version of the product to show as the main image. Right now it shows the red option by default, unless you click through the product carousel. Find a screenshot attached. The page is:

That works beautifully. Thank you.

Hello, How can I increase the top margin of my shopping cart and 404 error page? I am using sqsp 7.0. Find screenshots attached. My website is:

you can also try minifying any custom code.

Hello, In the press section of my site as linked above, some of the 'Read More...' buttons, meant to open a larger version of press coverage, prompt a download. Other buttons open a new page, as they are supposed to. Can anyone help with this?

Hello, My captions for Press are all very tiny. In my Stacked Style sheet the Title and Subtitle are both supposed to be 28 and 24 point or thereabouts. However the font displays as very tiny. Please help. Thanks

of course,

Hi, I have rearranged my add to cart buttons, but I cannot manage to make the margins smaller between the buttons. I input margin values both negative and positive and they dont do anything. Can anyone help? Right now I have the following code in my Custom CSS. /* cart buttons order */ #productDetails { display: flex; flex-direction: column; } h1.product-title { order: 1; margin-top: 0; /* Adjust as needed */ padding-top: 0; /* Adjust as needed */ } .product-price { order: 2; margin-top: -10; /* Adjust as needed */ } .sqs-add-to-cart-button-wrapper { order: 3; margin-top: -20px; /* Adjust as needed */ padding-top: 0; /* Adjust as needed */ } .product-quantity-input { order: 4; margin-bottom: -10px; /* Adjust as needed */ } .product-variants { order: 5; padding-top: -10; } .product-excerpt { order: 6; padding-bottom: 0; /* Adjust as needed */ } .product-sharing { order: 7; padding-bottom: 0; /* Adjust as needed */ }

When I target my products, in css, it moves everything down across my site. What is the actual class or selector of my products? Please help! I removed my z-index's, thinking that would help, but it doesn't. you can see in this link my products are at the top of the page, in places they are not supposed to be. On my landing page, my first item is now at the top. Why does this code (injected into html header site wide), and setting the margins as seen in bold, move everything up across my site? /* Style for individual product */ .product { position: relative; margin: 50px auto; /* Center horizontally by setting auto margins */ margin-top: -100px; padding-left: 20px; /* Adjust the left spacer as needed */ padding-right: 20px; /* Adjust the right spacer as needed */ z-index: 1; }

Here are two images. I want to constrain my product images by 65 percent on desktop, and have them extend across the screen on mobile. But they are 65 percent on both desktop AND mobile, which I do not have in my code. See below an excerpt of my code with the problem area in bold, and then below that, screenshots of the problem. Please help! /* Product gallery styles */ .product-gallery { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: -50px; /* Adjust the margin as needed */ } /* Style for product images */ .product-container img { max-width: 100%; /* Limit the maximum width of each product */ height: -50px; /* Maintain the aspect ratio of the image */ } /* Style for individual product */ .product { position: relative; z-index: 2; max-width: calc(65% - 1px); /* Limit the maximum width of each product */ margin: 0 auto; /* Center horizontally by setting auto margins */ margin-top: 30px; } /* Target product title headings */ .product-title { font-size: 22px; /* Adjust the font size */ line-height: 1.2; /* Adjust the line height */ } @media (max-width: 768px) { /* Adjust the font size for mobile */ .product-title { font-size: 20px; /* Adjust the font size for mobile screens */ max-width: 100%; /* Allow product listings to occupy full width on mobile */ } .product { position: relative; margin-top: -10px; /* Adjust the negative margin to move the product listings up */ padding-left: 0px; /* You can adjust this as needed */ padding-right: 0px; width: 100%; /* Set the width to 100% to occupy the entire page width */ } .logo { width: 200px; /* Adjust the width as needed */ height: auto; /* Automatically adjust the height to maintain aspect ratio */ top: 40px; /* Adjust the top position to move the logo down */ padding-bottom: 0px; } .footer { position: relative; z-index: 5; /* Ensure that the footer has a higher z-index value than your products */ /* Other styling properties for your footer */ } } </style> 1. Here is my current desktop, which is constrained to 65 percent of it's size, which I like: And here is the mobile, which squishes the image with a margin. I don't like this big margin, I want it to run all the way across the page.

I want to keep all of my products at a certain height across my entire website. But when I do this via CSS inside of injectable HTML, it applies across my entire site. I cannot find a way to pinpoint the products more specifically. you can see on my landing page the the page begins too far down, leaving a gap between it and the navigation bar. here is the product page, which has the products at a certain height. I like this layout and want to keep it. I just don't want this height to apply to the top of every single page. Here is an excerpt of my current code with the trouble spots in bold: <style> /* Reset margins and padding for the entire website */ /* Adjust the logo's position */ .logo { position: absolute; top: 38px; left: 50%; transform: translate(-50%); z-index: 4; } /* Center the main navigation bar vertically and horizontally */ #topNav .main-nav { display: flex; justify-content: center; align-items: center; padding-top: 6px; /* Adjust the padding value as needed */ height: 62px; /* Set the height as needed */ position: absolute; top: 100px; /* Adjust the top position as needed */ left: 0; right: 0; z-index: 5; } /* Create a line beneath the top navigation bar */ .main-nav::after { content: ''; position: absolute; width: 100%; bottom: 20px; /* Adjust the position of the line relative to the logo */ border-bottom: 1px solid rgba(0, 0, 0, 0.2); /* 20% transparent black */ z-index: 3; /* Place it below the top navigation bar */ } /* Change the color of the font in the navigation bar items */ #topNav .main-nav ul li a { color: #5f5e56; } /* Adjust line height for all headings (h1, h2, h3, etc.) */ h1, h2, h3, h4 { line-height: 1.2; /* Adjust the value to your desired line height */ } h1 { font-size: 28px; /* Adjust the font size for h1 */ color: #91847D; } /* Product gallery styles */ .product-gallery { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: -50px; /* Adjust the margin as needed */ } /* Style for product images */ .product-container img { max-width: 100%; /* Limit the maximum width of each product */ height: -50px; /* Maintain the aspect ratio of the image */ } /* Style for individual product */ .product { position: relative; z-index: 2; max-width: calc(65% - 20px); /* Limit the maximum width of each product */ margin: 0 auto; /* Center horizontally by setting auto margins */ margin-top: 30px; } /* Target product title headings */ .product-title { font-size: 22px; /* Adjust the font size */ line-height: 1.2; /* Adjust the line height */ } @media (max-width: 768px) { /* Adjust the font size for mobile */ .product-title { font-size: 20px; /* Adjust the font size for mobile screens */ max-width: 95%; /* Allow product listings to occupy full width on mobile */ } .product { position: relative; margin-top: -10px; /* Adjust the negative margin to move the product listings up */ padding-top: 0px; /* You can adjust this as needed */ } .logo { width: 200px; /* Adjust the width as needed */ height: auto; /* Automatically adjust the height to maintain aspect ratio */ top: 40px; /* Adjust the top position to move the logo down */ padding-bottom: 0px; } .footer { position: relative; z-index: 5; /* Ensure that the footer has a higher z-index value than your products */ /* Other styling properties for your footer */ } } </style> </head> <body class="landing-page"> <!-- Add this link around your logo --> <div class="logo"> <!-- Your logo content goes here --> </div> <div class="product"> <!-- Product content --> </div> <div class="footer"> </div> </body> </html>

Hi everyone, I am trying to figure out the ID to make my footer have a transparent background. I am writing in CSS and have pinpointed all the other blocks except for the entirety of the footer. Right now I am using this css code which does nothing: #yui_3_17_2_1_1695385940078_230 { background-color: rgba(199, 120, 57, 0.2); padding-top: -40px; padding-bottom: -40px; padding-left: 80px; padding-right: 80px; margin-left: -40px; margin-right: -40px; } I have tried other identifiers but I can't figure out which one will span the entire footer. Thanks !

Hi friends, How can I make a button trigger a download instead of just opening the image in another window? I have hard-coded a 'download-button' into a code block and tried plugging it into html injectable code, and I can't make it trigger a download pop up. See the button 'Download Application' at the bottom of the page as linked above. It just opens the image in another window. Any help is appreciated!