Applying CSS styles in EES WYSIWYG editor

(Stuart W) #1

Please can you help with a straightforward question:


I have set up some CSS styles in the Styles page of my main design file and also added a CSS file containing those styles as a child of the main design file.



The CSS classes appear in the relevant drop-down in the WYSIWYG editor, but I can only apply such a style to text in the editor.



Can you tell me please if I should be able to apply a style to an image? I have tried but nothing happens!



Thanks



Stu

(Scott Hall) #2

Hey Stu


Classes for images can be applied by first selecting the image then clicking on the edit image icon in the wysiwyg toolbar. This will open a pop up and once loaded there is a 'Class' field at the bottom right for styling.

I know this is not as convenient as the drop down but this is the main way to add classes to images in the current WYSIWYG. You could also use view source to add the class directly to the image tag in the HTML.



Cheers



Scotty

(Stuart W) #3

Hi Scotty,


Thanks for your reply.



I've seen that method of adding classes to images but it won't sort my issue, unfortunately.



I am trying to set up a way that very non-technical editors using the WYSIWYG editor can add an image with a caption below it. The html I've got for it is something like:


    
    
    
    Caption text


The reason I need the image and the caption text in a container (doesn't actually matter whether it's a div, para or span), is that the caption is white text on a coloured background that is the same width as the image. See this page for how the images and captions need to look, but note that the html on this page isn't what I will eventually be using!

Can you suggest a way that editors can achieve this within the WYSIWYG editor please, or will I have to get them to split text into several WYSIWYG divs and create separate divs just for images?

Many thanks,

Stu
(Nic Hubbard) #4

[quote]
Can you suggest a way that editors can achieve this within the WYSIWYG editor please, or will I have to get them to split text into several WYSIWYG divs and create separate divs just for images?

[/quote]



Do they have to use the WYSIWYG? If I were you, I would create a Asset Builder, then allow the user to upload the image and enter the description. This prevents the user from screwing up the HTML. Then you build Matrix to display the image how you want. E.g. using dynamic params to nest.

(Stuart W) #5

[quote]
Do they have to use the WYSIWYG? If I were you, I would create a Asset Builder, then allow the user to upload the image and enter the description. This prevents the user from screwing up the HTML. Then you build Matrix to display the image how you want. E.g. using dynamic params to nest.

[/quote]



Oh heck, that sounds complicated, Nic! Especially for a newbie like me :wink: Think I'll have to spend the morning in the manuals! My only concern/query about doing this is whether they would be able to put images within the text at different places. The images aren't placed in the same position on every page, in fact some pages don't have an image, some will have several.



THanks for the thought though, I'll have to put my thinking cap on!



Cheers



Stu

(Stuart W) #6

I'm all sorted now, thanks, by simplifying my html/css so that the user gives the image a class when they add the image to the page, and they give the caption a css style using the drop down box.


So, thanks for your replies, but I've got there in the end!



Funny though, I subsequently discovered that it is possible to add a CSS style using the drop down box in Firefox but not in Internet Explorer. I loathe Microsoft!



Cheers



Stu