Assorted Codes

Grayscale Image Hover

Add the class class="imgrayscale" to the table with the images you would like to have a grayscale hover on.

.imgrayscale img { filter: gray; -webkit-filter: grayscale(100%); -webkit-transition: all .6s ease; -webkit-backface-visibility: hidden; } .imgrayscale img:hover { filter: none; -webkit-filter: grayscale(0%); }

Scrolling Text

Add into a blank content block, and adjust the scrollamount as needed. Style it to your preference.

MONDAY - FRIDAY 11:00 AM - 7:00 PM (ET) SATURDAY AND SUNDAY BY APPOINTMENT ONLY - Call Today (201) 957-1494

Gold Gradient

Place in CSS panel and edit as desired.

.form-element[type='text'], .form-element-size-large { border-color: 1pt solid #000; background: linear-gradient(90deg,#c79750 0%, #e6b964 20%,#f8e889 50%,#deb15f 80%,#dfb461 100%); }

50/50 Content Block

Add into a blank content block, add images, edit as needed.

H2 Section Heading Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada arcu id erat interdum, at ultrices tellus porta. Donec non tincidunt urna, a congue risus. Morbi accumsan lacus nec orci rutrum, quis tempus lacus porta. Donec non augue a velit feugiat ultricies ut id enim.

Button

KV Arrow

Add the HTML into a blank content block, and the CSS to the CSS panel.

.arrow-down { border-left: 30px solid #FFF; border-right: 30px solid #FFF; border-bottom: 0px solid #FFF; border-top: 20px solid transparent; display: block; width: 0px; height: 0px; margin: auto; } td.spacer { width: calc(50% - 60px); background-color: #FFF; }

Center Sticky Nav

Add to CSS panel.

#sticky-navContainer ul.primary-webcomMenu { display: table; margin: auto; float: none; }

CTA Block Services

Add into an empty content block.

Call (318) 553-5597

Our Services

Roadside Service

Towing

Truck Repair

Tire Service

Welding

Inspection Stickers

Gradient H1s

Add to CSS panel. Edit the color values as needed.

h1 { background: linear-gradient(178deg, #E2C47E 0%, #E2C47E 25%, #F3D9BE 50%, #BB8E54 75%, #E2C47E 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.4 !important; }

Slide Nav Styling

Add to CSS panel. Style as needed.

#slide-navContainer a { text-overflow: initial; overflow: hidden; white-space: pre-wrap; word-wrap: break-word; } #slide-navContainer { background: #A95218; } #slide-navContainer a, #slide-navContainer a:before { background: #A95218; color: #E6DDA1; font-family: merriweather; text-transform: capitalize; } #slide-navContainer li.selected a{ color: #FFF; text-decoration: none; text-align: left; } #slide-navContainer li a:hover{ color: #fff; text-align: left; text-decoration: none; } #slide-navContainer .secondary-webcomMenu li { border-bottom: 1px solid #A95218; } #slide-navContainer #nav { background-color: transparent; }

Gradient Nav

Add to CSS panel. Style as needed.

#navContainer { border-top-style:none; border-bottom-style:solid; border-width: 3px; border-color: #5B9638; position: relative; z-index: 1; font-family: muli; font-weight: bold; background: -webkit-linear-gradient(#9D53B3, #4D2464); /*Safari*/ background: -o-linear-gradient(#9D53B3, #4D2464); /*Opera*/ background: -moz-linear-gradient(#9D53B3, #4D2464); /*Firefox*/ background: linear-gradient(#9D53B3, #4D2464); /* Standard*/ }

Intro Block Horizontal Row

Add to CSS panel, and add class="introblk" to the content block you want this style to apply to.

.introblk hr { overflow: visible; /* For IE */ padding: 0; border: none; border-top: medium double #333; color: #333; text-align: center; margin: 3em 0 1em; max-width: 300px; } .introblk hr:after { content: "\222D"; background: #FFF; display: inline-block; position: relative; top: -0.8em; font-size: 1.25em; padding: 0 0.25em; }

Image Line Border

Add to CSS panel. In the Builder, when you click on an image, select picborder from the drop down for styles.

.picborder { border: 3px solid transparent; box-shadow: 0px 0px 0px 1px #535353; display: inline-block; } .picborder img { margin-bottom: 0; } @media only screen and (max-width: 768px) { .picborder { margin-bottom: 15px!important; } }

Cards CTA

Add into a blank content block, update the images, and link them.

John Doe

Architect & Engineer

John Doe

Architect & Engineer

John Doe

Architect & Engineer

Image Overlay Text

When using this block, you cannot edit the images/links unless you comment out the CSS in the block. When you're done adding images/links, uncomment out the code.

Shop Now

Fancy Heading

Add the CSS to the CSS panel, and add class="fancy" to the content block. Any span tags you have in that block, will have the fancy styling.

.subtitle { margin: 0 0 1em 0; } .fancy { line-height: 0.5; text-align: center; } .fancy span { display: inline-block; position: relative; } .fancy span:after { content: ""; position: absolute; height: 5px; border-bottom: 1px solid #000; /* Delete borders and replace with "background-image" */ border-top: 1px solid #000; top: 0; width: 2000px; } .fancy span:before { content: ""; position: absolute; height: 5px; border-bottom: 1px solid #000; /* Delete borders and replace with "background-image" */ border-top: 1px solid #000; top: 0; width: 2000px; } .fancy span:before { right: 100%; margin-right: 15px; } .fancy span:after { left: 100%; margin-left: 15px; }

Add the copied contents above the header in the global text field.

Hours of Operation: Monday – Friday, 8AM– 5PM Saturday, 8AM– 2PM | Call Today: (630) 882-2996 | Contact Us →