Mystical Theme CSS Collection

Transform your EZ Horoscope blocks with a beautiful, spiritual aesthetic featuring dreamy purple-blues, warm gold accents, and soft lavender tones.
To see example pages of what this css looks like, visit ImmortalEmbrace.com, if you want help styling EZ Horoscope to match your theme, email us at [email protected]. You can access the css in the Style Reference Pages section close to the bottom of this page.

About This Theme

The Mystical Theme collection provides custom CSS styling for all major EZ Horoscope blocks. Inspired by modern spiritual wellness design, these stylesheets give your astrology content a polished, professional look that resonates with your audience.

Styled Blocks:

Color Palette

Color	Hex Code	Usage
Dusty Blue-Purple	`#5D6B8A`	Primary accents, headings
Warm Gold	`#C9A962`	Highlights, buttons, decorations
Soft Lavender	`#9BA4C4`	Borders, secondary elements
Deep Navy	`#2D3142`	Text, dark accents

Features

Elegant Typography — Italic accent headings with decorative star (✦) elements
Card-Based Layout — Frosted glass effects for content sections
Smooth Interactions — Outlined buttons that fill on hover, subtle animations
RTL Support — Full right-to-left support for Arabic, Hebrew, Persian, and Urdu
Responsive Design — Optimized for desktop, tablet, and mobile
Print Friendly — Clean output when users print your content

Installation

Option 1: Theme Customizer (Easiest)

Go to Appearance → Customize → Additional CSS
Paste the CSS for the block(s) you want to style
Click Publish

Option 2: Custom HTML Block (Page-Specific)

Add a Custom HTML block to your page and paste:

<style>
/* Paste CSS content here */
</style>

Or link to an uploaded CSS file:

<link rel="stylesheet" href="https://yoursite.com/wp-content/uploads/mystical-theme/chinese-horoscope.css">

Option 3: Child Theme (Recommended)

Upload CSS files to your child theme’s /css/ folder, then add to functions.php:

function ezhp_enqueue_mystical_styles() {
    $styles = array(
        'ezhp-chinese'       => 'chinese-horoscope.css',
        'ezhp-daily'         => 'daily-horoscope.css',
        'ezhp-summaries'     => 'daily-horoscope-summaries.css',
        'ezhp-moon'          => 'moon-phase.css',
        'ezhp-numerology'    => 'numerology.css',
        'ezhp-compatibility' => 'zodiac-compatibility.css',
    );
    
    foreach ( $styles as $handle => $file ) {
        wp_enqueue_style(
            $handle,
            get_stylesheet_directory_uri() . '/css/' . $file,
            array(),
            '1.0.0'
        );
    }
}
add_action( 'wp_enqueue_scripts', 'ezhp_enqueue_mystical_styles' );

Optional: Google Fonts

For the best typography, add the Cormorant Garamond font to your site’s <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap" rel="stylesheet">

Style Reference Pages

Access the CSS for each block from its dedicated style reference page:

Customization

Each CSS file uses variables at the top, making it easy to adjust colors to match your brand. Simply modify the values in the :root or block-level variable declarations:

--ezhp-color-primary: #5D6B8A;    /* Change to your primary color */
--ezhp-color-secondary: #C9A962;  /* Change to your accent color */
--ezhp-color-tertiary: #9BA4C4;   /* Change to your secondary color */

Support

Having trouble with installation or want help customizing the theme to match your site? Visit our Support Forum or email us at [email protected]

EZ Horoscope

Turn your website into a universe of insight

Style Reference EZ Horoscope Blocks