Kryptronic Software Support Forum

tmfrs · 06-30-2018 16:36:22

Hello,

I have more product categories than the horizontal categories menu bar on the splash page can fit in one row. How can I make the menu bar to expand into the second row below to fit the other categories?

Thank you

webmaster · 07-01-2018 08:51:06

Use CSS in your skin's CSS file to push elements to a new line. For example, if the fifth menu item needed to be pushed to a new line, and it was in a div with the id menu:

#menu > ul > li:nth-child(5) {clear: both;}

Something like that should do it.

tmfrs · 07-03-2018 17:22:49

Thank you. Sorry, I'm not that advanced. Are you talking about editing the all.css file? If yes, where do I insert the code?

webmaster · 07-04-2018 13:46:15

Yes. Typically at the bottom. If you post back a link, we can help further. The code I gave you was pretty generic.

tmfrs · 07-04-2018 15:08:19

Here is the entire all.css file. It should be the original file without any changes.

Code:

/* +------------------------------------------------------------+ */
/* | General XHTML Elements                                     | */
/* +------------------------------------------------------------+ */

body {
     color: #555555;
     background-color: #F2F2F2;
     font-family: Verdana, Tahoma, Arial, sans-serif;
     font-size: 11px;
     font-weight: normal;
     text-align: left;
     margin: 10px auto 10px auto;
     }

a {
     color: #3872B2;
     font-weight: normal;
     text-decoration: underline;
     cursor: pointer;
     }

p {
     margin: 5px 0px 7px 0px;
     }

sup {
     display: inline;
     padding: 0px;
     vertical-align: super;
     font-size: 8px;
     }

a:hover {
     color: #555555;
     }

fieldset {
     border: none;
     padding: 4px 0px 4px 5px;
    }

fieldset p {
     display: block;
     font-size: 11px;
     margin: 5px 5px 5px 2px;
     }

form {
     margin: 0px 0px 5px 0px;
     }

img {
     border: none;
     }

li {
     padding-bottom: 5px;
     }

/* +------------------------------------------------------------+ */
/* | General XHTML Classes                                      | */
/* +------------------------------------------------------------+ */

.center {
     text-align: center;
     }

.inlinecenter {
     text-align: center;
     }

p.inline {
     display: inline;
     padding: 0px;
     }

.strong {
     font-weight: bold;
     }

.big {
     font-weight: bold;
     font-size: 14px;
     }

.hidden {
     display: none;
     }

a.unfancy {
     color: #3872B2;
     font-weight: normal;
     text-decoration: underline;
     cursor: pointer;
     }

a.unfancy:hover {
     color: #555555;
     }

/* +------------------------------------------------------------+ */
/* | Skin Specific Divs                                         | */
/* +------------------------------------------------------------+ */

#skin_wrapper {
     width: 900px;
     padding: 0px;
     margin: auto;
     }

#skin_ct {
     width: 100%;
     padding: 0px;
     border-spacing: 0px;
     border-collapse: collapse;
     border: 1px solid #999999;
     }
      
.skin_ct_col_head {
     background-color: #FFFFFF;
     padding: 7px 7px 3px 7px;
     margin: 0px;
     vertical-align: center;
     width: 160px;
     }

#skin_ct_lcol {
     background-color: #FFFFFF;
     padding: 3px 17px 7px 7px;
     margin: 0px;
     vertical-align: top;
     width: 160px;
     text-align: left;
     }

#skin_ct_mcol {
     background-color: #FFFFFF;
     padding: 7px;
     margin: 0px;
     vertical-align: top;
     }

#skin_ct_rcol {
     background-color: #FFFFFF;
     padding: 3px 7px 7px 17px;
     margin: 0px;
     vertical-align: top;
     width: 160px;
     }

#skin_footer {
     padding: 0px;
     margin-top: 10px;
     text-align: center;
     }

#skin_pgtitle {
     color: #30569D;
     padding: 0px 0px 2px 0px;
     margin: 0px 0px 10px 0px;
     font-weight: bold;
     border-bottom: 1px solid #999999;
     }

#skin_content {
     margin: auto;
     }

/* +------------------------------------------------------------+ */
/* | Skin Specific Classes                                      | */
/* +------------------------------------------------------------+ */

