CSS Styles are Missing in WYSIWYG Editor

Report · Dec 11, 2012

How the Apply CSS Class dropdown works by default

Below you can see two screenshots showing the reference in the <head>…</head> to a CSS file, and on the right side the output of this in the Apply CSS Class dropdown.

This dropdown takes the CSS styles defined inside the <head>…</head> tags of a page or template and defined

Controlling which styles appear in the Apply CSS Class (or limiting the CSS Classes)

This tutorial is covering the steps required to add CSS Styles to the WYSIWYG editor as well as in the Site Editor so you will enable your admin users to easily manage what content will have what CSS rules applied.

This tutorial requires some general understanding of CSS and HTML and more details can be found on http://www.w3schools.com/

To enable the styles in the dropdown menu involves the following actions:

Create your CSS file that will hold the rules, you must decide where will be accessed from and what name this file will have. For this example we will use a file named “default.css” and will place this under the folder named “stylesheets”

You can create this file either by using your preferred text editor and upload it via SFTP or you can just add a new file through Alpha File Manager

How to SFTP: http://kb.worldsecuresystems.com/kb/connecting-your-site-using-ftp.html

File Manager:

Refer the CSS file in your template, so all files that will have the template applied will have the options available in the class dropdown. As any other CSS file refer this between the <head>…</head> tags of your template.

Using the above details our example will look similar to this:

<head>

…

</head>

How to add ID’s and Classes into Online Editor

Lastly, after you have the CSS file created and referred in your template you can add the ID’s and classes under your Partner Portal. You can add them here: Partner Portal > Tools > Online Editor Settings > select your site from the dropdown > Editor Apply CSS

Visiting your page or template should now display the ID’s or classes added to your editor.

*NOTE: It works only for classes, and they have to be specified by .class, and id – which have to be entered as #id

** NOTE: after making changes to the PP setting, clear your browser cache to make sure that the dropdown list of CSS classes is updated properly.

Known Limitations:

- It does not work for stylesheets imported with @Import

Report · Jan 11, 2013

This does not work. I followed all your instructions, so I:

