/* 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

Header Navigation

LinkedIn Course