Adding Redactor custom styles in a theme

Permalink 8 users found helpful
For those who might be interested in how to add custom styles to Redactor.

The styles work on a theme by theme basis.

1. You start by creating page_theme.php in your theme folder.
2. Add the namespacing and extend the Theme class.
Namespacing for a theme in application
<?php
namespace Application\Theme\Your_Theme_Name;
class PageTheme extends \Concrete\Core\Page\Theme\Theme {
}

Namespacing for a theme in a package
<?php
namespace Concrete\Package\Your_Package_Name\Theme\Your_Theme_Name;
class PageTheme extends \Concrete\Core\Page\Theme\Theme {
}


3. Add the getThemeEditorClasses() method.
public function getThemeEditorClasses()
{
}


4. Add an array with the custom style names and classes you want Redactor to use.
- these are the arrays that come with the Elemental theme "concrete\themes\elemental\page_theme.php"
public function getThemeEditorClasses()
{
    return array(
        array('title' => t('Title Thin'), 'menuClass' => 'title-thin', 'spanClass' => 'title-thin'),
        array('title' => t('Title Caps Bold'), 'menuClass' => 'title-caps-bold', 'spanClass' => 'title-caps-bold'),
        array('title' => t('Title Caps'), 'menuClass' => 'title-caps', 'spanClass' => 'title-caps'),
        array('title' => t('Image Caption'), 'menuClass' => 'image-caption', 'spanClass' => 'image-caption'),
        array('title' => t('Standard Button'), 'menuClass' => '', 'spanClass' => 'btn btn-default'),
        array('title' => t('Success Button'), 'menuClass' => '', 'spanClass' => 'btn btn-success'),
        array('title' => t('Primary Button'), 'menuClass' => '', 'spanClass' => 'btn btn-primary')
    );
}


5. The title is the name that will show up in the custom styles dropdown in Redactor. The menuClass will be the classes applied to the dropdown title text (this makes the title text a preview of the class). The spanClass will be the classes you want applied for that custom style (the classes of the span that will wrap the selected text).


As an example, here I added a custom pina colada button that changes the text color and background along with a pina colada picture.
public function getThemeEditorClasses()
{
    return array(
        array('title' => t('Title Thin'), 'menuClass' => 'title-thin', 'spanClass' => 'title-thin'),
        array('title' => t('Title Caps Bold'), 'menuClass' => 'title-caps-bold', 'spanClass' => 'title-caps-bold'),
        array('title' => t('Title Caps'), 'menuClass' => 'title-caps', 'spanClass' => 'title-caps'),
        array('title' => t('Image Caption'), 'menuClass' => 'image-caption', 'spanClass' => 'image-caption'),
        array('title' => t('Standard Button'), 'menuClass' => '', 'spanClass' => 'btn btn-default'),
        array('title' => t('Success Button'), 'menuClass' => '', 'spanClass' => 'btn btn-success'),
        array('title' => t('Primary Button'), 'menuClass' => '', 'spanClass' => 'btn btn-primary'),
        array('title' => t('Pina Colada Button'), 'menuClass' => '', 'spanClass' => 'pina-colada')
    );
}



http://imgur.com/nObtqkh - default Elemental custom styles
http://imgur.com/acmz05m - new style
http://imgur.com/uSqtGQj - new style applied

The current approach to this is covered in this tutorial:
http://documentation.concrete5.org/tutorials/adding-redactor-custom...

3 Attachments

MrKDilkington
 
Tom0 replied on at Permalink Reply
Do you know if there is any other options for 'spanClass' for example 'h2Class' if you need it to be a header.
MrKDilkington replied on at Permalink Reply
MrKDilkington
I looked around and didn't see anything like that.

