none
Adding house styles to the Ribbon bar button: Markup Styles in a series of WIKI pages RRS feed

  • Question

  •  

    I have been presented with a series of wki pages. Now the requirement is to give the person who will be amending these, the ability to apply (department) inhouse styles via ribbon bar button.

    I detached one of the wiki pages from its master (Enterprise wiki) layout page. and made two attempts at getting a reference to the departmental custom css.

     

     

    method 1 link to static file in the sharepoint root<
    br
    />
    
    <!-- link type="text/css" rel="stylesheet" href="/_layouts/1033/styles/themable/hr/hrtoolkit3.css" / -->


    method 2 add to a folder in the style library (which is the best?)< br />
    < SharePoint : CssRegistration name = "<% $SPUrl:~site/Style Library/hr/hrtoolkit3.css %>" After = "corev4.css" runat = "server" />


     Now I understand that if the page load function detects styles with the prefix .ms-rteElement it will list the style in the "Apply Styles" ribbon bar - making it easy for my user to apply them.

     

    Firebug reports the syle sheet is available  but shows the styles are empty file in both case

    There are no rules. You can create a rule .

     

    My simple test style sheet is as follows

     

    /* _lcid="1033" _version="14.0.4536"*/


    /* Daniel Custom HR styes for the HR Toolkit */

    DIV.ms-rteElement-hrtk-H1
    {

    -ms-name: "Daniel's-header";
    color: #d65c26;
    font-family: Verdana,Geneva,sans-serif;
    font-weight: normal;
    font-size: 2em;
    }

    I am obviously doing something daft but I can't see what? help

     

    Daniel

    Thursday, February 10, 2011 10:48 AM

Answers

  • Haha this is a debatable question!  There's a bunch of different ways depending on what access do you have and whether you are after packaging etc etc

    Different ways to do it in masterpage.

    http://erikswenson.blogspot.com/2010/01/sharepoint-2010-css-references-in.html

     

    My preferences are:

    Simple.

    1. Put the CSS in /Style Library/hr/hrtoolkit3.css

    2. In Site Settings - set the site's Alternative CSS to this file.

     

    Package:

    Put this in the masterpage.

    <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/hr/hrtoolkit3.css %>" After="corev4.css" runat="server"/> 

     

    In publishing sites - you can update the pagelayout and as long as you publish the new layout, existing pages will use the new layout (including additional CSSRegistration) no problems.

    If you are worried about modifying an existing out of the box page layout and want to customize a new one - then yes you do need to switch the pages to the new page layout.  Unfortunately, I don't think you can do this to 40 pages in one hit.  

    Consider modifying the masterpage instead of the pagelayout, if modifying 40 pages sounds too crazy.

     

     

    Will be interesting to hear other people's thoughts, but I personally don't like putting stuff in _layouts because that involves talking to sys admins :-)

    /dev to my dying breath!


    jliu - johnliu.net - sharepointgurus.net
    Monday, February 14, 2011 3:41 PM

