Kryptronic Software Support Forum

You are viewing this forum as a guest. Login to an existing account, or create a new account, to reply to topics and to create new topics.

#1 01-02-2017 19:07:59

larry
Member
Registered: 07-21-2003
Posts: 437

kaddtocart css

I'm looking for the CSS that controls the shape of the "add to cart" button, specifically, and all other buttons, like the "Go" search button.    I've found kbutton css and changed the border-radius but it only changes the "add to cart" button on the Category Feature Grid - Category Sections with Inline Product Offers.    It does not change on the individual product screens, nor the search button.

I believe I'm looking for the css tag kaddtocart, but I cannot find it in either the main css or the skin override file.   

1)  is kaddtocart the correct css?  if not, what is?
2) where is it?


Laurie Stephens




Offline

 

#2 01-03-2017 00:56:41

zanart
Member
From: bedford
Registered: 04-02-2008
Posts: 1706

Re: kaddtocart css

you will probably want to override the .kwrap input[type="submit"] class found in the /media/skins/css/all.min.css file.
You probably should override the class in the flex skin css file, and not edit the above file.

If you are changing the css, you really need to use firefox with web developer tools. Right clicking any element will immediately tell the css class and file it uses, and you can edit it in real time to check any changes before editing any file


Rob

Offline

 

#3 01-03-2017 08:19:11

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19798
Website

Re: kaddtocart css

@larry:

@zanart makes a great point about web developer tools.  They're available in Firefox and Chrome out of the box.  I've added-on FireBug to Firefox as well to aid in debugging all kinds of things.  It's an invaluable tool for locating proper CSS classes while designing.

If you look around in the CSS you'll notice that:

.kbutton {}

is a class that's attributed to links (a tags) to make them look like buttons.  Buttons themselves are styled using:

.kwrap input[type="submit"], .kwrap input[type="reset"] {}

To target a specific button, figure out where it is in the scheme of the rest of the CSS.  To style the add to cart button, I'd look at where it appears style it as needed.  Example: If I wanted to style the button on the main offer detail page, I'd use:

.kprodshow input[type="submit"] {}

Or the add to cart buttons in category feature grids (which are links):

.kcatfeatgrid .kbutton {}


Nick Hendler

Offline

 

#4 01-03-2017 09:04:28

larry
Member
Registered: 07-21-2003
Posts: 437

Re: kaddtocart css

Thank you both! 

BTW - I LOVE the way this software lets you move everything around on the skin.   Excellent tool!


Laurie Stephens




Offline

 

#5 11-05-2017 09:43:14

jonaha
Member
Registered: 11-01-2006
Posts: 192

Re: kaddtocart css

I am trying to change the color of the checkout button can you tell me where I can find it?

Offline

 

#6 11-06-2017 07:55:08

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19798
Website

Re: kaddtocart css

That's a button that can be accessed with the 'kbuttonhighlight' class as in:

.kbuttonhighlight

or:

.kbutton.kbuttonhighlight


Nick Hendler

Offline

 

#7 11-06-2017 08:52:25

jonaha
Member
Registered: 11-01-2006
Posts: 192

Re: kaddtocart css

Can you tell me the file name where I can change it?

Offline

 

#8 11-07-2017 07:45:43

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19798
Website

Re: kaddtocart css

You would change how it looks by adding/changing CSS rules for it in your skin's CSS file.


Nick Hendler

Offline

 

#9 11-07-2017 11:02:43

jonaha
Member
Registered: 11-01-2006
Posts: 192

Re: kaddtocart css

Here is the file can you tell me where it is?
/* +------------------------------------------------------------+ */
/* | Document Styles                                            | */
/* +------------------------------------------------------------+ */

