Kryptronic Software Support Forum

webmaster · 07-02-2014 10:22:29

What class are you using for the 'product menu' in desktop mode?

mdowning · 08-12-2014 12:08:13

Did you see this screenshot Nick?

webmaster wrote:
Not sure I understand. Can you post a screenshot?

webmaster · 08-13-2014 10:21:33

What class are you using for the 'product menu' in desktop mode?

mdowning · 08-13-2014 10:43:19

skin_widgetclass_SIDEMENU

webmaster wrote:
What class are you using for the 'product menu' in desktop mode?

webmaster · 08-14-2014 10:03:09

Somewhere in your CSS either the left margin for the skin_widgetclass_SIDEMENU ul li ul is missing or set to zero. Fix your CSS and you'll be good to go.

mdowning · 08-14-2014 11:11:57

Let me see if I can locate that line of code. I take it you mean the all.css file. Say nick, is it possible to create a drop down menu in the top menu area? What would that code look like?

webmaster wrote:
Somewhere in your CSS either the left margin for the skin_widgetclass_SIDEMENU ul li ul is missing or set to zero. Fix your CSS and you'll be good to go.

webmaster · 08-15-2014 08:37:57

Change the group of the widget you want at the top to 'NAVMENU' and it's class to 'skin_widgetclass_NAVMENU'. Your CSS for the SIDEMENU was probably updated/changed in overrides.css, but could be in all.css.

mdowning · 08-15-2014 08:51:53

Nick, when I say the top I mean the very top menu location above the header graphic, not the navmenu location. I tried that with the products group (old category menu) and it does make the related categories work, but does nothing to correct the related pages issue that is also affected. I'll have to try and check for this instance at issue in the overrides ccc file. When I tried to cxheck ther and in the all.cc yesterday I could not locate the item of which you spoke.

webmaster wrote:
Change the group of the widget you want at the top to 'NAVMENU' and it's class to 'skin_widgetclass_NAVMENU'. Your CSS for the SIDEMENU was probably updated/changed in overrides.css, but could be in all.css.

Here is the overrided.css code that should address this

Code:

/* +------------------------------------------------------------+ */
/* | Required Classes: Skin Widget - SIDEMENU | */
/* +------------------------------------------------------------+ */

.skin_widgetclass_SIDEMENU .skin_widgettitle {
     color: #000000;
     font-weight: bold;
     font-size: 12px;
     padding: 4px 6px 4px 6px;
     margin: 0px 0px 6px 0px;
     border: 1px solid #DEDEDE;
     background-color: #EFEFEF;
     -moz-border-radius: 6px 6px 6px 6px;
     -webkit-border-radius: 6px 6px 6px 6px;
     border-radius: 6px 6px 6px 6px;
     }

.skin_widgetclass_SIDEMENU .skin_widgetcontent {
     margin: 0px 0px 20px 0px;
     padding: 6px 6px 6px 6px;
     border: 1px solid #DEDEDE;
     -moz-border-radius: 6px 6px 6px 6px;
     -webkit-border-radius: 6px 6px 6px 6px;
     border-radius: 6px 6px 6px 6px;
     background-image: url('../media/gradientup.png');
     background-position: bottom left;
     background-repeat: repeat-x;
     }

.skin_widgetclass_SIDEMENU .skin_widgetmenu ul {
     -moz-border-radius: 6px 6px 6px 6px;
     -webkit-border-radius: 6px 6px 6px 6px;
     border-radius: 6px 6px 6px 6px;
     }

.skin_widgetclass_SIDEMENU .skin_widgetmenu li a {
     color: #333333;
     font-weight: bold;
     display: block;
     text-decoration: none;
     padding: 6px 6px 6px 16px;
     background-image: url('../media/fenav.png');
     background-repeat: no-repeat;
     background-position:  6px 8px;
     }

.skin_widgetclass_SIDEMENU .skin_widgetmenu li a:hover {
     color: #000000;
     text-decoration: none;
     }

.skin_widgetclass_SIDEMENU .skin_widgetmenu li ul {
     width: 195px;
     margin: -26px 0px 0px 180px;
     -moz-box-shadow: 2px 2px 2px #555555;
     -webkit-box-shadow: 2px 2px 2px #555555;
     box-shadow: 2px 2px 2px #555555;
     }

