CSS

Custom Fontawesome Icons for Lists

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');

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 here) */
#content ul li::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f105';
}
/* fontawesome hijacks the before pseudo element so we have to position w/ the class that they add */
#content ul li .svg-inline--fa {
    margin: 0 5px 0 -20px;
}

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

#content ul li::before {

font-family: "Font Awesome 5 Free";

font-weight: 900;

content: '\f105';

}

/* fontawesome hijacks the before pseudo element so we have to position w/ the class that they add */

#content ul li .svg-inline--fa {

margin: 0 5px 0 -20px;

}

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%, 45% 21%, 63% 84%, 77% 10%, 84% 95%, 94% 56%, 100% 100%);
    background-image: inherit;
    background-size: cover;
    /*background-position: 100px 5px;*/
}

.custom-top {

/*margin-top: 50px;*/

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%, 45% 21%, 63% 84%, 77% 10%, 84% 95%, 94% 56%, 100% 100%);

background-size: cover;

/*background-position: 100px 5px;*/

}

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: 100% !important;
    background: #ffffff !important
}
.jma-testimonials .soliloquy-image {
    height: 200px !important
}
@media(max-width: 600px) {
    .jma-testimonials .soliloquy-image {
        height: 300px !important
    }
}
.jma-testimonials .soliloquy-fc-caption {
    position: absolute !important;
    top: 50% !important;
    transform: translate(0, -50%) !important;
    left: 60px;
    right: 60px;
    color: #000066;
}
.jma-testimonials .soliloquy-fc-content {
    text-align: left;
    padding-bottom: 30px !important;
}
.jma-testimonials .soliloquy-fc-content p {
    line-height: 140% !important;
}
.jma-testimonials .soliloquy-fc-caption h2 {
    color: #000066 !important;
    position: absolute;
    bottom: 0;
    right: 0;
    margin-bottom: 0 !important;
}
.jma-testimonials .soliloquy-fc-caption h2 a {
    color: #000066 !important;
}
.jma-testimonials .soliloquy-prev, .jma-testimonials .soliloquy-next {
    background: none !important
}
.jma-testimonials .soliloquy-next, .jma-testimonials .soliloquy-prev {
    position: relative;
}
.jma-testimonials .soliloquy-next:before, .jma-testimonials .soliloquy-prev:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}
.jma-testimonials .soliloquy-next:before {
    border-left: 15px solid #000066;
}
.jma-testimonials .soliloquy-next:after, .jma-testimonials .soliloquy-prev:after {
    content: "";
    position: absolute;
    top: 7px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}
.jma-testimonials .soliloquy-next:after {
    border-left: 8px solid #fff;
}
.jma-testimonials .soliloquy-prev:before {
    right: 0;
    border-right: 15px solid #000066;
}
.jma-testimonials .soliloquy-prev:after {
    right: 0;
    border-right: 8px solid #fff;
}

100

101

102

103

104

