Advanced Search

Sharepoint 2010 Custom Class For Content Editor Web Part Css Syntax

/ Published in: CSS
Save to your folder(s)
Further below in the code are the default style declarations that can be overridden in custom css. To create custom classes that will be available in the rich text editors, follow the example below:


.ms-rteElement-appleRed {
color:red;
-ms-name:"appleRed";
}

Note: for the above custom-named style to appear in the rich text editor, it must live in a css file linked directly from the master page. That is, it will not work if it lives in a css file that is linked via an @import in another css file.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. h1.ms-rteElement-H1 {
  2. }
  3. .ms-rteElement-H1 {
  4. font-size:2em;
  5. font-weight:normal;
  6. }
  7.  
  8. h2.ms-rteElement-H2 {
  9. }
  10. .ms-rteElement-H2 {
  11. font-size:1.3em;
  12. font-weight:normal;
  13. }
  14. h3.ms-rteElement-H3 {
  15. }
  16. .ms-rteElement-H3 {
  17. font-size:1em;
  18. }
  19. h4.ms-rteElement-H4 {
  20. }
  21. .ms-rteElement-H4 {
  22. font-size:1em;
  23. font-style:italic;
  24. font-weight:normal;
  25. }
  26. h1.ms-rteElement-H1B {
  27. }
  28. .ms-rteElement-H1B {
  29. color:#0072BC;
  30. font-size:2em;
  31. font-weight:normal;
  32. }
  33. h2.ms-rteElement-H2B {
  34. }
  35. .ms-rteElement-H2B {
  36. color:#CA0078;
  37. font-size:1.3em;
  38. font-weight:normal;
  39. }
  40. h3.ms-rteElement-H3B {
  41. }
  42. .ms-rteElement-H3B {
  43. color:#0093CA;
  44. font-size:2.2em;
  45. }
  46. h4.ms-rteElement-H4B {
  47. }
  48. .ms-rteElement-H4B {
  49. color:#058036;
  50. font-size:1em;
  51. font-style:italic;
  52. font-weight:normal;
  53. }
  54. hr.ms-rteElement-Hr {
  55. }
  56. .ms-rteElement-Hr {
  57. background-color:#B6B6B6;
  58. height:1px;
  59. }
  60. p.ms-rteElement-P {
  61. }
  62. .ms-rteElement-P {
  63. color:#576170;
  64. }
  65. div.ms-rteElement-Callout1 {
  66. }
  67. .ms-rteElement-Callout1 {
  68. background-color:#FEF4E4;
  69. border:1px solid #FD9F08;
  70. float:left;
  71. padding:10px;
  72. width:25em;
  73. }
  74. div.ms-rteElement-Callout2 {
  75. }
  76. .ms-rteElement-Callout2 {
  77. background-color:#F2F2F2;
  78. border:1px solid #36B000;
  79. color:#353738;
  80. float:right;
  81. padding:10px;
  82. width:25em;
  83. }
  84. div.ms-rteElement-Callout3 {
  85. }
  86. .ms-rteElement-Callout3 {
  87. color:#CA0078;
  88. float:right;
  89. font-style:italic;
  90. padding:10px;
  91. width:25em;
  92. }
  93. div.ms-rteElement-Callout4 {
  94. }
  95. .ms-rteElement-Callout4 {
  96. background-color:#D8F4FF;
  97. border:1px solid #00ADEE;
  98. color:#005677;
  99. float:right;
  100. font-family:Verdana,Geneva,sans-serif;
  101. padding:10px;
  102. width:20em;
  103. }
  104. .ms-rteStyle-Normal {
  105. background-color:#FFFFFF;
  106. color:#676767;
  107. font-family:Verdana,Arial,sans-serif;
  108. font-size:8pt;
  109. }
  110. .ms-rteStyle-Highlight {
  111. background-color:#FAE032;
  112. color:#312A26;
  113. }
  114. .ms-rteStyle-Byline {
  115. color:#B6B6B6;
  116. }
  117. .ms-rteStyle-Tagline {
  118. color:#8B8B8B;
  119. font-size:1.3em;
  120. }
  121. .ms-rteStyle-Comment {
  122. color:#36B000;
  123. font-style:italic;
  124. text-shadow:0 0 5px #000000;
  125. }
  126. .ms-rteStyle-References {
  127. color:#828282;
  128. }
  129. .ms-rteStyle-Caption {
  130. color:#00ADEE;
  131. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.