.skin_widgetclass_SIDEMENU .skin_widgetmenu li ul li {
     width: 195px;
     }

.skin_widgetclass_SIDEMENU .skin_widgetmenu li:first-child a {
     border-top-left-radius: 6px;
     -moz-border-radius-topleft: 6px;
     -webkit-border-top-left-radius: 6px;     
     border-top-right-radius: 6px;
     -moz-border-radius-topright: 6px;
     -webkit-border-top-right-radius: 6px;
     }

.skin_widgetclass_SIDEMENU .skin_widgetmenu li:last-child a {
     border-bottom-left-radius: 6px;
     -moz-border-radius-bottomleft: 6px;
     -webkit-border-bottom-left-radius: 6px;     
     border-bottom-right-radius: 6px;
     -moz-border-radius-bottomright: 6px;
     -webkit-border-bottom-right-radius: 6px;
     }

Last edited by mdowning (08-15-2014 09:17:18)

webmaster · 08-15-2014 09:39:38

This is the line governing the margin:

margin: -26px 0px 0px 180px;

For the menu styling, it's easiest to copy the HTML and CSS for a working menu, then duplicate/change class names, etc. in the CSS and HTML until you get your desired result. You really need to understand HTML and CSS to get a custom CSS dropdown menu working, even with the CCP examples as a starting point.

mdowning · 08-15-2014 09:51:17

Ok, let me tinker with this setting in the over rides.css file. that seems to be the place that may be causing this issue to stand out. I am thinking that margin needs to be set like the rest of that class.

webmaster wrote:
This is the line governing the margin:

margin: -26px 0px 0px 180px;

For the menu styling, it's easiest to copy the HTML and CSS for a working menu, then duplicate/change class names, etc. in the CSS and HTML until you get your desired result. You really need to understand HTML and CSS to get a custom CSS dropdown menu working, even with the CCP examples as a starting point.

mdowning · 08-15-2014 10:13:58

Nick, I'm not having any luck here. What do you charge to fix this one little nuisance issue?

webmaster · 08-18-2014 08:48:39

We've got a ticket in and quoted on this now...

geneva66 · 03-01-2016 12:43:46

Clickcartpro v8
Hi,
Currently I have 50 Categories under the 'shop by brand' menu on the frontpage under the main category so when they display they display in one long narrow box which means a lot of scrolling down.
I would like to change the display of these categories so that when I click on the main category the 50 subcategories are displayed in a wider table i.e in rows.
Would appreciate any assistance with this.
Many Thanks

Last edited by geneva66 (03-02-2016 06:25:05)

webmaster · 03-02-2016 09:34:30

All of the pertinent CSS is referenced in this thread. I would imagine you'll want to expand the width of the ul's and then set the li's to a percentage width and float them.

Kryptronic Software Support Forum

#26 07-02-2014 10:22:29

Re: Alter location of Categories Fly Out on Side Menu

#27 08-12-2014 12:08:13

Re: Alter location of Categories Fly Out on Side Menu

webmaster wrote:

#28 08-13-2014 10:21:33

Re: Alter location of Categories Fly Out on Side Menu

#29 08-13-2014 10:43:19

Re: Alter location of Categories Fly Out on Side Menu

webmaster wrote:

#30 08-14-2014 10:03:09

Re: Alter location of Categories Fly Out on Side Menu

#31 08-14-2014 11:11:57

Re: Alter location of Categories Fly Out on Side Menu

webmaster wrote:

#32 08-15-2014 08:37:57

Re: Alter location of Categories Fly Out on Side Menu

#33 08-15-2014 08:51:53

Re: Alter location of Categories Fly Out on Side Menu

webmaster wrote:

Code:

#34 08-15-2014 09:39:38

Re: Alter location of Categories Fly Out on Side Menu

#35 08-15-2014 09:51:17

Re: Alter location of Categories Fly Out on Side Menu

webmaster wrote:

#36 08-15-2014 10:13:58

Re: Alter location of Categories Fly Out on Side Menu

#37 08-18-2014 08:48:39

Re: Alter location of Categories Fly Out on Side Menu

#38 03-01-2016 12:43:46

Re: Alter location of Categories Fly Out on Side Menu

#39 03-02-2016 09:34:30

Re: Alter location of Categories Fly Out on Side Menu

Board footer