Problem with module styles not working...

I am having a problem with my module style are not working properly when I create new modules. All is fine with the default (no module suffix), but any suffix that I add, it just strips out all the styling and does not give me the correct styling that it should. Weird part is that the styling for existing modules is still ok.

Anyone have any suggestions on how this can happen?

http://thebeacon.net/beta

Can you give more information so we can check please.

1. Module suffix you have entered in module setting that worked for you.
2. Your custom module suffix you have entered in module settings.
3. Your custom css code for above custom suffix.
4. Module and module position you have tried to apply above custom css for.

I'm not trying to create a new module suffix. The default ones don't seem to work with new modules, but they work with existing modules.

Existing module suffix "color" works in "right_top" module position with existing module.
When I try to create a new module in the same position with the same suffix, it just strips out the styling.

See an example here in the right column: http://thebeacon.net/beta/

When you are entering module suffix please add an extra empty space in front of suffix.

Example:spacesuffix " dark" or " color" without quotes.

That worked! That was easy. Thank you!

I can't seem to use the standard module styles with the template with a module that has a menu in it. Is there any way I can use the different modules styles with a menu module?

You have to combine css codes and create a new suffix.

Example creating a _darkmenu suffix. Which has dark module header & background and white K2 menu.
Use _darkmenu in Module Manager, look for K2 Tools module type and enter our suffix then goto any K2 page and you will see categories on the right of an article.

This is just a basic example. If you want to convert menu colors and text colors you will also need to add extra codes for K2 classes used in Menu...

Find File: templatesgk_twn2csstemplate.css
Find Line: 200 which is below

Code: Select all

/* - _menu */

#gkPage .box_menu {  }
#gkPage .box_menu > div { margin: 0; }
#gkPage .box_menu div.content { margin: 12px; }
#gkPage .box_menu > div > h3.header { background: #fff; border-bottom: 1px solid #e3e3e3; margin: 0; width: 100%; float: none; border-top: none; height: auto; }
#gkPage .box_menu > div > h3.header > span { font-size: 20px; text-transform: uppercase; line-height: 42px; height: 38px; margin: 1px; color: #333; text-indent: 12px; display: block; border-radius: 2px 2px 0 0; -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px 2px 0 0; background: #eee; float: none; text-shadow: 0 1px 0 #fff; }

/* - big */


Add before /* - big */ our custom suffix code which is below.

Code: Select all

/* - _darkmenu */
#gkPage .box_darkmenu { overflow: hidden; margin-top:8px; background: #333; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; }
#gkPage .box_darkmenu > div { margin: 0; }
#gkPage .box_darkmenu div.content { margin: 12px; }
#gkPage .box_darkmenu > div > h3.header { background: #333; border-bottom: 1px solid #3e3e3e; margin: 0; width: 100%; float: none; border-top: none; height: auto; }
#gkPage .box_darkmenu > div > h3.header > span { font-size: 20px; text-transform: uppercase; line-height: 42px; height: 38px; margin: 1px; color: #fff; text-indent: 12px; display: block; border-radius: 2px 2px 0 0; -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px 2px 0 0; background: #444; float: none; text-shadow: 0 1px 0 #bd2309; }


So they all look like below

Code: Select all

/* - _menu */
#gkPage .box_menu {  }
#gkPage .box_menu > div { margin: 0; }
#gkPage .box_menu div.content { margin: 12px; }
#gkPage .box_menu > div > h3.header { background: #fff; border-bottom: 1px solid #e3e3e3; margin: 0; width: 100%; float: none; border-top: none; height: auto; }
#gkPage .box_menu > div > h3.header > span { font-size: 20px; text-transform: uppercase; line-height: 42px; height: 38px; margin: 1px; color: #333; text-indent: 12px; display: block; border-radius: 2px 2px 0 0; -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px 2px 0 0; background: #eee; float: none; text-shadow: 0 1px 0 #fff; }

/* - _darkmenu */
#gkPage .box_darkmenu { overflow: hidden; margin-top:8px; background: #333; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; }
#gkPage .box_darkmenu > div { margin: 0; }
#gkPage .box_darkmenu div.content { margin: 12px; }
#gkPage .box_darkmenu > div > h3.header { background: #333; border-bottom: 1px solid #3e3e3e; margin: 0; width: 100%; float: none; border-top: none; height: auto; }
#gkPage .box_darkmenu > div > h3.header > span { font-size: 20px; text-transform: uppercase; line-height: 42px; height: 38px; margin: 1px; color: #fff; text-indent: 12px; display: block; border-radius: 2px 2px 0 0; -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px 2px 0 0; background: #444; float: none; text-shadow: 0 1px 0 #bd2309; }

/* - big */