Styling and Theming

ShahiAssist provides extensive styling options to match your site’s design. From CSS overrides to complete theme integration, you can customize the appearance to fit your brand.

CSS Architecture

Core Stylesheets

1. assets/css/frontend.css: Main frontend styles
2. assets/css/admin.css: Admin interface styles
3. assets/css/frontend-dark.css: Dark mode styles

CSS Variables


ShahiAssist uses CSS custom properties for easy theming:
`css
:root {
–sa-primary-color: #007cba;
–sa-secondary-color: #f0f0f0;
–sa-text-color: #333;
–sa-background-color: #fff;
–sa-border-color: #ddd;
–sa-font-family: ‘Segoe UI’, sans-serif;
}
`

Basic Customization


Override CSS


4. Create shahi-assist.css in your theme
5. Enqueue it after plugin styles:

`php
addaction(‘wpenqueue_scripts’, function() {
wpenqueuestyle(‘shahi-assist-custom’, gettemplatedirectory_uri() . ‘/shahi-assist.css’, [‘shahi-assist-frontend’], ‘1.0.0’);
});
`

6. Add your custom styles:

`css
/ Custom button styles /
.sa-btn {
border-radius: 8px;
font-weight: 600;
}

/ Custom card styling /
.sa-card {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border: none;
}
`

Dark Mode Implementation


Enable Dark Mode


In ShahiAssist settings or programmatically:
`php
addfilter(‘shahiassistenabledarkmode’, ‘returntrue’);
`

Custom Dark Theme


Override dark mode variables:
`css
[data-theme=”dark”] {
–sa-primary-color: #00d4ff;
–sa-background-color: #1a1a1a;
–sa-text-color: #e0e0e0;
–sa-border-color: #333;
}
`

Theme Toggle


Add a theme switcher:
`php
addaction(‘wpfooter’, function() {
?>
Toggle Theme

`

Responsive Design


Breakpoints


ShahiAssist uses standard breakpoints:

7. Mobile: < 768px
8. Tablet: 768px – 1024px
9. Desktop: > 1024px

Custom Responsive Rules


`css
@media (max-width: 768px) {
.sa-ticket-list {
flex-direction: column;
}

.sa-card {
margin-bottom: 1rem;
}
}

@media (min-width: 1025px) {
.sa-dashboard-grid {
grid-template-columns: repeat(3, 1fr);
}
}
`

Component Styling


Ticket Cards


`css
.sa-ticket-card {
background: var(–sa-background-color);
border: 1px solid var(–sa-border-color);
border-radius: 8px;
padding: 1rem;
transition: box-shadow 0.3s ease;
}

.sa-ticket-card:hover {
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
`

Forms


`css
.sa-form-group {
margin-bottom: 1.5rem;
}

.sa-form-control {
width: 100%;
padding: 0.75rem;
border: 1px solid var(–sa-border-color);
border-radius: 4px;
font-size: 1rem;
}

.sa-form-control:focus {
outline: none;
border-color: var(–sa-primary-color);
box-shadow: 0 0 0 2px rgba(0,124,186,0.2);
}
`

Buttons


`css
.sa-btn {
display: inline-block;
padding: 0.75rem 1.5rem;
background: var(–sa-primary-color);
color: white;
text-decoration: none;
border-radius: 4px;
transition: background 0.3s ease;
}

.sa-btn:hover {
background: darken(var(–sa-primary-color), 10%);
}

.sa-btn-secondary {
background: var(–sa-secondary-color);
color: var(–sa-text-color);
}
`

Advanced Theming


Theme Integration


Ensure ShahiAssist matches your theme:
`php
addaction(‘wpenqueue_scripts’, function() {
// Inherit theme colors
$primarycolor = getthememod(‘primarycolor’, ‘#007cba’);
$secondarycolor = getthememod(‘secondarycolor’, ‘#f0f0f0’);

wpaddinline_style(‘shahi-assist-frontend’, “
:root {
–sa-primary-color: {$primary_color};
–sa-secondary-color: {$secondary_color};
}
“);
});
`

Dynamic Theming


Change styles based on user preferences:
`php
addaction(‘wphead’, function() {
$userid = getcurrentuserid();
if ($user_id) {
$themepreference = getusermeta($userid, ‘shahiassisttheme’, true);
if ($theme_preference) {
echo ‘

‘;
}
}
});
`

Icon Customization


Font Icons


ShahiAssist uses icon fonts. Override with custom icons:
`css
.sa-icon-ticket:before {
content: ‘\f1d8’; / Custom icon code /
font-family: ‘MyCustomIcons’;
}
`

SVG Icons


Replace with inline SVGs:
`php
addfilter(‘shahiassisticonticket’, function($icon) {
return ‘‘;
});
`

Animation and Transitions


Smooth Transitions


`css
.sa-panel {
transition: all 0.3s ease;
}

.sa-panel:hover {
transform: translateY(-2px);
}
`

Loading Animations


`css
.sa-loading {
position: relative;
}

.sa-loading:after {
content: ”;
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid var(–sa-border-color);
border-top: 2px solid var(–sa-primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
`

Performance Optimization


CSS Minification


Use tools to minify custom CSS:
`php
addaction(‘wpenqueue_scripts’, function() {
wpenqueuestyle(‘shahi-assist-custom’, gettemplatedirectoryuri() . ‘/shahi-assist.min.css’, [], filemtime(gettemplate_directory() . ‘/shahi-assist.min.css’));
});
`

Critical CSS


Load critical styles inline:
`php
addaction(‘wphead’, function() {
echo ‘

‘;
});
`

Accessibility


Focus States


`css
.sa-form-control:focus,
.sa-btn:focus {
outline: 2px solid var(–sa-primary-color);
outline-offset: 2px;
}
`

Color Contrast


Ensure sufficient contrast ratios:
`css
/ Use tools like WebAIM contrast checker /
.sa-text-on-primary {
color: white; / On dark backgrounds /
}

.sa-text-on-secondary {
color: var(–sa-text-color); / On light backgrounds /
}
`

Screen Reader Support


`css
.sa-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
`

Browser Compatibility


Vendor Prefixes


`css
.sa-card {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
`

Fallbacks


`css
.sa-gradient {
background: #007cba; / Fallback /
background: linear-gradient(45deg, #007cba, #005a87);
}
`

Debugging Styles


Inspect Elements


Use browser dev tools to inspect ShahiAssist elements and identify CSS issues.

CSS Specificity Issues


`css
/ High specificity override /
body .shahi-assist .sa-card {
/ Your styles /
}
`

CSS Validation


Use W3C CSS Validator to check for syntax errors.

Resources


10. CSS Custom Properties
11. Sass/SCSS for Advanced Styling
12. CSS Grid and Flexbox
13. ShahiAssist CSS Documentation (in plugin assets)