Docs

[truaxbrandingco]

Hey there

Wow you guys have been such a help so far thank you!

I need to have more options manipulating the footer. I need to:

1. Remove some padding from the top and bottom of the main footer.
2. Change the footer menu background color, font size, font type and font color
3. Change the footer background color

Thank you guys so much!

Link:

http://50.87.248.168/~inertiat/

[Darshana]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

#1.

.x-colophon.bottom {
    padding: 0;
}

#2.

.x-colophon.bottom .x-nav {
    background-color: #ff0000;
    padding: 10px;
}

.x-colophon.bottom .x-nav li a {
    color: #ffffff;
    font-family: Helvetica;
    font-size: 14px;
}

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

#3.

.x-colophon.bottom {
    background-color: #336699;
}

Hope that helps.

[truaxbrandingco]

Thank you Darshana

That’s pretty close to what I am trying to accomplish. See the attached for an example. I need to remove the padding below the widgets and remove the border between the footer and footer menu. I would like the same background image to go across all 3 areas and I would like to be able to add lines and change font size and type in the footer nav and link areas.

Thank you for your help!

Best

[Jade]

Hi there,

Please update this code:

.x-colophon.top {
    background: url("http://50.87.248.168/~inertiat/wp-content/uploads/2016/07/inertia-party-background.png") no-repeat scroll center center / cover;
}

to

.x-colophon.top {
    background: transparent;
    padding-bottom: 0;
}

Then add this code in the customizer:

.footer-area {
    background: url("http://50.87.248.168/~inertiat/wp-content/uploads/2016/07/inertia-party-background.png") no-repeat scroll center center / cover;    
}

.x-colophon.bottom {
    background-color: transparent;
    box-shadow: none;
}

Then this code in the JS customizer:

jQuery('.x-colophon.top, .x-colophon.bottom').wrapAll('<div class="footer-area" /></div>');

Hope this helps.

[truaxbrandingco]

Hey guys

The footer just does not have enough options. I wish it could be customized like a section in the customizer. I would like my footer to look like the attached. Can you give me the CSS to do this?

No text or element drop shadow.
Less spacing between the widgets and footer menu
Longer spacing between link in footer menu

Thank yo guys for your help!

[Friech]

Hi There,

First thing first, please check your whole custom CSS here: http://csslint.net/ and resolve all the errors.

After that add this custom css in your customizer.

footer .widget {text-shadow: none !important;}
.widget ul, .widget ol,
.widget ul li, .widget ol li {
	text-shadow: none; border-width: 0;
}
footer.x-colophon.top {padding-bottom: 0;}
footer.x-colophon.bottom .x-nav li {margin: 0 3em}

Hope it helps, Cheers!

[truaxbrandingco]

Hey there Friech

Thank you for this. But, this is all code I got form your team. It doesn’t make any sense to me? Can you explain further?

Thank yo so much

Nate

[Rue Nel]

Hello There,

Friech wants to to check your custom css. You may have inserted it incorrectly. It is best that you organize your custom css using like this format:

/* Topbar adjustments */
.element {
  //some styling here
}

/* Navbar adjustments */
.element {
  //some styling here
}

/* Footer adjustments */
.element {
  //some styling here
}

/* All @media block should always be at the bottom of all your other css */
@media(max-width: 979px){
  .element {
    //some styling here
  }
}

The code above is just an example which would serves as a guide on how you can organize the given css from our staffs.

And regarding the modifications for your footer, you cannot edit in Cornerstone. Regretfully we cannot give support for any modifications to the footer other than minor cosmetic changes due to the fact that X is a highly dynamic theme with many elements being constructed on the fly. Among these, the footer is one of the more complex elements of the theme and structural modifications to it will likely lead to numerous layout problems as there are a lot of things to take into consideration because of X’s responsive nature. Taking all of this into consideration, these types of updates are out of the scope of our support as their involvement is simply too great and we are a very small team. While we would love to be able to assist all of our users with every customization request, the simple reality is that we cannot cater to every inquiry. Additionally, we will not be able to support any issues that might arise from modifications made to this area on your own.

Thank you for your understanding.

[truaxbrandingco]

Hey guys

I’m not asking for anything crazy and I REALLY appreciate your help honestly. Please see attached for the changes I need. After that I should be done 🙂

Thanks

Nate

http://http://50.87.248.168/~inertiat/

[Friech]

Hi There,

You accumulate lots of custom CSS on your customizer, without noticing you have some syntax errors on it. Most commonly are unclosed block, forgetting to add the closing bracket, or invalid selector. If you have a syntax error, some of your custom css will be affected and will not work even though we write the code correctly.

Here’s a commented code so will know what the code is for.

/*Reduce the padding between footer and content*/
footer.x-colophon.top {
    padding-top: 10px;
}

/*Change menu color*/
.x-colophon-content a font {
	color: red !important;
}

/*Remove shadow and borders on the form*/
.gform_wrapper ul li:after,
.gform_wrapper ul li:before,
.gform_wrapper ul.gform_fields,
.gform_wrapper ul.gform_fields li.gfield {
	box-shadow: none;
}

/*Reduce the gap between the menu and form and increase the vertical gap of menu*/
.x-colophon-content {
    margin-top: 0 !important;
    margin-bottom: 30px !important; 
}

If you’re having hard time checking your custom css here: http://csslint.net/ Please provide us login credentials in private reply, so we can take a closer look.

Thanks.

[truaxbrandingco]

This reply has been marked as private.

[Christopher]

Hi there,

Please find this codes and close curly bracket :

.x-colophon.bottom .x-nav li a {
        font-size: 11px;
        color:blue;

@media (max-width: 979px){
.x-feature-box-graphic-inner {
width: 80%;
}

The correct format would be :

.x-colophon.bottom .x-nav li a {
        font-size: 11px;
        color:blue;
}
@media (max-width: 979px){
.x-feature-box-graphic-inner {
width: 80%;
}
}

Hope it helps.

[Author]

Posts