gutenberg centering all page titles?

[kiwimef]

I have tried out the new gutenberg editor, so far so good. but all of a sudden all page titles of my blogs are centered, even those ones that were already there before i even installed gutenberg plugin. on blog page as well as on single pst pages. how can i set them back to left aligned or is that a default setting? same with the comments box, i want it all left aligned as before. when i deactivate gutenberg it’s all left aligned as before. but i would like to keep using gutenberg for new posts. not sure if this is controlled by weaver extreme or gutenberg …

http://family.3kiwis.co.nz/?page_id=142

also: when creating a new posts it says type your header, but that is actually the paget title and i cannot edit or fomat it.

thanks,

[Weaver]

Everything is centered – not just the title, but the content as well. All this is due to the fact that the #container div has the class “center” added to it. I’m pretty sure Gutenberg doesn’t add that, but in fact, Gutenberg does define that class, while Weaver doesn’t. So that is why it goes away.

You have checked the center option for the container, and the theme has its own definition of .center.

Unfortunately, in a situation I will have to fix somehow, Gutenberg has its own CSS rule for center which overrides the theme’s version.

Since weaver’s .center is added dynamically, I believe I can change the name to .wvr-center and that should fix things. This won’t be until Version 4 is released, and I’ll have to test it.

[Marion]

Is there a way to change the alignment of page/post titles to align left when using Gutenberg? The website I’m working on is fast-track-learning.com

I’ve got everything flush-left except the page and post titles.

[scrambler]

I am not following.

Are you saying you want the titles under the images in each of the three column aligned left?

Or are you speaking of some other pages, and if so which ones

[Marion]

No. The homepage is the only page that I want center alignment, it’s the main landing page. All the other posts and pages I want the post title to be left aligned. I have a lot of short lines and the layout looks weird when the post title is centered and everything else is flush left. I should have given you this link https://www.fast-track-learning.com/wordpress-from-zero-to-first-blog/

[scrambler]

You have changed the page title position with the CSS+ rule

.page-title {text-align:center;padding-bottom:.5em;;max-width:60%;margin-left:auto;margin-right:auto;margin-top:1em;}

And you have changed the content position with the rule

#content {} #content .entry-content{max-width:940px;margin-left:auto;margin-right:auto;padding-left:2%;padding-right:

These are different so they don’t create any alignment.

If these rules were meant for the home page only, then you need to remove them from the CSS+ boxes, change them to include the home page selector, and placed the full rules (see below) in the Theme Global Custom CSS Rule box

.home .page-title {text-align:center;padding-bottom:.5em;;max-width:60%;margin-left:auto;margin-right:auto;margin-top:1em;}

.home #content .entry-content {max-width:940px;margin-left:auto;margin-right:auto;padding-left:2%;padding-right:2%;}

[Marion]

I’m feeling quite stupid at the moment, Scrambler. I can’t find where the CSS+ rules are to remove them. I’ve looked in Appearance > Customize > Custom CSS > Global Custom CSS which contains:

.single-post #header-image {display:none;}
.single #title-tagline {display:none;}
.content nav a {display:none;}
a:hover, a:focus {
color: #ff6600 !important;
}
h1 { font-weight:normal !important; color: }
h2 { font-weight:normal !important; color: #0073aa; }
h3 { font-weight:normal !important; color: #0073aa; }
h4 { font-weight:normal !important; color: #0073aa; }
h5 { font-weight:normal !important; color: #0073aa; }
h6 { font-weight:normal !important; color: #0073aa; }
.submit {
font-family: Open Sans;
color: #ffffff;
font-size: 134% !important;
text-decoration: none;
text-shadow: 1px 1px 3px #666666 !important;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#ff854d), to(#e64900));
padding: 5px 22px 5px 22px !important;
border-radius: 8px !important;
}
.submit:hover {
background: -webkit-gradient(linear, 0 0, 0 100%,
from(#e64900), to(#ff854d));
}
.single .featured-image {
display: none;
}
widget {font-size: 16px;}
img.wp-post-image:hover{
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#header {margin-bottom:0px;}
.single .header {margin-bottom:0px !important;}

I’m using Weaver Xtreme free version with Plain subtheme and the Gutenberg plugin.

[Weaver]

If you go to the legacy options (provided by the Weaver Xtreme Support plugin), and then find the Main Options, Content tab, you should find a “CSS+” option for the BG color of the Page Title. That is where scrambler found your title rule.

And Gutenberg has nothing to do with styling a page or post title – that is all done by whatever theme you are using. Gutenberg’s styling and layout affects only the actual contents of pages or posts, and the theme still has a great deal of control (e.g., the way lists are presented, how Featured Images are placed, font family and size, and more).

[Marion]

You guys are brilliant. I must have done that a few years ago because I thought all my CSS modifications were in the customizer not in the legacy section.

Thank you so much for your help.

[scrambler]

The same CSS+ box are available both in legacy and customizer.

The Post title BG CSS+ box is the same as  Customize > Custom CSS > Post Specifics > Post Tile BG Custom CSS

[Author]

Posts