body {color: #000000; background-color: #FFFFFF; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 16px;}
input, select, option, textarea {font-family: 'Roboto', Arial, Helvetica, sans-serif;}

a {color: #19647E; text-decoration: none;}
a:hover {text-decoration: underline;}

/* +------------------------------------------------------------+ */
/* | Skin: kskin_flex                                           | */
/* +------------------------------------------------------------+ */

#kskin_flex       {box-sizing: border-box; width: 100%; padding: 0; margin: 0;}
#kskin_flexmain   {box-sizing: border-box; width: 100%; margin: 0;}
#kskin_flexheader {box-sizing: border-box; width: 100%; margin: 0;}

/* +------------------------------------------------------------+ */
/* | Skin: kskin_head                                           | */
/* +------------------------------------------------------------+ */

#kskin_headinner {max-width: 1100px; margin: 0 auto 0 auto;}

#kskin_headhome {margin-bottom: .25em;}
#kskin_headhome img {margin: 0 auto 0 auto; max-height: 4em;}

@media all and (min-width: 600px) {

     #kskin_headhome {margin-bottom: .5em;}
     #kskin_headhome img {margin: 0; max-height: none;}

     #kskin_headwidgets {text-align: right;}
     #kskin_headwidgets div.kwidget_box {float: right;}

}

/* OVERRIDE: Mini Shopping Cart - Width, Float Hoverbox to Right */

#ajaxminicart {width: 18em; max-width: 18em;}

#kskin_headwidgets #ecom_skinwidget_minicart--CONTENT > .kwidget_padmax {position: relative;}
#kskin_headwidgets #ajaxminicart {right: 0;}

/* +------------------------------------------------------------+ */
/* | Skin: kskin_nav                                            | */
/* +------------------------------------------------------------+ */

#kskin_nav {background-color: #000000; font-size: 18px;}

#kskin_navinner {max-width: 1100px; margin: 0 auto 0 auto;}

/* +------------------------------------------------------------+ */
/* | Skin: kskin_banner                                         | */
/* +------------------------------------------------------------+ */

#kskin_banner {background-color: #000000;}

#kskin_bannerinner {margin: 0 auto 0 auto;}

/* +------------------------------------------------------------+ */
/* | Skin: kskin_main                                           | */
/* +------------------------------------------------------------+ */

#kskin_maininner {max-width: 1100px; margin: 0 auto 0 auto;}

#kskin_col2, #kskin_col3 {padding: .5em .5em 0 .5em; background-color: #F4F4F4;}

#kskin_maincontent {padding:  .5em .5em 1em .5em;}

#kskin_col2 div.kwidget_boxcontent a {color: #000000;}

@media all and (min-width: 960px) {

     #kskin_maincontent, #kskin_col2, #kskin_col3 {padding: 1em 1em 2em 1em;}

}

/* +------------------------------------------------------------+ */
/* | Skin: kskin_foot                                           | */
/* +------------------------------------------------------------+ */

#kskin_foot {background-color: #000000; padding: .5em;}

#kskin_footinner {max-width: 1100px; margin: 0 auto 0 auto;}

#kskin_footcopy {font-size: .7em; margin-top: 1em;}

/* +------------------------------------------------------------+ */
/* | Override Styles in {public}/media/skins/css/all.css Below  | */
/* +------------------------------------------------------------+ */

/* OVERRIDE: Grey to Dark Grey Internal Class Color Change */

.kwrap input[type="submit"]:hover, .kwrap input[type="reset"]:hover {background-color: #333333; border: 1px solid #333333;}
.kbutton:hover {
    background-color: #333333; border: 1px solid #333333;
}

.kbutton {
    background-color: #ff8700;
    border:none;   
}



h2.kmirrorthead      {background-color: #333333;}
.ktricktablehead     {background-color: #333333;}
.ktricktableheaditem {background-color: #333333;}
.ktable th           {background-color: #333333;}

/* OVERRIDE: Navmenu Hover Colors */

.kthemeinvert .kwidget_icondrop .kwidget_boxcontent, .kthemeinvert .kwidget_fulldrop .kwidget_boxcontent,
.kthemeinvert .kwidget_icondrop .kwidget_box:hover .kwidget_boxicon, .kthemeinvert .kwidget_fulldrop .kwidget_box:hover .kwidget_boxicon {background-color: #222222;}
.kthemeinvert .kwidget_icondrop li a:hover, .kthemeinvert .kwidget_fulldrop li a:hover {background-color: #333333;}

@media all and (min-width: 600px) {

     .kthemeinvert .kwidget_fulldrop .kwidget_boxcontent > ul > li:hover {background-color: #222222;}
     .kthemeinvert .kwidget_fulldrop .kwidget_hoverbox {background-color: #222222;}
     .kthemeinvert .kwidget_fulldrop .kwidget_boxcontent {background-color: inherit;}
     .kthemeinvert .kwidget_fulldrop .kwidget_boxcontent ul {background-color: #222222;}
     .kthemeinvert .kwidget_midwide .kwidget_fulldrop .kwidget_boxcontent > ul > li:hover > a {background-color: #222222;}

}

@media all and (max-width: 959px) {

     .kthemeinvert .kwidget_boxcontent.kwidget_click li ul {background-color: #333333;}
     .kthemeinvert .kwidget_boxcontent.kwidget_click li ul li a:hover {background-color: #444444;}
     .kthemeinvert .kwidget_boxcontent.kwidget_click li ul li ul {background-color: #444444;}
     .kthemeinvert .kwidget_boxcontent.kwidget_click li ul li ul a:hover {background-color: #333333;}
     
     #chat--CONTENT {
         display:none;
     }
     
     #no_sales_tax--CONTENT {
         display:none;
     }
     

}

@media all and (min-width: 960px) {

     .kthemeinvert .kwidget_fulldrop .kwidget_boxcontent > ul > li:hover > a {background-color: #222222;}

}

@media all and (min-width: 1100px) {

     .kwidget_fulldrop .kwidget_boxcontent ul > li a:hover > div.kwidget_hoverbox {width: 1100px; left: 50%; margin-left: -550px;}

}

/* OVERRIDE: Tabs */

.ktabheading {background-color: #F4F4F4; padding: .5em; margin-bottom: 0;}
.ktabcontent {border: 1px solid #F4F4F4; padding: .5em;}
.ktabcontent h2 {font-size: 1.1em;}
.ktabcontent > h2:first-child {margin-top: 0;}

/* OVERRIDE: Category Displays */

.kcatshow {border: 1px solid #F4F4F4;}
.kcatshowdescwrap {background-color: #F4F4F4;}
.kcatlistitem {background-color: #F4F4F4; border: 1px solid #F4F4F4;}
.kcatlistitemwrap {padding: .5em;}

/* OVERRIDE: Product Displays */

.kprodlistitem {background-color: #F4F4F4; border: 1px solid #F4F4F4;}
.kprodlistitem .kmirrorcell {margin-bottom: 1em;}
.kprodlistitemwrap {padding: .5em;}
.kprodlistitemwrap form {margin: 0;}

/* OVERRIDE: Reviews */

.kreviewsitem {border: 1px solid #F4F4F4; background-color: #F4F4F4;}
.kreviewsiteminfo {background-color: #FFFFFF; padding: .5em;}
.kreviewsitemtext {padding: 1em .5em 1em .5em;}

/* OVERRIDE: Shopping Cart */

.kcartitemname {color: #19647E;}

/* +------------------------------------------------------------+ */
/* | End                                                        | */
/* +------------------------------------------------------------+ */
.logo {
    margin-top: 32px;
}

#kcontent > div:nth-child(2) > div > div > div.kcatlistitemwrap > div > a {
    font-size: 12px;
    text-align: center;
}

.kcatlistitemname {
    text-align: center;
}

.kcatlistitem {
    background-color: #fff;
}


#kskin_head {
    background-color: #069;
}

.kwrap input[type="submit"], .kwrap input[type="reset"] {
    color: #FFFFFF;
    background-color: #FF8700;
    border: 1px solid #FF8700;
}

#ecom--minisearch > div {
    width: 100%;
}
#ecom--minisearch > div > a {
    color: #FF8700;
    padding-top: 5px;
}
#ecom--minisearch--ecom--prodsearch--string {
    width: 80%;
}

#ecom_skinwidget_minisearch > div > div.kwidget_boxicon {
    display: none;
}
#ecom_skinwidget_minisearch--CONTENT > div {
    padding: .25em 0;
}
#ecom--minisearch--SUBMIT {
    margin-right: 0;
}

#ecom_skinwidget_minicart {
    margin-bottom: 0;
    margin-top: 10px;
}

#ecom_skinwidget_minicart--CONTENT > div {
    color: #fff;
}
#ecom_skinwidget_minicart > div > div.kwidget_boxicon > a {
    background-image: url(/K9/media/skins/images/icon-sprite-invert.png);
}

.kcatlistitemimage img {
    width: auto;
    height: 100px;
    max-width: 100%;
}

#kskin_nav {
    background-color: #FF8700;
}

#kskin_foot {
    background-color: #069;
}
.kprodlistitemimage img {width: 70% !important; margin: 0 auto 0 auto !important;}

.kicon_icon-freeshipping {background-position: 0 0; background-image: url('../media/freeshipping.png');width: 5.5em;height: 5.5em;}

.kicon_icon-freeshipping {background-position: 0 0; background-image: url('../media/freeshipping.png');}

.prodshowoffericonwrap .kicon_icon-freeshipping {width: 7em; height: 7em;}


@media screen and (max-width: 768px) {

    .kprodlistitemimage img {
        width:200px!important;
    }
   
    .kcatshow img {
        width:200px!important;
    }
   
    #kskin_headhome {
        margin-bottom:32px!important;
    }

}

#kskin_nav strong, #kskin_nav bold  {
    font-weight:normal!important;
    font-size:15px!important;

}


#kskin_nav b {
    font-weight:normal!important;
}


#kskin_nav strong a {
    padding:.41em!important;
}


.kwidget_boxcontent li:hover ul {
    display: block;
}

#ecom_skinwidget_categories--CONTENT ul > li:hover > ul {
    display:block!important;
    background-color:#e3e3e3!important;
    width:300px!important;
    padding:10px 20px!important;
    margin-top:-20px!important;
    border-radius:5px!important;
    position:absolute!important;
    left:250px!important;
}

#ecom_skinwidget_categories--CONTENT ul > li:hover > ul > li > ul {
    display:none!important;
}

#ecom_skinwidget_categories--CONTENT ul > li:hover > ul li:hover ul {
    display:block!important;
    background-color:#d5d5d5!important;
}



@media screen and (max-width: 959px) {

#ecom_skinwidget_categories--CONTENT ul > li:hover > ul {
    display:block!important;
    background-color:#e3e3e3!important;
    width:300px!important;
    padding:10px 20px!important;
    margin-top:0px!important;
    border-radius:none!important;
    position:relative!important;
    left:0px!important;
}


#ecom_skinwidget_categories--CONTENT ul > li:hover > ul li:hover ul {
    display:block!important;
    position:relative!important;
    width:100%!important;
    left:0px!important;
}


}


#kskin_col2 .kwidget_boxcontent li a {
    color:#696969!important;
    line-height:1.3;
}

.kwidget_iconexpanded .kwidget_boxcontent > ul {font-size: .85em;}

.kwidget_iconexpanded .kwidget_boxcontent > ul li {
    padding:5px 0px 5px 0px;
}


#kwidgetgroup_SIDEBAR1  .kwidget_boxtext {
    background-color:#d9d9da;
    overflow:visible;
    color:#656565;
    font-weight:normal;
    border-radius:5px;
}

#kwidgetgroup_SIDEBAR1  .kwidget_iconexpanded .kwidget_boxtext {
    display:block!important;
    width:188px;
}

#kskin_head a {
    color:#fff;
}

Offline

 

#10 11-08-2017 08:08:28

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19798
Website

Re: kaddtocart css

You would have to add it.  Look at post #3 in this thread for an example of how to add a CSS node.  Adjust as needed with your desired class name.


Nick Hendler

Offline

 

Board footer