Problem with layout parallax and backend
Hello, we are applying a layout parallax. The frontend of the website looks good.
In the backend of the website, in edit mode, the graphics on the page/masterpage is completely corrupt.
Has anyone had this problem?
How can I solve it?
Thanks
My experience is that the backend only looks good if you use the Sitefinity methodology to design pages. If you use your own HTML-template and style sheets, like I do, it will more or less be corrupted as it messes up the Sitefinity build in styling. Perhaps that's the case in your site too.
I imagine this is too late for your concerns, but for reference....
1) You can use the codebehind of the masterpage to check the state of the page (if it is in Edit mode) during onload and decide whether or not to include the offending CSS files.
2) When the page IS in preview or edit mode it adds classes to the body tag to reflect changes: <body class="sfPageEditor"> which you can use to alter your style renderings.
2b) If you're not concerned with legacy browsers (IE8 and below) then you can use the :not Pseudo selector with this. body:not(.sfPageEditor) /* css rules here */
3) Tighten up your CSS. Don't be vague for extreme changes. Use selectors like ">" and "+" to help target items.
3b) Specificity is your friend. I've come to use ID and CLASS attributes to help target and override telerik styles (those radTools are notorious for donking up styles). My general layout is something like:
<html>
<head id="domHead"></head>
<body id="domBody">
<header id="header">
<nav id="topNav"><ul><li>...</ul></nav>
</header>
<section id="contentBody">
<!-- Main Site Content here --!>
</section>
<footer id="footer"></footer>
</body>
</html>
Using this means that if I ever need to overwrite something I can prepend the CSS rule with "body#domBody" or something similar to add significant weight to guarantee specificity rules use my styles instead of telerik's. (I will murder my developers if they use "!important").
General changes won't drastically impact your backend pages (I use both bootstrap3 and (preferrably) foundation5 frameworks which are css intensive) without significant impact on the backend.
It really depends on your situation, but there are many ways to handle this kind of situation -- I've listed the main ones I've used for our sitefinity sites.
Hope that helps.