Code to get logo, title & tagline on 1 line of header in Sliding Door Theme

Are you saying you want what’s there already, but on a single line? Rather that having something else altogether there?

In other words you want the two(?) small logos, the site title (‘Top Down Conservation’) and the site description (‘Featuring TurfManager’) to be aligned horizontally instead of vertically?

Is that right? Just so we answer the right question

??

Cheers

PAE

Yes, I want them all to be on a single line so I have a shorter header height. There should only be one logo in the header. (I was playing around with positions so you may have seen 2 at one point in time.) Then, I’m going to remove the large logo in the sliding door script and use the 1st “door” for another featured page.

Thanks for your help, PAE!

OK. First off, if your theme supports it you should be making any alterations in a child theme. Child themes are Good.

That said, you can get your site title and description on the same line using this style rule:

#site-title {
  display: inline;
}

Getting your logo onto the same line is also pretty easy, but you’ll need to decide how you want to get it to line up with title and description.

If you wanted the text to be sort of central against the logo you could add this style rule:

#branding img {
  display: inline;
  margin-bottom: -1em;
}

Those two together gave me this, in FireFox:

topdown.png

HTH

PAE

You ROCK, PAE! That works great! Now if I can just figure out how to add a registered trademark symbol at the end of the line, I’ll be golden. (AND figure out how to get rid of Sidebar 2 on the right, which I did, but remove the Category Widget too!)

Re the Child theme: I never figured out what that was. I’ve just been keeping a copy of the original style sheets (or any other file I modify) and modify the copied ones and FTP to my site. If you can enlighten me about how to create a Child Theme, I’d be grateful. The threads I’ve read have been quite vague.

THANKS!

OK, got the ? in place. One more thing accomplished!

Just add the HTML entity ® at the end of the site title (or description, or whatever), to get the registered trademark symbol.

To create a child theme:

• Create a directory named for your theme in wp-content/themes
• Create a file called styles.css in that new directory
• Add the required child theme comment at the top of the style.css file (see below)
• Add a reference to the parent theme’s syle sheet (see below)
• Open up Dashboard –> Appearance –> Themes
• Your theme should be listed
• Activate you theme and test your site. It should be completely unchanged
• Add any new style rules you need to your child theme’s style.css and retest. The new rules should be active

There’s lots of other things you can do in a child theme apart from mess with styles, but that’s good enough for now.

Here’s what style.css in your child theme directory should look like:

/*
Theme Name: Child Theme Name
Theme URI: https://themeserver.themedomain.whatever
Description: A child theme for your parent theme
Author: Your Name
Author URI: https://yourserver.yourdomain.whatever
Template: parent-theme-folder-name
Version: 0.1
*/
@import url("../parent-theme-folder-name/style.css");

Substitute your values as appropriate in the above. In particular, the relative path to your parent theme’s style.css file needs to be correct. The pattern I’ve given is the usual one, but some themes bury their style sheets in sub-directories and stuff.

The only mandatory comments are ‘Theme Name’ and ‘Template’ IIRC.

Piece of cake.

Cheers

PAE

Excellent! I’ll give it a try as I want to make a LOT more changes to the styles of this template. (Like background colors.) THANKS so much for your help! I’ll let you know how I make out.

Just to tidy up.

You can remove widgets from your sidebar widget areas from the Dashboard.

Go to Dashboard –> Appearance –> Widgets

Drag any widgets you don’t want out of the relevant sidebar areas on the right of the screen, and drop them into either the Inactive Widgets or the Available Widgets area in the main panel, depending on whether you want to retain settings or not.

HTH

Cheers

PAE

The issue is there’s 2 Widget areas: Primary (which is my left side bar and needed) and Secondary (which is the right sidebar and empty). Or so it says. I can’t get rid of the Secondary Widget area. My template choices are to have “2 column/1 sidebar” or “1 column/0 sidebar”. Let me check again to see if I’m missing something.

Meanwhile, I’m setting up my child theme and seem to be missing a step.

Re the child/parent theme. I’m getting an error:
“Broken Themes

The following themes are installed but incomplete. Themes must have a stylesheet and a template.

Name: Sliding Door Child Theme
Description: The parent theme is missing. Please install the “Sliding-door” parent theme.”

I have the style.css in a directory called “sliding-door-child”. And in that css, I defined the Template: Sliding-door. Do I need to rename the original Sliding-door directory to “sliding-door-parent”? I’m having a blonde moment!

OK, somehow I got it to work…the child theme. (I’m thinking I had a typo.) So, I take it that I only mess with with the Editor for the style.css in there and it won’t affect the original?

No. Leave your existing theme alone. The whole point of child themes is that they leave the parent alone!

??

The Template line should consist of the directory name of the parent. For example a twenty ten child theme would have something like (from one I did earlier):

/*
Theme Name:     urbanwords
Description:    Child theme for the Twenty Ten theme for UrbanWords
Author:         Peter Bradley
Author URI:     https://www.peredur.net
Template:       twentyten
Version:        0.1.0
*/

Directory names are case-sensitive, of course.

Does that help?

Cheers

PAE

Thick and fast, eh?

Yes. Just mess with your child theme’s style sheet. As long as you put everything below the @import statement, any styles you put in the child will overwrite their equivalents in the parent, because the child style sheet is loaded after the parent style sheet. Therefore the child’s style win in the cascade.

If you need to change any template files, you just copy the template file you want to change from your parent into your child directory and then make the changes in the child version. WP loads child versions first, so if it encounters a child version of the template file, it won’t look for a parent version.

The only slight wrinkle is the functions.php file: but if you’re creating a new functions.php file and adding PHP code to it, it’s pretty certain you (think you) know what you’re doing.

Does that help?

Cheers

PAE

Got it! So, I simply build off my child’s style.css.

I think my issue is I had “sliding-doors” instead of “sliding-door” (non plural). (Intuitively, it should be doors as there are 7 of the little buggars!)

My next task will be to lighten up the background and I can see it’s in several pieces.

Yes, that definitely helps knowing what css loads first. Thanks again!