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 03-09-2017 14:58:22
Skin Widget Display Type
I'd like to have my categories displayed in the left column with fly-out subcategories. I'm using the Display Group "SIDEBAR1"
and Display Type "NavBar Header/Menu - Hover Display", which makes the subcategories fly out like I want them to, but the main categories are listed in a clump rather than in a column. How can I accomplish what I'm trying to do?
We distribute high quality steel auto body panels for use in the rust repair industry.
Offline
#2 03-10-2017 11:27:35
Re: Skin Widget Display Type
Does this thread help?
https://forum.kryptronic.com/viewtopic.php?id=33403
Nick Hendler
Offline
#3 03-10-2017 11:44:35
Re: Skin Widget Display Type
I don't think the problem is that anything is wrong. I think everything is working the way it should, but think I need to create a new Display Type which would do exactly what NavBar Header/Menu - Hover Display does currently, but lists the main categories one per row.
I suppose if I narrowed the column it might force them into what would seem like a single column with one category per row, but I think that would only cause it to do sort of a word wrap which would mean that if I had two categories back to back that had short names they could end up on the same row. Can you show me how to create such a Display Type?
Last edited by JayCR48 (03-10-2017 11:45:42)
We distribute high quality steel auto body panels for use in the rust repair industry.
Offline
#4 03-10-2017 13:57:31
- larry
- Member
- Registered: 07-21-2003
- Posts: 437
Re: Skin Widget Display Type
we solved this by changing the width of the sidebar to 15% in our skin. the CSS class is kgridxcol15
there are others in all.min.css to choose from. Just remember to change the other columns so they add up to 100%
might have to play with it a bit depending on the length of your main categories. and it may change over time if you categories change.
But it IS an issue that should be solved with CSS on the category list. We just didn't have time or expertise to do it the right way.
Laurie Stephens
Offline
#5 03-11-2017 11:41:51
Re: Skin Widget Display Type
I changed all.min.css in within the admin area of the software to this:
Code:
/* +------------------------------------------------------------+ */
/* | 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;}
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: 960px) {
.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;}
}
@media all and (min-width: 960px) {
.kthemeinvert .kwidget_fulldrop .kwidget_boxcontent > ul > li:hover > a {background-color: #222222;}
}
@media all and (min-width: 960px) {
.kwidget_fulldrop .kwidget_boxcontent > ul > li:hover {display: block; position: relative;}
.kwidget_fulldrop .kwidget_boxcontent > ul > li:hover > ul {position: absolute; right: 0;}
}
@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 | */
/* +------------------------------------------------------------+ */The result is the first subcategory flies out to the left and the next one flies out to the right, which is actually decent. 
However, I'd like to know how to make the first one fly out to the right as well in case a problem arises with it working the way it does now. Can you tell me how to change this file to make that happen?
We distribute high quality steel auto body panels for use in the rust repair industry.
Offline
#6 03-13-2017 18:16:17
Re: Skin Widget Display Type
Where you have:
.kwidget_fulldrop .kwidget_boxcontent > ul > li:hover > ul {position: absolute; right: 0;}
Change to:
.kwidget_fulldrop .kwidget_boxcontent > ul > li:hover > ul,
.kwidget_fulldrop .kwidget_boxcontent > ul > li:hover > ul > li:hover > ul {position: absolute; right: 0;}
Nick Hendler
Offline
#7 03-14-2017 10:42:23
Re: Skin Widget Display Type
Didn't do quite what I was hoping for. I changed the file to this:
Code:
/* +------------------------------------------------------------+ */
/* | 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;}
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: 960px) {
.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;}
}
@media all and (min-width: 960px) {
.kthemeinvert .kwidget_fulldrop .kwidget_boxcontent > ul > li:hover > a {background-color: #222222;}
}
/////@media all and (min-width: 960px) {
/////.kwidget_fulldrop .kwidget_boxcontent > ul > li:hover {display: block; position: relative;}
/////.kwidget_fulldrop .kwidget_boxcontent > ul > li:hover > ul {position: absolute; right: 0;}
/////}
@media all and (min-width: 960px) {
.kwidget_fulldrop .kwidget_boxcontent > ul > li:hover {display: block; position: relative;}
.kwidget_fulldrop .kwidget_boxcontent > ul > li:hover > ul,
.kwidget_fulldrop .kwidget_boxcontent > ul > li:hover > ul > li:hover > ul {position: absolute; right: 0;}
}
@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 | */
/* +------------------------------------------------------------+ */But it now still causes the main category to displayed correctly, but the first subcategory still flies out to the left and now the second subcategory displays overtop of the first subcategory. Did I make the change correctly?
We distribute high quality steel auto body panels for use in the rust repair industry.
Offline
#8 03-15-2017 07:01:28
Re: Skin Widget Display Type
Yes, that looks right. This is one of those things that you're going to have to fool around with until you get it right. Maybe separate those two pointers and try something different on the second one. Load your site up using web developer tools or FireBug to make/see your changes in realtime until you get what you want.
Nick Hendler
Offline