Loading Profile...
Help get this topic noticed by sharing it on
Twitter,
Facebook, or email.
Twitter,
Facebook, or email.
How do I customize the styles in the Styles dropdown?
In what file are the styles defined that appear in the styles dropdown in the editor?
-
1It's probably not the best solution, but If you edit this file:
/themes/wygwam/lib/ckeditor/plugins/stylescombo/styles/default.js
And clear your cache, it'll update the default styles. The formatting of the file was something like this:
CKEDITOR.addStylesSet('default',[
{ name: 'Heading', element: 'h2' },
{ name: 'Secondary Heading', element: 'h3' },
{ name: 'Image on left', element: 'img', attributes: { 'class': 'lft' }},
{ name: 'Image on right', element: 'img', attributes: { 'class': 'rht' }},
]);-
johnmorton March 01, 2010 03:07This is really close to what I did, but instead of altering the default, I duplicated it and named it what I wanted. For example, mystyle.js. In the Custom Field Settings section of the EE control panel, look for the Custom Field Options, after you've selected Wygwam as your field type. You'll see the drop down called "Add an advanced setting..." and select "stylesCombo_stylesSet". Select that. You'll see if defaults to "default". That means it's pointing to that default file you found in that directory. If you were now trying to reference the mystyles.js file, you'd just put "mystyles" into this field and hit "Update".EditDeleteRemove
-
-
-
-
-
I’m
confused
Good idea John - better then changing the core files that'll probably get replaced after an update.
One other thing that bugs me about the styles feature is that you can't control the order of the items in the dropdown, or at least I haven't be able to. I'd like to put them in some sort of sensical order (h1, h2, etc) - has anyone been able to figure that out? -
-
Mine are being displayed in the same order I have them listed in in the new 'mystyles.js' file. I guess yours aren't? -
-
Thanks, Brandon and John - this worked for me!
-
-
-
-
-
even further to adding the stylesCombo_stylesSet advanced setting...
If you would like your Wigwam field to have the look and feel of your actual page style, keep your stylesCombo_stylesSet simple
eg.
CKEDITOR.addStylesSet('mystyle',[
{name:'Header 2',element:'h2'},
{name:'Header 3',element:'h3'},
{name:'Highlight',element:'span'},
{name:'Highlight Block',element:'blockquote'}
]);
but then add your css file by using a second advanced setting 'contentsCss' and set the value to '/my/css/file.css' -
-
I’m
frustrated
I have tried everything I can think of and cannot get this method to work. All I get is a blank menu. Any idea what I might be doing wrong?-
Hey Lamar, any chance you forgot to update "default" to "mystyle" where you first reference it here: CKEDITOR.addStylesSet('default',
-
-
-
-
-
-
-
I am also getting a blank menu. Lamar, did you figure out why yours was not displaying? -
-
Ok, I figured it out. I accidentally had a an extra bracket in my code. Lamar, if you are still having problems, double check to make sure your code is perfect or else it will end up displaying a blank menu.
-
-
I also am fighting this. I have found default.js in two places:
systems/extensions/fieldtypes/wygwam/lib/ckeditor/plugins/stylescombo/styles
and in
themes/wygwam/lib/ckeditor/plugins/stylescombo/styles
I can change either file and nothing changes in my combo box.
I also tried adding my own file and changed the name in the file, but when I reference that file name I just get a blank combo.
I would like to try the url format, but I have no idea what that means. What is a url doing in a control panel setup? Where does the URL point to?
I would also be willing to change the config file but I cannot find it.
Why is there so much understanding on this forum of topics not covered in the documentation? What should I study to catch up with everyone? Am I supposed to study the code? -
-
After a lot of trail and error, this is the setup I'm using on my sites right now:
This requires two files, one in /_css/ to control the styles of the editor, and another in /_js/ to control the styles dropdown. The content of the js file looks something like this:
CKEDITOR.addStylesSet('wygwam',[
{ name: 'Paragraph', element: 'p' },
{ name: 'Heading', element: 'h4' },
{ name: 'Image on left', element: 'img', attributes: { 'class': 'flt_lft' }},
{ name: 'Image on right', element: 'img', attributes: { 'class': 'flt_rht' }},
]);
This is also the only good method I've found of positioning images with the level of control I want - the align feature on the image manager just doesn't cut it.
Let me know if you have any questions on how I did this.-
FYI, you can make the folders any name you want, that's just my typical development structure.
-
-
-
-
-
> Let me know if you have any questions on how I did this.
OK, I'll take you up on that. Why did you use the two different formats /_css/wygwam.css and wygwam:/_js/wygwam.js? What is the difference? Where in your file system are the directories those point to?
My /themes/wygwam/lib/ckeditor/plugins/stylescombo/styles/default.js doesn't match what is in my combo box. I have grep'd my entire installation and there is nothing that matches my combo box. It is like it is being loaded from the web or something.
I've tried changing my ckeditor/config.js file and I what I find is that if config.stylesCombo_stylesSet is set to an existing file, like default.js or mystyles.js, I get the default combo that matches nothing, and if I set it to a non-existent file like xxx.js I get a blank combo. I've tried this with and without the wygwam extended settings.
It is as if it reads the file and then ignores the contents.
Does anyone have any ideas for me to try? -
-
1The css file is to control the styles inside the editor (what the paragraphs, heading, etc look like) so you can make ckeditor match the fonts/colors/etc of your site and make it easier for your end users to see what their changes will look like. This isn't required for what you're trying to do but it helps.
The js file controls the contents of the styles drop down - in my example I have an option for a regular paragraph, a heading, and the ability to set a css class so my images float left and right.
I find this method better then editing the files you mentioned as it prevents your settings from getting accidentally wiped next time you do a wygwam upgrade.
The /_js/ and /_css/ are root level, so if I were to browse them on my site, they'd be at www.site.com/_css/ and www.site.com/_js/ respectively. Again, you can name these whatever you want, just make sure the path is reflected in the lines on the screenshot I posted earlier.
This solution means you only ever edit those two files, not default.js or any other js file in the ckeditor directory.-
Brandon - this is a great post that has answered the questions I've been trying to find answers for. It really should be included within the Wygwam documention. Thank you.
-
-
You're very welcome :)
-
-
-
-
-
thank you, thank you, thank you. After copying your setup exactly I got it to work.
I think I understand now why my combo never looked anything like the default.js file during my testing. I didn't realize that ckeditor only shows applicable entries in the combo. So without an img there was no choice for "Image on left". I spent many wasted hours because of this confusion.
I still don't understand the syntax of "wygwam:/_js/wygwam.js", but I don't care. Going through life ignorant is fine with me. -
-
You're welcome, glad that worked for you :)
FYI, the first part of the syntax refers to the name of the styles group (in this case "wygwam" which is listed at the top of the js file:
CKEDITOR.addStylesSet('wygwam',[
and then the part after the colon is the absolute path to the js file itself. -
-
I’m
happy
Thanks for the info, got mine up and running fairly smoothly. I concur with Mark Hahn
"I didn't realize that ckeditor only shows applicable entries in the combo. So without an img there was no choice for "Image on left". I spent many wasted hours because of this confusion."
I understand the syntax of "wygwam:/_js/wygwam.js", but I just couldn't get the mapping correct so I ended up using an absolute url
wygwam:http://www.mysite.com/mymanager/templ...
There are a couple of things that do have me stumped.
I added a blockquote and it adds it to the "Inline Styles" area, also if I select a paragraph and pick "Blockquote" from the drop down list nothing happens. I have to actually hit "Enter" select "Blockquote" from the list and then start typing. This is not how it works for other block elements.
{ name: 'Blockquote', element: 'blockquote' },
The other thing I'm wondering about is if a client chooses a style and then decides he doesn't want it. How do I create a remove formatting option? Heading to paragraph isn't a problem, but what about if you want to remove a cite or small tag. Most regular folks aren't comfortable enough to hit the source button and delete the unwanted tag. Any classes created for span tags would also be a problem to remove. Anybody have any suggestions? -
-
I’m
confused
I am editing my .js file in themes/wygwam/lib/ckeditor/plugins/stylescombo/styles
and I have a problem where I am defining a div style:
{name:'Sidebar',element:'div',attributes:{style:'background:#ccc;float:right;width:400px;padding:10px;margin:15px;'}},
and the style works, but the text (name:'Sidebar') does not show up in the styles dropdown menu, just a gray box.
How do I get the text "sidebar" to display?
A screenshot is attached that shows what I am talking about.
-
Is there a way to remove the visual representation of items in the styles dropdown?
Could the styles dropdown just list options in text only, and not demo the visual look of the style? -
-
Hey Jason, I added you div style to my js file and it presented the same. Since it does work I would assume that even though it's not presenting how you'd like it to, it's working as it suppose to. If you'd like it to actually say "Sidbar" add it as a class instead.
in your js file (mine is wygwam.mystyles.js)
{ name:'Sidebar2',element:'div', attributes: { 'class': 'sidebar' }},
in your css file (mine is wygwam_mystyles.css)
.sidebar { background:#ccc;float:right;width:400px;padding:10px;margin:15px; }
Don't forget to add the css class .sidebar to your main styles.css file!
Hope this helped
Jules -
-
-
-
-
I’m
thankful
Thanks Jules. I will try this out. Appreciate it :) -
-
