Navigation
This is archived content. Visit our new forum.

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!

  • <script> jQuery(function($){ $("#no-reply-1405457 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>