Adding Custom CSS

The Code Editor allows you to add custom CSS styles to your DigiFlash site without modifying theme files. CSS snippets apply styling changes across your entire site.

Creating a CSS Snippet

Navigate to Code Snippets in your WordPress admin menu and click Add New. This opens the code snippet editor where you’ll create your custom CSS.

Enter a descriptive title for your snippet in the title field at the top. Use names that clearly identify what the CSS does, such as “Custom Button Hover Effects” or “Mobile Menu Styling” so you can easily find and manage snippets later.

In the Code Type dropdown, select CSS. This tells DigiFlash Pro to treat your code as stylesheet rules.

Configuring CSS Location

After selecting CSS as the code type, you must choose how the CSS will load on your site. The CSS Location dropdown appears with two options:

Head Section – Adds your CSS inline within <style> tags in the site header. This method works well for small snippets and loads the CSS directly in the HTML without creating additional files.

Enqueue as File – Saves your CSS as a physical file in the uploads directory and enqueues it properly using WordPress standards. This method is better for larger CSS snippets and allows browser caching of the stylesheet.

Select the location that best fits your needs. For most custom styling, Head Section works perfectly fine. Use Enqueue as File when you have substantial CSS or want to leverage browser caching.

Writing Your CSS Code

Click into the large code editor area and write your CSS rules. The editor provides syntax highlighting to make your code easier to read and identify any errors.

You can write any valid CSS including selectors, properties, media queries, and custom styles. The CSS applies to your entire site once the snippet is published and active.

Here are some common CSS customization examples:

Changing Link Colors

a {
    color: #3366cc;
}

a:hover {
    color: #ff6600;
}

Customizing Button Styles

.wp-block-button__link {
    border-radius: 25px;
    padding: 15px 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

Adding Custom Spacing

.wp-block-post-content {
    margin-bottom: 60px;
}

.wp-block-heading {
    margin-top: 40px;
    margin-bottom: 20px;
}

Hiding Elements

.site-footer .wp-block-social-links {
    display: none;
}

Mobile-Specific Styles

@media (max-width: 768px) {
    .wp-block-columns {
        flex-direction: column;
    }
    
    .site-header {
        padding: 15px;
    }
}

Custom Font Styling

h1, h2, h3, h4, h5, h6 {
    font-family: 'Arial', sans-serif;
    font-weight: 700;
}

body {
    line-height: 1.8;
}

Custom Animations

.wp-block-button__link {
    transition: all 0.3s ease;
}

.wp-block-button__link:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

Publishing Your CSS Snippet

Once you’ve written your CSS code and selected the location, click Publish to activate the snippet. The CSS loads immediately on your site’s frontend and applies your custom styles.

If you want to save the snippet without activating it yet, click Save Draft instead. This stores your CSS without loading it on the live site.

Testing Your CSS

After publishing, visit your site’s frontend to verify your CSS applies correctly. Open different pages to ensure the styles work across your entire site as expected.

If something doesn’t look right, return to Code Snippets, click Edit on your CSS snippet, and modify the code. Click Update to save changes, which apply immediately to your live site.

Managing Multiple CSS Snippets

You can create unlimited CSS snippets, each handling different aspects of your site’s styling. Organize snippets by purpose such as “Header Styles”, “Footer Customization”, “Mobile Adjustments”, or “Color Overrides”.

Each snippet can be independently enabled or disabled from the Code Snippets list. This makes it easy to test styling changes by temporarily deactivating specific snippets without deleting the code.

Understanding CSS Specificity

Your custom CSS may not apply if existing styles have higher specificity. If your styles don’t work, increase specificity by adding more specific selectors or using !important as a last resort.

For example, if .button { color: blue; } doesn’t work, try .wp-block-button .wp-block-button__link { color: blue !important; } for higher specificity.