Styles

You can use a global CSS. We're in the middle of transitioning our own site to CMS Builder and we use a global CSS.

I think what we're doing for our own site is using the default formats (h1, h2, etc) and giving default styles to those.

Thanks Dave,

Mickey

Is it possible that someone will write a tutorial on how to link a global stylesheet into the CMS editor? [:)]

Hi Dave -
Hmm. Well perhaps it might be possible to have either a second drop down box (as the one that allows you to select Heading 1) but which shows the main styles set up in the external style sheet for a particular site, or alternatively, if there isn't room for two drop down boxes, for you to be able to select and change what styles show up in that drop down box - ie the default styles as you already have it, or the external (global) style sheet as you have set up for your site?

That way it would be possible to use standard markup or your own stylesheet as needed if that makes sense?

Ok, which version are you running? v1.10? Try this:

Open /lib/menus/default/edit_functions.php and search for "theme_advanced_buttons1". That line specifies the first row of buttons for the tinymce wysiwyg. You can see a list of possible buttons here: http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference

Add "styleselect," to the beginning of that value like this:

theme_advanced_buttons1 : "styleselect,formatselect,fontsizeselect,bold...

This will add a pulldown for css classes the user can style content with. If you like you can remove formatselect and/or fontsizeselect to remove the wysiwyg pulldowns for format and size.

Next, replace /css/wysiwyg.css with the attached wysiwyg.css file. It's from v1.11 (not yet released) is updated to work with the latest TinyMCE version. You'll see at the bottom of that file a place where you can add classes. Just add classes there and they'll show up in the wysiwyg pulldown.

You can either link to this file from your website or copy and paste the classes you want from your website css file to this one.

Hope that makes sense. Let me know if you have any more questions on that or if you need more detail! :)

Hi Dave -
Brilliant, perfect, many thanks!

It works seamlessly and the source code looks great as well. Exactly what I wanted! [:)]

Regards, Steve.

Great, glad to hear it.

Just make sure when you upgrade that you don't overwrite that file with your changes. It might be a good idea to keep a backup copy in the same dir: wysiwyg.css.backup

This is just a note that might be of interest to anyone else wanting to install site styles as above.

There seems to be something strange about the way Firefox responds to changes to this Wysiwyg file, in that it doesn't immediately show the changes. I guess it must be something to do with the caching of css files but I can't find any way to change it and it puzzled me until I realised it was the browser, not something I was doing wrong.

After editing the wysiwyg file to add styles or remove them, the edits aren't shown in the dropdown window - it still shows the old classes or indeed no classes if you've just edited them in for the first time. This isn't altered by refreshing the screen or by exiting FF and starting it up again. It *does* update in its own time, which could be next day. Maybe someone could tell me if there are any obvious options to change in FF, but it made me doubt my sanity for a while.

When I realised it was a time delay, I tried doing the same thing in IE7 and found it updated immediately. So I'm having to use IE7 to test out my edits for the moment. Hope this helps! [:)]