/* 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: 100% !important;

background: #ffffff !important

}

.jma-testimonials .soliloquy-image {

height: 200px !important

}

@media(max-width: 600px) {

.jma-testimonials .soliloquy-image {

height: 300px !important

}

.jma-testimonials .soliloquy-fc-caption {

position: absolute !important;

top: 50% !important;

transform: translate(0, -50%) !important;

left: 60px;

right: 60px;

color: #000066;

}

.jma-testimonials .soliloquy-fc-content {

text-align: left;

padding-bottom: 30px !important;

}

.jma-testimonials .soliloquy-fc-content p {

line-height: 140% !important;

}

.jma-testimonials .soliloquy-fc-caption h2 {

color: #000066 !important;

position: absolute;

bottom: 0;

right: 0;

margin-bottom: 0 !important;

}

.jma-testimonials .soliloquy-fc-caption h2 a {

color: #000066 !important;

}

.jma-testimonials .soliloquy-prev, .jma-testimonials .soliloquy-next {

background: none !important

}

.jma-testimonials .soliloquy-next, .jma-testimonials .soliloquy-prev {

position: relative;

}

.jma-testimonials .soliloquy-next:before, .jma-testimonials .soliloquy-prev:before {

content: "";

position: absolute;

width: 0;

height: 0;

border-top: 15px solid transparent;

border-bottom: 15px solid transparent;

}

.jma-testimonials .soliloquy-next:before {

border-left: 15px solid #000066;

}

.jma-testimonials .soliloquy-next:after, .jma-testimonials .soliloquy-prev:after {

content: "";

position: absolute;

top: 7px;

width: 0;

height: 0;

border-top: 8px solid transparent;

border-bottom: 8px solid transparent;

}

.jma-testimonials .soliloquy-next:after {

border-left: 8px solid #fff;

}

.jma-testimonials .soliloquy-prev:before {

right: 0;

border-right: 15px solid #000066;

}

.jma-testimonials .soliloquy-prev:after {

right: 0;

border-right: 8px solid #fff;

}

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
}

.list-wrap .placeholder {/* or .grid-wrap or .showcase-wrap or .pst-wrap (for all) */

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 > li:first-child:after, .tb-primary-menu > .menu-item > .sf-mega:after {
	content: "";
	position: absolute;
	top: -10px;
	left: 16px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #ffffff transparent;/* background color*/
	-moz-transition: all .25s ease-out;
    -webkit-transition: all .25s ease-out;
    transition: all .25s ease-out;
}
.tb-primary-menu > .menu-item > .sub-menu.reverse > li:first-child:before {
	left: auto; right: 15px;/*when the far right item reverses against the edge of the page*/
}
.tb-primary-menu > .menu-item > .sub-menu.reverse > li:first-child:after {
	left: auto; right: 16px;/*when the far right item reverses against the edge of the page*/
}
.tb-primary-menu > .menu-item > .sub-menu > li:first-child:hover:after,
.tb-primary-menu > .menu-item > .sub-menu > li.current-menu-parent:first-child:hover:after,
.tb-primary-menu > .menu-item > .sub-menu > li.current-menu-ancestor:first-child:hover:after {
	border-color: transparent transparent #ff4891 transparent;/* hover background */
}
.tb-primary-menu > .menu-item > .sub-menu > li.current-menu-item:first-child:after,
.tb-primary-menu > .menu-item > .sub-menu > li.current-menu-parent:first-child:after,
.tb-primary-menu > .menu-item > .sub-menu > li.current-menu-ancestor:first-child:after,
.tb-primary-menu > .menu-item > .sub-menu > li.current-menu-item:first-child:hover:after {
	border-color: transparent transparent #ffcf00 transparent;/* active background */
}
.tb-primary-menu > #menu-item-673 .sf-mega:before {/* manually reposition megas */
	left: auto;
	right: 430px;
}
.tb-primary-menu > #menu-item-673 .sf-mega:after {
	left: auto;
	right: 431px;
}

/* 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 > li:first-child:after, .tb-primary-menu > .menu-item > .sf-mega:after {

content: "";

position: absolute;

top: -10px;

left: 16px;

width: 0px;

height: 0px;

border-style: solid;

border-width: 0 10px 10px 10px;

border-color: transparent transparent #ffffff transparent;/* background color*/

-moz-transition: all .25s ease-out;

-webkit-transition: all .25s ease-out;

transition: all .25s ease-out;

}

.tb-primary-menu > .menu-item > .sub-menu.reverse > li:first-child:before {

left: auto; right: 15px;/*when the far right item reverses against the edge of the page*/

}

.tb-primary-menu > .menu-item > .sub-menu.reverse > li:first-child:after {

left: auto; right: 16px;/*when the far right item reverses against the edge of the page*/

}

.tb-primary-menu > .menu-item > .sub-menu > li:first-child:hover:after,

.tb-primary-menu > .menu-item > .sub-menu > li.current-menu-parent:first-child:hover:after,

