X Theme update screws up styling

Hello, I still am not able to update the X Theme. I’ve cleared all caches at WPEngine and Cloudflare. It looks fine now because I had to revert to the previous version. Is there somebody can take a look at screen shots of old vs. new site? This support forum is frustrating me.

Thank-you.

Hi there,

We are only offering support through this forum and we attend to the tickets from oldest to newest as fast as we can.

As for your site, it seems that you have updated Cornerstone to the latest version but left X in the older version which is causing an incompatibility issue.

Kindly also make sure to update X to the latest version to avoid issues like this then clear your site and browser cache after updating.

Hope this helps.

Cornerstone was updated and caused no issues to the styling of the site. I updated X after updating cornerstone, cleared all caches including cloudflare and that’s when the site doesn’t rendered correctly.

As far as I can tell it’s not picking up my Global CSS.

If you need to login, let me know.

I just went through updating plugins again to see what affect it has. When cornerstone is updated but not the theme, the blog area on the home page disappears, but the styling is not affected. It’s only when I update X that the styling is not applied from Global CSS.

Hello @mclukens,

Thanks for asking. :slight_smile:

I suggest you to update the website on a staging server and in case any issue comes up please let us know along with the login details. Reason why I am suggesting you to update on a staging server is because in case of any problem, same can be looked at without affecting live website.

You can take a look at our theme and plugin update guide for more information.

Thanks.

This is the staging site with the theme update: http://homefiresprink.staging.wpengine.com

This is the live site before update: http://homefiresprink.staging.wpengine.com

Thank-you.

Hi There @mclukens

Upon testing, I see that you have updated your X theme but you’re still using an older version Cornerstone plugin. Please delete your current version of Cornerstone plugin by head over to WordPress plugins section. Then head over to X -> Validation section and wait for few seconds to install the latest version of Cornerstone plugin automatically.

After updating, make sure to purge your server cache, clear your browser cache and test your site again.

Let us know how it goes.
Thanks!

Hi. Thanks for the suggestion.

I’ve updated cornerstone several times and cleared caches. I even manually uploaded a new X theme and cornerstone to the server which I’ve had to do in the past to update them.

It did fix the problem with the top menu and the blog showing up on the home page but formatting is still all screwed up. If you compare the staging with the live site: http://homefiresprink.staging.wpengine.com vs. https://homefiresprinkler.org, you will see that it’s:

  • adding padding to the animated video under the header
  • “View Cart” at bottom of menu is huge and wrong color
  • the h6 styles, padding and formatting for the the 3 areas underneath “Start here to learn…” is not getting picked up
  • the footer formatting is all out of whack

It seems it’s not picking my custom css.

Thank-you for your help.

Also, when I go into “Theme Options” “typography” and “Enable font manager” the layout looks good but the fonts aren’t correct. It’s not bringing in google fonts.

Hi again,

I compared both of your sites and the difference is the custom CSS, your staging site is not picking up the Custom CSS, If you’ve added it in the Theme Options > CSS section then there could be a syntax error which is preventing your CSS to work. You can check your CSS for errors via https://jigsaw.w3.org/css-validator/#validate_by_input. In the mean time move all of your custom CSS to your child theme’s style.css file. I’ve copied the CSS from your live site and tested in your staging site and it worked.

.x-navbar .desktop .sub-menu a:hover,.x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a {
color: #000000;
}
.x-btn-widgetbar {
  display:none;
}
/*HEADING PRODUCT PAGES*/
.h-landmark {
    letter-spacing: 0px;
}
.x-navbar .desktop .x-nav > li > a {
    height: 30px;
    padding-top: 20px;
padding-bottom: 20px;
}
.x-navbar .x-nav-wrap .x-nav > li > a {
font-weight: 500;
}

/*HEADER AND NAV for BFL COMMUNITY SECTION*/

/*HEADER AND NAV*/
.c-social {
  display:none;
}


