This Page is part of Team-Rex.net

Theme X mods



Helpful Links

Google Design Resizer
Responsinator
What WordPress Theme is that? Find out what Theme and Plugins are used on a WordPress Page

Resource for Stock images, graphics and icons

PhotodudePixabay
Unsplash
Flaticon
Refe
Freepick

Helpful WordPress Plugins

What the File – Find out what template parts are used to display currently viewed page

 


Navbar

Mobile Menu Button

Change Color (Custom CSS, Child Theme Style.css)

.x-btn-navbar { color: #FF0000 !important; }

Change Color when Hover (Custom CSS, Child Theme Style.css)

.x-btn-navbar :hover { color:#000000 !important; }

Blog Name/Title

Hide Blog Name/Title (Custom CSS, Child Theme Style.css) – (Does not hide logo)

.x-brand.text { display: none; }


Single Post

Featured Object

Change Size and alignment (Custom CSS, Child Theme Style.css)

.single-post .entry-featured { width:80%; display:block; }


Page

Headline

Hide Page Headline/Title

.page .entry-title { display: none; }


Post Carousel

Bug / Carousel not working / Showing blank bar (On Ethos Stack)

Activate Carousel (Custom JavaScript)

jQuery(document).ready(function() { jQuery('.x-post-carousel').slick({ speed : 500, slide : 'li', slidesToShow : 5, slidesToScroll : 1, responsive : [ { breakpoint : 1500, settings : { speed : 500, slide : 'li', slidesToShow : 4 } }, { breakpoint : 1200, settings : { speed : 500, slide : 'li', slidesToShow : 3 } }, { breakpoint : 979, settings : { speed : 500, slide : 'li', slidesToShow : 2 } }, { breakpoint : 550, settings : { speed : 500, slide : 'li', slidesToShow : 1 } } ] }); });


Footer

Widget Area

Change Background Color

.x-colophon.top { background-color: #5B5853; }

Change Widget Footer Size

.x-colophon.top { padding:20px 0; max-height:300px; }

Set Max height

.x-colophon.top { max-height: 250px; }

Reduce Image width in Widget Area

.textwidget img { width: 50%; }

Menu

Change Content Text Color

.x-colophon.bottom .x-colophon-content { color:#FFFFFF; } 

Change Content Link Color

<code class="prettyprint">.<span class="pln">x</span><span class="pun">-</span><span class="pln">colophon</span><span class="pun">.</span><span class="pln">bottom </span><span class="pun">.</span><span class="pln">x</span><span class="pun">-</span><span class="pln">colophon</span><span class="pun">-</span><span class="pln">content a </span><span class="pun">{</span><span class="pln"> color</span><span class="pun">:#</span><span class="lit">5B5853</span><span class="pun">;</span> <span class="pun">}</span></code>

Change Content Link Color on hover

<code class="prettyprint"><span class="pun">.</span><span class="pln">x</span><span class="pun">-</span><span class="pln">colophon</span><span class="pun">.</span><span class="pln">bottom </span><span class="pun">.</span><span class="pln">x</span><span class="pun">-</span><span class="pln">colophon</span><span class="pun">-</span><span class="pln">content a</span><span class="pun">:</span><span class="pln">hover </span><span class="pun">{</span><span class="pln"> color</span><span class="pun">:#</span><span class="lit">000</span><span class="pun">;</span> <span class="pun">}</span></code>

Change Listed Link Color

.x-colophon.bottom .x-nav li a { color:#FFFFFF; } 

Change Listed Link Color on hover

.x-colophon.bottom .x-nav li a:hover { color:#FFFFFF; } 

Remove Underline from Listed Link

.x-colophon.bottom a { text-decoration: none !important; } 


Widgets

Header

Change Color of Widget Header

.h-widget { color: #fff !important; }


Plugins

Content Dock

Make Content Dock viewable on mobile devices

@media (max-width: 767px) .x-content-dock { display: block !important; }


Icons

Ethos Icons > > > CLICK HERE

Add icon with different color use inline CSS

[icon type="thumb-up" style="font-size: 2.5em;color:#336699"]

Assign a CSS class

[icon type="thumb-up" style="font-size: 2.5em;" class="my-red-icons"]

And then add the CSS into your Customizer>Custom>CSS or style.css in the Child Theme
 .my-red-icons { color: red; }

Get Rid of tooltip of social icons

.x-share-options .tooltip { display:none; }


Contact form 7

Turn off double messages/feedbacks from Contact Form 7

.screen-reader-response { display: none; }

 

Change Text Color, Border thickness and Color and max-width of message box

div.wpcf7 div.wpcf7-response-output, div.wpcf7 div.wpcf7-validation-errors { color: #000000; border: 2px solid #FF0000 !important; max-width: 500px; }

 



 

Un-compiled CSS file is stored inside the x>framework>scss Folder

 




 

.x-colophon.bottom .x-nav li:before {
float: left;
margin: 0 0.2em;
opacity: 0.35;
}

.x-colophon.bottom .x-colophon-content {
margin: 20px 34px;
}

.x-colophon.bottom .x-nav {
margin: 20px 23px;
text-align: center;
}

.middle_home {
background: rgba(0,0,0,0.6);
padding: 33px 5px 0 11px;
}

.search-results .left {
padding: 35px 20px 20px 68px;
}

.search-results .hentry {
margin-top: 40px;
border-bottom: 1px rgba(255,255,255,0.1) solid;
padding-bottom: 40px;
}

.search-results .entry-excerpt {
margin-top: 4px;
}

.x-navbar .x-nav > li > a:hover { box-shadow: none; -webkit-box-shadow: none; }

.x-landmark-breadcrumbs-wrap {
width: 83%;
}

.home_content_band {
padding: 0px !important;
}

.home .x-block-grid.three-up > li {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
margin: 0 1%;
padding: 3%;
width: 31.333%;
}

.home .entry-content p {
margin: 0px !important;
}

.home .aligncenter {
margin: 0px;
}

.x-navbar .x-nav > li > a:hover, .x-navbar .x-nav > li.current_page_item > a {
box-shadow: 0 0px 0 0 #ffffff !important;
}

.x-sidebar h4 {
color: #ffff00 !important;
}

.entry-content p {
font-family: Arial;
overflow-wrap: break-word;
}

.home_images {
display: inline;
text-align: center;
}

.home_images .aligncenter {
display: inline;
margin: 0px;
}

.home .x-content-band {
margin: 0px !important;
}

.home .x-block-grid.three-up {
margin: 0.5em -1%;
}

.x-tab-content .x-tab-pane {
background-color: rgba(0, 0, 0, 0.5);
}

.x-colophon.bottom {
background-color: rgba(0, 0, 0, 0.67);
margin-bottom: 35px;
margin-top: 35px;
margin-left: -8.2%;
width: 117% !important;
padding: 6px 0;
font-size: 1.7rem;
line-height: 1.1;
}

.x-colophon.top {
color: #4e4d4d;
background-color: transparent;
padding: 1%;
}

.x-colophon.top a {
color: #FFFFFF;
font-size: 23px;
letter-spacing: 0.5px;
text-transform: uppercase;
}

.site {
background-color: rgba(0, 0, 0, 0);
margin: 0 auto;
}

.page .no-post-thumbnail .entry-content {
background-color: transparent;
color: #FFFFFF;
margin-top: 0;
padding: 30px 62px 10px 62px;
}

.home .entry-content {
background-color: transparent;
color: #FFFFFF;
margin-top: 0;
padding: 0px 62px 10px 62px !important;
}

.x-header-landmark {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: rgba(0, 0, 0, 0.80);
border-color: rgba(0, 0, 0, 0.45) #000000 #AF2A46;
border-image: none;
border-style: solid none;
border-width: 0 0 0px;
padding: 21px 0;
}

.x-navbar {
background-color: rgba(0, 0, 0, 0) !important;
margin-top: -20px;
margin-bottom:0px;
}

.x-navbar-wrap {
border-bottom: 36px solid rgba(0, 0, 0, 0.65);
padding-top: 14px;
}

.x-topbar {
background-color: transparent !important;
}

.x-topbar .p-info {
float: right;
font-size: 2.5rem;
letter-spacing: 1px;
line-height: 0;
margin: 20px 0 0;
}

.x-container-fluid.width {
width: 100%;
}

.x-container-fluid.offset {
margin: 0;
background-color: rgba(0, 0, 0, 0.65);
}

.h-landmark {
color: #F8AF3D;
font-size: 300%;
letter-spacing: -0.075em;
line-height: 1;
text-transform: uppercase;
font-weight: bolder;
margin: -13px 0 -13px 66px;
}

.x-sidebar {
border-left: 1px solid #FFFFFF;
margin-bottom: 30px;
margin-top: 30px;
padding-left: 30px;
padding-right: 40px;
}

ul, ol {
margin: 0 0 0.5em 1.655em;
padding: 0;
}

h4 {
font-size: 21px;
font-weight: bold;
margin-bottom: 0;
margin-top: 0;
text-transform: none;
}

h3, h3, h5, h6 {color: #fff200;}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a {color: #fff200;}

.form-search:before,
.widget_product_search form:before {color: #ffffff;}

blockquote {color: #ffffff;}

.form-search {color: #fff200;}

.x-colophon.bottom .x-nav a {
color: #fcce41;
}

.x-colophon.bottom .x-nav {
font-size: 25px;
font-weight: bold;
color: transparent;
}

.home .x-container-fluid.offset {
background-color: transparent;
}

.home .x-header-landmark {
display: none;
}

.home .x-navbar-wrap {
border-bottom: 0 none;
padding-bottom: 50px;
padding-top: 14px;
}

.home .x-colophon.top {
display: none;
}

.backstretch img {
top: 0px !important;
}

li {
line-height: 1.1;
}

body {
line-height: 1.3;
color: #ffffff;
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */

.sf-menu a {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5) !important;
border-bottom: 2px solid #000000 !important;
font-size: 28px !important;
line-height: 0 !important;
position: relative;
text-align: center !important;
}

.page .no-post-thumbnail .entry-content {
margin-top: 0;
padding: 0 0 10px;
}

.home .x-brand {
margin-left: 3px;
}

.x-brand {
margin-left: -8px;
}

.x-topbar .p-info {
display: none;
line-height: 1.2;
margin: 10px 0;
}

.x-nav-collapse, .x-nav-collapse.collapse {
background-color:  rgba(0,0,0,.5);
}

.x-navbar-wrap {
border-bottom: 0 none;
padding-bottom: 10px;
padding-top: 0;
}

.h-landmark {
margin: -8px 0 -7px;
}

.page .no-post-thumbnail .entry-content {
margin-top: 0;
padding: 20px;
}

.home .no-post-thumbnail .entry-content {
margin-top: 0;
padding: 0;
}

.x-sidebar {
margin-top: 0px;
}

body, html {
overflow-x: hidden;
overflow-y: auto;
}

}

/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px) {
/* Styles */

.sf-menu a {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5) !important;
border-bottom: 2px solid #000000 !important;
font-size: 28px !important;
line-height: 0 !important;
position: relative;
text-align: center !important;
}

.page .no-post-thumbnail .entry-content {
margin-top: 0;
padding: 0 0 10px;
}

.home .x-brand {
margin-left: 3px;
}

.x-brand {
margin-left: -8px;
}

.x-topbar .p-info {
display: none;
line-height: 1.2;
margin: 10px 0;
}

.x-nav-collapse, .x-nav-collapse.collapse {
background-color: rgba(0,0,0,.5);
}

.x-navbar-wrap {
border-bottom: 0 none;
padding-bottom: 10px;
padding-top: 0;
}

.h-landmark {
margin: -8px 0 -7px;
}

.page .no-post-thumbnail .entry-content {
margin-top: 0;
padding: 20px;
}

.home .no-post-thumbnail .entry-content {
margin-top: 0;
padding: 0;
}

.x-sidebar {
margin-top: 0px;
}

body, html {
overflow-x: hidden;
overflow-y: auto;
}

}

/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px) {
/* Styles */

.page .no-post-thumbnail .entry-content {
margin-top: 0;
padding: 0 0 10px;
}

.sf-menu a {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5) !important;
border-bottom: 2px solid #000000 !important;
font-size: 28px !important;
line-height: 0 !important;
position: relative;
text-align: center !important;
}

.home .x-brand {
margin-left: 3px;
}

.x-brand {
margin-left: -8px;
}

.x-topbar .p-info {
display: none;
line-height: 1.2;
margin: 10px 0;
}

.x-nav-collapse, .x-nav-collapse.collapse {
background-color:  rgba(0,0,0,.5);
}

.x-navbar-wrap {
border-bottom: 0 none;
padding-bottom: 10px;
padding-top: 0;
}

.h-landmark {
margin: -8px 0 -7px;
}

.page .no-post-thumbnail .entry-content {
margin-top: 0;
padding: 20px;
}

.home .no-post-thumbnail .entry-content {
margin-top: 0;
padding: 0;
}

.x-sidebar {
margin-top: 0px;
}

body, html {
overflow-x: hidden;
overflow-y: auto;
}

}

/* iPads (portrait and landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */

.sf-menu a {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5) !important;
border-bottom: 2px solid #000000 !important;
font-size: 28px !important;
line-height: 0 !important;
position: relative;
text-align: center !important;
}

}

/* iPads (landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */

.sf-menu a {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5) !important;
border-bottom: 2px solid #000000 !important;
font-size: 28px !important;
line-height: 0 !important;
position: relative;
text-align: center !important;
}

}

/* iPads (portrait) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */

.sf-menu a {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5) !important;
border-bottom: 2px solid #000000 !important;
font-size: 28px !important;
line-height: 0 !important;
position: relative;
text-align: center !important;
}

}

/* Desktops and laptops ———– */
@media only screen
and (min-width : 1224px) {
/* Styles */

.home .x-brand {
margin-left:  -12px;
}

.x-brand {
margin-left:  -12px;
}

.page .no-post-thumbnail .entry-content {
margin-top: 0;
padding: 30px 62px 10px;
}

.x-topbar .p-info {
display: none;
line-height: 0;
margin: 20px 0 0;
}

.x-navbar-wrap {
border-bottom: 36px solid rgba(0, 0, 0, 0.5);
padding-top: 14px;
padding-bottom: 0px;
}

.h-landmark {
margin:  -13px 0 -13px 66px !important;
}

.page .no-post-thumbnail .entry-content {
margin-top: 0;
padding: 30px 0 10px 67px !important;
}

.x-sidebar {
margin-top: 30px;
}

body, html {
overflow-x: hidden;
overflow-y: auto;
}

}

/* Large screens ———– */
@media only screen
and (min-width : 1824px) {
/* Styles */

.home .x-brand {
margin-left:  -12px;
}

.x-brand {
margin-left:  -12px;
}

.page .no-post-thumbnail .entry-content {
margin-top: 0;
padding: 30px 62px 10px;
}

.x-topbar .p-info {
display: none;
line-height: 0;
margin:  20px 0 0;
}
.x-navbar-wrap {
border-bottom: 36px solid rgba(0, 0, 0, 0.5);
padding-top: 14px;
padding-bottom: 0px;
}

.h-landmark {
margin:  -13px 0 -13px 66px !important;
}

.page .no-post-thumbnail .entry-content {
margin-top: 0;
padding: 30px 0 10px 67px;
}

.x-sidebar {
margin-top: 30px;
}

body, html {
overflow-x: hidden;
overflow-y: auto;
}

}

/* iPhone 4 ———– */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */

.sf-menu a {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5) !important;
border-bottom: 2px solid #000000 !important;
font-size: 28px !important;
line-height: 0 !important;
position: relative;
text-align: center !important;
}

.page .no-post-thumbnail .entry-content {
margin-top: 0;
padding: 0 0 10px;
}

.home .x-brand {
margin-left: 3px;
}

.x-brand {
margin-left: -8px;
}

.x-topbar .p-info {
display: none;
line-height: 1.2;
margin: 10px 0;
}

.x-nav-collapse, .x-nav-collapse.collapse {
background-color:  rgba(0,0,0,.5);
}

.x-navbar-wrap {
border-bottom: 0 none;
padding-bottom: 10px;
padding-top: 0;
}

.h-landmark {
margin: -8px 0 -7px;
}

.page .no-post-thumbnail .entry-content {
margin-top: 0;
padding: 20px;
}

.home .no-post-thumbnail .entry-content {
margin-top: 0;
padding: 0;
}

.x-sidebar {
margin-top: 0px;
}

body, html {
overflow-x: hidden;
overflow-y: auto;
}

}

/* Android/Galaxy Phones ———– */
@media
only screen and (max-device-width: 360px),
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (device-aspect-ratio: 9/16) {

.sf-menu a {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5) !important;
border-bottom: 2px solid #000000 !important;
font-size: 28px !important;
line-height: 0 !important;
position: relative;
text-align: center !important;
}

.page .no-post-thumbnail .entry-content {
margin-top: 0;
padding: 0 0 10px;
}

.home .x-brand {
margin-left: 3px;
}

.x-brand {
margin-left: -8px;
}

.x-topbar .p-info {
display: none;
line-height: 1.2;
margin: 10px 0;
}

.x-nav-collapse, .x-nav-collapse.collapse {
background-color:  rgba(0,0,0,.5);
}

.x-navbar-wrap {
border-bottom: 0 none;
padding-bottom: 10px;
padding-top: 0;
}

.h-landmark {
margin: -8px 0 -7px;
}

.page .no-post-thumbnail .entry-content {
margin-top: 0;
padding: 20px;
}

.home .no-post-thumbnail .entry-content {
margin-top: 0;
padding: 0;
}

.x-sidebar {
margin-top: 0px;
}

body, html {
overflow-x: hidden;
overflow-y: auto;
}
}

@media screen and (-webkit-min-device-pixel-ratio:0) {

.sf-menu li a {
background: transparent !important;
border-bottom: 0px solid #000000 !important;
font-size: 21px !important;
line-height: 0 !important;
position: relative;
text-align: center !important;
/* on Safari and Chrome */
}
}

 

body.blog {
background:red;
}

 

Change the Navbar Color

.x-navbar {
background-color: #000000;}

Change the topbar Color

.x-topbar {
background-color: #000000;}

Remove the border between the navbar and the top bar

.x-topbar {
border-style:none;}

Move the Sub Menu items further up or down

.x-navbar .x-nav > li > .sub-menu {
top: 45px;
}

Used to hide the logo bar when the logobar and navbar are stacked
Good if you have your logo in the image above the masthead.

.x-logobar {
display:none;}