Oxygen Builder button
/* BUTTON ------------*/
.ct-link-button {
background-color: #36bfc5;
border: 1px solid #36bfc5;
padding: 5px 20px 7px 20px;
font-size: 16px;
}
Responsive images with and without caption
/* WP IMAGES ------------*/
figure {
margin: 1em 0px;
}
figcaption {
text-align: center;
font-size: 90%;
color: #6d7587;
line-height: 1.4;
}
.alignnone {
max-width: 100%!important;
width: 100%!important;
height: auto!important;
}
.alignleft {
float: left;
margin: .5em 1em 0 0;
}
.alignright {
float: right;
margin: .5em 0 0 1em;
}
.wp-caption {
max-width: 100%;
height: auto;
}
.wp-caption-text {
text-align: center;
font-size: 85%;
color: #838a94;
line-height: 1.4;
margin: 6px 0 20px 0;
}
.wp-block-image img {
max-width: 100%;
height: auto;
}
.oxy-stock-content-styles img, .ct-inner-content img {
max-width: 100%;
height: auto;
}
/* MOBILE VERSION -----------------------*/
@media only screen and (max-width : 480px){
.alignleft {
margin: .5em 0 0 0!important;
max-width: 100%!important;
width: 100%!important;
}
.alignright {
margin: .5em 0 0 0!important;
max-width: 100%!important;
width: 100%!important;
}
Oxygen Builder SLIDER BUTTON
.unslider-arrow {
background: rgba(255, 255, 255, 0.4) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAQAAABuQZ3IAAAAi0lEQVR4AU3OISBEQQBAwS0AACS9NxqQgCZpkiYBVddFvWhAAUABAPQCAGC4g/0vTnrBqCfDIZl70J+kMUBPpEwT4FNXxBxz4F1HxHyr4EVTxBLb4EFNxEon4CJSlVNw9AcV9sC16h8osgke1P1ArgXwouVvdQq86ww/GQefusNf7kBviBlxpT8k+gL/Wox4r1d4MwAAAABJRU5ErkJggg==") no-repeat scroll 50% 50% / 10px 14px!important;
border-radius: 32px;
display: block;
height: 50px!important;
width: 50px!important;
margin-top: -16px;
opacity: 0.6;
overflow: hidden;
text-indent: -999em;
top: 50%;
transition: opacity 0.2s ease 0s;
}
Responsive Image OR Image auto height
/* One -------------*/
figure {
margin: 1em 0px;
}
.wp-block-image img {
max-width: 100%;
height: auto;
}
.qubely-block-image figure .qubely-image-container img, .qubely-block-image.qubely-image-layout-blurb .qubely-image-media {
width: 100%;
}
/* Two -------------*/
.oxy-stock-content-styles img, .ct-inner-content img {
max-width: 100%;
height: auto;
}
Using custom Global Color
/* Replace 1 and 2 with color id -------*/
.class {
background: color(1);
color: color(2);
}
Dropdown Menu TOP and BOTTOM spacing
.oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu {
background: #fff;
padding: 20px 0;
}
Dropdown Menu Fix Width and text into 2 lines
.oxy-pro-menu .sub-menu li.menu-item {
width: 240px;
white-space: break-spaces;
border-bottom: 1px solid #ddd;
}
Off-canvas
/* Close icon top right ----*/
.oxy-pro-menu .oxy-pro-menu-mobile-close-icon {
left: 80%;
}
/* Menu top align ----*/
.oxy-pro-menu-off-canvas-container > div:first-child {
margin-top: 0;
padding-top: 60px;
}
/* Box Shadow ----*/
.oxy-pro-menu-container.oxy-pro-menu-off-canvas-container {
box-shadow: 0 0 100px 0 rgb(0, 0, 0, 0.3);
}
Pagination
/* PAGINATION ------------*/
.oxy-easy-posts-pages .page-numbers {
background: color(1);
padding: 10px 18px;
}
.oxy-easy-posts-pages .current {
background: color(1)important;
}
Random/Dynamic Post display using using 'Manual' option in Repeater/Easy Posts
Repeater or Easy Posts > Query > Manual
post_type=archive&posts_per_page=4&no_found_rows=true&orderby=rand
Excerpts Limit
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
/**
* Change the length of excerpt.
*
* @param int $length The number of words. Default 55.
* @return int New excerpt length.
*/
function custom_excerpt_length( $length ) {
return 14; // number of words. Default is 55.
}
function new_excerpt_more( $more ) {
return '...';
}
add_filter('excerpt_more', 'new_excerpt_more');
Mobile version dropdown modification
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px){
.oxy-nav-menu {
transition: all 0.35s ease;
}
.oxy-nav-menu.oxy-nav-menu-open .oxy-nav-menu-list .menu-item a {
text-align: left;
justify-content: left;
}
#_nav_menu-8-7.oxy-nav-menu.oxy-nav-menu-open .menu-item a {
padding-top: 20px;
padding-bottom: 0px;
}
.menu-item a {
font-size: 18px!important;
}
.menu-item:hover a {
color: inherit!important;
}
.oxy-nav-menu.oxy-nav-menu-open .menu-item a:hover {
color: #36bfc5!important;
}
.menu-item-has-children .menu-item a {
font-size: 16px!important;
padding-top: 2px!important;
padding-bottom: 2px!important;
}
.oxy-nav-menu .sub-menu li.menu-item {
padding-left: 10px;
}
.menu-item-has-children .menu-item a::before {
content:'-';
padding-right: 6px;
}
}
Custom thumbnail. Where there is no Featured Image
#****DIV**** .oxy-post-image {
background-image: url(****LINK****);
width: 100%;
background-size: cover;
}
Backend Editor font size and style
.wp-block {
max-width: 800px;
}
.editor-post-title .editor-post-title__input {
line-height: 1.2;
}
.editor-styles-wrapper p {
font-size: 16px;
}