/*SO IT LOOKS GOOD ON MOBILE*/
.x-topbar .p-info {
 background-color: #43b59c
}

.x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a {
font-style: normal;
font-weight: 900;
letter-spacing: 0.05em;
margin-bottom: 1.0em;
line-height: 1.1em;
}

.x-navbar .desktop .sub-menu a {
font-size: 1.1em;
  line-height: 1.1em;
  margin-bottom: 0px;

}
.desktop .sub-menu {
    margin-bottom: .8em;
}
.desktop .x-nav .x-megamenu > .sub-menu > li {
  margin: 0px;
}

.x-topbar .x-social-global a i {
    color:#fff;
}

.x-topbar .p-info {
   font-size: 1.2em;
    line-height: 1.3;
    color: #fff;
}

.x-topbar .p-info a {
    color: #fff;
border-bottom: 0px;
}

.x-topbar .p-info a:hover {
    color: #fff;
border-bottom: 1px dotted;
}

/*MENU*/
.x-navbar-fixed-left-active .desktop .x-nav .x-megamenu > .sub-menu, .x-navbar-fixed-right-active .desktop .x-nav .x-megamenu > .sub-menu {
    padding: 8px;
    width: 830px;
}

.x-navbar-fixed-left .desktop .x-nav {
  margin-top: 1em;
     }
  

.masthead-inline .x-navbar.x-navbar-fixed-left .desktop .sub-menu .sub-menu {
    top: 4em;
    left: 40%;
    right: auto;
}
.masthead-inline .x-navbar.x-navbar-fixed-left .desktop .sub-menu {
    margin-top: -20px;
  left: 80%;
}




/*MAIN*/

.entry-content {
    margin-bottom: 2em;
}

.entry-wrap {
 padding-top: 0px;   
box-shadow: none;
}

#x-content-band-1 .x-column.vc {
width:100%!important;
display:block!important;
float:none!important;
}
.mejs-video .mejs-layer {

  padding:0;
}

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

.x-container.max {
    max-width: 1250px;
  padding-left: 3%;
  padding-right: 3%;
}

.x-container.max.text {
  padding-left: 3%;
  padding-right: 3%;
}

.x-column.x-1-3 {
    width: 29%;
}


.qgintro_hype_container{
margin: 0 auto;
}

/*FONTS*/
.vc_general.vc_cta3 h2 {
font-size: 24px;
}

p {
line-height: 24px;
  margin-top: 0px;
  margin-bottom: 10px;
}

a {
  font-weight: bold;
}

h1 {
font-size: 2.2em;
color: #fff;
background-color: #008ea8;
padding: 30px;
margin-top: 0px;
margin-bottom: 0px;
}


h2 {
font-size: 1.8em;
color:  #008ea8;
margin-top: .5em;
  margin-bottom: .5em;
}

h3 a {
color: #43b59c;
}

h3 {
margin-top: 0em;
font-size: 1.3em;
  color: #43b59c;
}

h4 {
font-size: 1.1em;
line-height: 1.3em;
color: #000;
margin-top: 1.313em;
  margin-bottom: 0em;
}

h5 {
margin-top: -2.2em;
  margin-bottom: 1em;
  font-size: .8em;
}

h6 {
color: #fff;
background-color: #43b59c;
padding: 20px;
margin-top: -25px;
margin-bottom: 1em;
font-size: 1.1em;
line-height: 1.1em;
}

h6 a {
color: #fff;
}

h6 a:hover {
color: #e2e5e5;
}

/*SHORTCODE COLUMNS*/
.su-row {
    clear: both;
    zoom: 1;
    margin-bottom: 1em;
}

/*IMAGES*/

.zip {
margin: 1.3em 0.35em 0.35em 0px;
float: left;
}
.alignone {
  margin-bottom: 0em;
}
.fullsizeimage {
    width: 100%;
}

.wp-caption {
  border: 0px;
  box-shadow: none;
}
.wp-cap.wp-caption > .wp-caption-text, .wp-caption > .wp-caption-text:last-child {
  font-size: 9px;
  text-transform: none;
}