.skin_fenavh {
     color: #30569D;
     padding: 3px 0px 3px 0px;
     margin: 0px;
     border-bottom: 1px solid #999999;
     font-weight: bold;
     }

.skin_fenav ul {
     padding: 0px;
     margin: 8px 0px 10px 0px;
     list-style: none;
     }

.skin_fenav ul li {
     margin: 0px;
     list-style: none;
     }

.skin_fenav ul li a {
     color: #3872B2;
     font-weight: normal;
     display: block;
     text-decoration: none;
     padding: 3px 5px 3px 10px;
     background-image: url('../media/menu_arrow.png');
     background-repeat: no-repeat;
     background-position:  center left;
     }

.skin_fenav ul li a:hover {
     color: #555555;
     background-color: #C2DFFF;
     text-decoration: none;
     }

.skin_headacct {
     width: 100%;
     text-align: right;
     clear: both;
     }

.skin_fenavmini {
     background-color: #F2F2F2;
     padding: 5px;
     margin: 0px 0px 10px 0px;
     border-left: 1px solid #999999;
     border-right: 1px solid #999999;
     border-bottom: 1px solid #999999;
     }

#skin_menu_head {
     background-color: white
     }      
      
#skin_menu_head ul {
     padding: 0px 0px 4px 0px;
     margin: 0px 0px 4px 0px;
     list-style: none;
     border-bottom: 1px solid #999999;
     }

#skin_menu_head li {
     padding: 0px;
     margin: 0px;
     list-style: none;
     display: inline;
     }

#skin_menu_head ul li a {
     color: #3872B2;
     font-weight: normal;
     text-decoration: none;
     margin: 0px 30px 0px 0px;
     padding: 0px 0px 0px 10px;
     background-image: url('../media/menu_arrow.png');
     background-repeat: no-repeat;
     background-position: center left;
     }

#skin_menu_head ul li a:hover {
     text-decoration: underline;
     }

#skin_headacct {
     padding: 0px 0px 0px 10px;
     background-image: url('../media/menu_arrow.png');
     background-repeat: no-repeat;
     background-position: center left;
}

/* +------------------------------------------------------------+ */
/* | CORE Required Divs                                         | */
/* +------------------------------------------------------------+ */

#debug {
     color: #555555;
     background-color: #FFFFFF;
     border-top: 1px solid #999999;
     overflow: hidden;
     padding: 10px;
     margin: 10px auto 10px auto;
     }

#printable {
     background-color: #FFFFFF;
     border: 1px solid #999999;
     padding: 10px;
     margin: auto;
     }

/* +------------------------------------------------------------+ */
/* | CORE Required Classes: Messages                            | */
/* +------------------------------------------------------------+ */

.error {
     color: #FF0000;
     font-weight: bold;
     }

.confirm {
     color: #339933;
     font-weight: bold;
     }

.imgfloatrt {
     float: right;
     margin-bottom: 10px;
     margin-left: 10px;
     display: inline;
     }

.inline {
     display: inline;
     }

/* +------------------------------------------------------------+ */
/* | CORE Required Classes: Boxed Monospace Code                | */
/* +------------------------------------------------------------+ */

.preboxed {
     margin: 5px 0px 0px 0px;
     padding: 5px;
     border: 1px solid #999999;
     font-family: Fixed, monospace;
     overflow: hidden;
     }

/* +------------------------------------------------------------+ */
/* | CORE Required Classes: Form Fields                         | */
/* +------------------------------------------------------------+ */

.formfieldradcb {
     color: inherit;
     background-color: inherit;
     }

.formfield {
     background-color: #FFFFFF;
     border: 1px solid #555555;
     margin: 5px 5px 0px 2px;
     font-size: 11px;
     }

.formfield:hover {
     background-color: #F5F5F5;
     }

.formfieldp {
     display: block;
     padding: 0px;
     margin: 0px 0px 2px 2px;
     }

.formfieldpnfs {
     display: block;
     padding: 0px 5px 0px 5px;
     margin: 0px 0px 5px 0px;
     }

.formfielda {
     display: block;
     padding: 0px 5px 0px 5px;
     margin: 0px 0px 2px 0px;
     }