All replies

  • Hi Daniel,

    There are two customizations.

    .ms-rteStyle-MyStyle

    {

    -ms-name: "My Style";

    }

    This one appears in the Apply Styles ribbon bar.

     

    DIV.ms-rteElement-MyMarkup

    {

    -ms-name: "My Markup";

    }

     

    This one appears in the Markup Styles ribbon bar.

    There's a subtle difference.  Style basically attaches the corresponding CSS class to the current selected element in the rich editor.

    Markup Style converts the current selected element when appropriate into the specified HTML element tag.  So

     

    H1.ms-rteElement-MyHeader1

    {

    -ms-name: "My Header1";

    }

    Will convert the selected text into a <H1 class="ms-rteElement-Myheader1"> tag </H1>

     

    Also - sometimes due to caching, you may need to IISRESET before you can see the CSS appear for your site.

     

     


    jliu - johnliu.net - sharepointgurus.net
    Friday, February 11, 2011 11:00 AM
  • John

     

    Thanks.  That does make things a lot clearer.  The next question I guess is where do I place my custom style sheet.

     

    1) By navigating to SharePoint_root on one of my app servers and droping in my .css is a suitable sub directory and adding a ref  the is to the .aspx

     href="/_layouts/1033/styles/themable/hr/hrtoolkit3.css
    

     

    2) or creating a folder in Site Collection/Style Libary and adding a  CSSRegistration tag to .aspx

    <CssRegistration name="<% $SPUrl:~site/Style Library/hr/hrtoolkit3.css %>" After="corev4.css"runat=server"/>

    . Now I think I have 40 individual .aspX of these to change so unless I  include either of the above two options  the Enterprise Wiki layout; page which would be bad practice,  I am guessing I have to detach and apply the changes. Can you please advise.

     

     

     

    Monday, February 14, 2011 2:28 PM
  • Haha this is a debatable question!  There's a bunch of different ways depending on what access do you have and whether you are after packaging etc etc

    Different ways to do it in masterpage.

    http://erikswenson.blogspot.com/2010/01/sharepoint-2010-css-references-in.html

     

    My preferences are:

    Simple.

    1. Put the CSS in /Style Library/hr/hrtoolkit3.css

    2. In Site Settings - set the site's Alternative CSS to this file.

     

    Package:

    Put this in the masterpage.

    <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/hr/hrtoolkit3.css %>" After="corev4.css" runat="server"/> 

     

    In publishing sites - you can update the pagelayout and as long as you publish the new layout, existing pages will use the new layout (including additional CSSRegistration) no problems.

    If you are worried about modifying an existing out of the box page layout and want to customize a new one - then yes you do need to switch the pages to the new page layout.  Unfortunately, I don't think you can do this to 40 pages in one hit.  

    Consider modifying the masterpage instead of the pagelayout, if modifying 40 pages sounds too crazy.

     

     

    Will be interesting to hear other people's thoughts, but I personally don't like putting stuff in _layouts because that involves talking to sys admins :-)

    /dev to my dying breath!


    jliu - johnliu.net - sharepointgurus.net
    Monday, February 14, 2011 3:41 PM
  • John

     

    Sorry  for not reporting back on this. I have been diverted with other priorities inc writing farm cleansing PowerShell scripts.. I should be able to give you an update on Wednesday.  Regarding your comments on stuff in _layouts.  I totally agree for the reason you gave and also when in comes to running Backup-SPSite commands for migrating from one env to another I am not sure this would  inc (file system) stuff in the _layouts. Finally,  the /Style Library is visible and can be subject to change control. 

     

    /dev is driving me to an early death!!!!!

     

     

    Daniel 

    Tuesday, February 22, 2011 11:05 AM
  •  

    John

     

     

    I can report a bit of progress. and it didn't take long! Thanks for your help.

     


    1. Added a test style to Style Library/hrtoolkit.css then  save, checkin and publish.
    2. H1.ms-rteElement-hrtk-H1 
      {
      	-ms-name:"HR TK Heading 1";
        font-family: Arial;
      	font-size: 2em;
      	color: #A71930;
      	font-weight: 600;
      }
      
    3. I created a new layout page in the Master Gallery called HREnterpriseWiki from EnterpriseWiki content type
    4. Open it in SPD and copied the contents from EnterpriseWiki
    5. Added a CssRegistration
    6. <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/hr/hrtoolkit3.css %>"
       After="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/page-layouts-21.css %>" runat="server"/>
      
         
    7. Checked save, checked in and approved 
    8. Went to my Wiki site and  Site Actions > Site Settings > Page layouts and site templates Then Pages on this site can only use these layouts . Here I add my HREnterpriseWiki layout to the right panel
    9. In Page > Library settings I ensured the HREnterpriseWiki was the default content type ( for all new wiki pages)
    10. Created a new test wiki pages and notice my new style in is the Ribbon Bar -> Markup Styles drop down yippeee!!!
    11. Open an existing page and clicked on  the Layouts ribbon button to change the layout to HREnterpriseWiki ... yes my style can be applied here too....
    12. Now have to go to each wiki page and change the layout.... hmmmm that will be fun ;-(

     

    Still confused about when I would ever use .ms-rteStyle  in placeo f .ms-rteElement  in the above context. So if you could please think of an example that would help (been a long day)

    .ms-rteStyle-MyStyle

    {

    -ms-name: "My Style";

    }

     

     

    Regards

    Daniel

    SharePoint Manager, NHS

    Monday, March 7, 2011 5:35 PM
  • You can use the Alternative CSS url available on the site to point to /Style Library/hr/hrtoolkit3.css

    That'll fix the problem of switching every page.

    If you are already using alternative css - add your rule to the end of the existing css.

     

     

    for the rteStyle - you can use this any time you want to apply some formatting to your selection, but don't want to change the tag.

     

    .ms-rteStyle-MyBox

    {

    -ms-name:"my box style";

    font-weight:bold;

    font-color: green;

    padding: 5px;

    border: 1px solid red;

    }

     


    jliu - johnliu.net - sharepointgurus.net
    Monday, March 7, 2011 8:44 PM