Tag: CSS

How to create a collapsible section with CSS and JavaScript.

A Collapsible Section makes a section, or group of fields, collapsible. It is useful when there are several sections in your form and you want them to take up less vertical space. Create A Collapsible Section Step 1) Add HTML Example Code: <button type=”button” class=”collapsible”>Open Collapsible</button> <div class=”content”>   <p>Lorem ipsum…</p> </div> Step 2) Add CSSStyle the accordion: Example… Continue reading How to create a collapsible section with CSS and JavaScript.

How to create a draggable HTML element with JavaScript and CSS

Create a Draggable DIV Element Step 1) Add HTML: Example Code: <!– Draggable DIV –> <div id=”mydiv”>   <!– Include a header DIV with the same name as the draggable DIV, followed by “header” –>   <div id=”mydivheader”>Click here to move</div>   <p>Move</p>   <p>this</p>   <p>DIV</p> </div> Step 2) Add CSS: The only important style is position: absolute, the rest is… Continue reading How to create a draggable HTML element with JavaScript and CSS

How to add standard width to a ‘div’ using bootstrap classes.

The bootstrap classes can be used in template files for setting the width of particular divs across all screen width. This can be done instead of using the @media tag in CSS. While updating the theme or when creating new HTML forms, This can be used. Here are the width and corresponding tags are given… Continue reading How to add standard width to a ‘div’ using bootstrap classes.

Css properties

Hover Effects HTML Code:Hover Over MeCSS Code:button:hover {color: #0062FF;border: #0062FF solid 1px;background: #FFFF99;} CSS Fade-in Effect on Hoverbutton{opacity:0.5;}button:hover{opacity:1;}CSS Grow-in Effect on Hoverbutton:hover{-webkit-transform: scale(1.2);-ms-transform: scale(1.2);transform: scale(1.2);} overriding all the Styles HTML Code:             Hello World!          CSS Code:p {                background-color: yellow;            }            .className {                background-color: blue !important;            }            #idName {                background-color: green;            } Truncate Text With Ellipsis HTML Code:             Lorem ipsum dolor sit amet consectetur… Continue reading Css properties

How to create a popup chat window with CSS and JavaScript.

A live chat pop-up helps customers connect with your business and can enable co-browsing, an efficient way of working through any issues they’re experiencing. Step 1) Add HTML Use a <form> element to process the input. Example Code: <div class=”chat-popup” id=”myForm”>   <form action=”/action_page.php” class=”form-container”>     <h1>Chat</h1>     <label for=”msg”><b>Message</b></label>     <textarea placeholder=”Type message..” name=”msg” required></textarea>     <button type=”submit” class=”btn”>Send</button>     <button type=”button” class=”btn cancel” onclick=”closeForm()”>Close</button>   </form> </div> Step 2) Add CSS Example Code:… Continue reading How to create a popup chat window with CSS and JavaScript.

CSS Gradients

CSS gradients let you display smooth transitions between two or more specified colors. CSS defines three types of gradients: Linear Gradients (goes down/up/left/right/diagonally) Radial Gradients (defined by their center) Conic Gradients (rotated around a center point) CSS Linear Gradients To create a linear gradient you must define at least two color stops. Color stops are… Continue reading CSS Gradients

While using the same extension for different themes.

While using the same extension for different themes, try to avoid the use of color values as static (hex decimal values). Instead, we can use standard variables which are defined in the theme. Eg: $sc-color-primary $sc-color-primary-dark So we can use these types of variables which is defined under the theme under the module “BaseSassStyles“. It… Continue reading While using the same extension for different themes.