Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 6, 2017 at 10:05 am #730247
    marioeiterer

    Hey,
    I found this topic here: https://kriesi.at/support/topic/is-there-a-way-to-add-a-bit-of-opacity-in-the-footer-area/

    Now my problem is, that I have in the footer.php in line 113 no end div, which I could removed.
    Can you tell me, where this end div is now and where I have to put it in?

    Thanks.

    January 6, 2017 at 12:06 pm #730273
    Vinay

    Hey marioeiterer,

    A lot has changed over the years, could you let us know exactly what you are trying to achieve?

    It appears you have added some custom css with !important rule due to which I’m unable to set the background property for the footer.

    Please remove any modifications you have added and post your login details so we can take a closer look at this issue.

    Best regards,
    Vinay

    January 6, 2017 at 12:19 pm #730280
    marioeiterer

    Hey,
    I removed the modifications.

    January 6, 2017 at 1:53 pm #730343
    Vinay

    Hi,

    It appears you have added the image which already has a black overlay this is the easiest way to achieve what you are looking for.

    If you like to do it the css way, then…

    Remove the background image from theme options and use the css below

    
#footer{
   padding:0!important;
}
.footer_color {
   background:rgba(0,0,0,0.5) url('https://ofn.nightcup.at/wp-content/uploads/2016/12/feuerwehr-nenzing-8.jpg');
   background-size:cover;
}
#footer > .container {
   background:rgba(0,0,0,0.8)!important;          
}

    Best regards,
    Vinay

    January 6, 2017 at 3:17 pm #730381
    marioeiterer

    Hi,
    I have removed the background image from the theme options and used your css, but the opacity isn’t full width.

    January 6, 2017 at 5:26 pm #730422
    Vinay

    Hi,

    Please add “max-width:100%!important;” to the footer container to make it full width :)

    Your code should look like below :

    
#footer > .container {
   max-width:100%!important;
   background:rgba(0,0,0,0.8)!important;          
}

    Best regards,
    Vinay

    January 6, 2017 at 5:32 pm #730425
    marioeiterer

    Hi,
    If I add this code all my widgets are full width. But I want that only the opacity is full width.
    Best regards.

    January 6, 2017 at 10:37 pm #730550
    Vinay

    Hi,

    You can update the code as below

    Please adjust the padding 10vw to any value that suits your design :)

    vw stands for viewport width.

    #footer > .container {
   max-width:100%!important;
   background:rgba(0,0,0,0.8)!important;          
   padding: 0 10vw;
}

    Best regards,
    Vinay

    January 7, 2017 at 12:03 pm #730674
    marioeiterer

    Hi,

    thanks for your answer.
    This code works pretty well for one display solution, but not for responsive design.
    How can I adjust this code for responsive design?

    Best regards.

    January 7, 2017 at 6:24 pm #730733
    Vinay

    Hi,

    You are most welcome :)

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 767px) {
.responsive #top #footer > .container {
   width:100%!important;   
   padding: 0 10vw!important;
}}

    Best regards,
    Vinay

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.