.wp-image-3128 {
margin:0;
}



/*LIGHTBOX*/
.mfp-wrap {
  display: none;
}

.x-column {
   margin-right: 2%;
}

/*FOOTER*/
.x-colophon {
    
    border-top: 1px solid #D4D4D4;
    background-color: #008ea8;
    box-shadow: 0px -0.125em 0.25em 0px rgba(0, 0, 0, 0.075);
}
.x-colophon.bottom {
background-color: #fff;
}

to.h-widget {
    margin: 0px 0px 0.5em;
    font-size: 120%;
 
font-family: Lato, sans-serif;
text-transform: uppercase;
color: #fff;
}

.widget {
    text-shadow: none;
color: #ffffff;

}
.widget ul li:hover, .widget ol li:hover {
    background-color: #008ea8;
}

.widget ul li a:hover{
color: #e1e5e4;
}

.widget ul li a {
    color: #fff;
}

.widget ul li, .widget ol li {
  border-bottom: none;
  box-shadow: none; }

.widget h4 {
  color: #ffffff
  }

.widget ul, .widget ol {
     margin-left: 0px;
    border: 0;
   box-shadow: none;
}

.widget.widget_recent_entries li {
    padding-left: 0;
}

.widget_nav_menu ul li a {
  font-size: 12px;
  box-shadow: 0px;
  text-align: center;
  border-bottom: 0px
}

.widget ul li a {
  border-bottom: 0px;
}

.widget_tag_cloud {
  display:none;
}

/*BUTTONS*/
.vc_btn3.vc_btn3-size-lg {
    font-size: 20px;
    padding: 15px 20px;
}

.vc_btn3.vc_btn3-color-info.vc_btn3-style-modern:hover {
    background-color: #008ea8;
}

/*VIDEOS*/

.thumbnail-video-container 
{
     position: relative;
  padding-bottom: 56.25%;
    padding-top: 10px; 
  height: 0; 
  overflow: hidden;
}

.qgwork_hype_container {
height: 1000px;
padding-bottom: 1000px;
}

.video-container 
{
    position: relative;
  padding-bottom: 56.25%;
    padding-top: 30px; 
  height: 0; 
  overflow: hidden;
}

 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.intro-video
{
  padding: 0px!important;
  margin: 0px!important;
  height: auto!important;
}

/*BANNERS/LIGHTBOX*/

.ilightbox-holder.light {
    padding: 0%;
}

/*vocational training lightbox*/
.with-container {
    padding: 0;
}

/*BLOG*/
.x-sidebar .widget {
    background-color: #41b59c;
    padding: 20px;
}

.widget.widget_recent_entries li a {
    font-size: 110%;
}

.x-recent-posts .h-recent-posts {
    margin: 0px;
    font-size: 24px;
}
.entry-thumb img {
  display: none;
}

.x-iso-container-posts.cols-2 .entry-title {
    font-size: 1.2em;
  line-height: 1.4em;
}

.entry-title {
  font-size: 1.8em;
  line-height:1.2;
}

/*BUTTONS*/
a.inlinecartbutton {
  margin-top: -30px;
}

/*SEARCH PAGE*/
.search-results .x-sidebar.right {
    display: none;
}

.search-results .x-main.left {
    width: 100%;
}

/*FORMS*/

input[type="radio"] {
   display:block;
  /* Hides the default checkbox style */
  height: 1.618em;
  width: 1.618em;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */

  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */

  box-sizing: border-box;
  /* Opera/IE 8+ */

  border: 0.382em solid #d7d3d2;
  cursor: pointer;
  position: relative;
  -webkit-transition: .15s;
  border-radius: 2em;
  background-color: #d7d3d2;
}

input[type="checkbox"]{
display:block;
}

.p-landmark-sub, .p-meta {
    display: none;
}



/*SIDEBAR*/
.page-id-2798 .x-sidebar .right {
display:none;
}

