Adding Custom CSS to Your Flip Box

The built-in settings cover the vast majority of design scenarios, but sometimes you want to go a step further. The Flipbox plugin includes a Custom CSS field that lets you write your own CSS rules for complete design control — no child theme required.

Where to Find the Custom CSS Field

1. Open your flip box in the Flipbox editor.
2. Scroll to the bottom of the settings panel.
3. Find the Custom CSS textarea.
4. Write your CSS rules directly in the field.
5. Save the flip box to apply the styles.

How Custom CSS Is Scoped

The custom CSS you write in this field is scoped to this specific flip box only. It won’t affect other flip boxes on your site. This means you can safely write rules without worrying about breaking other elements.

Each flip box gets its own CSS class based on its ID. For example, a flip box with ID 1 will have a wrapper class like .oxi-addons-flip-box-style-1. You can use this class as the parent selector in your custom CSS for precise targeting.

Practical Examples

Adding a border to the front face

.oxi-addons-flip-box-front-section {
  border: 2px solid #3490dc;
  border-radius: 12px;
}

Centering the icon vertically

.oxi-addons-flip-box-front-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

Making the button a ghost/outline style

.oxi-addons-flip-box-back-button a {
  border: 2px solid #ffffff;
  background: transparent !important;
  color: #ffffff !important;
}
.oxi-addons-flip-box-back-button a:hover {
  background: #ffffff !important;
  color: #333333 !important;
}

Adding a transition/hover effect to cards

.oxi-addons-flip-boxes-body {
  transition: transform 0.2s ease;
}
.oxi-addons-flip-boxes-body:hover {
  transform: translateY(-4px);
}

Adjusting font size on mobile screens

@media (max-width: 768px) {
  .oxi-addons-flip-box-front-heading {
    font-size: 16px !important;
  }
}

Key CSS Classes Reference

CSS Class	What It Targets
.oxi-addons-flip-boxes-body	The main card container
.oxi-addons-flip-box-front-section	The front face container
.oxi-addons-flip-box-back-section	The back face container
.oxi-addons-flip-box-front-heading	The front title/heading
.oxi-addons-flip-box-front-icon	The front icon element
.oxi-addons-flip-box-front-image	The front image container
.oxi-addons-flip-box-back-info	The back description text
.oxi-addons-flip-box-back-button	The back button container

Tips for Writing Custom CSS

• Use browser DevTools – Right-click on your flip box on the frontend and click “Inspect” to see the exact HTML structure and class names. This makes targeting specific elements much easier.
• Use !important sparingly – Only add !important when the plugin’s generated inline styles are overriding your rules and you can’t resolve the conflict another way.
• Test on mobile – After adding custom CSS, always check how it looks on a mobile screen. Use @media queries for mobile-specific overrides.
• Save after every change – The custom CSS isn’t applied live until you save the flip box.

Note: The Custom CSS field is best suited for moderate CSS tweaks. For very extensive custom styling, consider using your theme’s custom CSS area or a child theme stylesheet, as it gives you a centralized place to manage all CSS changes.