Jump to content

nwhittlesey

Circle Member
 View Profile  See their activity

  • Posts

    46

  • Joined

  • Last visited

 Content Type 

Posts posted by nwhittlesey

    Menu Folder Pages Don't Display After Removing Text Underline

    in Fonts, colors and images

    Posted

    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;}

    Accordion code blocks (not SS block) shifting position

    in Code Blocks

    Posted

    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>

     

    Screen Shot 2023-05-02 at 2.49.02 PM.png

    Screen Shot 2023-05-02 at 2.50.45 PM.png

    CSS Hover color not working for H3

    in Customize with code

    Posted

    23 minutes ago, braevin said:

    Site URL: http://www.oraetlabora.wine

    I added the following CSS to try and change the hover color on some custom H3 text.

    h3 a:hover {color: #c7c5b9 !important;}

    The text I'm wanting to change is "Classes & Events; Our Story; Visit the Shop"

    Right now I have it set with an opacity which is working but the color feature is not. I would prefer to use hover color instead of opacity.

    Thanks!

    oraetlabora.wine 
    password: braevin 
    page: main/home page

     

    Try this:

    h3 a:hover {
      color: #c7c5b9;
    }

    Hide specific product prices 7.0

    in Customize with code

    Posted

    On 8/20/2022 at 9:18 PM, tuanphan said:

    You can also edit product > Additional Info > Add a Code Block > use this code 

    <style>
  .product-price {
  display: none !important;
}
</style>

     

    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!

     

    remove homepage from navigation

    in Pages & Content

    Posted · Edited by nwhittlesey

    @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;
        }

    Mobile Information Bar - hide icon and increase font size

    in Customize with code

    Posted

    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 */

    Mobile Information Bar - hide icon and increase font size

    in Customize with code

    Posted

    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.

    image.png.74da00f9456420c85eb545949f3ff0a4.png

     

    When I tested the CSS is a validator I got this error message.

    image.png.6947244a876cda059f7656b127be3a11.png

     

    I'm going for the look on the left and I have what's on the right.image.png.4664c8127883cda1b975490bae0dd858.png

    Any advice?
    Thanks!

    Add Phone Number & Email Links to Header Bar or Banner Above Header Bar

    in Customize with code

    Posted

    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>

    How to make product description appear on hover

    in Customize with code

    Posted · Edited by nwhittlesey

    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!

    Change product page header colour

    in Customize with code

    Posted

    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. 

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources