Home › Forums › Weaver Xtreme Theme › Block Editor Creates background color and border
- This topic has 10 replies, 4 voices, and was last updated 6 months, 1 week ago by
dskirk.
-
AuthorPosts
-
March 17, 2023 at 12:10 UTC - Views: 50 #72081
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.
March 17, 2023 at 13:17 UTC - Views: 49 #72082User
ParticipantI 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!
March 17, 2023 at 14:41 UTC - Views: 42 #72083dskirk
ParticipantThanks 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.
March 17, 2023 at 15:07 UTC - Views: 40 #72084Weaver
KeymasterThe 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.
March 17, 2023 at 15:16 UTC - Views: 34 #72085dskirk
ParticipantThanks 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.
March 17, 2023 at 15:44 UTC - Views: 34 #72086This 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;}
March 17, 2023 at 15:46 UTC - Views: 28 #72087User
ParticipantIf 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!
March 17, 2023 at 15:49 UTC - Views: 26 #72088dskirk
ParticipantScrambler, 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.
March 17, 2023 at 15:53 UTC - Views: 21 #72089dskirk
ParticipantThank you for that tip. I sometimes forget about the code editor. Thank you.
March 17, 2023 at 22:22 UTC - Views: 18 #72091Weaver
KeymasterI 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.
March 18, 2023 at 10:59 UTC - Views: 8 #72092dskirk
ParticipantThanks 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.
-
AuthorPosts
- You must be logged in to reply to this topic.