0

Summary

  • Added a "PrefixStyleSheet='my-style'" to a content area field in a page layout
  • Copied the table styles from the "HTMLEditorStyles.css" file
  • Renamed "ms-rte" to "my-style"

This is where it gets a touch confusing. The above doesn't work when using the default out of the box CSS, which looks like this:

.my-styleTable-4 {
   -ms-name:"Table Style 6 - Accent 1";
}
.my-styleTable-4,
.my-styleTable-4 > tbody > tr > td,
.my-styleTable-4 > tbody > tr > th{
    /* [ReplaceColor(themeColor:"ContentAccent1-Darker",opacity:"1")] */      border:1px solid #005594;
}
.my-styleTable-4 tr.my-styleTableHeaderRow-4,
.my-styleTable-4 tr.my-styleTableFooterRow-4,
.my-styleTable-4 tr.my-styleTableHeaderRow-4 > th,
.my-styleTable-4 tr.my-styleTableFooterRow-4 > th,
.my-styleTable-4 tr.my-styleTableFooterRow-4 > td{
  /* [ReplaceColor(themeColor:"ContentAccent1-Darker",opacity:"1")] */ background-color:#005594;
  /* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"1")] */ color:#fff;
}

The option simply doesn't even appear within the ribbon under the Table Design > Styles.

However, the following will work:

.my-styleTable-4 {
   -ms-name:"Table Style 6 - Accent 1";
   -ms-element:"True";
 }
.my-styleTable-4 {
    /* [ReplaceColor(themeColor:"ContentAccent1-Darker",opacity:"1")] */ border:1px solid #005594;
 }

Adding "ms-element:True" can even be removed here and it'll still work. What's interesting is that the styles will only work when all of the nested attributes in the default version are removed.

If I add a "my-styleTable-5" and copy the exact same code as seen for "my-StyleTable-4", it won't work. However, if i change "my-StyleTable-5" to not have a border, but a margin for example, it will work. It appears that anytime another class has the same attributes, or any children have the same as seen in the default styles at the top, it doesn't work....I'm lost for any further ideas.

Any help would be appreciated.

  • I did the same in previous projects and never had problems. Are the replacetags properly replaced by the theming engine? – Mx. Jan 17 '17 at 15:46
  • Hi Mx - Yup, a global find and replace on the ms-rte prefix to replace with my own. I then copied those files straight into a themable.css file. Nothing appears. – Tron Jan 17 '17 at 15:51
  • What's interesting is, if I were to copy the file and link to it directly in the page (through a CEWP for eg), the styles will appear in the ribbon (just not themed obviously) – Tron Jan 17 '17 at 15:54
  • Otherwise, whilst going through the themeing is loading the styles (as I can change them through the DOM). They aren't appearing in the ribbon. – Tron Jan 17 '17 at 16:11
  • :D that's not how it's done. Check out blogs.msdn.microsoft.com/sharepointdesigner/2010/04/09/… Or simply don't use replacetags but ordinary css. Also dont modify sharepoint files. You can add css by modifying the masterpage. – Mx. Jan 17 '17 at 16:16
3

Here's a complete example I extracted from a working solution.

Reference

Add the .js and the .css to the .master

 <!-- Must be located under Themable for the Theming Engine to work https://blogs.msdn.microsoft.com/sharepointdesigner/2010/04/09/working-with-the-sharepoint-theming-engine/ -->
<SharePoint:CssRegistration name="Themable/Client/Styles/styles.min.css" EnableCssTheming ="true" After="corev15.css" runat="server" Version="15"   />
<SharePoint:ScriptLink Language="javascript" runat="server" LoadAfterUI="true" Localizable="false" Name="Client/Scripts/script.min.js" />

JS

Client.Branding.RichTextEditor = {
    DisableRibbonElements: function () {
        /// <summary>
        /// This function sets the prefix for RTE controls
        /// </summary> 
        $('.ms-rtestate-write:not(.ms-rteflags-0)').attr(
            { 
                PrefixStyleSheet: 'yourprefix-'
            }
        );
    }
};

CSS

/*Font presets for RichtText Editor*/

/*overwrite the default font-family settings*/
.yourprefix-FontFace-1 {
    -ms-name: "Verdana";
    font-family: Verdana, Arial, sans-serif;
}

