I have created the custom page Elements and Text Styles by using CSS,

Custom Page Elements

        -ms-name: "Custom story headline";
        font-family: 'Lato', sans-serif;
        color: #222222 !important;
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 0px !important;
        margin-top:0 !important;

Custom Text Styles

.ms-rteStyle-StoryContent {
    -ms-name: "Custom story content";
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    color: #32373b !important;
    margin: 0px 0px 10px 0px;
    line-height: 1.6;
.ms-rteStyle-StoryDateStamp {
    -ms-name: "Custom story date stamp";
    font-family: 'Lato', sans-serif;
    font-size: 10px;
    text-transform:uppercase !important;
    color: #818181 !important;
    font-weight:700 !important;
.ms-rteStyle-ReadMore {
    -ms-name: "Custom story read more";
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    color: #0640a3 !important;
    text-transform:uppercase !important;
.ms-rteStyle-LoadMoreBtn {
    -ms-name: "Custom load more";
    padding:15px 40px;
    border:2px solid #fff;
    -webkit-transition: border 0.3s ease;
    -moz-transition: border 0.3s ease;
    -o-transition: border 0.3s ease;
    transition: border 0.3s ease;

It's Showing Look Like Below Image

enter image description here

Is this Possible to rearrange the Custom Page Elements and Text Styles Showing Default ?

Like Custom Story Heading(Market at red Line) at Top Position.

I tried some methods it doesn't work, could you please help me in that situation ?

1 Answer 1


You should follow the below points to rearrange the Page Element and Text Style Order

  1. You should add the Custom Stylesheet Link before Corev15.css
  2. Stylesheet in custom master page Link should have ms-design-css-conversion="no" - Tag to avoid sharePoint reorder the stylesheet

Example tag look like below

    <link href="Your Custom Stylesheet path" rel="stylesheet" type="text/css" 
ms-design-css-conversion="no" />

SharePoint Automatically getting first loaded Page Element and Stylesheet based on the -ms-name code

Now your Custom Page Elements and Text Styles Loaded top of the format Tab

If you want to hide the Default Page Element and Text Styles

For Page Element

 H1.ms-rteElement-H1 { -ms-element:"false"; }
 H2.ms-rteElement-H2 { -ms-element:"false"; }
 H3.ms-rteElement-H3 { -ms-element:"false"; }
 H4.ms-rteElement-H4 { -ms-element:"false"; }
 H1.ms-rteElement-H1B { -ms-element:"false"; }
 H2.ms-rteElement-H2B{ -ms-element:"false"; }
 H3.ms-rteElement-H3B{ -ms-element:"false"; }
 H4.ms-rteElement-H4B{ -ms-element:"false";}

/* Hidden Text Style */

.ms-rteStyle-Normal {-ms-element:"false";}
.ms-rteStyle-Quote {-ms-element:"false"; }
.ms-rteStyle-IntenseQuote { -ms-element:"false"; }
.ms-rteStyle-Emphasis { -ms-element:"false"; }
.ms-rteStyle-IntenseEmphasis { -ms-element:"false"; }
.ms-rteStyle-References {  -ms-element:"false";}
.ms-rteStyle-IntenseReferences { -ms-element:"false"; }
.ms-rteStyle-Accent1 { -ms-element:"false"; }
.ms-rteStyle-Accent2 { -ms-element:"false";}

Finally, we have Modified the SharePoint 2013 Ribbon Styles.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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