nwhittlesey

I have a similar problem. I'm trying to remove the underlines from the Announcement Bar links: https://studio411salon.com/. The underlines don't show up when I'm editing, but they do on the site. I've tried the following and nothing works. .sqs-announcement-bar-text a { background-image: unset !important; text-decoration: none! important; border-bottom: none! important; background-image:none! important;}

Thanks!

Whenever a client orders a product, I get the order email. (I'm the website designer/administrator) The store owner only gets a notification from PayPal with a total. He doesn't know what was ordered. What settings do I need to change to correct this?

Thank you!

I'm so sorry! I am just seeing your response. I had to give up and deleted that page. It's restored now if you'd still like to look at it. My client would definitely prefer the accordion content, but I couldn't make it work with the accordion navigation on the page. That was more important. Thanks, Nancy

I'm using custom code for dropdown content and also for sidebar navigation. When I work within SS everything works great! But the sidebar navigation jumps to the bottom when I look at it live. I've tried added the blocks to a blank page and it did the same thing. I've tried removing the tables that are part of the HTML (not changeable) and that didn't help. I can't figure it out. https://www.supercubes.com/20-foot-test. Screenshots and code are below. Thanks if you have any ideas! Note: I started with the SS accordion block. Unfortunately, the site is in 7.0, and I can't duplicate the block. It's on a lot of pages! 😐 This is the CSS I'm using for both accordions: .click-reveal {list-style-type: none; display: flex; flex-direction: column; padding: 0; margin: 0rem;} ul.click-reveal {padding-left: 0!important;} .click-reveal hr {margin-left: 0; padding-top: .25em;padding-bottom: .25em;} .content__title {padding: 1rem 0rem 0rem 0rem; position: relative; cursor: pointer; user-select: none; font-size: 20px; font-family: Roboto Slab; font-weight: 700; color: #ff3333; line-height:1rem} .content__title:before{content: "+"; color: #000;font-weight:700; font-size: 24px; margin-top: 2em!important;} .check {display: none;} .content__reveal {display: none; line-height: 1.5rem} .content__reveal a {color: #ff3333;} .check:checked ~ .content__reveal {display: block; padding: 1rem; margin-left: .3rem } .check:checked ~ .content__title:before{content: "-";color: #000;font-weight:700; font-size: 24px; margin-top: 2em!important;} .content_reveal {color: #ff3333;} This is the Sidebar html <ul class="click-reveal"> <li class="item-container"> <label class="content"> <input type="checkbox" class="check"> <div class="content__title"> <a href="/shipping-container-sizes-for-sale">&nbsp;Sizes</a></div> <div class="content__reveal"> <a href="/buy-10-foot-containers">10-foot and 45-foot</a><br> <a href="/buy-20-foot-containers">20-foot</a><br> <a href="/buy-40-foot-containers">40-foot</a><br> <a href="/high-cube-shipping-containers">High-cube</a><br> <a href="/custom-length">Custom-length</a><br> </div> </label> </li> <hr> <li class="content-container"> <label class="content"> <input type="checkbox" class="check"> <div class="content__title"> <a href="/types-of-containers">&nbsp;Types</a><br></div> <div class="content__reveal"> <a href="/conventional-containers"><strong>Conventional Containers</strong></a><br> <a href="/buy-20-foot-containers">• 20-foot</a><br> <a href="/buy-40-foot-containers">• 40-foot</a><br> <a href="/40-foot-high-cube">• 40-foot High-cube<br></a><br> <strong>Specialty Sizes</strong><br> <a href="/buy-10-foot-containers">• 10-foot and 45-foot </a><br> <a href="/20-foot-high-cube">• 20-foot High Cube<br></a><br> <strong>Specialty Configurations</strong><br> <a href="/open-side-container">• Open-side</a><br> <a href="/open-top-container">• Open-top</a><br> <a href="/hard-top-container">• Hard-top</a><br> </div> </label> </li> <hr> <li class="content-container"> <label class="content"> <input type="checkbox" class="check"> <div class="content__title"> <a href="/shipping-container-conditions">&nbsp;Conditions</a></div> <div class="content__reveal"> <a href="/wind-and-water-tight-containers">Wind- and Water-tight</a><br> <a href="/cargo-worthy-containers">Cargo-worthy</a><br> <a href="/one-trip-new-containers">One-trip/’New’</a><br> </div> </label> </li> </ul> This is the Content Dropdown html <ul class="click-reveal"> <li class="item-container"> <label class="content"> <input type="checkbox" class="check"> <div class="content__title">&nbsp; &nbsp;What are the Dimensions of a 20’?</div> <p></p> <div class="content__reveal"> <p>Here are the basic specifications for 20’ containers. While there may be some slight variations from container to container, this is a general rule of thumb.</p> <h3>20-foot Container Dimensions</h3><br> <style type="text/css"> .tftable {font-size:12px;color:#333333;max-width:800px!important;border-width: 1px;border-color: #a9a9a9;border-collapse: collapse;} .tftable th {font-size:12px;background-color:#b8b8b8;border-width: 1px;padding: 8px;border-style: solid;border-color: #a9a9a9;text-align:center;} .tftable tr {background-color:#cdcdcd;} .tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #a9a9a9;} .tftable tr:hover {background-color:#ffffff;} </style> <table class="tftable" border="1"> <tbody><tr><th>What?</th><th>Length </th><th>Width</th><th>Height</th></tr> <tr><td>Exterior Size</td><td>20'</td><td>8'</td><td>8.5'</td></tr> <tr><td>Interior Size</td><td>19' 4.5"</td><td>7' 8.5"</td><td>7' 9.75"</td></tr> <tr><td>Door Size</td><td>NA</td><td>7' 8.25"</td><td>7' 5.75"</td></tr> </tbody></table> <div></div> <h3>20-foot Container Weight (pounds)</h3> <style type="text/css"> .tftable {font-size:12px;color:#333333;max-width:800px!important;border-width: 1px;border-color: #a9a9a9;border-collapse: collapse;} .tftable th {font-size:12px;background-color:#b8b8b8;border-width: 1px;padding: 8px;border-style: solid;border-color: #a9a9a9;text-align:left;} .tftable tr {background-color:#cdcdcd;} .tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #a9a9a9;} .tftable tr:hover {background-color:#ffffff;} </style><br> <table class="tftable" border="1"> <tbody><tr><th>Max. Gross</th><th>Tare</th><th>Net</th></tr> <tr><td>52,190</td><td>5,140</td><td>47,770</td></tr> </tbody></table> <div></div> <p><strong>Max. Gross:</strong> The weight of the full container including both the container and the contents<br> <strong>Tare:</strong> The empty weight of the container<br> <strong>Net:</strong> The weight capacity (Max. Gross minus Tare)</p> <h3>Mobility</h3> <p>20-foot shipping containers are very portable. They weigh approximately 5,000 pounds. With corner castings and forklift pockets, they are ideal for moving from jobsite to jobsite. They can be moved by most tow companies. See more in Moving & Delivery.</p> <h3>Questions?</h3> <p>If you are not sure what size or condition you are interested in, let us know. We can help you figure out what will meet your needs best. We can help you determine the right size, condition, modifications, paint and other options to ensure you get the right container for you. You can also visit our frequently asked questions page.</p> <li class="content-container"> <label class="content"> <input type="checkbox" class="check"> <div class="content__title">&nbsp; &nbsp;What are the uses for a 20’?</div> <p></p> <div class="content__reveal"> <h3>20-foot Containers are Ideal for Many Uses</h3> <p>20-foot shipping containers are a secure and sensible solution when you need more storage, but don't want it to take up too much space. They can easily hold a car, small boat, jet skis, snowmobiles, etc. Essentially, they are the size of a one-car garage stall. If you are concerned about how a metal box will look near your home or cabin, we can paint your container with custom colors. A used container with a fresh coat of paint can look suitable in a yard or on a lot.</p> Containers of this size can also be useful for businesses that have temporary, recurring, or long-term storage needs. Some customers use them for outdoor storage and temporarily turn 20-foot containers into record and document storage after a flood or other disaster. You can also easily add a logo or sign to advertise on your container.</p> If you are exporting your 20-foot container, we can make sure your container is cargo-worthy and surveyed. Cargo-worthy is a specific condition where the container must meet specific structural specifications so that the container can handle the rigors of international shipping. In addition to having the container in cargo-worthy condition, you will need a survey, which is a certificate showing the container is in cargo-worthy condition. We can also handle the survey for you.</p> If you plan on building with your container, we recommend either the <a href="https://www.supercubes.com/cargo-worthy-containers">cargo-worthy</a> condition with the survey or a <a href="https://www.supercubes.com/one-trip-new-containers">one-trip/”new”</a> container with the survey. The survey is set up for shipping, but it shows that the container is structurally sound which may be helpful with potential permitting and zoning departments.</p>

Try this: h3 a:hover { color: #c7c5b9; }

Thank you so much! I AM familiar with the inspection tools, but I couldn't find these IDs. I just looked again I finally see where they're located. I'm used to items turning blue when I roll over them and this cart info doesn't do that. Good to know.

Sorry, just seeing this. If I add a code block won't that affect all the prices on the page. I only want to hide the canopy prices. Maybe I'm not sure exactly where to add the Code Block. Thanks!

Sorry, I'm just seeing this. Thanks, that worked for the first product, but there are four. How did you find that ID?

Site URL: https://www.supercubes.com/container-canopies/26x20x10-single-truss I'm trying to hide the price from this group of products. I know how to hide it globally, but I only want to hide the price on this set of products. I can't find a way to select an identifier.

😜 I was making it harder than needed. Worked perfectly! Thank you so much!!!!

@creedon I have the same issue. I'm trying to hide the Home link from the navigation on ALL pages. I tried this code in the Custom CSS panel and it didn't work. I'm using the Brine template and the website is https://www.supercubes.com. I'm assuming I entered something wrong? .Header-nav-item[href="https://www.supercubes.com/home"] { display : none; } .Mobile-overlay-nav-item[href="https://https://www.supercubes.com/home"] { display : none; } I used this code to hide Home, but it only worked on the Home page. //remove HOME from nav .tweak-header-primary-nav-hover-style-active .Header--overlay .Header-nav .Header-nav-item--active { display: none; } //remove HOME from mobile nav a:nth-child(1).Mobile-overlay-nav-item { display: none; }

Thanks, I tried that on a test page. When I deleted the jpg background image to see if the color was there, it wasn't. No color, so no visible text. I'm starting to think it might be better to leave it as is or try to switch to svg. My goal was to shorten load time.

Site URL: https://reformconsulting.com I'm trying to switch out my bloated jpg banner background for a css gradation—if possible. This is the color I want, but I can't find the correct selector: When I use .desc-wrapper it only extends the width of the type. background-image: linear-gradient(#000 0%, #00324f 55%, #003963 100%) Thanks.

Excellent! I figured there was a way to identity first and last child, but couldn't get it. Thank you so much!

I just checked the CSS validator again and it checks out. Can't figure out why it's not working.

Sorry, I'm just seeing this now. The website is supercubes.com. My code is: /* Mobile Info bar */ .sqs-mobile-info-bar-trigger { cursor: pointer; display: inline-block; padding-top: 15px; padding-bottom: 15px; text-align: center; width: 45% !important;} .sqs-mobile-info-bar { background: #FF3333 !important; margin-left: 8%; margin-right: 8%; margin-bottom: 10%; width: 84%!important; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;} span.sqs-mobile-info-bar-trigger-icon { display: none;} span.sqs-mobile-info-bar-trigger-label { font-size: 18px; font-weight: 500;} /* END Mobile Info bar */

This was exactly what I was looking for. Thank you so much! I need one adjustment. My client still wants both EMAIL and CALL and I'm having trouble getting them to be spaced apart far enough for good usability. It has something to do with the width code. This is what I added to the CSS: .sqs-mobile-info-bar-trigger { cursor: pointer; display: inline-block; padding: 15px 0; text-align: center; width: 45% !important; } But, this is what shows up when I inspect. The 45% isn't working. When I tested the CSS is a validator I got this error message. I'm going for the look on the left and I have what's on the right. Any advice? Thanks!

Wow! This is EXACTLY what I've been looking for. My client wants to be able to show phone number and quote page without clicking on the navigation. Neither the announcement bar or mobile information bar are quite right. This looks perfect, but I can't make it work. I tried using your code on my site, but didn't work. This is the site: https://www.supercubes.com/. What am I doing wrong? Thank you!!! <ul class=“sc-topnav"> <li><a href="tel:877-374-5452>CALL NOW (877) 374-5452</a></li> <li><a href=“https://www.supercubes.com/quote”>REQUEST PRICING</a></li> </ul> <style> .sc-topnav { list-style-type: none; display: flex; flex-flow: row wrap; margin-top: 0; margin-bottom: 0; padding-top: 1vw; justify-content: center; align-content: space-evenly; background: #000; } .sc-topnav a { letter-spacing: .03em; font-family: Roboto; font-size: 1.7em; font-weight: 400; color: #fff; line-height: .5vw; } </style>

I think I have the same issue. Just to confirm, there's NO way to add a hover to a product title? I tried this: .grid-title:hover { font-weight: 900!important;} and it doesn't work. It DOES work to add a background color or underline to the entire item, but that's now what I'm going for: a.grid-item-link:hover {border-bottom: solid 2px #dddddd!important;} Here's the page I'm referring to: https://studio411salon.com/haircare. Thanks!

Thank you so much!! This did the trick.

ARGH!!! Me again. That code also added a colored background to the top of my main page. The main product page should have an image all the way to the top.

Just found this and it worked! body.collection-type-products .header .header-announcement-bar-wrapper { background: red;

I'm having the same problem too. I'm wondering if the code provided was for 7.0. I'm working in 7.1. Here's the overview page: https://studio411salon.com/haircare and here's it product item page. https://studio411salon.com/haircare/p/alchemic-shampoo-chocolate. The only thing you can see is the drop shadow I had to add to make the type more readable. I would like to add a color to the background since the type and logo are white.