spanClass is defined in:
concrete\js\redactor.js
concrete\js\build\core\redactor\plugin.js
rosie607 replied on at Permalink Reply
rosie607
Hi Tom0
Did you find a solution or workaround for redactor to add css styles to any tag? I frequently need to add css styles but don't want spans everywhere.
Thanks
Chrouglas replied on at Permalink Reply
Have you guys found any limitation to only being able to style spans? I haven't had a chance to tinker yet.
rosie607 replied on at Permalink Reply
rosie607
Yup I find it's not great, as for instance if I want to reduce the margins on an <h2> the span inside will have no effect. I'd prefer to be able to apply the class directly to the <h2>. Also means that .h1, .h2, .h3 classes won't work properly.
Chrouglas replied on at Permalink Reply
You could zero out the standard tags (as in a css reset) I suppose but then you have to do more specific styling for those you actually use outside the introduction of the spans.

I looked at the file that the spanClass was in (figuring maybe it could just be added in) but it was gibberish to me. :)
MrKDilkington replied on at Permalink Reply
MrKDilkington
I started a thread dedicated to Redactor that covers needed features, some information on the Redactor API, making Redactor plugins, and how Redactor works in concrete5.
http://www.concrete5.org/index.php?cID=664043...

I added the issues you brought up on the "needed features" list.
rosie607 replied on at Permalink Reply
rosie607
great thanks :)
Chrouglas replied on at Permalink Reply
Hey thanks for putting this together. It was exactly what I was looking for.

One thing I would point out is that the namespace for page_theme.php needs to start with Application instead of Concrete.

I'm sure most people would just change that out without thinking about it but for an "only-enough-programming-skill-to-be-dangerous" guy like me, it might require some additional googling to figure out the resulting error.

Thanks again for the 'How-to'.
C
MrKDilkington replied on at Permalink Reply
MrKDilkington
No problem, Chrouglas.

Good idea on changing the namespacing examples. I updated them.
TheRealSean replied on at Permalink Reply
TheRealSean
Do you know how to remove the styles? Currently redactor appears to stack the styles and remove only seems to remove the outermost default styles and adds a blank span tag to the element/tag

It looks like an issue with the actual redactor style plugin but not have much luck working it out
pedroserapio replied on at Permalink Reply
pedroserapio
This Redactor it's really a pain in ***, the Text Editor of 5.6 it's very complet and have really nice functions but I'm forced to use 5.7 because I know the end it's near of 5.6. If someone can move the old editor to 5.7 it will be great. Because in the end I need apply all the classes by hand. No use for Style Menu because after remove a style I can see a lot of html "trash".
MrKDilkington replied on at Permalink Reply
MrKDilkington
Once Redactor is updated to the latest version, people can start working on plugins.

