Navigation

This content is old and no longer supported. You may use at your own risk, but no official support will be provided for anything listed here. If you are a Themeco customer, we invite you to check out our new community and forums, Apex.

Tagged: 

  • Author
    Posts
  • #1405457

    Heisenbergww
    Participant

    Wanting to change the text in my footer to a different color, How could I do this?

    #1405487

    Darshana
    Moderator

    Hi there,

    Thanks for writing in! To assist you with this request, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

    #1405536

    Heisenbergww
    Participant
    This reply has been marked as private.
    #1405940

    Rupok
    Member

    Hi there,

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

    /* widget title */ 
    .x-colophon .h-widget {
    	text-shadow: none;
    	color: #fff;
    }
    
    /* widget title icon*/ 
    .x-colophon .widget_text .h-widget::before {
    	color: #fff;
    	opacity: 1;
    }
    
    /* widget text */ 
    .x-colophon .textwidget {
    	text-shadow: none;
    	color: #fff;
    }

    Hope this helps.

    Cheers!

    #1406441

    Heisenbergww
    Participant

    Sweet thanks so much! What if I wanted one widget area text a different color than the others?

    #1406676

    Lely
    Moderator

    Hi There,

    We can update above CSS to this:

    /* widget title first column */ 
    .x-colophon.top .x-column:first-child  .h-widget {
    	text-shadow: none;
    	color: #fff;
    }
    
    /* widget title icon  first column */ 
    .x-colophon.top .x-column:first-child  .widget_text .h-widget::before {
    	color: #fff;
    	opacity: 1;
    }
    
    /* widget text first column */ 
    .x-colophon.top .x-column:first-child  .textwidget {
    	text-shadow: none;
    	color: #fff;
    }
    
    /* widget title second column */ 
    .x-colophon.top .x-column:nth-child(2)  .h-widget {
    	text-shadow: none;
    	color: #fff;
    }
    
    /* widget title icon  second column */ 
    .x-colophon.top .x-column:nth-child(2)  .widget_text .h-widget::before {
    	color: #fff;
    	opacity: 1;
    }
    
    /* widget text second column */ 
    .x-colophon.top .x-column:nth-child(2)  .textwidget {
    	text-shadow: none;
    	color: #fff;
    }
    
    /* widget title third column */ 
    .x-colophon.top .x-column:nth-child(3)  .h-widget {
    	text-shadow: none;
    	color: #fff;
    }
    
    /* widget title icon  third column */ 
    .x-colophon.top .x-column:nth-child(3)  .widget_text .h-widget::before {
    	color: #fff;
    	opacity: 1;
    }
    
    /* widget text third column */ 
    .x-colophon.top .x-column:nth-child(3)  .textwidget {
    	text-shadow: none;
    	color: #fff;
    }

    Feel free to update the colors.
    Hope this helps.

    #1408188

    Heisenbergww
    Participant

    Awesome that worked great! How can I make add buttons with links into the widget? And have a little spacing in between text and button within the widget?

    #1408345

    Thai
    Moderator

    Hi There,

    Please add the following CSS also:

    div#text-5 .x-btn {
        margin-top: 15px;
    }

    Hope it helps 🙂

    #1408371

    Heisenbergww
    Participant

    Thanks! How can I make each column the same look as the first one. Right now only the first column is changed. I want to add 2 more widget areas in the prefooter….. Also I dont want so much padding on my pre-footer, how can I reduce the size of the padding?

    #1408558

    Nabeel A
    Moderator

    Hi again,

    You can update the previous code with the following code:

    .x-colophon.top .x-column .h-widget {
    	text-shadow: none;
    	color: #fff;
    }
    .x-colophon.top .x-column .widget_text .h-widget::before {
    	color: #fff;
    	opacity: 1;
    }
    
    .x-colophon.top .x-column .textwidget {
    	text-shadow: none;
    	color: #fff;
    }

    To reduce the padding, you can add the following code:

    .x-colophon.top {
        padding: 2% 0 !important;
    }

    Let us know how this goes!

    #1426991

    Heisenbergww
    Participant

    How can I change or hide this pre-footer on mobile devices??

    #1427164

    Rue Nel
    Moderator

    Hello There,

    To hide the footer widget area in smaller screens, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

    @media(max-width: 979px){
      .x-colophon.top {
        display: none;
      }
    }

    Hope this helps. Kindly let us know.

    #1428117

    Heisenbergww
    Participant

    What if I wanted one widget to remain but hide the others?

    #1428128

    Darshana
    Moderator

    Hi there,

    Which widget you want to keep? So that we can assist you with a possible workaround.

    Thanks!

Join Apex

This content is old and no longer supported. We invite you to check out our new community and forums, Apex.

Join Apex