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.
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?
Offline
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
Offline
@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 {}
Offline
Thank you both!
BTW - I LOVE the way this software lets you move everything around on the skin. Excellent tool!
Offline
I am trying to change the color of the checkout button can you tell me where I can find it?
Offline
Can you tell me the file name where I can change it?
Offline
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