https://github.com/concrete5/concrete5-5.7.0/issues/1434...
pedroserapio replied on at Permalink Reply
pedroserapio
Let's hope so. Can't wait.....
juddc replied on at Permalink Reply
juddc
I hope so too - using the getThemeEditorClasses is just as flakey as using typeography.css in 5.6. I find you're better off targeting elements via getThemeBlockClasses or getThemeAreaClasses in your page_theme.php.
tsdonohue5 replied on at Permalink Reply
I've tried what you said and doesn't work. This editor is terrible. It's only the most important block in the CMS for my clients and why this was chosen when the other editor wasn't broken (no, not perfect but lots of features and always loved the custom settings can set in admin section according to client's needs, - all gone)

... anyway can you provide the page_theme.php you say is working as a sample and what exactly am I supposed to see changed> New tags under the "Custom Styles" button dropdown?

Help.

Wish could redact this editor for previous one...this s*cks. More work, less reward.

Thanks!
tsdonohue5 replied on at Permalink Reply
...and the paste as plain text is gone...and dozen or more other options. Is this editor April Fools joke? Terrible.

Anyway, anyone who can provide how to add custom styles is all I want. So simple but tried some options and can't get to work. Was so easy before in old editor by adding css file.

Thanks all!
Chrouglas replied on at Permalink Reply
Went to google it for you and realized the top hit was this discussion complete with tutorial. So... See above
tsdonohue5 replied on at Permalink Reply
thanks but I tried above. Seems simple...but nothing changed in the editor hence request for anyone's sample "page_theme.php" to see if there is something different or that I missed or that original poster missed.
tsdonohue5 replied on at Permalink Reply
I also tried some js jquery overloads in a script tag from what I read in redactor website but no changes either.

Should be simple but someone must be doing this right, important to add custom styles to editor. thanks for help.
Chrouglas replied on at Permalink Reply
what is your theme name? i had some issues with one particular project that had a theme name with 3 cap letters in a row... i.e. JKRouling (not really but similar). And I couldn't figure out what the name space for such would be. Ended up just making it all lowercase so the namespace was more obvious. Maybe this the disconnect?
tsdonohue5 replied on at Permalink Reply
I do have a page_theme file in theme root and my name is one word all lower case so I'm guessing would be ok. I just found this link so I'm going to try this and see what happens...

http://www.concrete5.org/documentation/how-tos/developers/opening-u...

and then this one:
http://www.concrete5.org/documentation/how-tos/developers/redactor-...

but these dont show how to add some custom css tags under the "Custom Styles" button which is what I want.
And also, the remove formatting button doesn't work. Ugh.
Chrouglas replied on at Permalink Reply 1 Attachment
I may be wrong but i don't think thats what you want. I think what you have there is how to add more options across the top of redactor and not how to add custom styles under the custom style drop down. see attached

Could we have a look at your page_theme.php file? and give us your theme name?

I hate that I am the one giving you support on this... i am only a CP&P coder. Anyone else have a thought on this?
Chrouglas replied on at Permalink Reply
oh and for a sample of page_theme.php just look at the Elemental theme that is bundled with C5. In fact I think you could even just copy theirs into your theme folder (change the namespace of course) and check that their styles are loading into redactor
tsdonohue5 replied on at Permalink Reply
I just switched to Elemental them and then saw editing a page in editor all the custom styles from the page_them.php so ...something's wrong with mine. The name of my theme folder is one word all lowercase and this is what I put in the last part of name space, is this right? But the first line in the description.txt is two words with first letter capital. I'm going to try chaning this description.txt and reapply theme ... does the description.txt have anything to to with the namespace name?

I bet my namespace is off....
Chrouglas replied on at Permalink Reply
description.txt can say that you like poprocks and tall amazonian women... has nothing to do with the functionality of the theme. Right, powers-that-be? Anyway, I'm 95.71% sure this is correct.

Example

This is the name of my theme...
greenhouse

my name space is...
namespace Application\Theme\Greenhouse;


note that the Elemental theme will have...
namespace Concrete\Theme\Elemental;

and you DON'T want to JUST change 'Elemental' to 'Yourtheme'. You need to change 'Concrete' to 'Application' as well. (since its in the application folder)
tsdonohue5 replied on at Permalink Reply
Yes I did use "Application"...I got that from original poster.

All I know is that that change in description to one waord, which then matched the one word I had in namespace, and then removed, and re-installed and made active is what made it all come together.

Thanks
Chrouglas replied on at Permalink Reply
start off with the basics... do you have a page_theme.php file in your theme folder?
tsdonohue5 replied on at Permalink Reply
OK got it working! What a relief. Thanks to you guys....so here is what was wrong...

I thought the namespace in page_theme was to be same as my theme folder, but that is not correct. It needs to be the same as the name in the description.txt file! This is news to me. And my name in the description file for first line was two words both with first letter capitalized but separated by space. I think this will work if use "_" in namespace but I didn't and didn't just figure that out.

ALSO...had to activate another theme (elemental) and REMOVE my theme so my theme will show up below in Theme Available and only then did it recognize my altered name in description to be one word (I made the two words one word, no space, and only first letter capitalized to copy format of Elemental) and of course used the same name in page_theme.php as namespace (with first letter capital and rest lowercase - camelcase). Now I can see the theme recognized properly and then installed and then activated.

Now I see the themes defined in editor page.

I see now theme of dark chocolate so I guess you can use "_" between two words in description but from now on I'll just use one word.

THANKS for your help in figuring this out. So the namespace is determined from the description file.
lonnon replied on at Permalink Reply
lonnon
Thank you. Removing the theme entirely and reinstalling was the magic trick that got this working for me.

One note on the namespace: I found that the contents of description.txt don't matter, after all. The namespace in page_theme.php is based on the directory name in which page_theme.php is stored. I deliberately named the theme something completely different in the description.txt file, and as long as the namespace in page_theme.php matches the path (lowercase directory name, initial caps on namespace name), everything works fine.
tsdonohue5 replied on at Permalink Reply
Thanks for the clarification...I think I noticed that too on subsequent testing.

Suffice to say, going forward I will:

1) just use one 'name' all lowercase with no special symbols ("_") for theme folder and description.txt and namespace to avoid any possible differences and ...

