Overview
Blox and includes a default stylesheet that provides minimal styling to content blocks. In Blox, the default styles affect both the static image and builtin slideshow blocks. Below is the complete, up to date, default stylesheet. For context, check out the article on frontend markup. These default styles can be disabled on an individual block level, on the Style tab, or they can be disabled globally on the plugin Settings page.
| /** | |
| * 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; | |
| } |