Working with CSS Snippets
Image to be inserted in the near future: Screenshot of the CSS snippet editor in Flexcode
CSS snippets allow you to customize the appearance of your WordPress site without editing theme files. This is perfect for making style adjustments, fixing layout issues, or adding custom designs that your theme doesn't support.
CSS snippets are a safe way to customize your site's appearance without touching theme files. This means your customizations won't be lost when you update your theme.
Creating a CSS Snippet
- Navigate to Flexcode
- Select the page where you want the CSS to apply from the page selector at the top (choose "Global" for all pages)
- Click Add File and name it with a .css extension (e.g., "custom-styles.css")
- Enter your CSS code in the editor
- Click Deploy Changes
Image to be inserted in the near future: Screenshot showing the process of adding a CSS file in Flexcode
Use descriptive file names that indicate what the CSS is for (e.g., "header-adjustments.css" instead of "style1.css"). This makes it much easier to manage multiple snippets as your collection grows.
Practical CSS Snippet Examples
Example 1: Custom Button Styling
File name: custom-buttons.css
.my-custom-button {
background-color: #4CAF50;
border: none;
color: white;
padding: 12px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.my-custom-button:hover {
background-color: #45a049;
cursor: pointer;
}
Page Selection: Global
Purpose: Create a custom button style that can be applied to any button or link with the class my-custom-button
Image to be inserted in the near future: Before/after comparison of the custom button styling
After adding this CSS, you'll need to apply the my-custom-button class to any elements you want to style as buttons. You can do this in your page editor or through HTML snippets.
Example 2: Responsive Fixes
File name: mobile-fixes.css
/* Fix navigation on mobile */
@media (max-width: 768px) {
.main-navigation {
padding: 10px 0;
}
.main-navigation .menu-item {
display: block;
margin: 5px 0;
}
.main-navigation .sub-menu {
position: static;
display: block;
opacity: 1;
visibility: visible;
box-shadow: none;
padding-left: 15px;
}
}
Page Selection: Global Purpose: Fix navigation menu issues on mobile devices
The class names used in this example (like .main-navigation and .menu-item) are common but may differ in your theme. Inspect your site's HTML structure to find the correct class names for your navigation elements.
Example 3: Custom Typography
File name: typography.css
/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
/* Apply to headings */
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: -0.5px;
}
/* Apply to body text */
body, p, li, a {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
line-height: 1.6;
}
Page Selection: Global Purpose: Change the typography of your entire site
Image to be inserted in the near future: Before/after comparison of the typography changes
For better performance, consider using the font-display: swap property in your font imports. This improves perceived loading time by showing a system font while your custom font loads.
Example 4: Hide Elements
File name: visibility-controls.css
/* Hide sidebar on specific pages */
.page-id-123 .sidebar,
.page-id-456 .sidebar {
display: none;
}
/* Hide elements with a specific class */
.hide-on-desktop {
display: none;
}
/* Show elements only on mobile */
@media (max-width: 768px) {
.hide-on-desktop {
display: block;
}
.hide-on-mobile {
display: none;
}
}
Page Selection: Global or specific pages Purpose: Selectively hide or show elements based on page or device
The .page-id-123 selector targets a specific page with the ID 123. You can find your page IDs by looking at the URL when editing a page in WordPress (it will show something like post=123).
Example 5: Custom Image Gallery
File name: gallery-styles.css
.custom-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 15px;
margin: 30px 0;
}
.custom-gallery img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px;
transition: transform 0.3s ease;
}
.custom-gallery img:hover {
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
Page Selection: The page containing your gallery Purpose: Create a responsive image gallery with hover effects
Image to be inserted in the near future: Screenshot of the custom gallery layout
This gallery style requires you to add the custom-gallery class to a container element that holds your images. You can do this through your page builder or with an HTML snippet.
Advanced CSS Techniques
Using CSS Variables
File name: theme-variables.css
:root {
--primary-color: #4CAF50;
--secondary-color: #2196F3;
--text-color: #333333;
--background-color: #f9f9f9;
}
.button-primary {
background-color: var(--primary-color);
color: white;
}
.button-secondary {
background-color: var(--secondary-color);
color: white;
}
.section-background {
background-color: var(--background-color);
color: var(--text-color);
}
Page Selection: Global Purpose: Create a consistent color scheme that's easy to update
CSS variables (custom properties) make it much easier to maintain consistent colors throughout your site. If you need to change a color, you only need to update it in one place.
CSS variables have excellent browser support but may not work in very old browsers like Internet Explorer. Consider your audience when using this feature.
CSS Animations
File name: animations.css
.fade-in {
animation: fadeIn 1s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.slide-in {
animation: slideIn 0.5s ease-out;
}
@keyframes slideIn {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
Page Selection: Global or specific pages Purpose: Add simple animations to elements
To use these animations, add the class fade-in or slide-in to any element you want to animate. These animations will play once when the element loads.
Excessive animations can cause performance issues and may trigger motion sickness in some users. Use animations sparingly and consider providing a way for users to disable them for accessibility.
Targeting Specific Elements
By ID
File name: specific-elements.css
#header-logo {
max-width: 150px;
}
#main-content {
padding: 20px;
}
By Class
.featured-post {
border-left: 4px solid #4CAF50;
padding-left: 15px;
}
.author-bio {
background-color: #f5f5f5;
padding: 15px;
border-radius: 5px;
}
By Element Type
img {
max-width: 100%;
height: auto;
}
blockquote {
font-style: italic;
border-left: 3px solid #ccc;
padding-left: 15px;
margin-left: 0;
}
By Combination
/* Target links within the navigation */
nav a {
text-decoration: none;
color: #333;
}
/* Target paragraphs within the content area */
.content-area p {
margin-bottom: 20px;
line-height: 1.8;
}
When targeting elements, be as specific as necessary but no more. Overly specific selectors can be hard to maintain, while too-generic selectors might affect unintended elements.
Be cautious when styling elements by type alone (like img or a). These styles will apply to ALL instances of that element on your page, which might not be what you want.
Page-Specific Styling
To apply styles only to specific pages, select that page from the page selector at the top when creating your CSS file.
Example: Styling the Contact Page
File name: contact-page.css
/* Custom styles for the contact form */
.contact-form {
max-width: 600px;
margin: 0 auto;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}
.contact-form button {
background-color: #4CAF50;
color: white;
border: none;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
}
.contact-form button:hover {
background-color: #45a049;
}
Page Selection: Contact Purpose: Style the contact form only on the contact page
Page-specific CSS is more efficient than global CSS because it only loads on the pages where it's needed, reducing your site's overall load time.
Combining CSS with HTML and JavaScript
For a complete solution, you can combine CSS files with HTML content and JavaScript files.
Example: Creating a Modal Popup
HTML Content:
<div id="modal-overlay" class="modal-overlay">
<div class="modal-content">
<span class="modal-close">×</span>
<h2>Special Offer</h2>
<p>Sign up today and get 20% off your first purchase!</p>
<form class="modal-form">
<input type="email" placeholder="Your email address" required>
<button type="submit">Sign Up</button>
</form>
</div>
</div>
CSS File (Add a file named "modal-styles.css"):
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1000;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: white;
padding: 30px;
border-radius: 5px;
max-width: 500px;
width: 90%;
position: relative;
}
.modal-close {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
}
.modal-form {
margin-top: 20px;
}
.modal-form input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}
.modal-form button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
}
JavaScript File (Add a file named "modal-script.js"):
// Set loading type to "deferred" for this file
// Show modal after 5 seconds
setTimeout(function() {
const modal = document.getElementById('modal-overlay');
if (modal && !localStorage.getItem('modalClosed')) {
modal.style.display = 'flex';
}
}, 5000);
// Close modal when clicking the X
const closeBtn = document.querySelector('.modal-close');
if (closeBtn) {
closeBtn.addEventListener('click', function() {
const modal = document.getElementById('modal-overlay');
modal.style.display = 'none';
localStorage.setItem('modalClosed', 'true');
});
}
// Close modal when clicking outside the content
const modalOverlay = document.getElementById('modal-overlay');
if (modalOverlay) {
modalOverlay.addEventListener('click', function(e) {
if (e.target === this) {
modalOverlay.style.display = 'none';
localStorage.setItem('modalClosed', 'true');
}
});
}
Page Selection: Home (or any landing page) Purpose: Display a popup offer after 5 seconds
Popup modals can be intrusive and may negatively impact user experience if overused. Consider using them sparingly and only for important messages.
This example uses localStorage to remember if a user has closed the modal, preventing it from showing again on subsequent page loads. This creates a better user experience.
Best Practices for CSS Snippets
- Use specific selectors: Avoid overly generic selectors that might affect unintended elements
- Comment your code: Add comments to explain what each section does
- Group related styles: Keep related styles together for better organization
- Test responsively: Always check how your styles look on different devices
- Use descriptive file names: Name your CSS files according to their purpose (e.g., "header-styles.css" instead of "style1.css")
When writing CSS, start with mobile styles first (mobile-first approach), then use media queries to adjust the layout for larger screens. This generally results in cleaner, more maintainable code.
Modern CSS features like Flexbox and Grid make responsive layouts much easier to create. Consider using these instead of older techniques like floats for layout.
Troubleshooting CSS Snippets
Common Issues
- Styles not applying: Check if your selectors are correct and specific enough
- Conflicts with theme styles: Your theme might have stronger specificity
- Responsive issues: Styles might not work as expected on all devices
Solutions
- Use browser developer tools to inspect elements and debug CSS
- Try increasing specificity with more detailed selectors
- Add
!importantas a last resort for stubborn styles - Make sure you've clicked "Deploy Changes" after adding your CSS files
Using !important should be a last resort as it breaks the natural cascading of CSS and can lead to maintenance issues. Try more specific selectors first before resorting to !important.
Most browsers have developer tools that can help you debug CSS issues. Right-click on an element and select "Inspect" to see which styles are being applied and which are being overridden.