Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Archive /

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo

CMS Editor -- Adding more CSS style options


Go to End


5 Posts   3791 Views

Avatar
JamesinCO

Community Member, 14 Posts

21 September 2008 at 9:14am

Edited: 21/09/2008 10:17am

Hello,

I've found the limit of only having 6 heading options available in the editor to be overly constraining. (mainly the ability to add some colored text would be greatly appreciated)

So I'm trying to modify SS to allow for more options ... like a few different text colors.

I modified HtmlEditorField.php in sapphire/forms to include the following code

new HtmlEditorField_dropdown("FormatBlock", "formatSelect", array(
"<p>" => _t('HtmlEditorField.FORMATP', "Paragraph", PR_MEDIUM, '<p> tag'),
"<address>" => _t('HtmlEditorField.FORMATADDR', "Address", PR_MEDIUM, '<address> tag'),
"<pre>" => "Preformatted",_t('HtmlEditorField.FORMATADDR', "Address", PR_MEDIUM, '<address> tag'),
"<h1>" => _t('HtmlEditorField.FORMATH1', "Heading 1", PR_MEDIUM, '<h1> tag'),
"<h2>" => _t('HtmlEditorField.FORMATH2', "Heading 2", PR_MEDIUM, '<h2> tag'),
"<h3>" => _t('HtmlEditorField.FORMATH3', "Heading 3", PR_MEDIUM, '<h3> tag'),
"<h4>" => _t('HtmlEditorField.FORMATH4', "Heading 4", PR_MEDIUM, '<h4> tag'),
"<h5>" => _t('HtmlEditorField.FORMATH5', "Heading 5", PR_MEDIUM, '<h5> tag'),
"<h6>" => _t('HtmlEditorField.FORMATH6', "Heading 6", PR_MEDIUM, '<h6> tag'),
/*- JMA mod for more heading Styles */
"<style1>" => _t('HtmlEditorField.FORMATH7', "Color1 Size4", PR_MEDIUM, '<style1> tag'),
"<style2>" => _t('HtmlEditorField.FORMATH8', "Color1 Size5", PR_MEDIUM, '<style2> tag'),
"<style3>" => _t('HtmlEditorField.FORMATH9', "Color1 Size6", PR_MEDIUM, '<style3> tag'),
"<style4>" => _t('HtmlEditorField.FORMATH10', "Color2 Size4", PR_MEDIUM, '<style4> tag'),
"<style5>" => _t('HtmlEditorField.FORMATH11', "Color2 Size5", PR_MEDIUM, '<style5> tag'),
"<style6>" => _t('HtmlEditorField.FORMATH12', "Color2 Size6", PR_MEDIUM, '<style6> tag'),
/*- JMA end mod for more heading Styles */

This adds the additional choices to the drop down list. (see attached screen shot)

Then I added the style1 thru style6 styles to the typography.css in the theme directory ...

/* HEADER STYLES */

.typography h1,
.typography h2 {
color: #4EA3D7;
margin: 15px 0;
clear: both;
font-weight: 300;
font-family: Tahoma, Verdana, sans-serif;
}
.typography h1 {
font-size: 2.0em;
}
.typography h2 {
font-size: 1.8em;
}

.typography h3 {
color: #222;
margin: 25px 0 15px 0;
font-weight: 300;
clear: both;
font-size: 1.6em;
}
.typography h4 {
font-size: 1.4em;
color: #222;
width: 95%;
clear: both;
font-weight: 300;
line-height: 1.4em;
border-bottom: 1px solid #ccc;
margin: 25px 0 15px 0;
}
.typography h5 {
font-size: 1.2em;
color: #222;
font-weight: 300;
margin: 10px 0;
}
.typography h6 {
font-size: 1.0em;
color: #555;
line-height: 1.2em;
margin: 10px;
}
.typography style1 {
font-size: 1.4em;
color: #8B0000;
width: 95%;
clear: both;
font-weight: 300;
line-height: 1.4em;
border-bottom: 1px solid #ccc;
margin: 25px 0 15px 0;
}
.typography style2 {
font-size: 1.2em;
color: #8B0000;
font-weight: 300;
margin: 10px 0;
}
.typography style3 {
font-size: 1.0em;
color: #8B0000;
line-height: 1.2em;
margin: 10px;
}
.typography style4 {
font-size: 1.4em;
color: #00008B;
width: 95%;
clear: both;
font-weight: 300;
line-height: 1.4em;
border-bottom: 1px solid #ccc;
margin: 25px 0 15px 0;
}
.typography style5 {
font-size: 1.2em;
color: #00008B;
font-weight: 300;
margin: 10px 0;
}
.typography style6 {
font-size: 1.0em;
color: #00008B;
line-height: 1.2em;
margin: 10px;
}

In CMS editor I get the drop down option (Screen shot attached), but it never implements the new heading styles when they are selected during editing.

Can somebody point me to what I'm missing? Is what I'm trying just not possible. Is there another section of code that needs modified to allow the CMS editor to wrap the text with the new tags? All the old heading tags stillwork (h1 thru h6) but the new ones are not functional.

Are 'style' tags not vaild? (I used them in dreamweaver)

If they are invalid, how can I get additional Styles (beyond the h1-h6) into the CMS editor menu?

Thanks in advance for any help!

Avatar
Liam

Community Member, 470 Posts

21 September 2008 at 4:15pm

I might be misunderstanding your post, it's late over here.

Are you saying the html doesn't get added, or just the style doesn't show up in the editor but it looks okay on the published site?

You have to also add the css code to the editor.css in the themes directory for styles to show up in the admin area fields.

Avatar
JamesinCO

Community Member, 14 Posts

21 September 2008 at 4:20pm

Thanks for the reply ...

The styles never show up in the html ... the menu items appear in the CMS Editor, but using them does not produce the tags in the html.

...and I am using the @import "typography.css"; line in the editor css ... thought that would bring in the styles fromthe topography.css ... am I wrong?

James

Avatar
dio5

Community Member, 501 Posts

23 September 2008 at 3:53am

Edited: 23/09/2008 3:55am

Style tags don't exist like you use them.

They only exist in the <head> to define actual styles in them, but not as a containing 'element' for content in the body.

So yes they are invalid.

http://htmldog.com/reference/htmltags/style/

Don't know a quick answer to yr question of how to do it though... but I think you should find a way of adding classes (look at tinymce) instead of invented custom elements.

cheerz

Avatar
Liam

Community Member, 470 Posts

23 September 2008 at 2:31pm

Heh, makes a huge difference to read it while not half asleep.

And yes I forgot editor.css imports typography.css as I have mine setup different, so that would work properly.