Key Features - Issue

Hi,

I am trying to play around with the Startup Template.

When i try to edit the Key Features Module it causes the badges/images to disappear. It happens regardless of what i do.
How can i Fix this? It wont load the images it came with and i've even gone so far as to copy the coding from the original file and yet it still wont go back to normal.

Please note that this is not a site that is published and its not intended to go online, im just playing around so that i can get familiar with it.

Any help please?

Hi

I believe problem is with editor. If You are using TinyMCE than it can strip HTML5 code from contetn. Unfortunatelly if You want to use HTML5 inside content You need to switch to a different editor or disable using editor at all and do this in pure HTML.

Hi

I believe problem is with editor. If You are using TinyMCE than it can strip HTML5 code from contetn. Unfortunatelly if You want to use HTML5 inside content You need to switch to a different editor or disable using editor at all and do this in pure HTML.

thank you

i have another question....if you would be so kind to help me

if i wanted to use the Pricing Table that is found on the Cloud Host Template in my Startup Template, how would i go about doing this? Is it even possible?

Hi

Yes it's possible, You will chage to use syntax as presented here: http://demo.gavick.com/joomla25/cloudho ... rice-table

Than add this code to override.css and make sure ocerride is enabled in template settings:

Code: Select all

.gkPriceTable {
    padding: 0 0 80px;
}
.gkPriceTable:after, .gkColorPriceTable:after {
    clear: both;
    content: "";
    display: table;
}
.gkPriceTable.col1 dl {
    width: 100%;
}
.gkPriceTable.col2 dl {
    float: left;
    margin: 2%;
    width: 46%;
}
.gkPriceTable.col2 {
    margin: 0 -2%;
}
.gkPriceTable.col3 dl {
    float: left;
    margin: 0 1.5%;
    width: 30.3333%;
}
.gkPriceTable.col3 {
    margin: 0 -1.5%;
}
.gkPriceTable.col4 dl {
    float: left;
    margin: 0 1%;
    width: 23%;
}
.gkPriceTable dl {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    box-sizing: border-box;
    margin-left: -1px;
    overflow: hidden;
    padding: 0;
}
.gkPriceTable dt {
    color: #111;
    display: block;
    font-size: 32px;
    font-weight: 500;
    line-height: 44px;
    margin: 0;
    padding: 15px 0 20px;
    text-align: center;
    text-transform: uppercase;
}
.gkPriceTable dt small {
    color: #888;
    display: block;
    font-size: 12px;
    line-height: 1.2;
    text-transform: uppercase;
}
.gkPriceTable dd {
    font-size: 18px;
    font-weight: 300;
    line-height: 30px;
    padding: 0;
    text-align: center;
}
.gkPriceTable dd strong {
    color: #444;
}
.gkPriceTable dd.gkImage {
    border-bottom: 1px solid #e5e5e5;
    margin: 0 0 36px;
    padding: 0;
}
.gkPriceTable dd.gkImage img {
    display: block;
    height: auto !important;
    margin: 0;
    max-width: 100% !important;
}
.gkPriceTable dd.gkPrice {
    background: none repeat scroll 0 0 #f5f5f5;
    border-top: 1px solid #e5e5e5;
    margin: 36px 0 0;
    overflow: hidden;
    padding: 20px 25px;
}
.gkPriceTable dd.gkPrice > strong {
    color: #444;
    float: left;
    font-size: 30px;
    line-height: 38px;
}
.gkPriceTable dd.gkPrice > .button {
    background: none repeat scroll 0 0 #111;
    float: right;
    font-weight: 500;
}
.gkPriceTable dd.gkPrice > .button:active, .gkPriceTable dd.gkPrice > .button:focus, .gkPriceTable dd.gkPrice > .button:hover {
    background: none repeat scroll 0 0 #3c99df;
}
.gkPriceTable .gkPopular {
    position: relative;
}
.gkPriceTable .gkPopular:before {
    background: none repeat scroll 0 0 #9ec22a;
    color: #fff;
    content: "popular";
    display: block;
    font-size: 12px;
    font-weight: 600;
    height: 26px;
    line-height: 27px;
    position: absolute;
    right: -36px;
    text-align: center;
    text-transform: uppercase;
    top: 14px;
    transform: rotate(45deg);
    width: 125px;
}
.gkPriceTable.col4 dd.gkPrice {
    background: none repeat scroll 0 0 #fff;
}
.gkPriceTable.col4 dd.gkPrice > strong {
    float: none;
}
.gkPriceTable.col4 dd.gkPrice > .button {
    float: none;
    margin: 24px auto 0;
}
.gkColorPriceTable.col1 dl {
    width: 84%;
}
.gkColorPriceTable.col2 dl {
    float: left;
    width: 40%;
}
.gkColorPriceTable.col3 dl {
    float: left;
    margin: 0 2%;
    width: 25%;
}
.gkColorPriceTable.col4 dl {
    float: left;
    width: 25%;
}
.gkColorPriceTable {
    margin: 0 auto;
    padding: 0 0 118px;
    width: 88%;
}
.gkColorPriceTable.col1 dl {
    margin: 0 3%;
    width: 94%;
}
.gkColorPriceTable.col2 dl {
    float: left;
    margin: 0 3%;
    width: 44%;
}
.gkColorPriceTable.col3 dl {
    float: left;
    margin: 0 3%;
    width: 27.3333%;
}
.gkColorPriceTable.col4 dl {
    float: left;
    margin: 0 2%;
    width: 21%;
}
.gkColorPriceTable dl {
    background: none repeat scroll 0 0 #3c99df;
    border-radius: 2px;
    box-sizing: border-box;
    padding: 20px;
}
.gkColorPriceTable dt {
    border-bottom: 1px solid #74b3e2;
    color: #fff;
    font-size: 36px;
    font-weight: 400;
    line-height: 72px;
    margin: -8px -20px 32px;
    text-align: center;
    text-transform: uppercase;
}
.gkColorPriceTable dd {
    color: #c7e7ff;
    font-size: 16px;
    font-weight: 300;
    line-height: 26px;
    padding: 0;
    text-align: center;
}
.gkColorPriceTable .gkPrice {
    color: #fff;
    font-size: 36px;
    font-weight: 600;
    margin: 0 0 40px;
}
.gkColorPriceTable .gkPrice > span {
    color: #c7e7ff;
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 32px;
    text-align: center;
}
.gkColorPriceTable .gkPrice > small {
    color: #c7e7ff;
    font-size: 18px;
    font-weight: 400;
    position: relative;
    top: 4px;
}
.gkColorPriceTable .gkLink {
    margin: 0 0 -65px;
}
.gkColorPriceTable .gkLink a {
    background: none repeat scroll 0 0 #fff;
    border: 5px solid #7ec0f2;
    border-radius: 50%;
    color: #3c99df;
    display: block;
    font-size: 16px;
    font-weight: 500;
    height: 96px;
    line-height: 97px;
    margin: 20px auto 0;
    text-align: center;
    text-transform: uppercase;
    transform: scale(0);
    transition: all 0.3s ease-out 0s;
    width: 96px;
}
.gkColorPriceTable .gkLink a.loaded {
    transform: scale(1);
}
.gkColorPriceTable .gkLink a:active, .gkColorPriceTable .gkLink a:focus, .gkColorPriceTable .gkLink a:hover {
    background: none repeat scroll 0 0 #7ec0f2;
    color: #fff;
}
.gkColorPriceTable dl.gkColor {
    background: none repeat scroll 0 0 #9ec22a;
}
.gkColorPriceTable .gkColor dt {
    border-bottom: 1px solid #b6d25a;
}
.gkColorPriceTable .gkColor dd {
    color: #e3f5a9;
}
.gkColorPriceTable .gkColor .gkPrice {
    color: #fff;
}
.gkColorPriceTable .gkColor .gkPrice > span {
    color: #e3f5a9;
}
.gkColorPriceTable .gkColor .gkPrice > small {
    color: #e3f5a9;
}
.gkColorPriceTable .gkColor .gkLink a {
    border: 5px solid #bedf54;
    color: #9ec22a;
}
.gkColorPriceTable .gkColor .gkLink a:active, .gkColorPriceTable .gkColor .gkLink a:focus, .gkColorPriceTable .gkColor .gkLink a:hover {
    background: none repeat scroll 0 0 #bedf54;
    color: #fff;
}
.gkColorPriceTable dl.gkPremium {
    background: none repeat scroll 0 0 #111;
}
.gkColorPriceTable.col2 dl.gkPremium {
    margin: -32px 1.5% 0;
    width: 47%;
}
.gkColorPriceTable.col3 dl.gkPremium {
    margin: -32px 1.5% 0;
    width: 30.3333%;
}
.gkColorPriceTable.col4 dl.gkPremium {
    margin: -32px 1% 0;
    width: 23%;
}
.gkColorPriceTable .gkPremium dt {
    border-bottom: 1px solid #373737;
    font-size: 41px;
    line-height: 83px;
    margin: -8px -20px 48px;
}
.gkColorPriceTable .gkPremium dd {
    color: #adadad;
    font-size: 18px;
    line-height: 30px;
}
.gkColorPriceTable .gkPremium .gkPrice {
    color: #fff;
    font-size: 41px;
}
.gkColorPriceTable .gkPremium .gkPrice > span {
    color: #adadad;
    font-size: 16px;
}
.gkColorPriceTable .gkPremium .gkPrice > small {
    color: #adadad;
    font-size: 21px;
}
.gkColorPriceTable .gkPremium .gkLink a {
    border: 5px solid #757575;
    color: #111;
    margin: 32px auto 0;
}
.gkColorPriceTable .gkPremium .gkLink a:active, .gkColorPriceTable .gkPremium .gkLink a:focus, .gkColorPriceTable .gkPremium .gkLink a:hover {
    background: none repeat scroll 0 0 #757575;
    color: #fff;
}