.formbutton {
     color: #555555;
     background-color: #DEDEDE;
     padding: 1px;
     margin: 0px 0px 5px 0px;
     font-size: 11px;
     width: 130px;
     border: 1px solid #555555;
     }

.formbutton:hover {
     color: #555555;
     background-color: #EBF1FF;
     }

.quickbutton {
     color: #555555;
     background-color: #DEDEDE;
     padding: 1px;
     margin: 0px;
     font-size: 11px;
     width: 130px;
     border: 1px solid #555555;
     }

.quickbutton:hover {
     color: #555555;
     background-color: #EBF1FF;
     }

.quickform {
     margin: 5px 0px 0px 0px;
     }

.quickfield {
     background-color: #FFFFFF;
     border: 1px solid #555555;
     font-size: 11px;
     margin: 1px 0px 0px 0px;
     }

.quickfield:hover {
     background-color: #EFEFEF;
     }

.formfieldradcb_rnc {
     background-color: #FFA4A4;
     }

.formfield_rnc {
     background-color: #FFA4A4;
     border: 1px solid #555555;
     font-size: 11px;
     margin: 5px 5px 0px 2px;
     }

.formfield_rnc:hover {
     background-color: #EFEFEF;
     }

/* +------------------------------------------------------------+ */
/* | CORE Required Classes: Form Table Displays                 | */
/* +------------------------------------------------------------+ */

.formsecthead {
     color: #FF6600;
     margin: 5px 0px 10px 0px;
     padding: 4px 5px 4px 0px;
     border-bottom: 1px solid #999999;
     font-weight: bold;
     }

table.formtblone {
     margin: 0px 0px 10px 0px;
     border-spacing: 0px;
     border-collapse: collapse;
     width: 100%;
     }

table.formtbltwo {
     margin: 0px 0px 10px 0px;
     border-spacing: 0px;
     border-collapse: collapse;
     width: 100%;
     }

td.formtbltwo {
     padding: 4px 2px 4px 2px;
     width: 50%;
     vertical-align: top;
     border-bottom: 1px solid #DEDEDE;
     }

td.formtbltwospan {
     padding: 4px 2px 4px 2px;
     width: 100%;
     vertical-align: top;
     border-bottom: 1px solid #DEDEDE;
     }

td.formtblone {
     padding: 4px 2px 4px 2px;
     width: 100%;
     vertical-align: top;
     border-bottom: 1px solid #DEDEDE;
     }

/* +------------------------------------------------------------+ */
/* | CORE Required Classes: Sort Table Displays                 | */
/* +------------------------------------------------------------+ */

table.sorttable {
     margin: 0px;
     border-spacing: 0px;
     border-collapse: collapse;
     width: 100%;
     }

th.sorttable {
     padding: 4px 5px 4px 5px;
     border-bottom: 1px solid #DEDEDE;
     vertical-align: top;
     font-weight: bold;
     }

td.sorttable {
     padding: 4px 5px 4px 5px;
     border-bottom: 1px solid #DEDEDE;
     vertical-align: top;
     }

/* +------------------------------------------------------------+ */
/* | CORE Required Classes: Regular Table Displays              | */
/* +------------------------------------------------------------+ */

.regtablehead {
     color: #FF6600;
     margin: 5px 0px 10px 0px;
     padding: 4px 5px 4px 0px;
     border-bottom: 1px solid #999999;
     font-weight: bold;
     clear: both;
     }

table.regtable {
     margin: 0px 0px 10px 0px;
     border-spacing: 0px;
     border-collapse: collapse;
     width: 100%;
     }

td.regtable {
     padding: 4px 2px 4px 2px;
     vertical-align: top;
     border-bottom: 1px solid #DEDEDE;
     }

.regtable p {
     padding: 0px;
     margin: 0px 0px 5px 0px;
     }

/* +------------------------------------------------------------+ */
/* | CORE Required Classes: Ghost Table Displays                | */
/* +------------------------------------------------------------+ */

table.ghost {
     margin: 0px;
     padding: 0px;
     border-spacing: 3px;
     border-collapse: collapse;
     width: 100%;
     }

