[Support request] Blending background look

Home Forums Support [Support request] Blending background look

Home Forums Support Blending background look

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1145340
    Mfon

    Hello,

    I am trying to move one of my site to GeneratePress. But I have a couple of challenges.

    1. I am unable to blend the background look. The boxes keep showing, tried changing colours. I want it to look same as former theme.

    2. The ads on the header is cut at the end. Not showing all. See what I mean here https://prnt.sc/qtegnk

    3. How can I change the paignation From this https://prnt.sc/qtei3n to something like this https://prnt.sc/qtej8x

    I am not a coder ๐Ÿ™‚

    Thank you

    #1145802
    David
    Staff
    Customer Support

    Hi there,

    1. Customizer > Colors > Content change this to match Customizer > Colors > Body
    And in Customizer > Additional CSS – remove this if you want to get rid of the border:

    .inside-article,
    .sidebar .widget,
    .comments-area {
        border: 1px solid rgba(232, 234, 237, 1);
        box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
    }

    2. I am note seeing an Advert ?

    3. I provide some CSS to do that here:

    https://generatepress.com/forums/topic/how-to-change-page-numbering-text-to-button-text/#post-1138971

    #1146004
    Mfon

    Thank you.

    Using this works

    /* Center Navigation */
    #nav-below {
    text-align: center;
    }

    /* Page Number styling */
    #nav-below .page-numbers:not(.dots) {
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
    padding: 5px 15px;
    box-sizing: border-box;
    line-height: 30px;
    text-align: center;
    }

    /* Change current and hover colors */
    #nav-below .page-numbers:not(.dots):hover,
    #nav-below .page-numbers.current {
    background-color: #333;
    color: #fff;
    border: 1px solid #333;
    }

    /* increase width of dots…. */
    #nav-below .page-numbers.dots {
    display: inline-block;
    min-width: 40px;
    }

    But the problem is the button are too close together. How do I space them? Giving error with web.dev

    #1146669
    David
    Staff
    Customer Support

    Edit this part of the CSS to include the margin properties ie

    /* Page Number styling */
    #nav-below .page-numbers:not(.dots) {
        background-color: #fff;
        color: #000;
        border:1px solid #000;
        padding: 5px 15px;
        box-sizing: border-box;
        line-height: 30px;
        text-align: center;
    
        /* Add the margin properties below for extra space */
    
        margin-left: 10px;
        margin-right: 10px;
    }
    #1146699
    Mfon

    Thank you very much David. That works but it is not fixing the Web.dev issue.

    I guess I know what the issue is. Is it possible to have the dot in a tile like the rest?

    I mean like this https://prnt.sc/qtz498

    #1146767
    Mfon

    Hello David,

    I just noticed what could also be the problem. The pagination is not showing on mobile. Only desktop. How can I solve this?

    #1146811
    David
    Staff
    Customer Support

    Can you link me to the site ? The one you provided in the Site URL field isn’t using GeneratePress – let me know.

    #1146857
    Mfon

    Hello David, I am moving that particular site to GeneratePress from my MyThemeShop. So the staging is where I have the issue. But I have another live site with GeneratePress, same issue.

    You can see the name of the live site with same issue on this temporary screenshot. https://send.firefox.com/download/6649e1bce6873c76/#y8hP5j8xhDfMp-3jwRj8Tg

    #1146870
    David
    Staff
    Customer Support

    Ok – the DOTs are not a link so wouldn’t be the cause of the problem.
    First off lets fix the mobile styling as that may be effecting web.dev report.

    The CSS i provided you have included inside an @media rule so its only applied to desktop.
    So remove the code i gave you and add it between the very last } and /* End GeneratePress Site CSS */

    Then it should apply to desktop.

    If web.dev still reports they are too close the try increasing the margins ie.

    /* Add the margin properties below for extra space */
    margin-left: 10px;
    margin-right: 10px;
    #1146899
    Mfon

    ๐Ÿ™‚

    That was my mistake.

    Thank you very much Dave.

    What of the ads overflowing? On the same website I sent via screenshot

    #1147176
    David
    Staff
    Customer Support

    You’re welcome.
    RE: Ads overflowing – i replied here

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