WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to add a relative second-header image or a logo (12 posts)

  1. leejosepho
    Member
    Posted 1 year ago #

    I have been learning a bit while searching and reading, and I believe I am beginning to see an overall picture of how some things are done. However, I have yet to find specific info about adding a "floating logo" or a second image in my header. So, how can I make that happen?

    Here is some code I have already added in style.css (Twenty Twelve Child Theme) that will have to be taken into account as I proceed here:

    /* center header */
    .header-image {
        display: block;
        margin-top: 24px;
        margin-top: 1.714285714rem;
        margin: 0 auto 2em;
    }
    
    /* add search to header */
    .header-search {
    float: right;
        margin-top: -50px;
    }
    
    @media (max-width: 650px) {
        .header-search {
            margin-top:5px;
            text-align:center;
            float:none;
        }
        .main-navigation  {
            clear:both;
        }
    }
    
    /* Minimum width of 960 pixels. */
    @media screen and (min-width: 960px) {
        body {
    	background-color: #e6e6e6;
        }
        body .site {
    	max-width: 100%; /* added to attain full-width */
        }
    }

    The Search Box is nicely-placed, and my logic is to now find all the related code to copy over and modify as needed to make a logo show up elsewhere.

    Am I even close?

    http://www.nonameyet.org/

  2. noahjonah
    Member
    Posted 1 year ago #

    Hi,

    1. Create a new <div> in HTML, insert your <img src
    2. CSS {position:absolute;}

  3. leejosepho
    Member
    Posted 1 year ago #

    I am stuck at the beginning of this with only <div id="logo" because I do not know where it will ultimately end, pun acknowledged, and my efforts to get "the big picture" here have been frustrated by the fact I have found 19 <div tags (if that is the correct term) within my theme's .php files and only 17 </div>.

    Got another clue or two to pass along?!

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Have you a header.php file within your Child Theme directory?

  5. leejosepho
    Member
    Posted 1 year ago #

    Yes, I copied one over from the primary Twenty Twelve theme so I could add a search box...and now something more comes to mind here:

    The header.php in my Child Theme includes all of the original as well as my additions, and I do not know whether both are being accessed or just the one in the Child Theme. In other words: My Child Theme's style.css has an @import and I understand what is going on there, but I do not know how WordPress handles the matter of same-name (parent/child) .php files.

  6. esmi
    Forum Moderator
    Posted 1 year ago #

    The child's template is always loaded in preference to the parent's.

  7. leejosepho
    Member
    Posted 1 year ago #

    I thank you, esmi, and I would assume that applies to all .php files. Altogether, I have footer.php, functions.php and header.php in my Child Theme (along with style.css, of course).

  8. esmi
    Forum Moderator
    Posted 1 year ago #

    I would assume that applies to all .php files

    All theme template files, yes. Anything that is outside of the normal theme template architecture (eg my-custom-script.php) would need to be checked on an individual case basis.

  9. leejosepho
    Member
    Posted 1 year ago #

    I know my way around in a welding shop as well as you folks know your ways around here, but I have decided to ask a Developer to do this for me!

    Many thanks for your interactions here and the related things I have learned.

  10. leejosepho
    Member
    Posted 1 year ago #

    @noahjonah: Am I getting close?

    <div id="logo" name="circuslogo" img src="http://www.nonameyet.org/wp-content/uploads/circuslogo.png"></div>
    
    <div id="myDiv" name="myDiv" title="Example Div Element">
    <h5>Subtitle</h5>
    <p>* * * * * * * *</p></div>

    The Subtitle test is showing up fairly close to where I want the logo to appear, but I have yet to make it show.

  11. leejosepho
    Member
    Posted 1 year ago #

    Got it.

    What do I need to do to make the Title follow the logo and get Search back to the top?

    http://www.nonameyet.org/

  12. leejosepho
    Member
    Posted 1 year ago #

    Got it again, and now I just need some padding...

    Many thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.