Home Forums Weaver Xtreme Theme How to extend background of #comments div to full width?

Topic Resolution: Answered

This topic contains 5 replies, has 2 voices, and was last updated by  Ned 2 weeks, 2 days ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #61736
    Answered

    Ned
    Participant

    It seems like it should be doable, but see no options for it in either the Customizer or the Legacy interface. Searching for “#comments” in the support forum didn’t provide an answer. Probably there is some class that needs to be applied to some selector, but I couldn’t find it after about 20 minutes of poking around with the browser inspector.

    So, I got lazy and put the question to the forum.

    I don’t believe the configuration/environment is a factor, but here’s the readout so you can have version numbers:

    ### Weaver System Info ###

    — WordPress Configuration —

    Site URL: https://staging4.*********.com
    Home URL: https://staging4.*******.com
    Multisite: No
    Version: 5.2.3
    Language: en_US
    WP_DEBUG: Disabled
    WP Memory Limit: 128M
    Permalink: /%postname%/
    Show On Front: page
    Page On Front: ********** Family Stories (ID# 2)
    Page For Posts: (ID# 0)
    Current Theme: Weaver Xtreme (4.3.1.5)
    Post Types: post, page, attachment, revision, nav_menu_item, custom_css, customize_changeset, oembed_cache, user_request, wp_block, getwid_template_part, rl_gallery

    — Weaver Xtreme Configuration —

    Weaver Xtreme Version: 4.3.1.5
    Theme Support Version: 4.0.3
    Xtreme Plus Version: 3.1.1

    — Server Configuration —

    Operating System: Linux
    PHP Version: 7.1.30
    MySQL Version: 5.6.40
    jQuery Version: 1.12.4-wp
    Server Software: Apache

    — PHP Configuration —

    Local Memory Limit: 768M
    Server Memory Limit: 768M
    Post Max Size: 128M
    Upload Max Filesize: 128M
    Time Limit: 120
    Max Input Vars: 3000
    Display Errors: On (1)

    — WordPress Active Plugins —

    Getwid: 1.2.0
    Responsive Lightbox & Gallery: 2.1.0
    Responsive Lightbox – Justified Gallery: 1.1.2
    Responsive Lightbox – Lightgallery: 1.1.1
    SG Optimizer: 5.3.1
    Weaver Xtreme Plus: 3.1.1
    Weaver Xtreme Theme Support: 4.0.5
    Wordfence Security: 7.4.0

    — WordPress Inactive Plugins —

    Akismet Anti-Spam: 4.1.2
    Duplicate Post: 3.2.3
    Jetpack by WordPress.com: 7.7.2
    One Click Demo Import: 2.5.2
    Weaver Show Posts: 1.3.16
    Yoast SEO: 12.1

    ### End System Info ###

    #61738

    scrambler
    Moderator

    Normally you extend the #container area, and to extend Background to full width, you go to Main options > Full Width, and use the “Extend BG attributes to full width” Options, in this case the Container.

    If for some reason this is not what you are after, provide a link to your site with specifics

    #61752

    Ned
    Participant

    Thank you, Scrambler, I have made a test site to illustrate what I’m asking for:

    https://staging5.autoblogography.me/2019/09/test-post/

    I would like the #comments div (yellow here via the #comments {background-color:#F0FFBF;} rule in the Custom CSS box for this example) to extend the background color to the full width. Since the #comments div is inside the #container div, maybe this is not possible.

    #61754

    scrambler
    Moderator

    There is indeed no way to extend the BG attributes of the comments from the theme options, and I think this is actually an oversight, as if people were to extend the post are BG they would likely want to extend the comment are BG.

    May be @weaver will consider adding an option for the comment area in the Full Width page options, or alternatively add the ability to add a class to the Comment section, so we can add any of the full width class to it to do the job.

    In the mean time, the only way to extend the BG attributes of the comment section, would be to give it the class wvrx-fullwidth, but because we do not have any direct way to do that, it would need to be done via a script.

    I think I have enough elements in the script Guide article for you to do that (under 2) Use a script to apply a set of styling rules, by adding a class to an element.), but will have a look later

    https://guide.weavertheme.com/scripts-using-them-for-advanced-styling-or-design-changes/

    #61755
    Best Answer

    scrambler
    Moderator

    This reply has been accepted as the best answer.

    OK, so the script below placed in Advanced Options > HTML Insertion areas > Post footer box will do the trick.

    It will add the weaver custom class wvrx-fullwidth to the #comments div, causing weaver background extension CSS to be applied to the div and causing its colored background to extend to full width

    <script type="text/javascript">
    var my_selector = "#comments";                         //Defines the selector target  
    jQuery(my_selector).addClass("wvrx-fullwidth");        //Add the class to the targeted element to apply the class styling});
    </script>

     

    #61756

    Ned
    Participant

    Thank you, Scrambler! That’s exactly what I was looking for. I have updated my test site to include the script and it works perfectly!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.