.yourprefix-ThemeFontFace-1 {
    -ms-name: "Verdana";
    font-family: Verdana, Arial, sans-serif;
}

/*overwrite the default font-size settings*/
.yourprefix-FontSize-1 {
    font-size: 1em;
}

/*overwrite the default font-color settings*/
.yourprefix-ThemeBackColor-1-0 {
    background-color: #333;
    -ms-color: "Grau";
}

/*Style presets*/
H1.yourprefix-Element-H1 {
    -ms-name: "Hauptüberschrift";
    font-size: 1.4em;
    /* [ReplaceColor(themeColor:"ContentAccent1")] */ color: #0072C6;
    font-weight: bold;
}

H2.yourprefix-Element-H2 {
    -ms-name: "Überschrift 2";
    font-size: 1.1em;
    /* [ReplaceColor(themeColor:"BodyText")] */ color: #444;
    font-weight: bold;
}

H2.yourprefix-Element-H2B {
    -ms-name: "Überschrift 2 Akzent 1";
    font-size: 1.1em;
    /* [ReplaceColor(themeColor:"ContentAccent1")] */ color: #0072C6;
    font-weight: bold;
}

H2.yourprefix-Element-H2C {
    -ms-name: "Überschrift 2 Akzent 2";
    font-size: 1.1em;
    /* [ReplaceColor(themeColor:"ContentAccent2")] */ color: #0072C6;
    font-weight: bold;
}

P.yourprefix-Element-P {
    -ms-name: "Fließtext";
    -ms-element: "true";
}

HR.yourprefix-Element-HR {
    -ms-name: "Trennlinie";
    -ms-element: "true";
}

.yourprefix-Style-Fliesstext {
    -ms-name: "Standard";
}

.yourprefix-Style-FliesstextB {
    -ms-name: "Kursiv";
    font-style: italic;
}

.yourprefix-Style-FliesstextC {
    -ms-name: "Akzent 1";
    /* [ReplaceColor(themeColor:"ContentAccent1")] */ color: #0072C6;
}

.yourprefix-Style-FliesstextD {
    -ms-name: "Akzent 2";
    /* [ReplaceColor(themeColor:"ContentAccent2")] */ color: #0072C6;
}

.yourprefix-Style-SUP {
    -ms-name: "Hochgestellt";
    vertical-align: super;
    font-size: smaller;
}

/*recreate standard styles*/

.yourprefix-Image-0 {
    -ms-name: "Ohne Rahmen";
}

.yourprefix-Image-1 {
    -ms-name: "Dünne Rahmenlinie";
    /* [ReplaceColor(themeColor:"BodyText",opacity:"1")] */ background-color: #444;
    /* [ReplaceColor(themeColor:"BodyText-Darker",opacity:"1")] */ border: 1px solid #333;
    /* [RecolorImage(themeColor:"SubtleBodyText",method:"Tinting")] */ background-image: url("/_layouts/15/images/tabtitlerowbottombg.png?rev=23");
    background-repeat: repeat-x;
    background-position: top;
}

.yourprefix-Image-2 {
    -ms-name: "Tabellenrahmen";
    padding: 2px;
    /* [ReplaceColor(themeColor:"SubtleLines")] */ border-top: 1px solid #c6c6c6;
    /* [ReplaceColor(themeColor:"Lines")] */ border-bottom: 1px solid #ababab;
    /* [ReplaceColor(themeColor:"SubtleLines")] */ border-left: 1px solid #c6c6c6;
    /* [ReplaceColor(themeColor:"Lines")] */ border-right: 1px solid #ababab;
}

.yourprefix-Image-3 {
    -ms-name: "Dunkler Rahmen";
    padding: 15px;
    /* [ReplaceColor(themeColor:"BodyText-Darker",opacity:"1")] */ background-color: #333;
    /* [ReplaceColor(themeColor:"BodyText",opacity:"1")] */ border: 1px solid #444;
    /* [RecolorImage(themeColor:"BodyText-Darker",method:"Tinting")] */ background-image: url("/_layouts/15/images/tabtitlerowbottombg.png?rev=23");
    background-attachment: fixed;
    background-repeat: repeat-x;
    background-position: left bottom;
}