.tb-primary-menu > .menu-item > .sub-menu > li.current-menu-ancestor:first-child:hover:after {

border-color: transparent transparent #ff4891 transparent;/* hover background */

}

.tb-primary-menu > .menu-item > .sub-menu > li.current-menu-item:first-child:after,

.tb-primary-menu > .menu-item > .sub-menu > li.current-menu-parent:first-child:after,

.tb-primary-menu > .menu-item > .sub-menu > li.current-menu-ancestor:first-child:after,

.tb-primary-menu > .menu-item > .sub-menu > li.current-menu-item:first-child:hover:after {

border-color: transparent transparent #ffcf00 transparent;/* active background */

}

.tb-primary-menu > #menu-item-673 .sf-mega:before {/* manually reposition megas */

left: auto;

right: 430px;

}

.tb-primary-menu > #menu-item-673 .sf-mega:after {

left: auto;

right: 431px;

}

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 0.3s;
}
.tabs-left .nav-pills>li.active {
	width: 140px;
}
.tabs-left .nav-pills>li.active:after {
	content:'';
	right:-25px;
	top:0;
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 22px 0 22px 25px;
	border-color: transparent transparent transparent #207298;
}
.tabs-left .nav-pills>li>a {
	border-radius: 0;
	background:#f3c235;
	color:#111111;
}
.tabs-left .nav-pills>li.active > a {
	background:#207398;
	color: #ffffff;
}
.tabs-left  .tab-pane td , .tabs-left  .tab-pane th {
	padding: 3px
}

.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 0.3s;

}

.tabs-left .nav-pills>li.active {

width: 140px;

}

.tabs-left .nav-pills>li.active:after {

content:'';

right:-25px;

top:0;

position: absolute;

width: 0;

height: 0;

border-style: solid;

border-width: 22px 0 22px 25px;

border-color: transparent transparent transparent #207298;

}

.tabs-left .nav-pills>li>a {

border-radius: 0;

background:#f3c235;

color:#111111;

}

.tabs-left .nav-pills>li.active > a {

background:#207398;

color: #ffffff;

}

.tabs-left .tab-pane td , .tabs-left .tab-pane th {

padding: 3px

}

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]