td.ghost {
     padding: 0px;
     margin: 0px;
     vertical-align: top;
     }

.ghost form {
     display: inline;
}

td.ghost img {
     margin-right: 10px;
     margin-bottom: 10px;
     }

td.ghost p {
     margin: 0px 0px 6px 0px;
}

/* +------------------------------------------------------------+ */
/* | CORE Required Classes: Boxed Paragraphs                    | */
/* +------------------------------------------------------------+ */

p.ultablesp {
     margin: 0px;
     font-size: 1px;
     }

/* +------------------------------------------------------------+ */
/* | CORE Required Classes: Online Store Displays               | */
/* +------------------------------------------------------------+ */

.storehead {
     color: #FF6600;
     margin: 5px 0px 10px 0px;
     padding: 4px 5px 4px 0px;
     border-bottom: 1px solid #999999;
     font-weight: bold;
     clear: both;
     }

.storelink {
     color: #666666;
     background-color: #F2F2F2;
     margin: 5px 0px 10px 0px;
     padding: 4px 5px 4px 5px;
     border: 1px solid #999999;
     }

.storelink p {
     color: #666666;
     margin: 0px;
     }

/* +------------------------------------------------------------+ */
/* | CORE Required Classes: Category List Display Tables        | */
/* +------------------------------------------------------------+ */

table.cptbl_cat {
     margin: 0px 0px 10px 0px;
     border-spacing: 0px;
     border-collapse: collapse;
     width: 100%;
     }

td.cptbl_cat {
     padding: 5px 0px 0px 0px;
     vertical-align: top;
     border-bottom: 1px solid #DEDEDE;
     }

td.cptbl_cat a {
     font-weight: bold;
     }

td.cptbl_cat_blank {
     display: none;
     }

/* +------------------------------------------------------------+ */
/* | CORE Required Classes: Product List Display Tables         | */
/* +------------------------------------------------------------+ */

table.cptbl_prod {
     margin: 0px 0px 10px 0px;
     border-spacing: 0px;
     border-collapse: collapse;
     width: 100%;
     }

td.cptbl_prod {
     padding: 5px 0px 0px 0px;
     vertical-align: top;
     border-bottom: 1px solid #DEDEDE;
     }

td.cptbl_prod a {
     font-weight: bold;
     }

td.cptbl_prod_blank {
     display: none;
     }

/* +------------------------------------------------------------+ */
/* | CORE Required Classes: Product Detail Display Tables       | */
/* +------------------------------------------------------------+ */

table.cptbl_det {
     margin: 0px 0px 10px 0px;
     border-spacing: 0px;
     border-collapse: collapse;
     width: 100%;
     }

td.cptbl_det {
     padding: 5px 0px 0px 0px;
     vertical-align: top;
     }

td.cptbl_det_blank {
     display: none;
     }

/* +------------------------------------------------------------+ */
/* | CORE Required Classes: Price Displays                      | */
/* +------------------------------------------------------------+ */

.pricediv {
     margin: 5px 0px 7px 0px;
     }

.price {
     color: #FF6600;
     font-weight: bold;
     display: inline;
     }

.pricex {
     color: #FF0000;
     font-weight: bold;
     display: inline;
     text-decoration: line-through;
     }

/* +------------------------------------------------------------+ */
/* | CORE Required Classes: Shopping Cart Displays              | */
/* +------------------------------------------------------------+ */

.cartbutton {
     color: #555555;
     background-color: #DEDEDE;
     padding: 1px;
     font-size: 11px;
     font-weight: normal;
     text-align: center;
     display: block;
     margin: 0px 0px 5px 0px;
     width: 125px;
     border: 1px solid #555555;
     text-decoration: none;
     }

.cartbutton:hover {
     color: #555555;
     background-color: #EBF1FF;
     text-decoration: none;
     cursor: default;
     }

/* +------------------------------------------------------------+ */
/* | CORE Required Classes: Misc                                | */
/* +------------------------------------------------------------+ */

.clearboth {
     clear: both;
     }

.outstock {
     color: #FF0000;
     }

a.hrefbutton {
     color: #555555;
     background-color: #DEDEDE;
     padding: 2px 5px 2px 5px;
     font-size: 11px;
     font-weight: normal;
     text-align: center;
     display: block;
     border: 1px solid #555555;
     text-decoration: none;
     }

