Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

Adjust styling of GP comments

  • dstro003
    May 9, 2024 at 9:19 am

    I have a post set to full width.

    I used the following code to do reduce the comments spanning the full width so it is more centered and not too wide:

    .single.full-width-content .comments-area {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 50px;
    padding-bottom: 80px;
}

    I now need to adjust the background color and the text and heading color to match this dark theme on this page: https://soundshockaudio.com/new-plugins-design/

    I added this css to try and change the text and background colors but wasn’t able to get the background color to go the full width and the title didn’t change color: 

    .single.full-width-content .comments-area {
    background-color: #0A0A0A;
    color: #ffffff; /* This sets the text color to white */
}

    What other CSS can I add here to make this match more with the darker theme.

    Also, would it be better to add the comments in a hook instead for my particualr case?

  • Ying
    May 9, 2024 at 11:47 am

    Hi there,

    Remove below 3 lines from the 1st CSS:

    max-width: 900px;
margin-left: auto;
margin-right: auto;

    Then add it to this CSS:

    .single.full-width-content .comments-area #comment {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
  • dstro003
    May 9, 2024 at 12:27 pm

    This didn’t seem to work.

    The width of the commments went back to being full width and the inside container of the commnets box changed to the black color.

    I would like the background of the comments area to be the black color and the text above the comments box to be white so it shows up on the black background.

    Here was the code that I used that didn’t work. 

    .single.full-width-content .comments-area {
    padding-top: 50px;
    padding-bottom: 80px;
}

.single.full-width-content .comments-area #comment {
    background-color: #0A0A0A;
    color: #ffffff; 
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
  • Ying
    May 9, 2024 at 2:24 pm

    Then you need to change the content background to black:

    .single.full-width-content .container.site {
    background-color:black;
}
  • dstro003
    May 9, 2024 at 7:09 pm

    Great! Thank you!

  • Ying
    May 10, 2024 at 9:25 am

    You are welcome   🙂

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