Category: CSS

Categories
Code Snippets CSS Javascript JQuery SquareSpace

SquareSpace | How to Add an (FAQ) Accordian

HTML====
<button class="accordian">
  Section 1
</button>
<div class="panel">
  <p>
    Lorem ipsum....
  </p>  
</div>
<button class="accordian">
  Section 2
</button>
<div class="panel">
  <p>
    Lorem ipsum....
  </p>  
</div>
<button class="accordian">
  Section 3
</button>
<div class="panel">
  <p>
    Lorem ipsum....
  </p>  
</div>

CSS====
<style>
  
  .accordian {
           background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        text-align: left;
        border: none;
        outline: none;
        transition: 0.4s;
  }
  
  .panel {
       padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
  }
  
  .active, .accordian:hover {
           background-color: #ccc; 
  }
  
  .accordian:after {
           content: '\02795';
        font-size: 13px;
        color: #777;
        float: right;
        margin-left: 5px;
  }
  
  .accordian.active:after {
           content: '\02796'; 
  }

</style>

Javascript====
<script>
    var acc = document.getElementsByClassName("accordian");
      var i;
  
      for (i = 0; i < acc.length; i++) {
         acc[i].addEventListener("click", function() {
              this.classList.toggle("active");
              var panel = this.nextElementSibling;
          
              if(panel.style.display === "block") {
                 panel.style.display = "none"; 
            }
              else {
                 panel.style.display = "block"; 
            }
        });
    }

</script>

 

Categories
CSS Wordpress

Remove image zoom feature from woocommerce products

function remove_image_zoom_support() {
remove_theme_support( 'wc-product-gallery-zoom' );
}
add_action( 'wp', 'remove_image_zoom_support', 100 );

 

Categories
Code Snippets CSS Javascript JQuery

Add a Class to your Header on Scroll

jQuery( document ).ready(function() {
            
    jQuery(window).bind('scroll', function() {
            
            wrap = jQuery('body');
            scrollTop = jQuery(window).scrollTop();
        
            distance = 50;
                                 
            if (scrollTop > distance)	{
                wrap.addClass("fixed");
            } else {
                wrap.removeClass("fixed");
            }		
        
    });

});

 

Categories
Code Snippets CSS Javascript

Load CSS File Dynamically with Javascript

var cssId = 'myCss';  // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'https://kimberleydurrant.com/test.css';
    link.media = 'all';
    head.appendChild(link);
}

 

Categories
Blog Code Snippets CSS

Curly Opening Quote on Blockquotes

Enclose your quotes in the blockquote tag, then apply this css:

blockquote::before {
  color: #692100;
  content: '“';
  font-family: "equity-text";
  font-size: 100px;
  font-style: normal;
  line-height: 0.6;
  margin-left: -45px;
  margin-top: -5px;
  position: absolute;
}
Categories
Blog Code Snippets CSS

Ugly Form Fields on Mobile, particularly Select Field and Submit Buttons

Are you experiencing ugly form fields on the mobile devices which look nothing like the very cool and awesome fields which you built for the desktop version? That could be because its using the browser’s default css for the input and select fields and buttons.

I’ve experienced this on my iphone but it could happen with other mobile operating systems and browsers also.

This bit of code will eliminate that effect.

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
Categories
Code Snippets CSS

Install a font file using css: otf, ttf, woff, etc.

First step: upload the .otf to the server so its accessible by the css file.

Add this bit of code to the top of your css file to activate a new font using its .otf file.

In this case, the .otf file was placed in the fonts folder on the same level as the css file.

@font-face {
  font-family: 'Arial';
  src: url('./Arial.eot');
  src: local('Arial'), url('./Arial.woff') format('woff'), url('./Arial.ttf') format('truetype');
}

Here’s how to use that newly added font. The font name below must be exactly the same as the defined “font-family” name above.

body {
  font-family: 'Arial';
}
Categories
Blog Code Snippets CSS

Smooth Transitions

Add this bit of code to ensure smooth transitions of elements:

* {
  -webkit-transition: all 700ms;
  transition: all 700ms;
}

This will apply to all elements and for all types of transitions; whether its related to the element’s height, width, positioning or font size.

It is especially useful for mobile responsive when the element size has to be made smaller to fit the device. By using this smooth transition, the change looks smooth and nice to the end user.