.yourprefix-Image-4 {
    -ms-name: "Heller Rahmen";
    padding: 6px;
    padding-bottom: 33px;
    /* [ReplaceColor(themeColor:"BackgroundOverlay-Lightest",opacity:"1")] */ background-color: #F2F2F2;
    /* [ReplaceColor(themeColor:"SubtleLines")] */ border-top: 1px solid #c6c6c6;
    /* [ReplaceColor(themeColor:"Lines")] */ border-bottom: 1px solid #ababab;
    /* [ReplaceColor(themeColor:"SubtleLines")] */ border-left: 1px solid #c6c6c6;
    /* [ReplaceColor(themeColor:"Lines")] */ border-right: 1px solid #ababab;
    background-image: url("/_layouts/15/images/selbg.png?rev=23");
    background-repeat: repeat-x;
    background-position: top;
}

.yourprefix-Table-default > tbody > tr > td,
.yourprefix-Table-default > tbody > tr > th,
.yourprefix-Table-0 > tbody > tr > td,
.yourprefix-Table-0 > tbody > tr > th,
.yourprefix-Table-1 > tbody > tr > td,
.yourprefix-Table-1 > tbody > tr > th,
.yourprefix-Table-2 > tbody > tr > td,
.yourprefix-Table-2 > tbody > tr > th,
.yourprefix-Table-3 > tbody > tr > td,
.yourprefix-Table-3 > tbody > tr > th,
.yourprefix-Table-4 > tbody > tr > td,
.yourprefix-Table-4 > tbody > tr > th,
.yourprefix-Table-5 > tbody > tr > td,
.yourprefix-Table-5 > tbody > tr > th,
.yourprefix-Table-6 > tbody > tr > td,
.yourprefix-Table-6 > tbody > tr > th,
.yourprefix-Table-7 > tbody > tr > td,
.yourprefix-Table-7 > tbody > tr > th,
.yourprefix-Table-8 > tbody > tr > td,
.yourprefix-Table-8 > tbody > tr > th,
.yourprefix-Table-9 > tbody > tr > td,
.yourprefix-Table-9 > tbody > tr > th,
.yourprefix-Table-10 > tbody > tr > td,
.yourprefix-Table-10 > tbody > tr > th {
    vertical-align: top;
    padding: 7px 5px 6px;
}

.yourprefix-Table-default > tbody > tr > th,
.yourprefix-Table-default > tbody > tr.yourprefix-TableFooterRow-default,
.yourprefix-Table-0 > tbody > tr > th,
.yourprefix-Table-0 > tbody > tr.yourprefix-TableFooterRow-0,
.yourprefix-Table-1 > tbody > tr > th,
.yourprefix-Table-1 > tbody > tr.yourprefix-TableFooterRow-1,
.yourprefix-Table-2 > tbody > tr > th,
.yourprefix-Table-2 > tbody > tr.yourprefix-TableFooterRow-2,
.yourprefix-Table-3 > tbody > tr > th,
.yourprefix-Table-3 > tbody > tr.yourprefix-TableFooterRow-3,
.yourprefix-Table-4 > tbody > tr > th,
.yourprefix-Table-4 > tbody > tr.yourprefix-TableFooterRow-4,
.yourprefix-Table-5 > tbody > tr > th,
.yourprefix-Table-5 > tbody > tr.yourprefix-TableFooterRow-5,
.yourprefix-Table-6 > tbody > tr > th,
.yourprefix-Table-6 > tbody > tr.yourprefix-TableFooterRow-6,
.yourprefix-Table-7 > tbody > tr > th,
.yourprefix-Table-7 > tbody > tr.yourprefix-TableFooterRow-7,
.yourprefix-Table-8 > tbody > tr > th,
.yourprefix-Table-8 > tbody > tr.yourprefix-TableFooterRow-8,
.yourprefix-Table-9 > tbody > tr > th,
.yourprefix-Table-9 > tbody > tr.yourprefix-TableFooterRow-9,
.yourprefix-Table-10 > tbody > tr > th,
.yourprefix-Table-10 > tbody > tr.yourprefix-TableFooterRow-10 {
    /* [ReplaceColor(themeColor:"SubtleBodyText")] */ color: #777;
    text-align: left;
    font-weight: normal;
}

