{"id":2849,"date":"2011-06-08T07:25:05","date_gmt":"2011-06-08T07:25:05","guid":{"rendered":"http:\/\/jellywp.com\/theme\/entron\/demo5\/?p=2849"},"modified":"2011-06-08T07:25:05","modified_gmt":"2011-06-08T07:25:05","slug":"adding-custom-styles-to-ribbons-styles-dropdown","status":"publish","type":"post","link":"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/adding-custom-styles-to-ribbons-styles-dropdown\/","title":{"rendered":"Adding Custom Styles to Ribbon\u2019s Styles dropdown"},"content":{"rendered":"<p>The cool part about SP2010 is that as soon as it sees styles in the custom CSS file, it will add it to the Style drop-down, I made a quick documentation for a colleague so I thought would blog it as well.<\/p>\n<p>You see the \u201cStyles\u201d in the Ribbon that is where I want to add my custom styles<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/wp-content\/uploads\/2016\/12\/1_-1.jpg\" alt=\"\" width=\"640\" height=\"483\" class=\"alignnone size-full wp-image-3514\" \/><\/p>\n<p>This is a 2 step process:<\/p>\n<p>1. All the custom styles in the custom CSS file should have the prefix .ms-rtestyle- and the value specified in the \u2013ms-name: attribute will be displayed in the above dropdown<\/p>\n<p>.ms-rteStyle-header {<\/p>\n<p>-ms-name:&#8221;My Custom Header&#8221;; <\/p>\n<p>font-family: Calibri;<\/p>\n<p>font-size: 19pt;<\/p>\n<p>font-weight: normal;<\/p>\n<p>color: #ef383f;<\/p>\n<p>}<\/p>\n<p>2. There are 2 ways to attach your Custom CSS file to the master page <\/p>\n<p>Option 1: Either specify the custom CSS file as an alternate CSS file by going to CA\\Site Settings\\ Look and Feel\\ Master Page ( you will have to activate the publishing feature for this option to be available)<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/wp-content\/uploads\/2016\/12\/2_-1.jpg\" alt=\"\" width=\"400\" height=\"239\" class=\"alignnone size-full wp-image-3515\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/wp-content\/uploads\/2016\/12\/3_.jpg\" alt=\"\" width=\"400\" height=\"239\" class=\"alignnone size-full wp-image-3516\" \/><\/p>\n<p>OR <\/p>\n<p>Option 2: Just add a Link to the CSS file in the master page<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/wp-content\/uploads\/2016\/12\/4_.jpg\" alt=\"\" width=\"613\" height=\"65\" class=\"alignnone size-full wp-image-3517\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The cool part about SP2010 is that as soon as it sees styles in the custom CSS file, it will add it to the Style drop-down, I made a quick documentation for a colleague so I thought would blog it as well. You see the \u201cStyles\u201d in the Ribbon that is where I want to [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/wp-json\/wp\/v2\/posts\/2849"}],"collection":[{"href":"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/wp-json\/wp\/v2\/comments?post=2849"}],"version-history":[{"count":0,"href":"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/wp-json\/wp\/v2\/posts\/2849\/revisions"}],"wp:attachment":[{"href":"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/wp-json\/wp\/v2\/media?parent=2849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/wp-json\/wp\/v2\/categories?post=2849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/wp-json\/wp\/v2\/tags?post=2849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}