WPResidence Header Media and Slider CSS Classes Guide
1. Header Media Classes
1.1 .header_media
Declaration: scss/components/header-media/_header-media.scss, line 4
Usage: Main container for all header media content, including sliders and static headers.
.header_media {
background-color: #fdfdfd;
z-index: 3;
width: 100%;
display: inline-block;
position: relative;
}
1.2 .wpestate_header_image
Declaration: scss/components/header-media/_header-media.scss, line 20
Usage: Applied to the div containing the header background image.
.wpestate_header_image {
height: 100%;
background-position: 50% 50%;
background-size: cover;
}
1.3 .wpestate_header_image_overlay
Declaration: scss/components/header-media/_header-media.scss, line 35
Usage: Overlay div for adding tint or texture to header images.
.wpestate_header_image_overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
2. Theme Slider Classes
2.1 .theme_slider_wrapper
Declaration: scss/components/header-media/_header-media.scss, line 50
Usage: Main wrapper for all theme slider types.
.theme_slider_wrapper {
overflow: hidden;
width: 100%;
}
2.2 .theme_slider_1
Declaration: scss/components/header-media/header-media-slider-type-1.scss, line 2
Usage: Specific styles for the first slider type.
.theme_slider_1 {
cursor: pointer;
// Additional styles...
}
2.3 .carousel-indicators
Declaration: scss/components/header-media/_header-media.scss, line 70
Usage: Styles the navigation indicators in slider type 1.
.carousel-indicators {
gap: 5px;
// Additional styles for individual indicators...
}
3. Slider Type 2 Specific Classes
3.1 .theme_slider_2
Declaration: scss/components/header-media/header-media-slider-type-2.scss, line 3
Usage: Main container for slider type 2.
.theme_slider_wrapper.theme_slider_2 {
// Styles specific to slider type 2
}
3.2 .slick-prev, .slick-next
Declaration: scss/components/header-media/header-media-slider-type-2.scss, line 40
Usage: Styles the previous and next buttons in slider type 2.
.slick-prev.slick-arrow,
.slick-next.slick-arrow {
top: 45%;
color: #fff;
// Additional styles...
}
4. Slider Type 3 Specific Classes
4.1 .theme_slider_3
Declaration: scss/components/header-media/header-media-slider-type-3.scss, line 2
Usage: Main container for slider type 3.
.theme_slider_3 {
// Styles specific to slider type 3
}
4.2 .theme_slider_3_carousel-indicators
Declaration: scss/components/header-media/header-media-slider-type-3.scss, line 120
Usage: Styles the thumbnail navigation in slider type 3.
.theme_slider_3_carousel-indicators {
position: absolute;
bottom: 90px;
left: 50%;
// Additional styles...
}
5. Property Details Classes in Sliders
5.1 .theme-slider-price
Declaration: scss/components/header-media/header-media-slider-type-1.scss, line 80
Usage: Displays the property price in slider type 1.
.theme-slider-price {
position: absolute;
bottom: 0px;
left: 26px;
// Additional styles...
}
5.2 .listing-details
Declaration: scss/components/header-media/header-media-slider-type-1.scss, line 95
Usage: Container for property details (bedrooms, bathrooms, etc.) in slider type 1.
.listing-details {
float: right;
color: #5c727d;
font-size: 15px;
// Additional styles...
}
6. Agent Contact Classes in Sliders
6.1 .theme_slider_contact_wrapper
Declaration: scss/components/header-media/header-media-slider-type-1.scss, line 120
Usage: Wrapper for agent contact information in slider type 1.
.theme_slider_contact_wrapper {
top: 145px;
left: 4%;
position: absolute;
// Additional styles...
}
6.2 .wpestate_theme_slider_contact_agent
Declaration: scss/components/header-media/header-media-slider-type-1.scss, line 150
Usage: Styles the “Contact Agent” button in slider type 1.
.wpestate_theme_slider_contact_agent {
padding: 0px 15px;
background: #69c17d;
// Additional styles...
}
7. Responsive Classes
7.1 .mobile_header_media_sticky
Declaration: scss/components/header-media/_header-media.scss, line 200
Usage: Applied to make header media sticky on mobile devices.
.mobile_header_media_sticky {
position: fixed;
top: 0;
// Additional styles...
}
This guide provides a comprehensive overview of the CSS classes used in the WPResidence theme’s header media and slider components. Each class is linked to its SCSS declaration and its usage is explained, allowing for easier customization and understanding of the theme’s structure.
Additional WPResidence Header Media and Slider CSS Classes
1. Agent Contact Button Class
1.1 .wpestate_theme_slider_contact_agent
Declaration: scss/header-media/header-media-slider-type-1.scss, line 150 (approximate)
Usage: Styles the “Contact Agent” button in the theme slider, particularly in slider type 1.
.wpestate_theme_slider_contact_agent {
padding: 0px 15px;
background: #69c17d;
width: auto;
position: relative;
color: #fff;
font-size: 14px;
font-weight: 500;
border-radius: 4px;
line-height: 2;
display: inline-block;
text-align: center;
transition: all 300ms ease;
&:hover {
background: rgb(105 193 125 / 80%);
}
}
This class is crucial for styling the contact button that allows users to get in touch with the property agent directly from the slider. It’s designed to be visually appealing and encourage user interaction.
2. Mobile Header Sticky Class
2.1 .mobile_header_media_sticky
Declaration: scss/header-media/_header-media.scss, line 65 (approximate)
Usage: Applied to make the header media sticky on mobile devices. This class is dynamically added based on the theme’s responsive design settings.
.mobile_header_media_sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background-color: #fff;
box-shadow: 0 1px 0 rgba(0,0,0,.1);
transition: transform .3s ease;
&.hidden {
transform: translateY(-100%);
}
}
This class is essential for improving the user experience on mobile devices by keeping the header accessible as users scroll through the content. It’s particularly useful for long pages or when quick access to navigation is important.
Usage in Theme
1. The wpestate_theme_slider_contact_agent class is typically used within the slider templates, such as in header_media_slider_template_1.php. It’s applied to the button element that triggers the contact form or links to the agent’s contact page.
2. The mobile_header_media_sticky class is usually added dynamically via JavaScript based on the user’s scroll position and device type. You might find its application in the theme’s main JavaScript file or in a specific script handling responsive behaviors.
Customization Tips
- To modify the appearance of the contact agent button, you can target the .wpestate_theme_slider_contact_agent class in your child theme’s CSS or in the theme customizer.
- For adjusting the sticky behavior of the mobile header, you may need to modify both the CSS (.mobile_header_media_sticky) and the JavaScript that controls when this class is applied or removed.
Including these classes in your customization efforts will help ensure a consistent look and feel across different devices and improve the overall user experience of the WPResidence theme.