a.hrefbutton:hover {
     color: #555555;
     background-color: #EBF1FF;
     text-decoration: none;
     cursor: default;
     }

.outline {
     border: 1px solid #999999;
     padding: 5px;
     margin-top: 5px;
     }

.outline p {
     margin: 0px 0px 3px 0px;
}

/* +------------------------------------------------------------+ */
/* | End                                                        | */
/* +------------------------------------------------------------+ */

legend {
     display: none;
}

label {
     display: none;
}

.formfieldrelwrap {
     overflow: auto;
     width: 550px;
     height: 90px;
     border: 1px solid #555555;
     padding: 5px;
     margin: 10px 0px 10px 0px;
     }

.formfieldwysiwyg {
     background-color: #FFFFFF;
     border: 1px solid #555555;
     margin: 5px 5px 0px 2px;
     font-size: 11px;
     }

.formfieldwysiwyg:hover {
     background-color: #F5F5F5;
     }

.formfieldleg {
     font-weight: bold;
     }

.formfieldleg_rnc {
     font-weight: bold;
     color: #FF0000;
     }

webmaster · 07-05-2018 08:54:51

Can you provide a link? Or at least a snippet from your skin of the area where your menu is generated? Thanks.

tmfrs · 07-05-2018 17:17:55

Here is the link to our store: https://www.stanthonysmonastery.org/ccp7/index.php?

webmaster · 07-06-2018 07:03:58

Code:

#skin_navmenu .skin_widgetmenu {height: auto !important;}
#skin_navmenu .skin_widgetmenu > ul > li:nth-child(5) {clear: both;}

That's an old install you've got there. Hop into our K9 forum and check out what's going on over there!

tmfrs · 07-27-2018 13:13:43

Thank you for your help. In which skin file and where exactly do I insert those two lines?

webmaster · 07-30-2018 07:25:33

Add to the bottom of this file:

{public}/skins/Desktop/css/all.css

tmfrs · 08-06-2018 18:15:23

Thank you very much! It worked.

Gboyega · 10-02-2018 05:19:32

webmaster wrote:
Code:
#skin_navmenu .skin_widgetmenu {height: auto !important;}
#skin_navmenu .skin_widgetmenu > ul > li:nth-child(5) {clear: both;}
That's an old install you've got there. Hop into our K9 forum and check out what's going on over there!

Hi,
I used this on my own website but the code is not working properly with Google Chrome Version 69.0.3497.100 (Official Build) (64-bit) on Windows 10. Also not working on Chrome IOS .

What do we do?

webmaster · 10-02-2018 07:14:18

That's pretty standard CSS. I checked in Chrome on Windows and it worked fine, and should work on Chrome on all operating systems, as it's a very standards compliant browser. Maybe you didn't reload on those other devices to see your change.

Kryptronic Software Support Forum

#1 06-30-2018 16:36:22

Two rows in the categories menu bar on spash page?

#2 07-01-2018 08:51:06

Re: Two rows in the categories menu bar on spash page?

#3 07-03-2018 17:22:49

Re: Two rows in the categories menu bar on spash page?

#4 07-04-2018 13:46:15

Re: Two rows in the categories menu bar on spash page?

#5 07-04-2018 15:08:19

Re: Two rows in the categories menu bar on spash page?

Code:

#6 07-05-2018 08:54:51

Re: Two rows in the categories menu bar on spash page?

#7 07-05-2018 17:17:55

Re: Two rows in the categories menu bar on spash page?

#8 07-06-2018 07:03:58

Re: Two rows in the categories menu bar on spash page?

Code:

#9 07-27-2018 13:13:43

Re: Two rows in the categories menu bar on spash page?

#10 07-30-2018 07:25:33

Re: Two rows in the categories menu bar on spash page?

#11 08-06-2018 18:15:23

Re: Two rows in the categories menu bar on spash page?

#12 10-02-2018 05:19:32

Re: Two rows in the categories menu bar on spash page?

webmaster wrote:

Code:

#13 10-02-2018 07:14:18

Re: Two rows in the categories menu bar on spash page?

Board footer