[MastaBaba]

I prefer to not use Elementor. But, the block editor is 100 pixels wide.

This is a consequence of the following CSS that’s applied in the admin area of my WordPress installation:

body.mce-content-body, .wp-block {
max-width: 100px;
font-family: ‘Source Sans Pro’;
font-weight: 400;
font-size: 17pxpx;
line-height: 1.8;
color: #777777;
}

How do I adapt this, without changing the core theme files?

Website: micoleao.org.br

[Insata2]

Hello,

To modify the CSS without changing the core theme files, you can add custom CSS via the WordPress Customizer. Here’s how you can do it:

Login to your WordPress Dashboard: Log in to your WordPress admin area.

Access the Customizer: Navigate to “Appearance” in the WordPress dashboard and click on “Customize.”

Open Additional CSS: In the Customizer, you should see an option called “Additional CSS.” Click on it.

Add Custom CSS: In the Additional CSS section, you can add your custom CSS code. To override the existing CSS that’s limiting the block editor width, you can add the following code:

css
Copy code
body.mce-content-body, .wp-block {
max-width: initial;
}
This code sets the max-width property to “initial,” which will allow the block editor to use its default width.

Preview and Publish: After adding the CSS, click the “Publish” button to save your changes. You can also preview the changes to ensure they look as expected.
By following these steps, you can apply your custom CSS rules without modifying the core theme files directly. This way, you can maintain the flexibility to update your theme without losing your customizations.

Website: instaapkpro.com

[MastaBaba]

Thanks. I believe that the CSS added to the customiser is not applied to the backend, but only to the frontend.

Either way, I’ve resolved this by creating a plugin, and adding the CSS to the backend via the plugin.

[David11226]

This reply is private.

[David11226]

To modify the block editor width without altering the core theme files, you can utilize custom CSS. Follow these steps:

1. Utilize a Child Theme (Recommended):

If you haven’t set up a child theme yet, it’s advisable to create one. This safeguards your customizations from being overwritten during theme updates.
2. Add Custom CSS:

Within your child theme, establish a style.css file if it doesn’t exist already.
3. Override the Existing CSS:

Insert the subsequent CSS code into your style.css file:
css
Copy code
body.mce-content-body, .wp-block {
max-width: none; /* This eliminates the maximum width restriction */
font-family: ‘Source Sans Pro’;
font-weight: 400;
font-size: 17px;
line-height: 1.8;
color: #777777;
}
4. Save and Upload:

Save the file and upload it to your child theme directory, potentially replacing the existing style.css if needed.
5. Clear Cache:

If caching is enabled, ensure you clear your cache to observe the changes.
6. Inspect the Block Editor:

Return to your WordPress admin panel and review the block editor. The width constraint should now be eliminated.
This CSS snippet adjusts the max-width property to ‘none’, effectively removing the width restriction. Make any additional adjustments as necessary.

Always remember to employ a child theme for customizations to prevent potential conflicts with theme updates. This approach isolates your changes from the primary theme files.
Website: http://www.gwacalculator.net/

[Author]

Posts