Home Forums Weaver Xtreme Theme Block Editor Creates background color and border

Topic Resolution: Answered
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #72081
    Answered
    dskirk
    Participant

    I have a web page at https://davidkirk.org/sandbox/sample-page/  where I am experimenting with the Block Editor, but whatever I enter always has a dark background to it and a border. Any tips on how to remove that will be appreciated. Thanks.

    #72082
    User
    Participant

    I know pretty much zero about WP-Blocks, but inspecting the two columns, they both have Weaver Style Sheet attributes attached.

    That leads me to suggest that these features you want to change are probably default settings, which can be changed or removed site-wide in the Customizer.

    I’d start looking in the “Content Area” and then “Post Specifics” sections and things like “Content Area BG Color” etc.

    Regards!

    #72083
    dskirk
    Participant

    Thanks for the feedback. I’ve looked and found nothing specific, and I am not wanting to change sitewide settings. I could accomplish this with a pagebuilder plugin, but I try to avoid plugins where possible.

    #72084
    Weaver
    Keymaster

    The content of your examples is wrapped in <code>example</code> HTML. The borders and bg come from the CSS styling for <code> which I think might be Weaver’s styling. Has nothing to do with the block editor I think. Most themes style <code> blocks with monospaced font and some sort of grayish background, most often wrapped in a border.

    #72085
    dskirk
    Participant

    Thanks for the feedback, Weaver, but I cannot find a way around it. The sample code has a pre tag with class of ‘wp-block-code’ and the code tag.  and if I omit the pre or the code tags I get an error for attempted block recovery. I’ve tried to find the CSS to turn this off with Inspect with browser, but my CSS skills are not that great. Any tip on how to override that will be appreciated.

    
    
    #72086
    Best Answer
    scrambler
    Moderator

    This reply has been accepted as the best answer.

    The CS rule styling the block code is below

    .wp-block-code,.wp-block-preformatted pre {
    background: rgba(128,128,128,0.1);
    border: 1px solid #aaa;
    border-bottom-color: #ccc;
    border-radius: 2px;
    color: inherit;
    font-family: ‘Inconsolata’,monospace;
    font-size: .8em;
    height: auto;
    margin: 0;
    margin-bottom: 1.5em;
    outline: 0;
    overflow: auto;
    padding: 6px 10px;
    vertical-align: middle;
    width: 100%;
    word-wrap: break-word;
    white-space: pre-wrap
    }

    There is also a code rule below

    code {
    background: rgba(128,128,128,0.1);
    color: inherit;
    }

    And finally there is a pre rule

    pre {
    box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,0.2);
    box-sizing: border-box;
    background: rgba(128,128,128,0.1);
    border: 1px solid #aaa;
    border-bottom-color: #ccc;
    border-radius: 2px;
    font-family: ‘Inconsolata’,monospace;
    font-size: .8em;
    height: auto;
    margin: 0;
    margin-bottom: 1.5em;
    outline: 0;
    overflow: auto;
    padding: 6px 10px;
    vertical-align: middle;
    width: 100%;
    word-wrap: break-word;
    white-space: pre-wrap;
    }

    So to remove the background and border you would need to add the following rule in the theme Custom CSS rule box

    pre {box-shadow:none;}

    .wp-block-code,.wp-block-preformatted pre , code {background:transparent;border:none;}

     

    #72087
    User
    Participant

    @dskirk

    If you change to the Code Editor instead of Visual Editor, you will get something like this, which you can edit directly:

    < !-- wp:columns -->
    < div class="wp-block-columns">< !-- wp:column -->
    < div class="wp-block-column">< !-- wp:paragraph {"align":"center","backgroundColor":"cyan-bluish-gray","textColor":"vivid-red"} -- >

    Hope this helps.

    Regards!

    #72088
    dskirk
    Participant

    Scrambler, a BIG THANKS to you. I had located those CSS statements, but was clueless how to negate them. I envy your CSS talent. Thanks so much.

    #72089
    dskirk
    Participant

    @user

    Thank you for that tip. I sometimes forget about the code editor. Thank you.

    #72091
    Weaver
    Keymaster

    I don’t understand why you are using sample code or any code that is <pre> formatted unless you really need to display preformatted text in a block unless it is code. <pre> is really intended to display code such a a progrmming language or perhaps HTML example source code. There might be other reasons for using <pre>, but it would be pretty much outside of standard usage.

    You might be trying to insert example code that is already wrapped with <pre>. You probably don’t want to do that as the <pre> is there just to show you it is example code, to to provide good HTML layout.

    Finally, if you really mean to have <pre> code, then the theme’s layout with the box and gray background is fairly standard for how most themes will format <pre> code.

    #72092
    dskirk
    Participant

    Thanks for responding. I did not want pre coding. It is inserted automatically when I select an HTML block. When I attempt to remove the pre code, an error pops up with error ‘attempted block recovery’ .  I assumed that was done by the theme and that is why I posted here. I share your observation on use of the pre code.

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