Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #3545736
Gradient Headline Image
Closed

Comments

  • Peter started the conversation

    Project 1: at https://bigemma.com we are using on our frontpage the really awesome looking headline gradient design where the bottom part of the image has a dark layer on it depending on how large the text is. This design we have been trying to add to the Featured Images on our frontpage, but after 6+ hours we are still no where near able to find the correct solution.
    Project 2: (We also wanted to add this to the single post page where the headline text is on top of the picture rather than below or above the picture.)

    What we have tried for Project 1 is this code but it seems to create way more issues that it solves:

    .penci-image-holder:after {

        bottom: 0;
        content: "";
        display: block;
        height: 25%;
        width: 100%;
        position: absolute;
        z-index: 1;
    background-image: linear-gradient(#000, #000), linear-gradient(#0f0, #0f0);

        opacity: 0.5;
        transition: opacity 0.3s;
        -webkit-transition: opacity 0.3s;
        -moz-transition: opacity 0.3s;
    }

    If you would be able to share your advice or solution for this then this would be super appreciated! 

  •  2,610
    PenciDesign replied

    Hi,

    Can you send me the screenshot and take note of the area that you need to customize? I'll check and then send you a custom CSS code.

    Regards,
    PenciDesign.


  • Peter replied

    Hello PenciDesign,

    thank you for your reply, I have attached 3x screenshots.

    1. The Picture Files "Categories on Frontpage" and "Widgets - Screenshot" is from https://bigemma.com
    2. The single post headline picture is from https://bigemma.com/muscle-building-foods-after-workout/ but will of course work with any single post article.

    Thank you very much in advance ;)

    Attached files:  Categories on Frontpage - Screenshot 2023-12-19 215713.png
      Single Post Headline - Screenshot 2023-12-19 215757.png
      Widgets - Screenshot 2023-12-19 215231.png

  •  2,610
    PenciDesign replied

    Hi,

    Please navigate to Appearance → Customize → Custom CSS, and then insert the following custom CSS code:

    .home-featured-cat-content.style-3 .mag-overlay-photo {
        display: none;
    }
    .home-featured-cat-content .mag-photo .magcat-detail {
        background: rgba(0, 0, 0, 0.5);
    }
    .standard-post-special_wrapper {
        background: rgba(0, 0, 0, 0.5);
        left: 0;
        right: 0;
        padding-top: 30px;
    }

    Regards,
    PenciDesign.



  • Peter replied

    Hi PenciDesign, 

    absolutely awesome, thank you!

    Ive got 2x questions to add:

    1) When watched on cellphone size unit or when changing the window width to absolute minimum then a gray box appears in the bottom of the headline picture. For example on any page which is not the frontpage, etc. link

    2) If i would like to add this feature to widgets, would it be possible?

    thank you again for the code and thanks a million in advance ;)

    best regards

  •  2,610
    PenciDesign replied

    Hi,

    Could you please send me a screenshot and mark the area that you would like to highlight?


    Regards,
    PenciDesign.


  • Peter replied

    Hi PenciDesign,

    1) in regards of issue 1 i have attached a screenshot (Screenshot 2024-01-08 180559.png), where you can see the "gray" area that only appears when screen reaches cellphone format.

    2) ive attached screenshot 2 of the widget, where the text should be not below the picture but inside of it - together with the cool gradient overlay.

    thank you very much again ;)

    Attached files:  Screenshot 2024-01-08 180559.png
      screenshot 2.png

  •  2,610
    PenciDesign replied

    Hi,

    Please try to send me the URL, I've checked but haven't found this element: https://imgur.com/a/rEPHC8u

    Regards,
    PenciDesign.


  • Peter replied

    Hello Penci Design,

    I have tried to open for example any single post page, for example https://bigemma.com/muscle-building-foods-after-workout/, The issue was replicated using the following Browsers:

    • Firefox
    • Edge
    • Chrome
    • IOS
    • Safari

    Best Regards

  •  2,610
    PenciDesign replied

    Hi,

    Please navigate to Appearance → Customize → Custom CSS, and then insert the following custom CSS code:

    @media only screen and (max-width: 767px) {
        .standard-post-special_wrapper {
            background: transparent;
        }
    }

    Regards,
    PenciDesign.



  • Peter replied

    Hi Pencidesign,

    This is perfect, it works flawlessly, thank you!

    In regards of the other earlier question, is it possible to have this layer in widgets also?

    thank you in advance!

    best regards

  •  2,610
    PenciDesign replied

    Hi,

    Yes. You can put it in the widgets content.

    Regards,
    PenciDesign.

  • Peter replied

    Hello Pencidesign,

    awesome, where do i do this and do i use the same code?

    best regards

  •  2,610
    PenciDesign replied

    Hi,

    Please send me the screenshot area where you need to apply this code.

    Regards,
    PenciDesign.


  • Peter replied

    Hello PenciDesign,

    The area where it needs to be applied is for example the widgets which are used on the frontpage https://bigemma.com, ive attached a picture of the left side widgets where you can see Widget headlines like Protein News and Bodybuilding further down.

    Thank you in advance ;)

    Best regards

    Attached files:  Screenshot 2024-02-22 153157.png

  •  2,610
    PenciDesign replied

    Hi,

    Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

    .penci_recent-posts-sc ul.side-newsfeed li .side-item .side-image a:hover,
    .widget ul.side-newsfeed li .side-item .side-image a:hover {
        opacity: 1;
    }

    Regards,
    PenciDesign.



  • Peter replied

    Hello PenciDesign,

    Ive tried to add the code on BigEmma and also tried to add it with !important but there are no changes visible, please advice.


    best regards

  •  2,610
    PenciDesign replied

    Hi,

    Could you please send me the screenshot along with additional description? I'll review the request and then resend the CSS code.

    Regards,
    PenciDesign.


  • Peter replied

    Hello PenciDesign,

    Ive attached a picture of Big Emma frontpage and marked in red color some of the widgets in both left and right side. There is more content when you scroll further down of course.

    The goal is to get it to look like the the different article content in blue headline colors, like in the center of the page or even above in the very top, where you have this beutiful gradient gray color with headline on top of it.

    Thank you again ;)

    best regards

    Attached files:  bigemma.com fitness.png

  •  2,610
    PenciDesign replied

    Hi,

    How would you like to display the thumbnail image by adding opacity?"

    Regards,
    PenciDesign.


  • Peter replied

    Hello,

    I am not sure I fully understand, but what I have done is to mark in green color the layout we would love to achieve for the Widgets.

    Hope this helps!

    Best regards

    Attached files:  bigemma.com fitness - picture 2.png

  •  2,610
    PenciDesign replied

    Hi,

    Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

    .widget ul.side-newsfeed li .side-item .side-item-text {
       overflow: hidden;
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       padding: 20px;
       background: rgba(0, 0, 0, 0.5);
       border-bottom-left-radius: 7px;
       border-bottom-right-radius: 7px;
    }
    .widget ul.side-newsfeed li.featured-news .side-item .side-item-text h4 a {
       font-size: 14px;
       color: #00f4fc !important;
    }
    .widget ul.side-newsfeed li.featured-news .side-item .side-item-text h4 a:hover {
       color: #fff !important;
    }

    Regards,
    PenciDesign.

  • Peter replied

    Hello PenciDesign,

    Amazing!, almost perfect! :D - last question, would it be possible to remove the grey area at the very bottom of the new picture design?

    I have attached a new picture which highlights the grey area below the fitness articles.

    thank you again for your super fast response!

    best regards

    Attached files:  Big Emma - Fitness Picture 3.png

  •  2,610
    PenciDesign replied

    Hi,

    Please add the following CSS code to your site:

    .widget ul.side-newsfeed li.featured-news .side-image {
       margin-bottom: 0 !important;
    }

    Regards,
    PenciDesign.



  • Peter replied

    Thank you PenciDesign, your customer support is amazing!

    An additional question came up in regards of implementing it on the mega menu, I did not want to ask you again in regards of this matter but our countless attempts has failed, and we even tried to use chatgpt to help us out but it instead caused some crazy errors on our fitness site.

    I was wondering if its possible to add the gray overlay in the mega menu? Meaning the text will move up in similar fashion and then the gradient effect added (similar fashion to the others that you kindly helped out adding to our frontpage)

    Ive attached a screenshot, thank you :)

    Attached files:  Bigemma Fitness Site Picture 5.jpg

  •  2,610
    PenciDesign replied

    Hi,

    Regarding this matter, please await the release of the new version of Soledad. We will incorporate a new item style for mega menu items that meets your requirements.

    Regards,
    PenciDesign.