(OLD 5.7 Discussion FORUM)

<?php
namespace Application\Theme\Your_Theme_Name;
class PageTheme extends \Concrete\Core\Page\Theme\Theme {
}

<?php
namespace Concrete\Package\Your_Package_Name\Theme\Your_Theme_Name;
class PageTheme extends \Concrete\Core\Page\Theme\Theme {
}

public function getThemeEditorClasses()
{
}

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')
    );
}

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')
    );
}

 

Tom0 replied on Oct 14, 2014 at 10:45 am 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 Oct 15, 2014 at 12:07 am Permalink Reply

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 Nov 14, 2014 at 11:39 am Permalink Reply

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 Nov 19, 2014 at 2:17 pm 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 Nov 19, 2014 at 2:30 pm Permalink Reply

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 Nov 20, 2014 at 12:25 am 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 Nov 20, 2014 at 3:59 am Permalink Reply

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 Nov 20, 2014 at 8:46 am Permalink Reply

great thanks :)

Chrouglas replied on Nov 19, 2014 at 2:15 pm 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 Nov 20, 2014 at 4:22 am Permalink Reply

No problem, Chrouglas.

Good idea on changing the namespacing examples. I updated them.

TheRealSean replied on Nov 26, 2014 at 10:33 pm Permalink Reply

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 Dec 16, 2014 at 7:35 am Permalink Reply

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 Dec 16, 2014 at 8:20 am Permalink Reply

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 Dec 17, 2014 at 4:06 am Permalink Reply

Let's hope so. Can't wait.....

juddc replied on Jan 4, 2015 at 9:07 pm Permalink Reply

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 Jan 4, 2015 at 6:06 pm 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 Jan 4, 2015 at 6:14 pm 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 Jan 4, 2015 at 6:22 pm 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 Jan 4, 2015 at 6:30 pm 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 Jan 4, 2015 at 6:32 pm 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 Jan 4, 2015 at 6:51 pm 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 Jan 4, 2015 at 6:55 pm 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 Jan 4, 2015 at 7:06 pm 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 Jan 4, 2015 at 6:56 pm 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 Jan 4, 2015 at 7:18 pm 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 Jan 4, 2015 at 7:38 pm 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 Jan 4, 2015 at 8:24 pm 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 Jan 4, 2015 at 6:41 pm Permalink Reply

start off with the basics... do you have a page_theme.php file in your theme folder?

tsdonohue5 replied on Jan 4, 2015 at 7:33 pm 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 Feb 9, 2015 at 1:58 pm Permalink Reply

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 Feb 9, 2015 at 4:56 pm 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 Nov 16, 2016 at 5:13 am 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 Jan 4, 2015 at 7:37 pm Permalink Reply

thanks buddy for your help.

therenderman replied on Jun 3, 2015 at 9:51 am Permalink Reply

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 Jun 3, 2015 at 10:08 am 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 Jun 3, 2015 at 12:48 pm Permalink Reply

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 Feb 24, 2016 at 2:53 pm Permalink Reply

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 Feb 24, 2016 at 3:03 pm Permalink Reply

@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 Feb 24, 2016 at 3:11 pm Permalink Reply

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 Feb 24, 2016 at 6:36 pm Permalink Reply 1 Attachment

@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 Sep 6, 2016 at 12:53 pm 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;
  }
}