.yourprefix-tablecells {
    padding: 2px;
    vertical-align: top;
}

.yourprefix-Table-default {
    -ms-name: "Standardtabellenformat - Hell";
}

    .yourprefix-Table-default,
    .yourprefix-Table-default > tbody > tr > td,
    .yourprefix-Table-default > tbody > tr > th,
    td.yourprefix-Table-default,
    th.yourprefix-Table-default,
    .yourprefix-tablecells {
        /* [ReplaceColor(themeColor:"SubtleLines")] */ border: 1px solid #c6c6c6;
    }

.yourprefix-Table-0 {
    -ms-name: "Tabellenformat 1 - Durchsichtig";
    border-width: 0;
    border-style: none;
    border-collapse: collapse;
}

.yourprefix-Table-1 {
    -ms-name: "Tabellenformat 2 - Hell verbunden";
}

    .yourprefix-Table-1 tr.yourprefix-TableHeaderRow-1,
    .yourprefix-Table-1 tr.yourprefix-TableFooterRow-1,
    .yourprefix-Table-1 tr.yourprefix-TableHeaderRow-1 > th,
    .yourprefix-Table-1 tr.yourprefix-TableFooterRow-1 > th,
    .yourprefix-Table-1 tr.yourprefix-TableFooterRow-1 > td {
        /* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"1")] */ background-color: #fff;
        /* [ReplaceColor(themeColor:"BackgroundOverlay")] */ background-color: rgba( 255,255,255,0.85 );
        /* [ReplaceColor(themeColor:"Lines")] */ border-top: 1px solid #ababab;
        /* [ReplaceColor(themeColor:"Lines")] */ border-bottom: 1px solid #ababab;
    }

    .yourprefix-Table-1 tr.yourprefix-TableOddRow-1 {
        /* [ReplaceColor(themeColor:"BackgroundOverlay-Lighter")] */ background-color: #D8D8D8;
    }

    .yourprefix-Table-1 tr.yourprefix-TableEvenRow-1 {
        /* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"1")] */ background-color: #fff;
        /* [ReplaceColor(themeColor:"BackgroundOverlay")] */ background-color: rgba( 255,255,255,0.85 );
    }

.yourprefix-Table-6 {
    -ms-name: "Tabellenformat 3 - Mittel Zweiton";
}

    .yourprefix-Table-6 tr.yourprefix-TableHeaderRow-6,
    .yourprefix-Table-6 tr.yourprefix-TableFooterRow-6,
    .yourprefix-Table-6 tr.yourprefix-TableHeaderRow-6 > th,
    .yourprefix-Table-6 tr.yourprefix-TableFooterRow-6 > th,
    .yourprefix-Table-6 tr.yourprefix-TableFooterRow-6 > td {
        /* [ReplaceColor(themeColor:"ContentAccent1-Darker")] */ background-color: #005594;
        /* [ReplaceColor(themeColor:"BackgroundOverlay")] */ color: #fff;
    }

    .yourprefix-Table-6 tr.yourprefix-TableOddRow-6 {
        /* [ReplaceColor(themeColor:"ContentAccent1-Lightest",opacity:"0.7")] */ background-color: #C0E4FF;
    }

    .yourprefix-Table-6 tr.yourprefix-TableEvenRow-6 {
        /* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"0.7")] */ background-color: rgba( 255,255,255,0.85 );
    }

.yourprefix-Table-2 {
    -ms-name: "Tabellenformat 4 - Helle Linien";
}

    .yourprefix-Table-2 tr.yourprefix-TableHeaderRow-2,
    .yourprefix-Table-2 tr.yourprefix-TableFooterRow-2,
    .yourprefix-Table-2 tr.yourprefix-TableHeaderRow-2 > th,
    .yourprefix-Table-2 tr.yourprefix-TableFooterRow-2 > th,
    .yourprefix-Table-2 tr.yourprefix-TableFooterRow-2 > td {
        /* [ReplaceColor(themeColor:"BodyText")] */ background-color: #444;
        /* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"1")] */ color: #fff;
    }

    .yourprefix-Table-2 tr.yourprefix-TableOddRow-2,
    .yourprefix-Table-2 tr.yourprefix-TableEvenRow-2 {
        /* [ReplaceColor(themeColor:"StrongLines")] */ border-top: 1px solid #92c0e0;
        /* [ReplaceColor(themeColor:"StrongLines")] */ border-bottom: 1px solid #92c0e0;
    }

