Posted By

rumremix on 12/23/10


Tagged

css content editor web syntax part custom sharepoint 2010 cewp sharepoint-2010


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

DCalabrese
jlaws0n


Sharepoint 2010 Custom Class For Content Editor Web Part Css Syntax


 / Published in: CSS
 

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.

  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  

You need to login to post a comment.