The following css is provided to help you further stylize the daily horoscope pages. It is thoroughly documented to help you make the pages look exactly the way you want them to.
/* =============================================================================
EZ HOROSCOPE - CUSTOMIZABLE CSS STYLES
=============================================================================
This CSS styles the Daily Horoscope block from EZ Horoscope plugin.
HOW TO USE:
1. Copy this entire CSS into your WordPress Customizer (Appearance → Customize → Additional CSS)
2. Modify values as needed to match your site's theme
3. Save and preview your changes
TIPS:
- Colors can be hex (#043331), rgb (rgb(4,51,49)), or color names (white)
- Sizes can be px, rem, em, or % (1rem = roughly 16px)
- Use browser DevTools (F12) to inspect elements and test changes live
============================================================================= */
/* =============================================================================
HERO SECTION - The main banner at the top of each horoscope
=============================================================================
This is the large introductory section containing:
- The horoscope title (e.g., "Your Daily Leo Horoscope")
- The date
- Introductory paragraphs
- The zodiac sign image (on the right side on desktop)
HTML Structure:
<section class="ez-hero">
<div class="ez-hero-content">
<div class="ez-hero-text">...</div>
<div class="ez-hero-image">...</div>
</div>
</section>
============================================================================= */
.ez-hero {
display: flex; /* Enables flexbox layout */
align-items: center; /* Vertically centers content */
justify-content: space-between; /* Spreads text and image apart */
padding: 15px; /* Inner spacing - increase for more breathing room */
flex-wrap: wrap; /* Allows content to wrap on smaller screens */
border-radius: 10px; /* Rounded corners - set to 0 for sharp corners */
/* TO ADD A BACKGROUND COLOR, uncomment the line below: */
/* background-color: #F5EAE4; */
/* TO ADD A BACKGROUND IMAGE, uncomment the lines below: */
/* background-image: url('YOUR-IMAGE-URL-HERE'); */
/* background-size: cover; */
/* background-position: center; */
}
/* Hero Content Container - Wraps both text and image */
.ez-hero-content {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%; /* Takes full width of parent */
flex-wrap: wrap;
}
/* Hero Text Area - Left side containing title and paragraphs */
.ez-hero-text {
flex: 1; /* Takes up available space */
padding-right: 20px; /* Gap between text and image - adjust as needed */
}
/* Hero Main Title (H1) - The horoscope name, e.g., "Your Daily Leo Horoscope" */
.ez-hero-text h1 {
font-size: 2.5rem; /* Title size - try 2rem (smaller) or 3rem (larger) */
color: #043331; /* Dark teal color - change to match your theme */
margin-bottom: 20px; /* Space below the title */
/* TO CHANGE FONT, uncomment below (use any Google Font or system font): */
/* font-family: 'Georgia', serif; */
/* TO ADD TEXT SHADOW for effect, uncomment below: */
/* text-shadow: 1px 1px 2px rgba(0,0,0,0.1); */
}
/* Hero Paragraphs - Introductory text in the hero section */
.ez-hero-text p {
font-size: 1.2rem; /* Paragraph text size */
line-height: 1.5; /* Line spacing - higher = more space between lines */
color: #043331; /* Text color - should contrast with background */
/* TO ADJUST PARAGRAPH SPACING, uncomment below: */
/* margin-bottom: 1rem; */
}
/* Hero Image Container - Right side holding the zodiac sign image */
.ez-hero-image {
flex: 1; /* Takes up equal space as text */
display: flex;
justify-content: center; /* Centers image horizontally */
align-items: center; /* Centers image vertically */
margin-top: 20px;
/* TO LIMIT IMAGE CONTAINER WIDTH, uncomment below: */
/* max-width: 300px; */
}
/* Hero Image - The actual zodiac sign image */
.ez-hero-image img {
max-width: 100%; /* Prevents image from overflowing */
height: auto; /* Maintains aspect ratio */
border-radius: 10px; /* Rounded corners - set to 0 for sharp, 50% for circle */
object-fit: cover; /* Ensures image covers area without distortion */
/* TO ADD A BORDER, uncomment below: */
/* border: 3px solid #043331; */
/* TO ADD A SHADOW, uncomment below: */
/* box-shadow: 0 4px 15px rgba(0,0,0,0.2); */
}
/* Responsive Image Class - Applied to zodiac images */
.responsive-image {
width: 100%;
height: auto;
max-width: 400px; /* Maximum image width - adjust as needed */
}
/* =============================================================================
HERO SECTION - MOBILE/TABLET RESPONSIVE STYLES
=============================================================================
These styles apply when the screen is 768px or narrower (tablets and phones).
On mobile, the layout stacks vertically: Title → Image → Content
============================================================================= */
@media (max-width: 768px) {
.ez-hero-content {
flex-direction: column; /* Stacks items vertically */
text-align: center; /* Centers all text */
}
.ez-hero-text {
order: 1; /* Puts text first (top) */
padding-right: 0; /* Removes right padding on mobile */
margin-bottom: 20px;
text-align: center;
}
.ez-hero-image {
order: 2; /* Puts image second (middle) */
width: 100%;
margin-top: 20px;
display: flex;
justify-content: center !important;
align-items: center;
}
/* TO CHANGE MOBILE TITLE SIZE, add: */
/* .ez-hero-text h1 { font-size: 1.8rem; } */
}
/* =============================================================================
CONTENT SECTIONS - Guidance, Advice, and other text sections
=============================================================================
These sections contain the main horoscope content:
- "Celestial Guidance For Your Day"
- "Today's Cosmic Advice"
- "Cosmic Reflection"
- Any other content sections
HTML Structure:
<section class="ez-enneagram-section" id="guidance-section">
<div class="ez-enneagram-content">
<h2>Section Title</h2>
<div class="ez-enneagram-text">
<p>Content paragraphs...</p>
</div>
</div>
</section>
============================================================================= */
/* Section Container - Wraps each content section */
.ez-enneagram-section {
padding: 20px 20px; /* Inner spacing (top/bottom, left/right) */
/* TO ADD SECTION BACKGROUND, uncomment below: */
/* background-color: #f9f9f9; */
/* TO ADD SECTION BORDERS, uncomment below: */
/* border-top: 1px solid #ddd; */
/* border-bottom: 1px solid #ddd; */
/* TO ADD SPACING BETWEEN SECTIONS, uncomment below: */
/* margin-bottom: 30px; */
}
/* Content Container - Holds the section content */
.ez-enneagram-content {
overflow: hidden; /* Ensures proper layout with floated elements */
padding-bottom: 10px;
/* TO LIMIT CONTENT WIDTH AND CENTER IT, uncomment below: */
/* max-width: 900px; */
/* margin: 0 auto; */
}
/* Section Headings (H2) - Section titles like "Celestial Guidance" */
.ez-enneagram-content h2 {
/* TO STYLE SECTION HEADINGS, add properties here: */
/* font-size: 1.8rem; */
/* color: #043331; */
/* text-align: center; */
/* margin-bottom: 20px; */
}
/* Content Paragraphs - Main text content */
.ez-enneagram-text p {
font-size: 1rem; /* Base font size - try 1.1rem for larger text */
line-height: 1.6; /* Line spacing - 1.6-1.8 is comfortable for reading */
margin-bottom: 10px; /* Space between paragraphs */
/* TO CHANGE TEXT COLOR, uncomment below: */
/* color: #333; */
}
/* =============================================================================
PLANET CARDS SECTION - "Today's Detailed Celestial Influences"
=============================================================================
This is the grid of cards showing planetary positions:
- Moon, Sun, Mars, Mercury, Jupiter, Venus, Saturn, Neptune, Uranus, Pluto
Each card has:
- A background image (planet/celestial body)
- Text content explaining the influence
HTML Structure:
<section class="eztype-flexbox-section">
<h2 class="eztype-flexbox-heading">Today's Detailed Celestial Influences</h2>
<div class="eztype-flexbox-container">
<div class="eztype-flexbox-item">
<div class="eztype-flexbox-background" style="background-image: url(...)"></div>
<div class="eztype-flexbox-content">
<p>Planet description...</p>
</div>
</div>
<!-- More cards... -->
</div>
</section>
============================================================================= */
/* Section Container - Wraps the entire planet cards area */
.eztype-flexbox-section {
padding: 40px 20px; /* Generous padding around the section */
border-radius: 10px; /* Rounded corners */
margin-top: 10px;
margin-bottom: 10px;
/* TO ADD A BACKGROUND COLOR, uncomment below: */
/* background-color: #F5EAE4; */
}
/* Section Main Title (if H1 is used) */
.eztype-flexbox-section h1 {
font-size: 2.5rem;
color: #043331;
margin-bottom: 20px;
}
/* Section Paragraphs */
.eztype-flexbox-section p {
font-size: 1.2rem;
line-height: 1.5;
color: #043331;
}
/* Section Heading - "Today's Detailed Celestial Influences" */
.eztype-flexbox-heading {
text-align: center;
color: #043331; /* Heading color - change to match your theme */
font-size: 2rem; /* Heading size */
margin-bottom: 20px;
/* TO ADD DECORATIVE UNDERLINE, uncomment below: */
/* border-bottom: 2px solid #043331; */
/* padding-bottom: 10px; */
/* display: inline-block; */
}
/* Cards Container - Flexbox grid holding all planet cards */
.eztype-flexbox-container {
display: flex;
flex-wrap: wrap; /* Allows cards to wrap to new rows */
justify-content: space-around; /* Distributes cards evenly */
/* TO CHANGE CARD DISTRIBUTION, try these alternatives: */
/* justify-content: center; */ /* Centers cards */
/* justify-content: flex-start; */ /* Aligns cards to left */
/* justify-content: space-between; */ /* Maximum space between cards */
}
/* Individual Planet Card - Each card in the grid */
.eztype-flexbox-item {
border: 1px solid #ddd; /* Light border - change color or set to 'none' */
border-radius: 8px; /* Rounded corners */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
margin: 10px; /* Space between cards */
flex: 1 1 calc(33.333% - 20px); /* 3 cards per row on desktop */
box-sizing: border-box;
transition: transform 0.2s, box-shadow 0.2s; /* Smooth hover animation */
overflow: hidden;
padding: 0;
position: relative;
/* TO CHANGE CARDS PER ROW, modify the flex property: */
/* flex: 1 1 calc(50% - 20px); */ /* 2 cards per row */
/* flex: 1 1 calc(25% - 20px); */ /* 4 cards per row */
/* TO SET A FIXED CARD WIDTH instead of flexible: */
/* flex: 0 0 300px; */
/* TO ADD CARD BACKGROUND COLOR, uncomment below: */
/* background-color: #ffffff; */
}
/* Card Links - Clickable links within cards */
.eztype-flexbox-item a {
color: #7FB570 !important; /* Link color - green by default */
text-decoration: none;
font-weight: bold;
transition: color 0.2s, background-color 0.2s;
}
.eztype-flexbox-item a:hover,
.eztype-flexbox-item a:focus {
color: #0056b3; /* Link color on hover */
text-decoration: none;
/* TO ADD UNDERLINE ON HOVER, change to: */
/* text-decoration: underline; */
}
/* Card Hover Effect - What happens when mouse hovers over a card */
.eztype-flexbox-item:hover {
transform: translateY(-5px); /* Lifts card up slightly */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Stronger shadow */
/* TO DISABLE HOVER EFFECT, comment out or remove these properties */
/* TO ADD BORDER COLOR CHANGE ON HOVER, uncomment below: */
/* border-color: #043331; */
}
/* =============================================================================
PLANET CARD BACKGROUND IMAGES
=============================================================================
Each card has a background image area showing the celestial body.
The images come from the API with inline styles, but you can OVERRIDE them here.
============================================================================= */
/* Background Image Container - The image area at the top of each card */
.eztype-flexbox-background {
height: 150px; /* Image area height - increase for larger images */
background-size: cover; /* Ensures image covers the area */
background-position: center; /* Centers the image */
border-radius: 8px 8px 0 0; /* Rounded top corners only */
position: relative;
/* TO CHANGE IMAGE HEIGHT: */
/* height: 200px; */ /* Taller */
/* height: 100px; */ /* Shorter */
/* TO HIDE IMAGES ENTIRELY, uncomment below: */
/* display: none; */
}
/* =============================================================================
HOW TO OVERRIDE PLANET CARD IMAGES WITH YOUR OWN
=============================================================================
The API provides background images via inline styles, but you can override
them using the card's ID selector. Each card has a unique ID:
#moon-item - Moon card
#sun-item - Sun card
#mars-item - Mars card
#mercury-item - Mercury card
#jupiter-item - Jupiter card
#venus-item - Venus card
#saturn-item - Saturn card
#neptune-item - Neptune card
#uranus-item - Uranus card
#pluto-item - Pluto card
To override an image, use !important to beat the inline style.
EXAMPLE - Replace the Moon card image with your own:
#moon-item .eztype-flexbox-background {
background-image: url('https://your-site.com/your-moon-image.jpg') !important;
}
EXAMPLE - Replace ALL planet images with a single image:
.eztype-flexbox-background {
background-image: url('https://your-site.com/your-image.jpg') !important;
}
EXAMPLE - Remove all background images and use colors instead:
#moon-item .eztype-flexbox-background {
background-image: none !important;
background-color: #1a1a2e;
}
#sun-item .eztype-flexbox-background {
background-image: none !important;
background-color: #ff6b35;
}
============================================================================= */
/* Uncomment and modify the examples below to use your own images: */
/*
#moon-item .eztype-flexbox-background {
background-image: url('YOUR-MOON-IMAGE-URL') !important;
}
#sun-item .eztype-flexbox-background {
background-image: url('YOUR-SUN-IMAGE-URL') !important;
}
#mars-item .eztype-flexbox-background {
background-image: url('YOUR-MARS-IMAGE-URL') !important;
}
#mercury-item .eztype-flexbox-background {
background-image: url('YOUR-MERCURY-IMAGE-URL') !important;
}
#jupiter-item .eztype-flexbox-background {
background-image: url('YOUR-JUPITER-IMAGE-URL') !important;
}
#venus-item .eztype-flexbox-background {
background-image: url('YOUR-VENUS-IMAGE-URL') !important;
}
#saturn-item .eztype-flexbox-background {
background-image: url('YOUR-SATURN-IMAGE-URL') !important;
}
#neptune-item .eztype-flexbox-background {
background-image: url('YOUR-NEPTUNE-IMAGE-URL') !important;
}
#uranus-item .eztype-flexbox-background {
background-image: url('YOUR-URANUS-IMAGE-URL') !important;
}
#pluto-item .eztype-flexbox-background {
background-image: url('YOUR-PLUTO-IMAGE-URL') !important;
}
*/
/* Card Text Content - The text area below the image */
.eztype-flexbox-content {
padding: 20px; /* Inner spacing for text */
color: #333; /* Text color */
/* TO CHANGE TEXT AREA BACKGROUND, uncomment below: */
/* background-color: #f9f9f9; */
}
/* =============================================================================
PLANET CARDS - MOBILE/TABLET RESPONSIVE STYLES
=============================================================================
On screens 768px or narrower, cards stack in a single column.
============================================================================= */
@media (max-width: 768px) {
.eztype-flexbox-item {
flex: 1 1 100%; /* Full width on mobile - 1 card per row */
}
/* TO KEEP 2 CARDS PER ROW ON TABLETS, use this instead: */
/* flex: 1 1 calc(50% - 20px); */
/* TO REDUCE CARD IMAGE HEIGHT ON MOBILE, uncomment below: */
/* .eztype-flexbox-background { height: 100px; } */
/* TO REDUCE PADDING ON MOBILE, uncomment below: */
/* .eztype-flexbox-content { padding: 15px; } */
}
/* =============================================================================
QUICK CUSTOMIZATION RECIPES
=============================================================================
Copy any of these recipes and paste at the bottom of your CSS to apply them.
============================================================================= */
/*
RECIPE 1: Dark Theme
--------------------
.ez-hero,
.eztype-flexbox-section {
background-color: #1a1a2e !important;
}
.ez-hero-text h1,
.ez-hero-text p,
.eztype-flexbox-heading,
.eztype-flexbox-section p {
color: #ffffff !important;
}
.eztype-flexbox-item {
background-color: #16213e !important;
border-color: #0f3460 !important;
}
.eztype-flexbox-content {
color: #e0e0e0 !important;
}
*/
/*
RECIPE 2: Larger Text for Accessibility
---------------------------------------
.ez-hero-text h1 { font-size: 3rem !important; }
.ez-hero-text p { font-size: 1.4rem !important; }
.ez-enneagram-text p { font-size: 1.2rem !important; }
.eztype-flexbox-content { font-size: 1.1rem !important; }
*/
/*
RECIPE 3: Remove All Rounded Corners
------------------------------------
.ez-hero,
.ez-hero-image img,
.eztype-flexbox-section,
.eztype-flexbox-item,
.eztype-flexbox-background {
border-radius: 0 !important;
}
*/
/*
RECIPE 4: Two Cards Per Row on Desktop
--------------------------------------
.eztype-flexbox-item {
flex: 1 1 calc(50% - 20px) !important;
}
*/
/*
RECIPE 5: Hide Planet Card Images Entirely
------------------------------------------
.eztype-flexbox-background {
display: none !important;
}
*/