Forums

List styles using Redactor - possible?

Permalink
Hello all

I want to create tick and cross bullet list styles for my site and would be great if these could be applied to lists via the Redactor WYSIWYG.

I'd like the output to look like so:

<ul class="tick">
<li>Item</li>
<li>Item</li>
</ul>


or even:

<ul>
<li class="tick">Item</li>
<li class="tick">Item</li>
</ul>


But I don't know how to do this.

I've found the How To on "Adding Redactor custom styles in a theme (content block)"
https://www.concrete5.org/documentation/how-tos/designers/adding-red...
But this creates code like this:

<ul>
<li><span class="tick">Item</span></li>
<li><span class="tick">Item</span></li>
</ul>


Which means I can't hide the default bullet style just for "tick" list items. I would have to hide it for all lists, and thus needing a "bullet" class to add them back!

Is it possible to create custom classes in Redactor like the first two code blocks above?
Is there more docs on how to write this?

This is the code I'd used for the SPAN version:

public function getThemeEditorClasses()
{
    return array(
        array('title' => t('Tick List'), 'menuClass' => '', 'spanClass' => 'tick'),
        array('title' => t('Cross List'), 'menuClass' => '', 'spanClass' => 'cross')
    );
}


What do the array parameters represent? What's the "menuClass" and are there any others?

Cheers
malkau
 
MrKDilkington replied on at Permalink Reply 2 Attachments
MrKDilkington
Hi malkau,

"What do the array parameters represent? What's the "menuClass" and are there any others?"

From the How-To:
"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)."

I set up a way to add custom list item bullets for you using custom styles. There are attached screenshots that show an example.

1. add this to your theme CSS:
li.cross-bullet, li.tick-bullet, li.no-bullet {
    position: relative;
    list-style-type: none;
}
li.cross-bullet:before {
    background:url(http://buildyourblog.net/wp-content/uploads/cross.png) no-repeat;
    position: absolute;
    height: 20px;
    width: 20px;
    content: '';
    left: -30px;
    background-size: cover;
}
li.tick-bullet:before {
    background:url(http://buildyourblog.net/wp-content/uploads/tick.png) no-repeat;
Viewing 15 lines of 22 lines. View entire code block.

*** after testing, remember to replace the background images with your own ***

2. add these additional custom styles to your theme page_theme.php
array('title' => t('Cross Bullet'), 'menuClass' => '', 'spanClass' => 'cross-bullet'),
array('title' => t('Tick Bullet'), 'menuClass' => '', 'spanClass' => 'tick-bullet'),
array('title' => t('No Bullet'), 'menuClass' => '', 'spanClass' => 'no-bullet'),

3. install the Block Custom Styles Redactor plugin
- this plugin will allow you to apply custom style classes without creating <span> tags
-https://www.concrete5.org/download_file/-/79718/...

Installing the Redactor plugin package:
1. extract the plugin zip file into your concrete5 packages directory
2. install the package
Dashboard > Extend concrete5 > Add Functionality
3. enable the Redactor plugin
Dashboard > System & Settings > Basics > Rich Text Editor
Linuxguy2 replied on at Permalink Reply 1 Attachment
I have installed this mod (renamed "leaves") per your instructions 5.7.5.2. Elemental theme.
You specified adding the css to the page-theme.less but I added the css via:
Design > Customize > custom CSS.
I have to insert a normal list bullet first and then use custom styles dropdown in Redactor to change it to the image I'm replacing the bullet with.

Yes I changed all the entries in the files to leaves/leaf

I now have two custom styles dropdowns in the Redactor tool bar and the custom bullets are showing up in both places. Please see attached file.

Is this normal?

On a side note:
With an unmodified install Redactor doesn't seem to save certain mods to the blocks on the front page.

Thank you for your time.

See attached image.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@Linuxguy2

There have been changes made to concrete5 which will change the instructions.

You do not need the Block Custom Styles plugin anymore. In your page_theme.php, there is now the ability to make a custom style inline or block.

For a list of changes, go to the "New in concrete5 5.7.5+" section of this How-To:
https://www.concrete5.org/documentation/how-tos/designers/adding-red...

"On a side note:
With an unmodified install Redactor doesn't seem to save certain mods to the blocks on the front page."

I am afraid I don't understand the question.
Linuxguy2 replied on at Permalink Reply
Thanks for the info.

I'll get back to the second question later.
Linuxguy2 replied on at Permalink Reply
My Bad....
The second issues seems to have resolved itself.

Thanks for your time!!