Custom Web Part Styling

Every Sprocket web part now includes a Styles section in its property pane, giving you precise control over the appearance of individual web part instances. This powerful feature allows you to customize web parts beyond their standard configuration options using CSS.

Overview

The custom styling feature provides two complementary methods for customizing web parts:

Method	Best For	Scope
Custom CSS Class	Reusable styles across multiple web parts	Site-wide (defined in global CSS)
Custom Styles	Unique styling for a specific web part instance	Single web part instance (automatically scoped)

---

Accessing the Styles Section

The Styles section is available in all Sprocket web parts:

1. Edit your SharePoint page
2. Click on a Sprocket web part to select it
3. Click the Edit pencil icon to open the property pane
4. Scroll to the Styles section (usually at the bottom of the property pane)

You'll see two fields:

• Custom Styles: A code editor for writing CSS
• Custom CSS Class: A text field for adding class names

---

Custom CSS Class

The Custom CSS Class field allows you to add one or more CSS class names that will be applied to the web part's root element.

How to Use Custom CSS Classes

1. Add the class name in the Custom CSS Class field (e.g., my-custom-webpart)
2. Define the class in your site's global Custom CSS:
   • Go to Sprocket Settings (gear icon at bottom left)
   • Navigate to Advanced tab
   • Add your CSS to the Custom CSS field
3. Publish your changes

Example

In the web part's Custom CSS Class field:

highlighted-section

In Sprocket Settings > Advanced > Custom CSS:

.highlighted-section {
    background-color: #fff4e6;
    border-left: 4px solid #ff9800;
    padding: 20px;
    border-radius: 4px;
}

Benefits

• Reusability: Define once, use across multiple web parts
• Consistency: Maintain consistent styling across your site
• Maintainability: Update all instances by changing one CSS definition
• Multiple Classes: Add multiple space-separated class names (e.g., class-one class-two)

---

Custom Styles

The Custom Styles field provides a code editor where you can write CSS that applies only to the specific web part instance.

How to Use Custom Styles

1. Open the web part's property pane
2. Scroll to the Styles section
3. Click in the Custom Styles field to open the code editor
4. Write your CSS rules
5. Save the web part

Automatic Scoping

All CSS rules you write are automatically scoped to the specific web part instance. This means:

• Your styles won't affect other web parts or page elements
• You can use simple selectors without worrying about conflicts
• Each web part instance can have unique styling

What you write:

.webpart-body {
    background-color: #f0f0f0;
}

What gets applied:

#sprocket-webpart-instance-abc123 .webpart-body {
    background-color: #f0f0f0;
}

Supported CSS Features

The Custom Styles editor supports full CSS syntax:

• Standard selectors: .class, #id, element
• Pseudo-classes: :hover, :focus, :first-child
• Pseudo-elements: ::before, ::after
• Media queries: @media (max-width: 768px) { ... }
• Combinators: >, +, ~, (space)

---

Practical Examples

Example 1: Change Background and Text Color

.webpart-body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: 8px;
}

Example 2: Customize Spacing

.webpart-body {
    margin-bottom: 40px;
}

.webpart-title {
    margin-bottom: 20px;
    font-size: 24px;
}

Example 3: Hide Specific Elements

.webpart-title-container {
    display: none;
}

Example 4: Responsive Design

.webpart-body {
    padding: 20px;
}

@media (max-width: 768px) {
    .webpart-body {
        padding: 10px;
        font-size: 14px;
    }
}

Example 5: Add Custom Borders and Shadows

.webpart-body {
    border: 2px solid #e0e0e0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}

Example 6: Style Hover States

.webpart-body a {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.webpart-body a:hover {
    color: #004499;
    text-decoration: underline;
}

---

Best Practices

When to Use Custom CSS Class

• Reusable styles: When you want the same styling on multiple web parts
• Site-wide branding: When styles are part of your overall site design
• Team collaboration: When styles need to be managed centrally
• Complex style systems: When building a design system with multiple components

When to Use Custom Styles

• One-off customizations: Unique styling for a specific web part
• Quick adjustments: Fast tweaks without editing global CSS
• Instance-specific needs: When only one web part needs special styling
• Testing: Experimenting with styles before adding them globally

---

Inspecting Web Part Structure

To find the right CSS selectors for your customizations:

1. Open Browser Developer Tools:

   • Chrome/Edge: Press F12 or right-click and select "Inspect"
   • Firefox: Press F12 or right-click and select "Inspect Element"

2. Locate the web part: Click the inspect tool and hover over your web part

3. Examine the HTML structure: Look for class names and element structure

4. Test CSS in DevTools: Try your CSS rules in the Styles panel before adding them to the web part

---

Common Web Part Elements

Most Sprocket web parts share these common elements that you can style:

Element	Selector	Description
Web part container	.sprocket-365-webpart	The outermost container
Title container	.webpart-title-container	Contains the web part title
Title	.webpart-title	The web part title text
Body	.webpart-body	Main content area

Note: Each web part may have additional unique elements. Use browser developer tools to discover web part-specific selectors.

---