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!