/* Skilljar Course Tile Customization */ /* Main course tile styling */ .course-card, .course-tile, .course-list-item, .skilljar-content .course-item { border-radius: 8px !important; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important; border: 1px solid #e5e7eb !important; overflow: hidden !important; transition: all 0.3s ease !important; } /* Hover effects for course tiles */ .course-card:hover, .course-tile:hover, .course-list-item:hover, .skilljar-content .course-item:hover { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important; transform: translateY(-2px) !important; } /* Course tile content wrapper */ .course-card .card-content, .course-tile .tile-content, .course-list-item .item-content { padding: 16px !important; } /* Course image styling */ .course-card .course-image, .course-tile .course-image, .course-list-item .course-image, .skilljar-content .course-item .course-thumbnail { border-radius: 8px 8px 0 0 !important; overflow: hidden !important; } /* Course duration styling */ .course-card .course-duration, .course-tile .course-duration, .course-list-item .course-duration, .skilljar-content .course-item .duration { font-size: 14px !important; color: #6b7280 !important; margin-top: 8px !important; } /* Course title styling */ .course-card .course-title, .course-tile .course-title, .course-list-item .course-title, .skilljar-content .course-item .course-title, .skilljar-content .course-item h3 { font-weight: 600 !important; line-height: 1.4 !important; margin-bottom: 8px !important; } /* Course description styling */ .course-card .course-description, .course-tile .course-description, .course-list-item .course-description, .skilljar-content .course-item .course-description, .skilljar-content .course-item p { color: #6b7280 !important; line-height: 1.5 !important; margin-bottom: 12px !important; } /* Course badges/tags styling */ .course-card .course-badge, .course-tile .course-badge, .course-list-item .course-badge, .skilljar-content .course-item .badge, .skilljar-content .course-item .tag { font-size: 12px !important; padding: 4px 8px !important; border-radius: 4px !important; background-color: #f3f4f6 !important; color: #374151 !important; margin-right: 8px !important; margin-bottom: 8px !important; } /* Grid layout for course tiles */ .course-grid, .skilljar-content .course-list { display: grid !important; gap: 24px !important; } /* Responsive grid */ @media (min-width: 768px) { .course-grid, .skilljar-content .course-list { grid-template-columns: repeat(2, 1fr) !important; } } @media (min-width: 1024px) { .course-grid, .skilljar-content .course-list { grid-template-columns: repeat(3, 1fr) !important; } } @media (min-width: 1280px) { .course-grid, .skilljar-content .course-list { grid-template-columns: repeat(4, 1fr) !important; } } /* Custom properties for easy updates */ :root { --tile-radius: 8px; --tile-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tile-border-color: #e5e7eb; --tile-border: 1px solid #e5e7eb; } /* IMPLEMENTATION INSTRUCTIONS: 1. Copy this CSS code 2. In your Skilljar admin panel, go to Settings > Theme 3. Paste this code in the "Custom CSS" section 4. Save and publish your changes CURRENT SETTINGS: - Corner Radius: 8px - Shadow Intensity: 4/6 - Border: Enabled (#e5e7eb) - Course Images: Visible - Course Duration: Visible */

Skilljar

Test Course

Short description as entered in the product.

Curriculum

A really long lesson name, designed to go on to two lines.
HTML Only Lesson
Untitled Section
Quiz Lesson
Untitled Section
Untitled Section
New Lesson
H2 Header for testing purposes
The Best Video Ever
Untitled Lesson

Curriculum

A really long lesson name, designed to go on to two lines.
HTML Only Lesson
Untitled Section
Quiz Lesson
Untitled Section
Untitled Section
New Lesson
H2 Header for testing purposes
The Best Video Ever
Untitled Lesson