Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » CMS Editor -- Adding more CSS style options

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

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

Page: 1
Go to End
Author Topic: 2814 Views
  • JamesinCO
    Avatar
    Community Member
    14 Posts

    CMS Editor -- Adding more CSS style options Link to this post

    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!

  • Liam
    Avatar
    Community Member
    470 Posts

    Re: CMS Editor -- Adding more CSS style options Link to this post

    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.

  • JamesinCO
    Avatar
    Community Member
    14 Posts

    Re: CMS Editor -- Adding more CSS style options Link to this post

    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

  • dio5
    Avatar
    Community Member
    501 Posts

    Re: CMS Editor -- Adding more CSS style options Link to this post

    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

  • Liam
    Avatar
    Community Member
    470 Posts

    Re: CMS Editor -- Adding more CSS style options Link to this post

    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.

    2814 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.