[catjoParticipant]

I want to remove the background from the footer so my background image of the pink polkadot shows behind the black lace (transparent png). Currently the black opacity is showing. There seems to be several layers of background colors there and no matter what I do in custom css to accomplish this, to remove only the black color background from the footer area, I cannot do it.Thank you.

[Prasant RaiModerator]

Hello There,

Thanks for writing in!

To do that kindly use following CSS under Custom > CSS in the Customizer:

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

If the above code does not help then kindly share the URL of your website.

Thanks.

[catjoParticipant]

This reply has been marked as private.

[catjoParticipant]

This reply has been marked as private.

[NicoModerator]

Hi There,

We would like to check you setup closer, please share us your admin credentials.

Don’t forget to set it as private reply.

Thanks.

[catjoParticipant]

This reply has been marked as private.

[LelyModerator]

Hello There,

You have a boxed layout. To make the footer transaparent, please add the following CSS instead:

.x-boxed-layout-active .site,
.x-colophon {
   background-color: transparent;
}
header.masthead.masthead-inline,
.x-main.full{
 background-color: #000000;
}

About the portfolio. The initial means the original width of the image. you have to edit the max-width so it will not overflow.

About the red bar color, please add the following CSS to overwrite the red bar focus color:

.x-navbar-fixed-right .desktop .x-nav>li>a:focus, .x-navbar-fixed-right .desktop .x-nav>li>a:hover {
  box-shadow: inset -8px 0 0 0 #ee2c74;
}

X shortcode plugin is now replace by Cornerstone in X 4.0. You may safely deactivate X shortcode plugin already.

Hope this helps.

[catjoParticipant]

Thank you! But, the css for the footer to make it transparent takes black background out of the page. I just want it out of the footer.

[ChristopherModerator]

Hi there,

Since you are using boxes layout you need to make the whole container transparent :

Please add this :

.x-boxed-layout-active .site {
  border: none;
  background-color: transparent;
  box-shadow: none;
}

header.masthead.masthead-inline,.x-main.full {
  background-color: #000;
}

Hope it helps.

[catjoParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Use this css,

.x-boxed-layout-active .site,
.x-colophon {
background-color: transparent;
border:none;
box-shadow: none;
}
header.masthead.masthead-inline,
.x-main.full, .x-header-landmark, .site > .x-container.offset {
background-color: #000000;
}
.x-header-landmark, .site > .x-container.offset {
    padding: 34px 0;
    margin: 0;
    max-width: 100% !important;
    width: 100% !important;
    text-align: center;
}

Cheers!

[catjoParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

1. Is it bad or good? I never see the css implemented so I’m not sure what else is the issue. We can’t continue this as we’re just going back and forth 🙂 , we don’t usually provide support for customization unless it’s easy to implement. As for padding, you can add this as well IF you wish spacing :

.single-x-portfolio .x-main.full {
padding: 0 34px;
}

2. You shouldn’t use desktop browser’s zoom as based of design. It not standard and pixel rendering is very different. If you apply fix for that specific zoom, then expect that it will break on other browser that doesn’t support same standard.

Thanks!

[catjoParticipant]

Okay thanks for your help!!!!! I think what you did is almost perfect for the footer. The other issue with how IE is rendering the portfolio image on detail page as huge despite the css added to reduce size, I can live with. Thanks for the tip about browser zoom.

[Paul RModerator]

You’re welcome!

[Author]

Posts