Hook for CMS CSS changes?

Fahlgren Mortine asked on August 31, 2016 14:50

Good morning. Most of the site designs which I've integrated into Kentico have complicated layouts, and very often this causes problems in the CMS. Things like fixed-position elements, negative margins, or cropped overflows can (and often do) render Kentico's inline-editing completely unusable by making form elements appear on top of each other or unable to be focused. With earlier versions of Kentico, I was able to create admin-specific CSS to counter some of these issues simply by looking for an admin-only CSS class somewhere in the site (I believe it was in the body tag) which allowed me to write overrides in the relevant stylesheets. Unless I'm missing something (and I might be), it appears that this no longer works with Kentico 8. I'd rather not have to write code-behind to change layout when simple CSS will do. Am I missing something? Do other folks have as much trouble with the CMS inline-editing as I do, and if so, what are the typical solutions? Thanks!

Kentico 8.2.48 ASPX templates

css design

Recent Answers

Richard Sustek answered on August 31, 2016 15:23 (last edited on December 10, 2019 02:30)

Hi,

One typical solution I usually recommend is to NOT render something which you know can cause issues on the page/design tab. If you need to preview your page you can simply use the preview functionality so you are not loosing this options.

It depends on your particular case, but the way how you can hide certain things is by:

1) Using K# macro to check view mode in web part's visibility condition. E.g:

{% PortalContext.ViewMode == "LiveSite" |(identity)GlobalAdministrator%}

will render web part only on live site.

2) Using API to do the same thing as the macro (its again PortalContext.ViewMode property). This can be used anywhere you like.

If you want to create some "hooks" then I would recommend to check Kentico's global events which are here just for the purpose of extending base functionality.

For example this event will be bound to updating your CSS in UI:

CssStylesheetInfo.TYPEINFO.Events.Update.Before += Update_Before;

You can similarly use the global event to any other object type inside Kentico.

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on August 31, 2016 18:29

In v8 you can use the css class CMSDeskContent to access or update your current styles. If you're in Design mode you can use the css class DesignMode to access or update your styles.

0 votesVote for this answer Mark as a Correct answer

Fahlgren Mortine answered on September 9, 2016 21:56

Brenden, this is the type of answer I was looking for, but unfortunately, this doesn't work. The class you speak of is outside of the iframe that contains the page contents, so it doesn't cascade to the elements that I need to manipulate. At present, I'm using the Kentico CMS-specific "#CMSFooterDiv" ID within my selector to target what I need to, but this feels less than ideal, and it's entirely likely to change at some point as well.

0 votesVote for this answer Mark as a Correct answer