Sélectionner une page

CSS Tricks For Your Explorable Theme Website

CSS Tricks For Your Explorable Theme Website


Below are a number of CSS tricks to help customize your Explorable Theme user interface. Each example has a preview and a block of custom CSS required to achieve the effect. As always, we recommend that you add all custom CSS via a Child Theme or the Custom CSS Box in ePanel.

Minimal Interface Styling

The following CSS will give your Listing Modals and hover states a more minimalistic look.

explorable-css-minimal

#et-slider-wrapper, .location-description, .et-place-text-wrapper {
	background: none;
}

#et-slider-wrapper {
	background-color: #fff;
}

.et-place-content, .et-map-postmeta, .location-title, .location-title h2 {
	border:none;
}

.et-date, .et-map-postmeta {
	text-shadow:none;
}

#et-slider-wrapper:after, #et-slider-wrapper:before {
	display: none;
}

.et-map-post .viewport {
	width: auto;
}

.et-place-content {
	padding: 40px;
}

.et-place-main-text {
	padding-left: 0;
}

.et-map-post .scrollbar, .more {
	margin-right: -25px;
}

.thumbnail:before, .et-date, .location-rating {
	border:none !important;
	-webkit-box-shadow: inset 0 0 0 !important;
	-moz-box-shadow: inset 0 0 0 !important;
	box-shadow: inset 0 0 0 !important;
}

Remove Drop-Cap

By default, listing descriptions begin with a drop-cap. The following CSS will remove this style and the first letter of the description will appear just as the rest of the text.

explorable-css-dropcap

.viewport .overview > p:nth-of-type(1):first-letter {
	display: inline;
	float: none;
	font-size: 14px;
	margin-right: 0;
	margin-top: 0;
}

Thumbnail Hover

The following CSS will modify your listing thumbnails to fade to dark on hover, with a reverse animation when the cursor hovers off.

explorable-css-hover

.thumbnail {
	background-color: #000;
}

.thumbnail img {
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.thumbnail:hover img {
	opacity:.6;
}

Rounded Corners

The following CSS will add rounded corners to your listing modals, listing hover states, and listing post pages.

explorable-css-rounded-corners

.et-place-content, .location-rating, .sub-menu {
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

 #et-slider-wrapper:before, .thumbnail:before, .thumbnail img, .location-title, #breadcrumbs {
	-webkit-border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}

#content:before{
	-webkit-border-bottom-right-radius: 12px;
	-moz-border-radius-bottomright: 12px;
	border-bottom-right-radius: 12px;
}

#et-slider-wrapper, .et_marker_info, #main-area .container, #content, .location-description {
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
}

#main-area .et-map-post img, #main-area .et-map-post .thumbnail {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

#et-slider-wrapper:after {
	display: none;
}


Listing Title Banner

The following CSS will add a semi-transparent dark banner behind your listing titles.

explorable-css-banner

.et-description {
	background-color: rgba(0,0,0,.3);
	padding:20px 0;
	margin-top: -20px;
}

If you liked this theme tip, take a stroll around the blog for more of our free resources and please let us know what our next theme tip should be!



Source link

Poster le commentaire

Votre adresse e-mail ne sera pas publiée.