How do I Center my Page title?

In your Child Theme or CSS Editor try this code:

.page-header {
   text-align: center;
}

Don’t ever edit core CSS or PHP files. Only use child theme or CSS Editor Plugin.

It seems your page does not have h1 or h2 with class name “page-title”.
Add class to h1 or h2 in the template file, or you can just add the following css rule:

.page-header h1 {
text-align: center;
}

+1 for using child theme.

Hi!

Thanks for your reply!! Really!

When I said I been at the page.phb was actually and only to trying to add the class to add the rule on CSS Editor. By I have undone everything so it’s safe!

I have tried both codes bellow that you’ve suggested on the CSS Editor but the title doesn’t go center!

.page-header {
text-align: center;
}

and

.page-header h1{
text-align: center;
}

Don’t know if this helps but, on my page.php I have:

<div id=”pageheader” class=”titleclass”>
<div class=”container”>
<?php get_template_part(‘templates/page’, ‘header’); ?>
</div><!–container–>
</div><!–titleclass–>

<div id=”content” class=”container”>
<div class=”row”>
<div class=”main <?php echo esc_attr( kadence_main_class() ); ?>” role=”main”>
<?php get_template_part(‘templates/content’, ‘page’); ?>
<?php global $virtue; if(isset($virtue[‘page_comments’]) && $virtue[‘page_comments’] == ‘1’) { comments_template(‘/templates/comments.php’);} ?>
</div><!– /.main –>

And then I have a page-header.php (templates/page-header.php) which has the following codes:

<div class=”page-header”>
<h1>
<?php echo kadence_title(); ?>
</h1>
<?php global $post;
if(is_page()) {
$bsub = get_post_meta( $post->ID, ‘_kad_subtitle’, true );
if(!empty($bsub)){
echo ‘<p class=”subtitle”> ‘.__($bsub).’ </p>’;
}
} else if(is_category()) {
echo ‘<p class=”subtitle”>’.__(category_description()).’ </p>’;
} ?>
</div>

From here, what should I write as a rule on the CSS Editor (style.css) to make it go to center, the Page title? Or am I doing something wrong in here?

Sorry about that!! I am not a pro on this one and I just started writing 2/3 motnhs ago only!

Thanks so much!!
Cheers!!

Download this CSS Editor Plugin and paste one of the codes we provided in the CSS Editor after you install and activate it.

After you activate you can find the area under Appearance > Custom CSS

Your theme does not use style.css.
You need to test to add the css rule to /wp-content/themes/virture/assets/css/virtue.css

However, as Erik mentioned, you’d better use child theme than edit theme files directly.

Hi Erik!

Thanks for your reply!

I have installed and activated the CSS Editor Plugin and tried both codes in the CSS Editor but nothing worked.

I honestly think there is something wrong with this theme at least because of two things:

– 1) there is one short code I am using on other websites to have pictures as buttons with hover and in this one is not working the very same short code on pages (you may see the 3 pictures there the hover is not working);
– 2) Usually on the CSS Editor style.css there are loads of writing there but on this one, there is only this: (and it isn’t codes but just comments?)

/*
Theme Name: Virtue
Theme URI: https://kadencethemes.com/product/virtue-free-theme/
Description: The Virtue theme is extremely versatile with tons of options, easy to customize and loaded with great features. The clean modern design is built with html5 and css3 and uses the powerful responsive framework from Bootstrap to be a fully responsive and mobile friendly. It’s fully ecommerce (Woocommerce) ready with all the tools you need to design an awesome online store. The versatile design is perfect for any kind of business, online store, portfolio or personal site. We built Virtue with a powerful options panel where you can set things like your home layout, sliders, custom fonts, and completely customize your look without writing any CSS. You are going to love how easy this theme is to work with. Virtue was built and designed by Kadence Themes.
Version: 2.4.1
Author: Kadence Themes
Author URI: https://kadencethemes.com/
Tags: responsive-layout, two-columns, one-column, custom-colors, custom-header, custom-menu, featured-images, translation-ready, theme-options, photoblogging
Text Domain: virtue

License: GNU General Public License v3.0
License URI: https://www.gnu.org/licenses/gpl.html
*/

This is all I have on my style.css, where I tried pasting both codes you guys suggested but unfortunately didn’t work.

What do you guys reckon? Have you ever saw something like this? Again, I have been using the CSS Editor without even install the CSS Editor Plugin very well on other websites, for buttons, rules, color links, etc … This was the first time I downloaded this plugin but still didn’t work! ??

Any ideas? Or should I just change the Theme and do it again?

Thanks so much!!
Cheers

SOrry ikaring, just read your comment now.

Ye that was what I thought so, at least that something wasn’t quite right here!!

I honestly have no idea what do you mean with child theme nor to add the rule /wp-content/themes/virture/assets/css/virtue.css as you suggest. I also don’t want to bother you much as you are being so great, so maybe changing the theme would be the best option then? Or is it easy with the child theme or adding the above rule?

Thanks!!

The reason we suggest to use child theme is that, when you update the virtue theme, all your changes to the theme would be overwritten.
To avoid that, we make another theme and use the theme as a parent theme.

See codex and you can find it not so complicated, I hope.
https://codex.www.ads-software.com/Child_Themes

However, if that is too much for you, you can edit /wp-content/themes/virture/assets/css/virtue.css directly. But never update virtue theme, though ??
Just add Erik’s or my css.

.page-header {
text-align: center;
}

Ye think the first one is a bit too much for me now ??

About changing directly on the /wp-content/themes/virture/assets/css/virtue.css is that in the Appearance > Editor > … ? Sorry for my ignorance, probably is something where the website is hosted I reckon!

But what do I change there even though? Is it any code I should paste there?

I might change the theme and done, rebuild this page again from scratch!!

Cheers mates!
??

I have installed the virtue theme, and saw your situation.
To edit virtue.css, at least you need to access your server via ftp.
It is not possible to edit in admin panel.

Good luck!

Ye thanks anyway!! At least I know what to count with this theme now!! It would work if it wasn’t all the conditions these theme has. And accessing via ftp just for one page, apart from never done that, think it wouldn’t be worthwhile going there just for this.

But you guys were great!! Thanks all!! Really!!

Cheers!

Although, and just for the record, I managed to center the title by doing it manually.

I just went to the page-header.php (templates/page-header.php)and added the following:

<h1 style=”text-align: center;”>TEXT</h1>

Also left the original page title in blank and it worked! ??

I know it can’t be highly recommended but think it won’t make much difference just for this case though.

But again, thanks for everything! ??

Cheers!

If this issue is fixed please mark as resolved.

Thanks

Done! Cheers!