.yourprefix-Table-3 {
    -ms-name: "Tabellenformat 5 - Raster";
}

    .yourprefix-Table-3,
    .yourprefix-Table-3 > tbody > tr > td,
    .yourprefix-Table-3 > tbody > tr > th {
        /* [ReplaceColor(themeColor:"Lines")] */ border: 1px solid #ababab;
    }

        .yourprefix-Table-3 tr.yourprefix-TableOddRow-3 {
            /* [ReplaceColor(themeColor:"BackgroundOverlay-Lighter")] */ background-color: #D8D8D8;
        }

        .yourprefix-Table-3 tr.yourprefix-TableHeaderRow-3,
        .yourprefix-Table-3 tr.yourprefix-TableFooterRow-3,
        .yourprefix-Table-3 tr.yourprefix-TableEvenRow-3 {
            /* [ReplaceColor(themeColor:"BackgroundOverlay")] */ background-color: rgba( 255,255,255,0.85 );
        }

.yourprefix-Table-4 {
    -ms-name: "Tabellenformat 6 - Akzent 1";
}

    .yourprefix-Table-4,
    .yourprefix-Table-4 > tbody > tr > td,
    .yourprefix-Table-4 > tbody > tr > th {
        /* [ReplaceColor(themeColor:"ContentAccent1-Darker",opacity:"1")] */ border: 1px solid #005594;
    }

        .yourprefix-Table-4 tr.yourprefix-TableHeaderRow-4,
        .yourprefix-Table-4 tr.yourprefix-TableFooterRow-4,
        .yourprefix-Table-4 tr.yourprefix-TableHeaderRow-4 > th,
        .yourprefix-Table-4 tr.yourprefix-TableFooterRow-4 > th,
        .yourprefix-Table-4 tr.yourprefix-TableFooterRow-4 > td {
            /* [ReplaceColor(themeColor:"ContentAccent1-Darker",opacity:"1")] */ background-color: #005594;
            /* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"1")] */ color: #fff;
        }

.yourprefix-Table-5 {
    -ms-name: "Tabellenformat 7 - Akzent 2";
}

    .yourprefix-Table-5,
    .yourprefix-Table-5 > tbody > tr > td,
    .yourprefix-Table-5 > tbody > tr > th {
        /* [ReplaceColor(themeColor:"ContentAccent2-Darker",opacity:"1")] */ border: 1px solid #009AC3;
    }

        .yourprefix-Table-5 tr.yourprefix-TableHeaderRow-5,
        .yourprefix-Table-5 tr.yourprefix-TableFooterRow-5,
        .yourprefix-Table-5 tr.yourprefix-TableHeaderRow-5 > th,
        .yourprefix-Table-5 tr.yourprefix-TableFooterRow-5 > th,
        .yourprefix-Table-5 tr.yourprefix-TableFooterRow-5 > td {
            /* [ReplaceColor(themeColor:"ContentAccent2-Darker",opacity:"1")] */ background-color: #009AC3;
            /* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"1")] */ color: #fff;
        }

.yourprefix-Table-7 {
    -ms-name: "Tabellenformat 8 - Akzent 3";
}

    .yourprefix-Table-7,
    .yourprefix-Table-7 > tbody > tr > td,
    .yourprefix-Table-7 > tbody > tr > th {
        /* [ReplaceColor(themeColor:"ContentAccent3-Darker",opacity:"1")] */ border: 1px solid #1D603F;
    }

        .yourprefix-Table-7 tr.yourprefix-TableHeaderRow-7,
        .yourprefix-Table-7 tr.yourprefix-TableFooterRow-7,
        .yourprefix-Table-7 tr.yourprefix-TableHeaderRow-7 > th,
        .yourprefix-Table-7 tr.yourprefix-TableFooterRow-7 > th,
        .yourprefix-Table-7 tr.yourprefix-TableFooterRow-7 > td {
            /* [ReplaceColor(themeColor:"ContentAccent3-Darker",opacity:"1")] */ background-color: #1D603F;
            /* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"1")] */ color: #fff;
        }

