Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Blox Default Styles
/**
* Blox Frontend Default Styles
*
* This stylesheet supplies default styling for Blox. It can be disabled in the Blox settings.
*
* @package Blox
* @copyright Copyright (c) 2015, Nick Diego
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
*/
/* Caption Defaults
-------------------------------------------------------------- */
.blox-theme-default .blox-caption-container {
bottom: 0;
left: 0;
position: absolute;
text-align: left;
width: 100%;
}
.blox-theme-default .blox-caption-wrap {
background: rgba(0, 0, 0, .4);
color: #fff;
padding: 10px 20px;
}
/* Static Image Defaults
-------------------------------------------------------------- */
.blox-theme-default .blox-image-container {
margin: 0 auto;
position: relative;
text-align: center;
width: 100%;
}
.blox-theme-default .blox-image-wrap {
display: inline-block;
position: relative;
width: 100%;
}
.blox-theme-default .blox-image-container img {
vertical-align: top;
}
/* Styling for background images */
.blox-theme-default .blox-image-wrap.blox-image-background {
display: block;
position: relative;
width: 100%;
height: 400px; /* Adjust as needed */
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.blox-theme-default .blox-image-wrap.blox-image-background a {
display: block;
width: 100%;
height: 100%;
}
/* Slideshow Defaults
-------------------------------------------------------------- */
.blox-theme-default .blox-slideshow-item {
position: relative;
}
/* Styling for background images */
.blox-theme-default .blox-slideshow-item .blox-image-background {
display: block;
position: relative;
width: 100%;
height: 500px; /* Adjust as needed */
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.blox-theme-default .blox-slideshow-item .blox-image-background a {
display: block;
width: 100%;
height: 100%;
}
/* Slick Slider Styling --------------- */
.blox-theme-default .slick-slider *:focus {
outline: none;
}
.blox-theme-default .slick-slider .blox-slideshow-item.image img {
width: 100%;
max-width: 100%;
line-height: 0;
}
/* Arrows */
.blox-theme-default .slick-slider .slick-prev,
.blox-theme-default .slick-slider .slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
display: block;
width: 60px;
height: 60px;
color: transparent;
text-shadow: none;
line-height: 1;
background-repeat: no-repeat;
background-size: 100%;
text-align: right;
padding: 0;
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: initial;
z-index:1;
/* Hide the nav icons initially, show on hover */
visibility: hidden;
}
.blox-theme-default .slick-slider:hover .slick-prev,
.blox-theme-default .slick-slider:hover .slick-next {
visibility: visible;
}
.blox-theme-default .slick-slider .slick-prev:hover,
.blox-theme-default .slick-slider .slick-prev:focus,
.blox-theme-default .slick-slider .slick-next:hover,
.blox-theme-default .slick-slider .slick-next:focus {
outline: none;
}
.blox-theme-default .slick-slider .slick-prev:hover,
.blox-theme-default .slick-slider .slick-next:hover {
opacity: .7;
}
.blox-theme-default .slick-slider .slick-prev,
.blox-theme-default .slick-slider .slick-prev:hover,
.blox-theme-default .slick-slider .slick-prev:focus {
background-image: url('../images/prev.svg');
left: 2%;
background-repeat: no-repeat;
background-size: 100%;
}
[dir='rtl'] .blox-theme-default .slick-slider .slick-prev {
right: 2%;
left: auto;
}
.blox-theme-default .slick-slider .slick-next,
.blox-theme-default .slick-slider .slick-next:hover,
.blox-theme-default .slick-slider .slick-next:focus {
background-image: url('../images/next.svg');
right: 2%;
background-repeat: no-repeat;
background-size: 100%;
}
[dir='rtl'] .blox-theme-default .slick-slider .slick-next {
right: auto;
left: 2%;
}
.blox-theme-default .slick-slider .slick-prev:before,
.blox-theme-default .slick-slider .slick-next:before {
content: '';
}
/* Disable nav arrow if there is no next/prev slide */
.blox-theme-default .slick-prev.slick-disabled,
.blox-theme-default .slick-next.slick-disabled {
opacity: 0 !important;
cursor: default;
}
.blox-theme-default .slick-dots {
bottom: 3%;
}
.blox-theme-default .slick-dots li {
margin: 0 2px;
}
.blox-theme-default .slick-dots li button:before {
font-size: 14px;
color: #fff;
opacity: .6;
}
.blox-theme-default .slick-dots li button:before:hover {
opacity: .8;
}
.blox-theme-default .slick-dots li.slick-active button:before {
color: #fff;
opacity: 1;
}
/* Dark Slideshow Theme */
.blox-theme-default.dark .slick-slider .slick-prev,
.blox-theme-default.dark .slick-slider .slick-prev:hover,
.blox-theme-default.dark .slick-slider .slick-prev:focus {
background-image: url('../images/prev-dark.svg');
}
.blox-theme-default.dark .slick-slider .slick-next,
.blox-theme-default.dark .slick-slider .slick-next:hover,
.blox-theme-default.dark .slick-slider .slick-next:focus {
background-image: url('../images/next-dark.svg')
}
.blox-theme-default.dark .slick-dots li button:before {
color: #000;
}
.blox-theme-default.dark .slick-dots li.slick-active button:before {
color: #000;
}
/* Flexslider Styling --------------- */
.blox-theme-default .flexslider {
margin: 0 0 0;
background: #ffffff;
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}
.blox-theme-default .flexslider .slides > li {
position: relative;
}
.blox-theme-default .flex-direction-nav a {
width: 60px;
height: 70px;
margin: -20px 0 0;
top: 48%;
color: transparent; /* Used to make default text disappear without ruining default Flexslider theme */
text-shadow: none;
line-height: 1;
}
.blox-theme-default .flex-direction-nav a:before {
content: ''; /* remove default icon font */
}
.blox-theme-default .flex-direction-nav a.flex-next:before {
content: ''; /* remove default icon font */
}
.blox-theme-default .flex-direction-nav .flex-prev {
background-image: url('../images/prev.svg');
background-repeat: no-repeat;
background-size: 100%;
left: 2%;
}
.blox-theme-default .flex-direction-nav .flex-next {
background-image: url('../images/next.svg');
background-repeat: no-repeat;
background-size: 100%;
right: 2%;
text-align: right;
}
.blox-theme-default .flexslider:hover .flex-direction-nav .flex-prev {
opacity: 1;
left: 2%;
}
.blox-theme-default .flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 0.7;
}
.blox-theme-default .flexslider:hover .flex-direction-nav .flex-next {
opacity: 1;
right: 2%;
}
.blox-theme-default .flexslider:hover .flex-direction-nav .flex-next:hover {
opacity: 0.7;
}
.blox-theme-default .flex-control-nav {
bottom: 3%;
z-index: 1000;
}
.blox-theme-default .flex-control-paging li a {
background: #fff;
background: rgba(255, 255, 255, 0.6);
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}
.blox-theme-default .flex-control-paging li a:hover {
background: #fff;
background: rgba(255, 255, 255, 0.8);
}
.blox-theme-default .flex-control-paging li a.flex-active {
background: #fff;
background: rgba(255, 255, 255, 1);
cursor: default;
}
/* Dark Slideshow Theme */
.blox-theme-default.dark .flex-direction-nav .flex-prev {
background-image: url('../images/prev-dark.svg');
}
.blox-theme-default.dark .flex-direction-nav .flex-next {
background-image: url('../images/next-dark.svg');
}
.blox-theme-default.dark .flex-control-paging li a {
background: #000;
background: rgba(0, 0, 0, 0.6);
}
.blox-theme-default.dark .flex-control-paging li a:hover {
background: #000;
background: rgba(0, 0, 0, 0.8);
}
.blox-theme-default.dark .flex-control-paging li a.flex-active {
background: #000;
background: rgba(0, 0, 0, 1);
cursor: default;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.