1. Added a stylesheet (screen: http://europaio.com/bc-stylesheet.png)

2. Added the stylesheet to my template head (screen: http://europaio.com/bc-template.png)

3. Added the class and id from my stylesheet into Editor Apply CSS (screen: http://europaio.com/bc-settings.png)

4. Cleared the browser cache (tried Firefox, IE, Chrome and Safari) yet it still will not show my css in the Apply menu of the WYSIWYG (screen: http://europaio.com/bc-page.png)

I did get it to work if I add the desired classes as a <style>...</style> definition directly in the PAGE (not template) I am editing - but WHAT IS THE POINT OF THAT? This is supposed to let my clients easily create and edit pages without having to know CSS - they cannot use this feature without adding CSS code to a page - so this is totally useless.

Correct me if I'm wrong - why is this broken?

Report · Jan 14, 2013

Thank you for your feedback Adam.

I have fixed this issue for you. The problem was caused by the preceding "/" of "StyleSheets" folder.

However investigating this I came across a bug in our system which I have logged with our dev team and I mentioned over the case I just closed for you (bug#3475527). This bug prevents you from using ID's in the Apply CSS Class dropdown.

Regards,

Cristian

Report · Jan 14, 2013

Cristian, there are cases of how it fails to work for odd users and sites even if you duplicate a site that works and then doesnt etc. These have been bugs in the system for years.

Not been to happy with support tickets recently as well giving advise that the above is not how you do class dropdowns and some other strange incorect method.

Long time ago now I said that all this can be avoided if in the editor online portal settings you could specify a CSS file to read rather then the system trying to detect it. Can try to detect as it does not but if you want to specify then you can to ensure it works and no issues.

With this you could then also just create a CSS custom file for some extras and overides which could include editor classes you want.

Report · Jul 12, 2013

Liam's suggestion is an excellent one! This would be an extremely helpful addition.

Report · Apr 01, 2014

Hi,

I add Font but did a mistake.

I added "Helvetica, Arial ...." and now when I click on Remove, I have an error and the line appears in the Admin

Report · Feb 21, 2015

Hi,

i did not get this to work even in the brand new redactor editor. CSS only shows "clear class".

Any trick to make it work?

Report · Jun 10, 2015

I found that the css link cannot be included as a content holder, but must be spelled out in the template. To avoid duplicating code, I am now including a css file with empty definitions in each template, so as to trigger the CSS button, and still keeping the css in the various files where they belong.

Report · Jun 18, 2015

Further to this I have found in my site that the order in which the css files are loaded in the template is different to the order in which they are loaded within the BC Admin editor thus proving useless... or is it simply me that is useless???

Order per template

What I see in developer mode viewing the editor content

Report · Oct 13, 2015

Any update on this feature? I tried to make this work and got the same results as mandrake12. Editor only shows Clear Class. This feature would be tremendously useful, if it worked!

Report · Nov 02, 2015

I just finished a lengthy discussion with Adobe support and the short of it is,

this is still a beta editor, but there is no alternative as the partner portal settings will only allow you to apply edits to the beta editor and not the "old" one.

As of the time of writing this (November 3, 2015) - this is what I have surmised:

IN PARTNER PORTAL:

http://ava-next.worldsecuresystems.com/PartnerPortal/Tools/OnlineEditorSettings.aspx

You can define the classes in the "Editor Apply CSS" tab, and they will show up in the manage tab editor (the incontext editor will not show any class options other than clear class).
When adding a composite class (like "button small round") Only enter the period for the first class (ie ".button small round"
The Editor Content CSS tab does not work. Changes made in this tab will not affect your editor.
The Font tab works - changes made here will appear in your manage tab editor, BUT NOT incontext editor (annoying right?)
The Font size tab works - changes made here will appear in your manage tab editor, BUT NOT incontext editor (in fact - the incontext only shows sizes up to 30px, where as the default on the manage tab editor goes up to 72px).
The Color tab - same story - works in manage but not in incontext. Also, it converts your colors to rgb().
Changes made to these tabs will not affect the "old" editor. Only the new "beta" editor that has to be enabled under the "Site Settings" -> "Beta Features" on the admin area for your site.

MANAGE TAB EDITOR:

To get the editor to show the styles visually, you have to have the style sheets in the head of the page template of the page you are editing. They can not be in a content holder, or linked through a liquid include.
If you do not define the classes for the editor to use in the Partner Portal, it will show ALL the classes that are in the style sheets that are included in the head of the page template.
Framework classes for rows and columns in general do not work fully.
Applying classes in the editor from the dropdown is cumulative - (ie, clicking on class "button" and then class "small" does not replace class "button" with "small" but adds "small" making it "button small"). You have to click the "Clear Class" first to be able to apply a different class.

The best way to handle this in my opinion is to - unfortunately - code your site with your style sheets hard coded into the templates, and then define the classes you want your client to be able to use in the editor inside your partner portal. I am going to experiment with using a single page template, and then use liquid and content holders to modify the layout used around the content... I will post the results of my efforts later.

INCONTEXT EDITOR:

This is, in my opinion, not ready for prime time. So much of it is buggy and disconnected from the interior editor that it really isn't worth putting effort into using or even showing your client. I strongly suggest that when you add your clients as users, you remove "EDIT" tab from their permissions.

That said, the updated incontext editor show promise. It borrows some ideas from the mail chimp editor allowing you to create repeatable regions, and limiting editing to a single line, link, image etc. However, its html edit view is horrible. More info on how to use it can be found below:

Configuring a site to use InContext Editing

Report · Nov 03, 2015

Thanks for the update, 300M_Users. I think I'll give Adobe a little more time to sort out this system, before investing much time and effort into it. Looking forward to exploring it, when it's fully developed!

Adobe Community

CSS Styles are Missing in WYSIWYG Editor