nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

CSS in Site Pub Edit Mode

ChrisNichols

I've created my own layouts in the iw/config/fixed-layout folder and have an external css for my canvas.

When I preview or publish, the styles show up just fine. However, in Site Publisher edit mode, they don't show up at all.

I've linked the css in the default.site but no luck.

All the styles for the individual components do show up in edit mode.

Any ideas?

Find more posts tagged with

Comments

ChrisNichols

Please see the image for an example.

html, body {
background-color:#585b64;
background-image:url(/common/images/background.png);
background-repeat: no-repeat;
background-position:top;
}
.MyCanvas, {
background-color:#FFF;
}

Any ideas?

msrinivas

Oops...sorry. Ignore below. I read it the other way.

=======

Did you deploy the files to the development node using the PLC workflow? What version are you on?

Table as footer.rptdesign

msrinivas

Make sure you are pointing to the correct preview site in your Page --> Settings

ChrisNichols

Oops...sorry. Ignore below. I read it the other way.

=======

Did you deploy the files to the development node using the PLC workflow? What version are you on?

It's TeamSite 6.7.2 sp 1
And Site Pub 3.?
We do not use LiveSite

I'm not sure what PLC workflow is. Something I should be aware of?

Rick Poulin

The markup for edit mode isn't the same as preview mode. There's a bunch of additional stuff and CSS in edit mode that probably conflicts with yours and/or causes your rules not to match. In the case of the html,body rule, that's for sure being overruled by the edit mode CSS as it has higher priority.

I suggest you carefully inspect the edit view in firebug to check the CSS rules imposed by SitePub and to make sure your rules apply to the edit mode markup. In the case of your body rule, you could tell the browser to prefer yours by specifying it with greater granularity:
html body {}
(note no comma). Which is probably what you meant to do in the first place, because applying background styles to the html tag makes no sense.

ChrisNichols

I'll just cheat it with an image. Nevermind.

Incidentally, you can have different background colors for html and the body tag. For example, try it then preview in Site Pub. Not that you normally would, I agree.