Forums (Obsolete)

Member

adrian - 2/8/2010 6:35:18 PM

Apply stylesheet to site without affecting editor

I'm trying to use blueprint stylesheets with the basic ecommerce site.

However, blueprints stylesheets, affect the editor in design view so much as to make it unusable. The zone bars overlap each other so that they are unreadable.

Is there a way to apply stylesheet to the site without affecting the editor?

Thanks,
Adrian

Kentico Developer

kentico_martind - 2/13/2010 2:14:56 PM

RE:Apply stylesheet to site without affecting editor

Hi Adrian,

There is 'EditMode' css class generated into body tag in edit mode ('DesignMode' in design mode). You can optionally specify special styles within context of this class to be applied only in edit mode (design mode), e.g.:

.EditMode .myCssClass
{
//put styles for myCssClass that should be used in edit mode here, you can e.g. specify different positioning for your elements in edit mode
}

Best Regards,

Martin Dobsicek

Member

simon.budd-tellonline - 9/8/2011 4:37:59 AM

RE:Apply stylesheet to site without affecting editor

Hi there

I have the same issue and have already tried to target an overriding style definition to deepen the hidden field.

I've tried: (myCssClass = .two)

.EditMode .two
{
height: auto;
}

and

.EditMode .two
{
height:100px; /* large height value just to test */
}

Setting the height to 100px was closest to looking like working but this is what I get:
http://tinyurl.com/3lbwdo3

Do you have any advise?

Thanks a lot


Member	kentico_michal - 9/16/2011 2:52:10 AM RE:Apply stylesheet to site without affecting editor Hello, Just a short update for other customers that this issue was resolved via email. It was a CSS styles based issue which was fixed by changing some CSS styles. Best regards, Michal Legen


Member	Snarrak - 12/19/2011 4:18:18 AM RE:Apply stylesheet to site without affecting editor I can't get it working.. For example I tried: .myDiv { background-color:yellow; } .EditMode .myDiv { background-color:red; } also: #myDiv { background-color:yellow; } .EditMode #myDiv { background-color:red; } But this doesn't work, any idea?

Kentico Consulting

kentico_borisp - 12/20/2011 2:10:20 AM

RE:Apply stylesheet to site without affecting editor

Hello,

You can apply an clearing class on the design mode. For example:

* {
margin: 0;
padding: 0;
border: 0;
font-family: sans-serif;
font-size: 1em;
font-weight: normal;
font-style: normal;
text-decoration: none;
background-color: white;
}

The stylesheet of the design mode can be found in App_Themes\Default\DesignMode.css.

Best regards,
Boris Pocatko

Member

Snarrak - 12/21/2011 5:31:41 AM

RE:Apply stylesheet to site without affecting editor

I found the DesignMode.css and if I change something (like test background-color:red on the body), than in the CMSDesk the body turns red.

But I want to change some css of my own template (ASPX). So I need to style some custom controls.
Maybe I'll need a whole new CSS file for the design mode, is this possible?

Regards,
Jorik


Kentico Support	kentico_jurajo - 12/24/2011 5:54:45 AM RE:Apply stylesheet to site without affecting editor Hi, That file is a system file and used for the user interface. If you want to change your site's styles, please refer to the CSS stylesheets documentation to see how to change the look. Best regards, Juraj Ondrus