Add to functions.php function jma_child_scripts() { wp_add_inline_script(‘fontawesome’, ‘window.FontAwesomeConfig={searchPseudoElements:true}’, ‘before’); } add_action(‘wp_enqueue_scripts’, ‘jma_child_scripts’); The Css: /* get rid of the bullets */ #content ul li { list-style-type: none; } /* suppress the default fontawesome behavior */ #content ul li::before { display: none; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } /* add your icon (right-angle […]
Uneven div Top
.custom-top { /*margin-top: 50px;*/ background-image: url(back.jpg); background-size: cover; position: relative; background-position: 0 -50px !important; } .custom-top::before { content: “”; position: absolute; width: 100%; height: 50px; top: -49px; left: 0; -webkit-clip-path: polygon(0% 100%, 15% 41%, 28% 84%, 45% 21%, 63% 84%, 77% 10%, 84% 95%, 94% 56%, 100% 100%); clip-path: polygon(0% 100%, 15% 41%, 28% 84%, […]
Soliloquy Slider for Testimonials
Install and populate woo testimonials plugin: Extract and import this .json file into slider (the .jma-testimonials class isincluded in this import): soliloquy-73-05-11-2018.json.tar /* testimonial slider */ .jma-testimonials { max-height: inherit !important; } .jma-testimonials .soliloquy-caption { position: static !important; display: block !important } .jma-testimonials .soliloquy-caption-inside { position: absolute !important; top: 0 !important; width: 100% !important; height: […]
Replace Placehoders
.list-wrap .placeholder {/* or .grid-wrap or .showcase-wrap or .pst-wrap (for all) */ background-image: url(‘./images/scales.png’); background-repeat: no-repeat; background-position: center center; background-color: transparent; opacity: 0.7; } .list-wrap .placeholder i { display:none }
Menu Top “Tags”
/* tag effect at top of dropdown menus */ .tb-primary-menu > .menu-item > .sub-menu > li:first-child:before, .tb-primary-menu > .menu-item > .sf-mega:before { content: “”; position: absolute; top: -11px; left: 15px; width: 0px; height: 0px; border-style: solid; border-width: 0 11px 11px 11px; border-color: transparent transparent #ff4891 transparent;/* border color*/ } .tb-primary-menu > .menu-item > .sub-menu > […]
Left Tabs with Flyouts
Set shortcode (bootstrap) to pills: .tabs-left .tb-tabs-framed .tab-content { border-top-width: 1px; margin-left: 149px; } .tabs-left .nav-tabs, .tabs-left .nav-pills { width: 150px; float: left; } .tabs-left .nav-tabs>li, .tabs-left .nav-pills>li { border-left-width: 1px; float: none; border-top: solid 1px #ffffff; } .tabs-left .nav-pills>li { width: 110px; margin-left: 0; position: relative; -webkit-transition: width 0.3s; /* Safari */ transition: width […]
Pinwheel Image
The markup (using Jumpstart shortcode for bootstrap elements and putting over bg image in the builder) substitute <div class=”whatever”> for [html class=”whatever”] and </div> for [/html] . the html: [raw] [column size=”5/12″ wpautop=”false”] [html class=”inner left”]This is an example page. It’s different from a blog post because it wil[/html] [/column] [column size=”1/6″ wpautop=”true”] <!–Column 2…–> […]
Nivo Slider From ACF Gallery
Use this to create the html for the slider: function jma_nivo($input = array() ){ $defaults = array( ‘class’ => ”, ‘acf_field’ => ‘gallery’, ‘image_size’ => ‘tb_grid’, ‘thumb_size’ => ‘tb_thumb’, ‘post_id’ => ”, ‘image_ids’ => ”, ); foreach($defaults as $var => $default){ $args[$var] = isset($input[$var]) && $input[$var]? $input[$var]: $default; } extract($args); if(!$post_id){ global $post; $post_id = […]
Nivo Slider Nav Styling
/* slider nav and caption */ .tb-nivo-slider-wrapper .nivo-directionNav { height: 0; position:static; } .tb-nivo-slider-wrapper .nivo-directionNav a { top: 50%; transform: translate(0, -50%); position: absolute; background-image: none; width: 30px; height: 30px; opacity: 0; -webkit-transition: opacity 0.6s; /* Safari */ transition: opacity 0.6s; z-index: 100; } .tb-nivo-slider-wrapper:hover .nivo-directionNav a { opacity: 1; } .tb-nivo-slider-wrapper .nivo-directionNav a.nivo-prevNav { […]