.page-id-2798 .x-main {
width: 99%;
}

/*SHOPPING CART*/
.x-img-thumbnail { 
  border: 0px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  padding: 0px;
}

.description_tab {
  display: none;
}

.x-tab-content {
  display: none;
}
.woocommerce .related ul.products li.product {
    border: 0px solid rgba(0, 0, 0, 0);
}

.woocommerce-ordering select {
  display: none;
}

.woocommerce-product-gallery__trigger {
  display: none;
}

a.x-img > img {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
  border: 1px;
}

.vc_gitem-zone { 
    background-position: 0 0;
    background-size: 90%; 
}

.vc_gitem_row .vc_gitem-col {
    padding-right: 10%;
  padding-left: 10%;
  padding-top: 10%;
  padding-bottom: 0;
}

.vc_btn3.vc_btn3-color-juicy-pink, .vc_btn3.vc_btn3-color-juicy-pink.vc_btn3-style-flat {
  background-color: #008ea8
}
.vc_gitem-post-data-source-post_title {
  font-size: 24px;
}
.vc_custom_1420541757398 {
    background-color: #aac6cb !important;
}
.more-link {
  display: none;
}
.vc_btn3-container {
  margin-bottom: 0px;
}

/*IMAGES*/

.nomargin {
  margin: 0 0 -10px 0;
}

/*ACCORDIAN
.x-accordion-inner {
  padding: 20px;
}*/


/*MOBILE*/

@media only screen and
(max-width : 800px)  {
.x-column.x-1-3 {
   width: 100%;
margin-left: 0 !important;
margin-right: 0 !important;
}
  
.x-topbar .p-info {

  background-color: #43b59c; 
  }}


@media print {
  a[href]:after {
    content: none !important;
  }}

I’ve fixed couple of syntax errors in the above code so you can use it.

Hope this helps!

Thanks for your help.

This is what I’m not clear on and am not finding in documentation.

Some of the CSS needs to be entered into your “Theme Options” Global CSS in order to work. Some needs to go in the Child Theme style.css file. When I entered all of my custom CSS into the Child Theme style.css there were some styles that were not working until I pasted them into Global CSS. In order for it to work I just copied ALL of my css into both places because otherwise I would have to go through it line by line to figure it out.

It was not necessarily inline CSS, for instance some of it was h6.

How do I know where to put custom CSS? I find this really unintuitive and frustrating. I’m about to redevelop a huge site in X and I want to make sure I understand how this works before I choose X again and start redevelopment.

Hi @mclukens,

It’s a trial and error, if it’s not working in style.css then it’s being overridden and you’ll have to move it to global CSS (don’t create duplicates of the same CSS). And if it still not working, you’ll have to use !important in your styling, like color: #000 !important;

Wordpress is a modular one where themes and plugins are from different authors. And CSS tends to override each other, what’s loaded last is what browser’s prioritized hence there is !important if you’re not really sure what’s overriding it.

Thanks!

That seems like a pretty complicated and convoluted way to see if CSS is going to work. I typically use Global CSS to see what the change will look like, which is a nice feature. Then I would have to delete it from Global and add to Child Style sheet, then see if it works. And if it doesn’t delete it and put it back in to Global???

Hey There,

You may need to also understand how the styling css is loaded.
This is the hierarchical order:

  • Theme’s stack style.css
  • Child theme’s style.css
  • WordPress Additional Custom CSS
  • Theme Option Settings
  • Theme Option’s custom css
  • Cornerstone’s custom page css

As rad have pointed out, a css in the chime theme might have been overridden with the css from the theme option settings or other plugins css. If you can add !important to your css that would force the browser to apply that style. And in some case, if you are using some like:

element {
  // styling here
}

When you add the css in your child theme, you will need to update it into something like this:

.x-child-theme-active element {
  // styling here
}

.x-child-theme-active is added to add css specificity.
https://www.w3schools.com/css/css_specificity.asp

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.