Branding Problem SP2013 – Snippets
My problem is that even though I have added a custom css class tags assigned to a snippet during the customization tasks in the design manager, styles I apply in my Style sheet do not seem to be applied.
Steps Taken
- Verified using IE Dev tools that I can see my custom style sheet is being referenced in other spots
- Style sheets, page layouts, and master pages have had major versions published
- custom css class is being transferred to snippet code into page layout
Any ideas on what I may be experiencing?
Thanks
-schuess
Thank God I’m Not Going Crazy!!
Calling this a mistake is not nearly as satisfying since i spent the last 2 days trying to figure out what i was doing wrong.
Thank you so much for your understanding of SharePoint and taking the time out of your busy day to explain it.
And, no worries, wrapping a container div around the snippet does apply just fine.
<div class=”pageImage”>snippet</div> — This works.
omg, why is this an available field to alter, ahhhhhhh!!!!
thanks again Eric.
The fact that the CSSClass field is available for the different field controls such as RichImageField is a mistake in SP. When you set CSSClass in a control such as:
<!–MS:<PageFieldRichImageField:RichImageField runat=”server” CssClass=”ms-long custom” FieldName=”3de94b06-4120-41a5-b907-88773e493458″>–>
The class ms-long or custom would never be actually rendered in html when sent to the client/browser. These custom classes are not used in edit mode either. The property is available because of the control that RichImageField derives from, but otherwise is not used by most field controls. Therefore, do not set the CssClass property for most field controls because it won’t do anything.
So the only solution I can come up with you wrapping your RichImageField in a wrapper such as suggested before. Why this did not work for you, I cannot say off hand. You can try adding !important to your style, such as:
.pageImage img {float:left !important;}
Since that is not the preferred method, I would say that something else is overriding your float property. Use your favorite dev tool bar such as firebug and look at everything that is providing styles for that particular image. There must be another more targeted style changing the float value, or your DOM is not exactly what you expect.
Eric
Update: This problem seems to only exist on Page Layout Snippets rather than Master Page Snippets.
When i applied a class to the CssClass snippet customization of the Vertical Navigation snippet located on the master page. I found my class in the page sources. Working.
When i do the same thing to a Page Image, or Article Date which are Page Fields located on the Page Layout Snippet section, the class never shows up on the page source.
<div class=”pageImage”>snippet</div> — This works.
Original but edit Style sheet with .pageImage img {float:left;} — Doesn’t work
add the class=”pageImage” to the snippet not using cssClass? — Doesn’t work, error:
Sorry, something went wrong Type ‘Microsoft.SharePoint.Publishing.WebControls.RichImageField’ does not have a public property named ‘class’.
——————-
So i guess as a work around i can surround my snippets with the classes that i want applied.
I just don’t understand why customizing the snippet with a class does not work.
-thanks
Maybe not the best solution but you can always choose to add a container div
<div class=”pageImage”>
snippet
</div>
Next target the image with class plus the element like: .pageImage img {float:left;}
Else you can maybe even add the class=”pageImage” to the snippet not using cssClass?