2) include the page_theme.php when first time installing theme even if empty...to avoid the necessary uninstall, remove and re-install later if desired.
thefinchmeister replied on at Permalink Reply
I came here to confirm that if you do not have the 'page_theme.php' file already in your theme directory you WILL need to reinstall a theme for it to get picked up. However, if you only have 1 theme, like I did, and don't want to go to the effort adding another theme just to uninstall/reinstall your current theme, like I did, you can hack the database directly and update a flag to enable the custom themes. To do this use:

update PageThemes set pThemeHasCustomClass=1;
Much easier! Also don't forget to clear the cache.
tsdonohue5 replied on at Permalink Reply
thanks buddy for your help.
therenderman replied on at Permalink Reply
therenderman
Just a quick update to this discussion, you don't have to re install your theme to get a modification to the page_theme.php file to work. I just followed the above instructions to add Redactor style classes - and as long as your namespace is correct it worked first time for me.
tsdonohue5 replied on at Permalink Reply
Yes you are right. Perhaps I was not clear enough in beginning...but I found that if you did NOT have a page_theme.php in you theme when it was installed, you need to uninstall the theme and reinstall with this file in theme to get it to work. That you can't add a page theme.php to an installed theme and expect it to be recognized. This is what my tests showed.

but yes, once page_theme.php was already there a change will be automatically seen without reinstall of theme.
juddc replied on at Permalink Reply
juddc
That's correct - Andrew explains that is the video on adding layouts here:https://www.concrete5.org/documentation/developers/5.7/designing-for...
CarlSteinhilber replied on at Permalink Reply
CarlSteinhilber
This is working beautifully for me. Thank you!

One question... is it possible to remove "Page Name" and/or "User Name" from the Custom Styles dropdown?

My site will never use User Name, as it's entirely public.
And I already have the Page Name automatically appearing on the page via the template, so don't really want to give the user the ability to add it again.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@CarlSteinhilber

I imagine it can be removed, but it would require overriding and customizing files and likely not worth the effort to do.
CarlSteinhilber replied on at Permalink Reply
CarlSteinhilber
I did find this
<systemcontenteditorsnippets>
      <snippet handle="page_name" name="Page Name" package="" activated="1"/>
      <snippet handle="user_name" name="User Name" package="" activated="0"/>
   </systemcontenteditorsnippets>


in concrete/config/install/base/blocktypes.xml

which seemed to map suspiciously close to those items in the dropdown... but being that the file is in install/base, I'm guessing it's only read during, well, install (?) and changing the values wouldn't affect anything real-time afterward (and when I tested, indeed, nothing changed).
MrKDilkington replied on at Permalink Reply 1 Attachment
MrKDilkington
@CarlSteinhilber

The snippet information is created using PHP and then added to the editor using AJAX.

I have attached an override you can try.
- unzip the attached zip file into your application folder
application\js\redactor.js
jlgrall replied on at Permalink Reply
To remove "Page Name" and "User Name" from Redactor's Custom Styles dropdown, just hide them with CSS like this:
#redactor-dropdown-holder {
  .redactor-dropdown-page_name,
  .redactor-dropdown-user_name {
    display: none;
  }
}