.yourprefix-Table-8 {
    -ms-name: "Tabellenformat 9 - Akzent 4";
}

    .yourprefix-Table-8,
    .yourprefix-Table-8 > tbody > tr > td,
    .yourprefix-Table-8 > tbody > tr > th {
        /* [ReplaceColor(themeColor:"ContentAccent4-Darker",opacity:"1")] */ border: 1px solid #585A40;
    }

        .yourprefix-Table-8 tr.yourprefix-TableHeaderRow-8,
        .yourprefix-Table-8 tr.yourprefix-TableFooterRow-8,
        .yourprefix-Table-8 tr.yourprefix-TableHeaderRow-8 > th,
        .yourprefix-Table-8 tr.yourprefix-TableFooterRow-8 > th,
        .yourprefix-Table-8 tr.yourprefix-TableFooterRow-8 > td {
            /* [ReplaceColor(themeColor:"ContentAccent4-Darker",opacity:"1")] */ background-color: #585A40;
            /* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"1")] */ color: #fff;
        }

.yourprefix-Table-9 {
    -ms-name: "Tabellenformat 10 - Akzent 5";
}

    .yourprefix-Table-9,
    .yourprefix-Table-9 > tbody > tr > td,
    .yourprefix-Table-9 > tbody > tr > th {
        /* [ReplaceColor(themeColor:"ContentAccent5-Darker",opacity:"1")] */ border: 1px solid #B10026;
    }

        .yourprefix-Table-9 tr.yourprefix-TableHeaderRow-9,
        .yourprefix-Table-9 tr.yourprefix-TableFooterRow-9,
        .yourprefix-Table-9 tr.yourprefix-TableHeaderRow-9 > th,
        .yourprefix-Table-9 tr.yourprefix-TableFooterRow-9 > th,
        .yourprefix-Table-9 tr.yourprefix-TableFooterRow-9 > td {
            /* [ReplaceColor(themeColor:"ContentAccent5-Darker",opacity:"1")] */ background-color: #B10026;
            /* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"1")] */ color: #fff;
        }

.yourprefix-Table-10 {
    -ms-name: "Tabellenformat 11 - Akzent 6";
}

    .yourprefix-Table-10,
    .yourprefix-Table-10 > tbody > tr > td,
    .yourprefix-Table-10 > tbody > tr > th {
        /* [ReplaceColor(themeColor:"ContentAccent6-Darker",opacity:"1")] */ border: 1px solid #4E1F5B;
    }

        .yourprefix-Table-10 tr.yourprefix-TableHeaderRow-10,
        .yourprefix-Table-10 tr.yourprefix-TableFooterRow-10,
        .yourprefix-Table-10 tr.yourprefix-TableHeaderRow-10 > th,
        .yourprefix-Table-10 tr.yourprefix-TableFooterRow-10 > th,
        .yourprefix-Table-10 tr.yourprefix-TableFooterRow-10 > td {
            /* [ReplaceColor(themeColor:"ContentAccent6-Darker",opacity:"1")] */ background-color: #4E1F5B;
            /* [ReplaceColor(themeColor:"BackgroundOverlay",opacity:"1")] */ color: #fff;
        }

.yourprefix-TableGrid td, .yourprefix-TableGrid th {
    border: 1px dotted black;
}

.yourprefix-Position-1 {
    -ms-name: "Links";
    float: left;
}

.yourprefix-Position-2 {
    -ms-name: "Rechts";
    float: right;
}

.yourprefix-Position-3 {
    -ms-name: "Oben";
    vertical-align: text-top;
}

.yourprefix-Position-4 {
    -ms-name: "Mitte";
    vertical-align: middle;
}

.yourprefix-Position-5 {
    -ms-name: "Unten";
    vertical-align: text-bottom;
}

/*may used in later versions*/
/*blockquote.yourprefix-Element-BLOCKQUOTE
{
  -ms-name:"Zitat";
  font-style:italic;
  background: #EEE;
  border-left: 5px solid #ccc;
  margin: 1.5em 10px;
  padding: 1em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote.yourprefix-Element-BLOCKQUOTE:before {
  color: #ccc;
  content: open-quote;
  font-size: 3.25em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote.yourprefix-Element-BLOCKQUOTE:after {
  content: no-close-quote;
}*/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.