Edit size of Title

okay, so I decided to try the easy/lazy way and download a Child Theme plugin (hey – it’s WordPress!), installed that and loaded it up. It seems all I have succeeded in doing so far is making unwanted modifications to my site (when I activated the Child Theme). Hmm!

Welcome back. ??

Give these steps a try. They’re taken from the child theme Codex article.

On your installation using a FTP or whatever file management tools your host provider offers you create this directory.

wp-content/themes/atomic-child

In that directory using a plain text editor create 2 files. The first file will be named style.css and will have these lines in it.

/*
 Theme Name:   Atomic Child Theme for pianoservice.ca
 Description:  Atomic Child Theme
 Template:     atomic
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
*/

/* Your CSS modifications will go below this line */

.site-description {
  font-size: 1.0rem;
}

The other file will be named functions.php and will have these lines in it.

<?php
// Queue up the parent Atomic CSS
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'atomic-parent-style', get_template_directory_uri() . '/style.css' );

}

That PHP code will make sure that the parent Atomic stylesheet is loaded. Make sure you do this in the new wp-content/themes/atomic-child directory.

Now visit https://www.pianoservice.ca/wp-admin/themes.php

You should see something like this.

See the “Atomic Child Theme for pianoservice.ca” box? Hover your mouse over that and the Activate button will reveal itself. Activate the theme.

Once you do that the header image will revert to the theme default and any widgets you’ve setup but that’s easily fixed via this link.

https://www.pianoservice.ca/wp-admin/customize.php?url=https%3A%2F%2Fwww.pianoservice.ca%2F

If that all works then my next question is: how to you wish to reduce your title? The “Registered Piano Technician” portion? The CSS I added to the style.css file is this.

.site-description {
  font-size: 1.0rem;
}

The font-size was reduced from 1.8rem to 1.0rem which made it appear smaller.

If that doesn’t work, let me know that too. ??

Child theme is good nomenclature here, this is what I feel like ??

Now, starting from your very first suggestion, Jan, I do not know how to create this directory in my interface. I have an interface through my host, which is some sort of WordPress hybrid and something called Mojo Marketplace. You can see what I see in my browser here (hopefully):

https://dl.dropboxusercontent.com/u/14690039/WP%20dashboard%20screenshot.jpg

I don’t know what other interfaces may look like, this is the only one I know, and only for a short time….

There’s got to be a way… Who did you sign up for hosting with? I’m asking because depending on who it is will depend on what the file interface will be.

Edit: It looks like you’re using this host provider.

https://www.justhost.com/

If you have cPanel then this may work for you.

https://my.justhost.com/hosting/help/file_manager

Yes! I replied (that it was Justhost), which seems to have gotten lost.
Anyhow, I will login to my Justhost cPanel (separate from my site cPanel) and see what I can find! Stay tuned!

Okay, Jan!
I have faithfully followed your instructions, and it appears to have worked!
The hard part was easy and the easy part was hard…after a brief panic moment when I loaded the child theme, I managed to put the theme defaults back the way I had configured them.

Can I nominate you for Vol-Mod of the year? Haha.

I will push my luck yet still…the sizing of the “title” (the box with my name) looks good, it’s a better fit. There is also what is called the “tagline” in the theme editor (containing text “Registered Piano Technician”).
Is it possible to keep title as it is now, and to make tagline slightly larger so that it displays the same length (pixels?) as the title box?
I think this would visually look better!

Interesting…i went in the .css file in the editor (with a reasonable amount of confidence this time) and starting playing around with the font size rem number. I put it up to 1.4, which now looks exactly as I like. The title did not seem to change at all, it stayed at the same proportion (which is good)

I guess the remaining question for me is: if the .css mod you created was seemingly targeting more the tagline (description), why did the title box and text change in the first place? I am missing something!

However, many thanks again, Jan, I am happy with the result and I might have even learned a thing or two!

*Looks, checks site, says ALRIGHT!*

I guess the remaining question for me is: if the .css mod you created was seemingly targeting more the tagline (description), why did the title box and text change in the first place? I am missing something!

Honesty? I’m not sure. I’ve never used font-size: 1.4rem; before and my CSS may not be the best. Perhaps someone else can chime in? ??

Here’s the best part of your learning this: by creating and activating that child theme you get to safely make your changes to the CSS.

When an update for the Atomic theme occurs, your changes will still be preserved. You get the benefit of a maintained theme while still keeping the CSS as you want it to be.

When you look at your site’s HTML source you’ll see these 2 lines.

<link rel='stylesheet' id='atomic-parent-style-css'  href='https://www.pianoservice.ca/wp-content/themes/atomic/style.css?ver=4.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='atomic-style-css'  href='https://www.pianoservice.ca/wp-content/themes/Atomic-child-2/style.css?ver=4.2.2' type='text/css' media='all' />

The first line is from the Atomic theme (it’s CSS). Your changes happen after it in the second line. Good job. ??

Sorry I’m late. The easiest way to change the title font size (until I update the theme to include this in the theme options) is to edit the style.css and find the following:

.site-title a {
    border-bottom:none;
    border:3px solid #fff;
    color:#fff;
    font-weight:400;
    letter-spacing:4px;
    line-height:1;
    padding:0 10px;
    text-shadow:1px 1px 0 rgba(0,0,0,0.1);
    text-transform:uppercase
}

and change it to the following (then change the 3rem to what you desire):

.site-title a {
    font-size: 3rem !important;
    border-bottom:none;
    border:3px solid #fff;
    color:#fff;
    font-weight:400;
    letter-spacing:4px;
    line-height:1;
    padding:0 10px;
    text-shadow:1px 1px 0 rgba(0,0,0,0.1);
    text-transform:uppercase
}

Thanks for the support, Jan.

I’ll mark this as resolved.

You’re welcome, but I’d include one more thing: add that to the child theme style.css file. ??

If the original style.css is modified and the theme updates then that or other changes will be lost.