Best practice for extra styles

[dave-ha]

How to apply more styles than what the WPB editor menu provides?


1) I tried to store those extra styles in a separate stylesheet and put a link tag into the meta tag section of the editor's menu:

<link rel="stylesheet" type="text/css" href="../css/extra.css">

That's perfect as long as all web pages are on top level but for sub-pages the link breaks.


2) I tried to include a script tag in the meta tags section, e.g.:

<script type="text/css">
<!--
h1 {
margin-top: 0;
}
-->
</script>

Works fine but in WPB's editor view those extra styles are not applied (no WYSIWYG).

What's your recommended best practice for WPB 10.4.4.?

 

[dave-ha]

Root link

1) I tried to store those extra styles in a separate stylesheet and put a link tag into the meta tag section of the editor's menu:

<link rel="stylesheet" type="text/css" href="../css/extra.css">

That's perfect as long as all web pages are on top level but for sub-pages the link breaks.

I guess a root link solves the issue:

<link rel="stylesheet" type="text/css" href="/css/extra.css">

Now, how could those extra styles be applied to WPB's editor view as well?

 

[custer]

Hi Dave,

Unfortunately, there's no way to make custom CSS appear in the editor at the moment. We're not sure if this functionality will be widely used (after all, WPB is aimed towards novice users who do not known what CSS is), so a fix in the nearby release is unlikely.

 

[dave-ha]

Good morning Custer,

Thanks for evaluating this. Yeah, the majority of users will be happy with what's available in WPB: They can chose from basic layouts, select fonts, images and colours and insert some modules for content or with functions. And for those who wish some minor design variations there is that workaround.