Customize SharePoint 2013 Web Part Appearance With CSS

by Marco 55 views

Hey guys! Ever wanted to make your SharePoint 2013 site look less… SharePoint-y and more you-y? One of the coolest ways to do that is by tweaking the appearance of your web parts using CSS. Let’s dive into how you can use CSS to customize those document libraries and other web parts to match your site's overall vibe.

Understanding the Basics

Before we jump into the code, it’s important to understand a few key things. SharePoint uses a lot of CSS classes to style its elements, including web parts. To customize these, you'll need to identify the correct CSS classes that control the appearance of the specific web part elements you want to change. You can do this using your browser's developer tools (usually by pressing F12). Inspecting the elements will show you the classes applied to them.

  • CSS Classes: These are your targets. SharePoint uses a ton of them, so get comfy with your browser's developer tools. Right-click, inspect, and let the magic happen.
  • SharePoint Designer: This is a powerful tool for customizing SharePoint sites, including adding CSS. While you can directly edit the master page (not recommended for beginners!), a better approach is to use custom CSS files.
  • Content Editor Web Part (CEWP) or Script Editor Web Part: These let you inject CSS directly into a page. Super handy for quick changes and testing.

Identifying CSS Classes

Alright, so you want to change how a document library looks, huh? First things first, you need to figure out which CSS classes control its appearance. Here’s how you do it:

  1. Open the Page: Navigate to the page with the document library you want to customize.
  2. Inspect Element: Right-click on the specific part of the document library you want to change (like the header, the rows, or the borders) and select "Inspect" or "Inspect Element" (depending on your browser).
  3. Find the Class: The developer tools will pop up, showing you the HTML and CSS. Look for the CSS classes applied to that element. They usually start with ms- or s4-.
  4. Take Note: Write down the CSS classes you want to modify. You'll need these later to apply your custom styles.

For example, if you want to change the background color of the document library header, you might find a class like .ms-viewheadertr. If you want to change the font, you might look at classes applied to the table cells within the library.

Where to Add Your CSS

Okay, so you've got your CSS classes and you're ready to rock. Now, where do you actually put your CSS code?

  • Content Editor Web Part (CEWP): This is the easiest and quickest way to add CSS to a single page. Add a CEWP to the page, edit its source, and wrap your CSS in <style> tags. This is great for testing and small tweaks.

    <style type="text/css">
/* Your CSS here */
.ms-viewheadertr {
background-color: #f0f0f0 !important;
}
</style>

    Note: The !important tag is used to override existing styles. Use it sparingly, as it can make your CSS harder to maintain in the long run.

  • Script Editor Web Part: Similar to CEWP, but allows you to add JavaScript as well. This is useful if you want to add dynamic styling based on user interactions.

  • Custom CSS File: For more permanent and organized changes, create a custom CSS file and upload it to the Style Library or another accessible location in your SharePoint site. Then, reference this CSS file in your master page or page layout. This is the recommended approach for larger customizations.

    1. Create the CSS File: Create a new CSS file (e.g., custom.css) using a text editor and add your CSS code to it.
    2. Upload to Style Library: Upload the CSS file to the Style Library in your SharePoint site.
    3. Reference in Master Page or Page Layout:

      • Master Page: Open your master page in SharePoint Designer and add the following line within the <head> section:

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

      • Page Layout: If you're using a custom page layout, you can add the same line to the page layout instead.

Example CSS Snippets

Let's look at some practical examples of CSS you can use to change the appearance of web parts.

  • Change the Background Color of a Document Library Header:

    .ms-viewheadertr {
background-color: #e0e0e0 !important;
}

  • Change the Font Size and Color of Document Library Items:

    .ms-vb {
font-size: 14px !important;
color: #333 !important;
}

  • Add a Border to the Web Part:

    .ms-webpartPage-root {
border: 1px solid #ccc !important;
}

  • Customize the Appearance of the Web Part Title:

    .ms-WPTitle {
background-color: #f5f5f5 !important;
padding: 10px !important;
font-size: 1.2em !important;
}

Best Practices

  • Use Specificity: Be as specific as possible with your CSS selectors to avoid unintended side effects. Use more specific class names or combine multiple classes.
  • Test Thoroughly: Always test your CSS changes in a test environment before deploying them to a production environment.
  • Backup Your Site: Before making any major changes, back up your SharePoint site to prevent data loss.
  • Use Comments: Add comments to your CSS code to explain what each section does. This makes it easier to maintain and update your CSS in the future.
  • Avoid !important: Use !important sparingly, as it can make your CSS harder to maintain in the long run. Try to use more specific selectors instead.
  • Consider Responsiveness: Ensure your CSS changes are responsive and work well on different devices and screen sizes.

Troubleshooting

  • CSS Not Applying:
    • Cache Issues: Clear your browser cache and try again.
    • Specificity Issues: Make sure your CSS selectors are specific enough to override the default SharePoint styles.
    • CSS File Not Linked Correctly: Double-check that your CSS file is linked correctly in the master page or page layout.
  • Web Part Looks Broken:
    • Inspect Element: Use your browser's developer tools to inspect the web part and identify any CSS errors.
    • Revert Changes: If you're not sure what's causing the issue, try reverting your CSS changes one by one until the web part looks normal again.

Customizing the appearance of web parts in SharePoint 2013 using CSS can greatly enhance the user experience and align your site with your organization's branding. By understanding CSS basics, identifying the correct CSS classes, and following best practices, you can create a visually appealing and user-friendly SharePoint site. So go ahead, get creative, and make your SharePoint site shine!

Happy customizing, and remember to always test your changes! Have fun making your SharePoint site look awesome!