[dabra]

Hi what short code value would you put in when trying to add a new icon? The icon that is populating at the moment is showing a grey tick with green background, so the grey tick does not stand out on the grey table background.
I understand you put in this [?] under Shortcode but what do you put in ‘ShortCode Value’?

Thanks

[WordPress Eden]

Hi,
Actually you can change color of icon using css. You can send me link to your table so i can suggest what change is required to do that.

Check following screenshots to understand how to add a image using short-code.

[WordPress Eden]

Sorted order,
1. Add-short-code
2. Apply-short-code
3. New-tick-icon

[dabra]

Ok the new image just goes on top of green background which is not what i want, where is the price table css file on my wordpress site located to edit?

[WordPress Eden]

Add following css at the bottom of ../wp-content/plugins/pricing-table/css/site/tipTip.css file,

.w3eden .label{
color: #000 !important;
}

Set color value as you want. That will change the color of icon.

[dabra]

Hi I added code to css file and still getting grey tick and cross. I changed #000 to #fff though. Also white colour works with words and numbers but not the icons as shown in attached image.

/* TipTip CSS – Version 1.2 */
@import url(‘http://fonts.googleapis.com/css?family=Pathway+Gothic+One|Roboto+Slab’);

#shaon-pricing-table h1,
#shaon-pricing-table h2,
#shaon-pricing-table h3,
#shaon-pricing-table ul,
#shaon-pricing-table li{
padding:0px;
margin:0px;
line-height: normal;

}

#shaon-pricing-table1 img,
#shaon-pricing-table img{
background: transparent !important;
border: none !important;
box-shadow:none !important;
margin-top:0px;
}
#shaon-pricing-table1 a,
#shaon-pricing-table a{
text-decoration: none !important;
}

#tiptip_holder {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99999;
}

#tiptip_holder.tip_top {
padding-bottom: 5px;
}

#tiptip_holder.tip_bottom {
padding-top: 5px;
}

#tiptip_holder.tip_right {
padding-left: 5px;
}

#tiptip_holder.tip_left {
padding-right: 5px;
}

#tiptip_content {
font-size: 11px;
color: #fff;
text-shadow: 0 0 2px #000;
padding: 4px 8px;
border: 1px solid rgba(255,255,255,0.25);
background-color: rgb(25,25,25);
background-color: rgba(25,25,25,0.92);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 0 3px #555;
-webkit-box-shadow: 0 0 3px #555;
-moz-box-shadow: 0 0 3px #555;
line-height: normal !important;
padding: 10px;
}

#tiptip_arrow, #tiptip_arrow_inner {
position: absolute;
border-color: transparent;
border-style: solid;
border-width: 6px;
height: 0;
width: 0;
}

#tiptip_holder.tip_top #tiptip_arrow {
border-top-color: #fff;
border-top-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_bottom #tiptip_arrow {
border-bottom-color: #fff;
border-bottom-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_right #tiptip_arrow {
border-right-color: #fff;
border-right-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_left #tiptip_arrow {
border-left-color: #fff;
border-left-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_top #tiptip_arrow_inner {
margin-top: -7px;
margin-left: -6px;
border-top-color: rgb(25,25,25);
border-top-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_bottom #tiptip_arrow_inner {
margin-top: -5px;
margin-left: -6px;
border-bottom-color: rgb(25,25,25);
border-bottom-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_right #tiptip_arrow_inner {
margin-top: -6px;
margin-left: -5px;
border-right-color: rgb(25,25,25);
border-right-color: rgba(25,25,25,0.92);
}

#tiptip_holder.tip_left #tiptip_arrow_inner {
margin-top: -6px;
margin-left: -7px;
border-left-color: rgb(25,25,25);
border-left-color: rgba(25,25,25,0.92);
}

/* Webkit Hacks */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#tiptip_content {
padding: 4px 8px 5px 8px;
background-color: rgba(45,45,45,0.88);
}
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
border-bottom-color: rgba(45,45,45,0.88);
}
#tiptip_holder.tip_top #tiptip_arrow_inner {
border-top-color: rgba(20,20,20,0.92);
}
}

#shaon-pricing-table li{
background: none;
}

.w3eden ul,
.w3eden ul li:after,
.w3eden ul li:before{
content: “” !important;
margin: 0 !important;
padding: 0 !important;
}

.w3eden ul li.title-row,
.w3eden ul li
{
list-style: none !important;
margin: 0 !important;

}

.w3eden .btn-free,.btn-large{
max-width: 90%;
}

.w3eden ul li{
padding-left: 0 !important;
padding-right: 0 !important;
}

.w3eden .label{
color: #fff !important;
}

.pricing-table h5{
font-family: ‘Pathway Gothic One’, sans-serif !important;
}
.pricing-table h1{
font-family: ‘Roboto Slab’, sans-serif !important;
font-style: normal;
font-size: 16pt !important;
font-weight: 400 !important;
}

/* Small devices (tablets, 768px and up) */
@media (max-width: 768px) {
.pricing-table.pricer{
max-width: 100% !important;
}
.pricing-table .col,
.pricing-table .responsive{
width: 45% !important;

}
.pricer .col:before{
width: 100% !important;
}
.pricer .col .header{
width: 80% !important;
}
.pricer .col .header .label{
width: 100% !important;
}
.pricer .selected .details{
margin-top: 20px !important;
}
.pricer .col .signup a{
width: 80% !important;
}
}

@media (max-width: 500px){
.pricing-table .col,
.pricing-table .responsive{
width: 100% !important;

}
}

/* Medium devices (desktops, 992px and up) */
@media (max-width: 992px) {

}

[WordPress Eden]

Send your page link where you have pricing table, I have to check to which css is conflicting with pricing table css. After that i can suggest exact solution for you.

[Author]

Posts