<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...-->
[/column]
[column size="5/12" wpautop="false"]
[html class="inner right"]This is an example page. It's different from a blog post because it wil[/html]
[/column]
[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...-->
[/column]
[column size="5/12" wpautop="false"]
[html class="inner right"]This is an example page. It's different from a blog post because it wil[/html]
[/column]
[/raw]

[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]

[column size="5/12" wpautop="false"]

[html class="inner right"]This is an example page. It's different from a blog post because it wil[/html]

[/column]

[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]

[column size="5/12" wpautop="false"]

[html class="inner right"]This is an example page. It's different from a blog post because it wil[/html]

[/column]

[/raw]

the css (add bg images for each spoke):

#custom-main > .image-pinwheel {
    background-color: #ffffff;
    background-position: 50% 15%;
}
.image-pinwheel .inner {
	border-top: solid 1px #999999;
	padding: 15px;
	padding-left: 60px;
	position:relative;
	background-position: left 15px;
	background-repeat: no-repeat;
}
.image-pinwheel .inner.left {
	background-image: url('./images/bottom-left-pinwheel.png');
}
.image-pinwheel .row:first-child .inner.left {
	background-image: url('./images/top-left-pinwheel.png');
}
.image-pinwheel .inner.right {
	background-image: url('./images/bottom-right-pinwheel.png');
}
.image-pinwheel .row:first-child .inner.right {
	background-image: url('./images/top-right-pinwheel.png');
}
@media(min-width:768px){
.image-pinwheel .inner {
	width: 80%;
	min-height: 200px;
}
.image-pinwheel .inner.left {
	margin-left: 20px;
	margin-top: 20px;
	float: left;
}
.image-pinwheel .row:first-child .inner.left {
	margin-left: 0;
}
.image-pinwheel .inner.right {
	float: right;
}
.image-pinwheel .row:first-child .inner.right {
	margin-right: 20px;
}
.image-pinwheel .inner:after {
	content: '';
	position: absolute;
	width: 30px;
	height: 1px;
	border-top: solid 1px #999999;
}
.image-pinwheel .row .left.inner:after {
	top: -11px;
	right: -25px;
	transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.image-pinwheel .row:first-child .left.inner:after {
	top: 11px;
	right: -25px;
	transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.image-pinwheel .row .right.inner:after {
	top: -11px;
	left: -25px;
	transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.image-pinwheel .row:first-child .right.inner:after {
	top: 11px;
	left: -25px;
	transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
}

#custom-main > .image-pinwheel {

background-color: #ffffff;

background-position: 50% 15%;

}

.image-pinwheel .inner {

border-top: solid 1px #999999;

padding: 15px;

padding-left: 60px;

position:relative;

background-position: left 15px;

background-repeat: no-repeat;

}

.image-pinwheel .inner.left {

}

.image-pinwheel .row:first-child .inner.left {

}

.image-pinwheel .inner.right {

}

.image-pinwheel .row:first-child .inner.right {

}

@media(min-width:768px){

.image-pinwheel .inner {

width: 80%;

min-height: 200px;

}

.image-pinwheel .inner.left {

margin-left: 20px;

margin-top: 20px;

float: left;

}

.image-pinwheel .row:first-child .inner.left {

margin-left: 0;

}

.image-pinwheel .inner.right {

float: right;

}

.image-pinwheel .row:first-child .inner.right {

margin-right: 20px;

}

.image-pinwheel .inner:after {

content: '';

position: absolute;

width: 30px;

height: 1px;

border-top: solid 1px #999999;

}

.image-pinwheel .row .left.inner:after {

top: -11px;

right: -25px;

transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-webkit-transform: rotate(-45deg);

}

.image-pinwheel .row:first-child .left.inner:after {

top: 11px;

right: -25px;

transform: rotate(45deg);

-ms-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

}

.image-pinwheel .row .right.inner:after {

top: -11px;

left: -25px;

transform: rotate(45deg);

-ms-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

}

.image-pinwheel .row:first-child .right.inner:after {

top: 11px;

left: -25px;

transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-webkit-transform: rotate(-45deg);

}

Second Option html:

<div class="new-pinwheel">
[raw]
[column size="1/2" 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/2" wpautop="false"]
[html class="inner right"]This is an example page. It's different from a blog post because it wil[/html]
[/column]
[html class="spacer"][/html]
[column size="1/2" 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/2" wpautop="false"]
[html class="inner right"]This is an example page. It's different from a blog post because it wil[/html]
[/column]
[/raw]
</div>

[raw]

[column size="1/2" 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/2" wpautop="false"]

[html class="inner right"]This is an example page. It's different from a blog post because it wil[/html]

[/column]

[html class="spacer"][/html]

[column size="1/2" 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/2" wpautop="false"]

[html class="inner right"]This is an example page. It's different from a blog post because it wil[/html]

[/column]

[/raw]

</div>

css:

.new-pinwheel {
    background-color: #ffffff;
    background-position: 50% 47%;
	background-image: url('https://narcissistabusesupport.com/wp-content/uploads/2016/06/frontpage-heart-300x262.png');
	background-repeat: no-repeat;
}
.new-pinwheel .inner {
	color: #ffffff;
	padding: 15px;
	padding-left: 60px;
	position:relative;
	background-position: left 15px;
	background-repeat: no-repeat;
}
/* bottom left */
.new-pinwheel .inner.left {
	background-image: url('./images/bottom-left-pinwheel.png');
	background-color: #ffcd00
}
/* top left */
.new-pinwheel .row:first-child .inner.left {
	background-image: url('./images/top-left-pinwheel.png');
	background-color: #4271a1;
}
/* bottom right */
.new-pinwheel .inner.right {
	background-image: url('./images/bottom-right-pinwheel.png');
	background-color: #ff3399;
}
/* top right */
.new-pinwheel .row:first-child .inner.right {
	background-image: url('./images/top-right-pinwheel.png');
	background-color: #97cf00;
}
@media(min-width:768px){
.new-pinwheel .inner {
	width: 65%;
	min-height: 200px;
}
.new-pinwheel .row {
	margin-left: 0;
	margin-right: 0;
}
.new-pinwheel .row > div {
	padding: 0
}
.new-pinwheel .spacer {
	min-height: 100px;
}
/* bottom */
.new-pinwheel .inner {
	float: left;
}
/* top */
.new-pinwheel .row:first-child .inner {
	float: right;
}
/* right */
.new-pinwheel .row .inner.right {
	margin-top: 100px;
}
.new-pinwheel .inner:after {
	content: '';
	position: absolute;
	border-style: solid;
	width: 0;
	height: 0;
}
/* bottom left */
.new-pinwheel .row .left.inner:after {
	top: 0;
	right: -20px;
	border-width: 40px 20px 0 0;
	border-color: #ffcd00 transparent transparent transparent;
}
/* top left */
.new-pinwheel .row:first-child .left.inner:after {
	bottom: -20px;
	top: auto;
	right: 0;
	border-width: 0 40px 20px 0;
	border-color: transparent #4271a1 transparent transparent;
}
/* bottom right */
.new-pinwheel .row .right.inner:after {
	top: -20px;
	left: 0;
	border-width: 20px 0 0 40px;
	border-color: transparent transparent transparent #ff3399;
}
/* top right */
.new-pinwheel .row:first-child .right.inner:after {
	top: auto;
	bottom: 0;
	left: -20px;
	border-width: 0 0 40px 20px;
	border-color: transparent transparent #97cf00 transparent;
}
}

100

.new-pinwheel {

background-color: #ffffff;

background-position: 50% 47%;

background-image: url('http://narcissistabusesupport.com/wp-content/uploads/2016/06/frontpage-heart-300x262.png');

background-repeat: no-repeat;

}

.new-pinwheel .inner {

color: #ffffff;

padding: 15px;

padding-left: 60px;

position:relative;

background-position: left 15px;

background-repeat: no-repeat;

}

/* bottom left */

.new-pinwheel .inner.left {

background-color: #ffcd00

}

/* top left */

.new-pinwheel .row:first-child .inner.left {

background-color: #4271a1;

}

/* bottom right */

.new-pinwheel .inner.right {

background-color: #ff3399;

}

/* top right */

.new-pinwheel .row:first-child .inner.right {

background-color: #97cf00;

}

@media(min-width:768px){

.new-pinwheel .inner {

width: 65%;

min-height: 200px;

}

.new-pinwheel .row {

margin-left: 0;

margin-right: 0;

}

.new-pinwheel .row > div {

padding: 0

}

.new-pinwheel .spacer {

min-height: 100px;

}

/* bottom */

.new-pinwheel .inner {

float: left;

}

/* top */

.new-pinwheel .row:first-child .inner {

float: right;

}

/* right */

.new-pinwheel .row .inner.right {

margin-top: 100px;

}

.new-pinwheel .inner:after {

content: '';

position: absolute;

border-style: solid;

width: 0;

height: 0;

}

/* bottom left */

.new-pinwheel .row .left.inner:after {

top: 0;

right: -20px;

border-width: 40px 20px 0 0;

border-color: #ffcd00 transparent transparent transparent;

}

/* top left */

.new-pinwheel .row:first-child .left.inner:after {

bottom: -20px;

top: auto;

right: 0;

border-width: 0 40px 20px 0;

border-color: transparent #4271a1 transparent transparent;

}

/* bottom right */

.new-pinwheel .row .right.inner:after {

top: -20px;

left: 0;

border-width: 20px 0 0 40px;

border-color: transparent transparent transparent #ff3399;

}

/* top right */

.new-pinwheel .row:first-child .right.inner:after {

top: auto;

bottom: 0;

left: -20px;

border-width: 0 0 40px 20px;

border-color: transparent transparent #97cf00 transparent;

}

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 = $post->ID;
	}
	$return = '';
	if($image_ids || $acf_field){
		$return = '<div class="jma-port-slider">';
		$return .= '<div class="jma_nivo ' . $class . ' metaslider metaslider-nivo ml-slider" style="overflow: hidden">';
		if($image_ids)
			$image_ids = explode(',', $image_ids);
		else
			$image_ids = get_field($acf_field, $post_id, false);
		if($image_ids){
			foreach($image_ids as $image_id){
				$image_attributes = wp_get_attachment_image_src( $image_id, $image_size );
				$thumb_attributes = wp_get_attachment_image_src( $image_id, $thumb_size );
				if($image_attributes)
					$return .= '<img src="' . $image_attributes[0] . '" data-thumb="' . $thumb_attributes[0] . '" />';
			}
		}
		$return .= '</div><!--jma-nivo--></div>';	
	
	}
	return $return;
}

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 = $post->ID;

}

$return = '';

if($image_ids || $acf_field){

$return = '<div class="jma-port-slider">';

$return .= '<div class="jma_nivo ' . $class . ' metaslider metaslider-nivo ml-slider" style="overflow: hidden">';

if($image_ids)

$image_ids = explode(',', $image_ids);

else

$image_ids = get_field($acf_field, $post_id, false);

if($image_ids){

foreach($image_ids as $image_id){

$image_attributes = wp_get_attachment_image_src( $image_id, $image_size );

$thumb_attributes = wp_get_attachment_image_src( $image_id, $thumb_size );

if($image_attributes)

$return .= '<img src="' . $image_attributes[0] . '" data-thumb="' . $thumb_attributes[0] . '" />';

}

$return .= '</div></div>';

}

return $return;

}

then this for shortcode (notice you can add the params to the shortcode directly). image ids will over-write gallery id and show the images directly:

function nivo_slider($atts){
	ob_start();    
	$x = '';
	extract( shortcode_atts( array(
		'class' => '',
		'acf_field' => 'gallery',
		'image_size' => 'tb_grid',
		'thumb_size' => 'tb_thumb',
		'post_id' => '',
		'image_ids' => '',
		), $atts ) );
	echo jma_nivo(array(
		'class'=> $class,
		'acf_field'=> $acf_field,
		'image_size'=> $image_size,
		'thumb_size' => $thumb_size,
		'post_id'=> $post_id,
		'image_ids' => $image_ids,
		));
	$x = ob_get_contents();
	ob_end_clean();
	return str_replace("\r\n", '', $x);
}
add_shortcode('nivo_slider','nivo_slider');

function nivo_slider($atts){

ob_start();

$x = '';

extract( shortcode_atts( array(

'class' => '',

'acf_field' => 'gallery',

'image_size' => 'tb_grid',

'thumb_size' => 'tb_thumb',

'post_id' => '',

'image_ids' => '',

), $atts ) );

echo jma_nivo(array(

'class'=> $class,

'acf_field'=> $acf_field,

'image_size'=> $image_size,

'thumb_size' => $thumb_size,

'post_id'=> $post_id,

'image_ids' => $image_ids,

));

$x = ob_get_contents();

ob_end_clean();

return str_replace("\r\n", '', $x);

}

add_shortcode('nivo_slider','nivo_slider');

or this to add to content:

function jma_nivo_slider_content($content){
	$new = jma_nivo(array('class'=> 'new'));
	return  $content  . $new;
}
function jma_site_filters_hooks(){
	if(is_singular('portfolio_item') ){
		add_filter('the_content', 'jma_nivo_slider_content');
	}
}
add_action('template_redirect', 'jma_site_filters_hooks');

function jma_nivo_slider_content($content){

$new = jma_nivo(array('class'=> 'new'));

return $content . $new;

}

function jma_site_filters_hooks(){

if(is_singular('portfolio_item') ){

add_filter('the_content', 'jma_nivo_slider_content');

}

add_action('template_redirect', 'jma_site_filters_hooks');

and this to add the files for nivo slider (http://www.jqueryscript.net/slider/nivo-slider.html)

function jma_nivo_files() {
	    wp_enqueue_style( 'include_nivo_css', plugins_url('/nivo-slider.css', __FILE__) );
	    wp_enqueue_script( 'include_nivo_js', plugins_url('/jquery.nivo.slider.js', __FILE__), array( 'jquery' ) );
	    wp_enqueue_script( 'jma_nivo_js', plugins_url('/jma_meta_js.js', __FILE__), array( 'jquery', 'include_nivo_js' ) );
}
add_action( 'wp_enqueue_scripts', 'jma_nivo_files' );

function jma_nivo_files() {

wp_enqueue_style( 'include_nivo_css', plugins_url('/nivo-slider.css', __FILE__) );

wp_enqueue_script( 'include_nivo_js', plugins_url('/jquery.nivo.slider.js', __FILE__), array( 'jquery' ) );

wp_enqueue_script( 'jma_nivo_js', plugins_url('/jma_meta_js.js', __FILE__), array( 'jquery', 'include_nivo_js' ) );

}

add_action( 'wp_enqueue_scripts', 'jma_nivo_files' );

and […]

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 {
	left: 10px;
}
.tb-nivo-slider-wrapper .nivo-directionNav a.nivo-nextNav {
	right: 10px;
}
.tb-nivo-slider-wrapper .nivo-directionNav a:after {
	display: block;
	position: absolute;
	font-family: 'FontAwesome';
	color: #ffffff;
	content: '\f054';
	width: 30px;
	height: 30px;
	padding: 2px 8px;
	text-indent: 0;
	top:0;
	font-size: 18px;
	text-align: right;	
	background: #ff0000;
	opacity: 0.4;	
    -webkit-transition: opacity 0.6s; /* Safari */
    transition: opacity 0.6s;
}
.tb-nivo-slider-wrapper .nivo-directionNav a:hover:after {
	opacity: 1;
}
.tb-nivo-slider-wrapper .nivo-directionNav a.nivo-prevNav:after {
	content: '\f053';	
	text-align: left;	
}
.tb-nivo-slider-wrapper .slides-wrapper {
	background: none
}
.tb-nivo-slider-wrapper .nivo-caption {
	bottom: inherit;
	top: 50%;
	transform: translate(0, -50%);
	right: 30px;
	left: inherit;
	width: 48%;
}
/* end slider nav and caption */

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

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 {

left: 10px;

}

.tb-nivo-slider-wrapper .nivo-directionNav a.nivo-nextNav {

right: 10px;

}

.tb-nivo-slider-wrapper .nivo-directionNav a:after {

display: block;

position: absolute;

font-family: 'FontAwesome';

color: #ffffff;

content: '\f054';

width: 30px;

height: 30px;

padding: 2px 8px;

text-indent: 0;

top:0;

font-size: 18px;

text-align: right;

background: #ff0000;

opacity: 0.4;

-webkit-transition: opacity 0.6s; /* Safari */

transition: opacity 0.6s;

}

.tb-nivo-slider-wrapper .nivo-directionNav a:hover:after {

opacity: 1;

}

.tb-nivo-slider-wrapper .nivo-directionNav a.nivo-prevNav:after {

content: '\f053';

text-align: left;

}

.tb-nivo-slider-wrapper .slides-wrapper {

background: none

}

.tb-nivo-slider-wrapper .nivo-caption {

bottom: inherit;

top: 50%;

transform: translate(0, -50%);

right: 30px;

left: inherit;

width: 48%;

}

/* end slider nav and caption */