WordPress.org

Forums

[resolved] Code to get logo, title & tagline on 1 line of header in Sliding Door Theme (18 posts)

  1. lmenz
    Member
    Posted 3 years ago #

    How do I get a small logo, the title & tagline on a single line of the header using the Sliding Door Theme? View my issue at http://www.topdownconservation.com/index-wp.php

    Thanks for anyone's assistance!

  2. peredur
    Member
    Posted 3 years ago #

    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

  3. lmenz
    Member
    Posted 3 years ago #

    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!

  4. peredur
    Member
    Posted 3 years ago #

    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

  5. lmenz
    Member
    Posted 3 years ago #

    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!

  6. lmenz
    Member
    Posted 3 years ago #

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

  7. peredur
    Member
    Posted 3 years ago #

    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: http://themeserver.themedomain.whatever
    Description: A child theme for your parent theme
    Author: Your Name
    Author URI: http://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

  8. lmenz
    Member
    Posted 3 years ago #

    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.

  9. peredur
    Member
    Posted 3 years ago #

    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

  10. lmenz
    Member
    Posted 3 years ago #

    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.

  11. lmenz
    Member
    Posted 3 years ago #

    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!

  12. lmenz
    Member
    Posted 3 years ago #

    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?

  13. peredur
    Member
    Posted 3 years ago #

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

    :-D

    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:     http://www.peredur.net
    Template:       twentyten
    Version:        0.1.0
    */

    Directory names are case-sensitive, of course.

    Does that help?

    Cheers

    PAE

  14. peredur
    Member
    Posted 3 years ago #

    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

  15. lmenz
    Member
    Posted 3 years ago #

    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.

  16. lmenz
    Member
    Posted 3 years ago #

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

  17. peredur
    Member
    Posted 3 years ago #

    Well, strictly speaking, only the child theme style.css file is loaded. That's why it's the only mandatory file in a child theme, but since the child theme style.css file is @importing the parent style sheet, effectively the parent CSS code is first and the child CSS is last and therefore wins in the cascade.

    Anyway, well done and good luck.

    Cheers

    PAE

  18. lmenz
    Member
    Posted 3 years ago #

    Oh, my! We should have stopped while I thought I was ahead! I gt it now!

Topic Closed

This topic has been closed to new replies.

About this Topic