[Resolved] Section background color transparency

Home Forums Support Section background color transparency

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #362121
    Kristijan

    hi,

    1.
    I’m trying to add transparency to background color in sections
    Here is what I’m using, but it’s not working, can you please correct:

    .generate-section-"section name"{
    background-color: rgba(158, 189, 171, 0.1);
    }

    2.
    I’m using contained box type for sections.
    For this section where I’m adding the background color, I’m using full-width box type (so the background color is full width).
    How to have the content in full-width box type section aligned with the content in contained box type section?

    thanks

    GeneratePress 1.3.48
    GP Premium 1.3.1
    #362145
    David
    Staff
    Customer Support

    Use the following CSS instead – its an ID not a class. Just change the section number accordingly. I assume you want to color each section differently.

    #generate-section-1 {
        background-color: rgba(158, 189, 171, 0.1);
    }

    This will colour the background of the section and not the container so will resolve point 2

    #362157
    Kristijan

    where can I see the section number?

    I’m using “Section label”, but apparently that’s not it..

    thanks

    #362170
    David
    Staff
    Customer Support

    The section number is the order it is in the stack.
    For more control add a Custom Class to the section in setting. For example:

    db-bg

    Then apply the CSS

    .db-bg {
        background-color: rgba(158, 189, 171, 0.1);
    }

    Then you can apply that class to any section you want. Note when entering custom classes you dont put the period in front of the class name.

    #362179
    Kristijan

    yes, this works fine, but it colors only the contained part of the section.

    I would like to color the full width, but the content to stay in “contained” mode, so it is aligned with the content in above sections. Is this achievable?

    thanks

    #362181
    David
    Staff
    Customer Support

    Just change your section settings
    Box Type: Full Width
    Inner Box Type: Contained

    #362192
    Kristijan

    I know about that, but then what happens is:

    – I set all sections to full width
    – my primary navigation “Inner Navigation Width” is set to contained
    – in that case, content in sections is not aligned vertically with the left side of the primary navigation

    – if I set primary navigation “Inner Navigation Width” to full width, I can’t set the padding of primary nav to be aligned with content in sections

    the page is:
    link

    please help

    #362195
    Leo
    Staff
    Customer Support

    Hi there,

    It’s not lining up because there are left and right padding added for sections. Try this CSS:

    .generate-sections-inside-container {
        padding-left: 0;
        padding-right: 0;
    }

    Then the menu container should be lined up with the sections container: https://postimg.org/image/486u86gej/8322e1ce/

    If you are wanting the menu text to line up with the page title, then you can add left padding in the code above.

    #362204
    Kristijan

    yes, I want menu text to be lined up with the page title.
    but doesn’t matter how much value I add to the left padding, page title moves to the left only a bit and it won’t go any further (even when I add !important after the padding value)

    please see

    link

    #362285
    Leo
    Staff
    Customer Support

    Try this CSS and adjust the margin-left value:

    .generate-sections-inside-container {
        padding-left: 0;
        padding-right: 0;
        margin-left: 520px;
    }
    #362830
    Kristijan

    yes, it’s working, thanks

    – can you please add an exception for this code for mobile (the content on mobile is pushed away from the screen)

    – for some reason, on some pages (“Blog”, “Now” and some other confirmation pages not in the menu),
    Primary navigation is misaligned compared to other pages – slightly to the right:
    link

    can you please take a look on this

    #363108
    Leo
    Staff
    Customer Support

    – To make it desktop only:

    @media (min-width:769px) {
        .generate-sections-inside-container {
            padding-left: 0;
            padding-right: 0;
            margin-left: 520px;
        }
    }

    – Scroll bar width needs to be taken into account as well for pages that are not long enough for it to appear.

    #363182
    Kristijan

    aha, got it

    thank you very much, Leo!

    #363183
    Leo
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.