Fieldtype

Developer
Supported

Expresso

ExpressionEngine 2, ExpressionEngine 3, ExpressionEngine 4, ExpressionEngine 5

Back to this add-on's main page
View Other Add-ons From PutYourLightsOn

     

You must be logged in to post.

Link to external CSS

Support (Resolved)

meslater
meslater

In the docs under CSS it says

CSS
Any CSS code you add here will be applied to the Expresso WYSIWYG editor (it will not be applied to the rendered content). You can also add the url to a CSS file if you prefer.


Where do you add the link to your external css file??

When I try to add styles using the sample format the styles drop down is blank. I am following the code I just want to give the user the opportunity to add some classes to text in the espresso field.

Any guidance would be greatly appreciated.

PutYourLightsOn
# 1
Developer
PutYourLightsOn

You may be confusing the CSS and Styles settings.

The CSS setting is where you can write CSS rules, or enter the full URL to a CSS file which contains the styles you want applied to the editor content when editing on the entry screen. These styles have no effect on the content which is output by Expresso in your templates.

The Styles setting is where you can enter custom rules to be added to the Styles dropdown in order to allow you to apply class names or style attributes to specific elements in the editor, following the format outlined in the docs, e.g.,

{ name"Red Title" element"h3"styles"color""Red" } },
{ name"CSS Style"element"span"attributes"class""my_style" } },
{ name"Marker: Yellow"element"span"styles"background-color""Yellow" } } 

Note that you cannot apply custom Styles via individual field settings - they can only be added globally via the global fieldtype settings.

meslater
# 2
meslater

Actually I want to do both I didn’t explain it well.

When i post the sample code in the styles setting the styles dropdown goes blank in the editor.

{ name"CSS Style"element"span"attributes"class""my_style" } } 

I would like to apply the CSS to the publishing view but cant figure out where to enter the URL

PutYourLightsOn
# 3
Developer
PutYourLightsOn

What version of Expresso are you running? I just ued the exact code you pasted above in the Styles setting of my test install, and “CSS Style” shows up as an option in the editor’s Styles dropdown menu.

Re: CSS file - simple paste the complete URL to your CSS file in the CSS setting field.

meslater
# 4
meslater

What I am trying to do is put an inline style for an anchor

So this displays in the drop down.

{ name: “CSS Style”, element: “span”, attributes: { “class”: “my_style” } }


but this makes it blank

{ name: “CSS Style”, element: “a”, attributes: { “class”: “external_link” } }

 

meslater
# 5
meslater

Also I would really like to understand how to attach and external style sheet so that the publishing view can be styled.

PutYourLightsOn
# 6
Developer
PutYourLightsOn

For some elements the menu styles will only appear when you have that element selected in the editor. (This is CKEditor’s behaviour.) So if you create a link, then select it, you’ll see that the Style menu will then have your custom anchor tag style in it.

The external stylesheet is done just how I said - paste the URL of your stylesheet in the CSS setting textarea. i.e., https://dsh.re/5efff