Lost margins and button broke

[prakash_s]

Hello @bmahoney59,

For the Home page button spacing, it seems that you have added the custom HTML on the button element that contains the paragraph tag just because it is taking the paragraph tag style as well. I would suggest you remove the paragraph tag from the button element. Please have a look at the given screenshot below.

For both the button color, it seems that due to child theme customization the Theme Option button style is not rendering properly. I would suggest you activate the parent theme and then set the button color from the Theme Options settings. Please have look at the given screenshot below.

Hope it helps
Thanks

[bmahoney59]

Hi-

Thanks for getting back to me. That doesn’t help me so much, though. As soon as I switch from the child theme to X theme, I lose a my fonts, settings for my arrow angles, spacing, etc.

Please let me know what the next step is. Thanks.

[ruenel]

Hello @bmahoney59,

After updating the X theme and the Cornerstone plugin to the latest plugin, please also make sure to update the custom CSS. You need to place this custom CSS in Appearance > Customize > Additional CSS:

.home-page-service-list-box{}

.home-page-arrow {
    font-size: 15px;
    color: white;
    transform: rotate(40deg);
    display: inline-block;
    vertical-align: top;
    margin-top: 10px;
    margin-right: 5px;
}

.home-page-arrow:hover,.services:hover{color:#ffb845 !important;}

.home-page-service-list-box h2 span:hover .home-page-arrow{color:#ffb845 !important;}

.help-icons{
width: 35px;
height: 35px;
margin-top: -7px;
margin-right: 5px;
}


body .x-navbar .desktop .x-nav > li > a {
    display: flex;
    align-items: flex-end;
    padding-bottom: 5px;
}

footer.x-colophon.bottom {
    background: transparent;
}


h6 {
    margin: 0;
    text-transform: none;
}

@media only screen and (min-width: 1025px) and (max-width: 1365px) {
  
  .vdlinkew {
    width: 100%;
    margin-top: -88px;
    min-height: 222px;
}


@media only screen and (min-width: 1366px) and (max-width: 1623px) {
  
  .vdlinkew {
    width: 100%;
    margin-top: -88px;
    min-height: 222px;
}

@media only screen and (min-width: 1624px) and (max-width: 1920px) {
  
  .vdlinkew {
    width: 100%;
    margin-top: -88px;
    min-height: 222px;}  }

Kindly let us know how it goes.

[bmahoney59]

OK, thanks, that fixes the little arrows. But the button color and fonts for the button are still off and the font for the whole page is still changed. Compare to the live version bostonhypnosis.com and you’ll see what I mean. Yellow vs. Grey. Fonts or font weights also changed. Could you please tell me how to get these last bits of the the staged version of the site to look exactly like the live version?

[ruenel]

Hello @bmahoney59,

I have compared staging and the live sites. There are still some missing custom CSS which I have been scratching my head on where it is coming from. Can we have a fresh import again on your staging site? I want you to do the All in One Migration once again. First, we have to confirm that the staging site is the exact copy of your live site. And then, please allow us to do the update of your staging site so that we just want to make sure that there aren’t any issues or conflicts after the updates.

Thank you in advance.

[bmahoney59]

Thanks for continuing to help me with this.

OK, I just deleted the staging site version and copied over the live site.

The CSS seems to be identical, 63 lines for each.

This is the current staging CSS:
.home-page-service-list-box{}

.home-page-arrow {
font-size: 15px;
color: white;
transform: rotate(40deg);
display: inline-block;
vertical-align: top;
margin-top: 10px;
margin-right: 5px;
}

.home-page-arrow:hover,.services:hover{color:#ffb845 !important;}

.home-page-service-list-box h2 span:hover .home-page-arrow{color:#ffb845 !important;}

.help-icons{
width: 35px;
height: 35px;
margin-top: -7px;
margin-right: 5px;
}

body .x-navbar .desktop .x-nav > li > a {
display: flex;
align-items: flex-end;
padding-bottom: 5px;
}

footer.x-colophon.bottom {
background: transparent;
}

h6 {
margin: 0;
text-transform: none;
}

@media only screen and (min-width: 1025px) and (max-width: 1365px) {

.vdlinkew {
width: 100%;
margin-top: -88px;
min-height: 222px;
}

@media only screen and (min-width: 1366px) and (max-width: 1623px) {

.vdlinkew {
width: 100%;
margin-top: -88px;
min-height: 222px;
}

@media only screen and (min-width: 1624px) and (max-width: 1920px) {

.vdlinkew {
width: 100%;
margin-top: -88px;
min-height: 222px;} }

This is the current live site CSS:

home-page-service-list-box{}

.home-page-arrow {
font-size: 15px;
color: white;
transform: rotate(40deg);
display: inline-block;
vertical-align: top;
margin-top: 10px;
margin-right: 5px;
}

.home-page-arrow:hover,.services:hover{color:#ffb845 !important;}

.home-page-service-list-box h2 span:hover .home-page-arrow{color:#ffb845 !important;}

.help-icons{
width: 35px;
height: 35px;
margin-top: -7px;
margin-right: 5px;
}

body .x-navbar .desktop .x-nav > li > a {
display: flex;
align-items: flex-end;
padding-bottom: 5px;
}

footer.x-colophon.bottom {
background: transparent;
}

h6 {
margin: 0;
text-transform: none;
}

@media only screen and (min-width: 1025px) and (max-width: 1365px) {

.vdlinkew {
width: 100%;
margin-top: -88px;
min-height: 222px;
}

@media only screen and (min-width: 1366px) and (max-width: 1623px) {

.vdlinkew {
width: 100%;
margin-top: -88px;
min-height: 222px;
}

@media only screen and (min-width: 1624px) and (max-width: 1920px) {

.vdlinkew {
width: 100%;
margin-top: -88px;
min-height: 222px;} }

[prakash_s]

Hello @bmahoney59,

I have updated the theme and plugin of the staging server and compared it with the live domain, it seems that it is working fine at the moment. Please have a look at the staging server and let us know.

Thanks

[bmahoney59]

YES!

That’s great. Thank you. The only problem left is the mouseover color on the bottom “Find out if you’d be a good fit…” button on the home page. It turns bright red now.

On the live site, that bottom one doesn’t change color at all (ideally it would change to the same way the one in the hero area does to that darker gold, but I’m fine with continuing to run as it does on the live site).

[prakash_s]

Hello @bmahoney59,

Please add this custom CSS code under Theme option —>CSS

.home .my-btn3 a.x-btn:hover {
background-color: #ffb845;
border-color: #fe9c00;
color: #000000;
} 

Please feel free to change the color as per your design. The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[bmahoney59]

Great. thanks for that. yeah, I know you guys very reasonably don’t like to write code, but where the update broke the button, I figured it was fair to ask for a fix. Thanks again.

[prakash_s]

You are most welcome @bmahoney59