WordPress.org

Ready to get started?Download WordPress

Forums

Buttercream
[resolved] How can I add a jpg button between the header and body? (17 posts)

  1. teasider
    Member
    Posted 1 year ago #

    Hey,
    First of all - thanks for the theme, it is beautiful and useful.
    I would like to add a wide (same as theme's width) link\button\space between the header and the body itself.
    Can you please point me to the direction of the right code to add\change?

    Thanks in advance!

    http://wordpress.org/extend/themes/buttercream/

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    If you want to add an element, you'd generally need to modify the header.php file -- which should only be done in a Child Theme. That way all your changes won't be lost upon updating the theme.

    If you only want to add space - you may only need to make a change to the CSS.

    A link to your page and more specifics would make it easier to help you.

  3. teasider
    Member
    Posted 1 year ago #

    Hey, Thanks for the fast reply.
    This is what I wanted to accomplish - http://imgur.com/H2Tu5

    A graphic button that links to some page.

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Then the Child Theme header.php modification would be the way to go. You'd also need to add some styling code to the CSS file in the child theme. Do you have the code for the button?

  5. teasider
    Member
    Posted 1 year ago #

    No code :) It's just going to be a .jpg file, I guess.
    I don't have the experience needed for CSS and coding buttons.

    If i could just make that space like shown in the image - i can insert whatever i need there (maybe ill change it in the future) - but right now a linked jpg would be great.

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Do you have a child theme set up? Once you do that, put a copy of the header.php file in the child theme and add the image code just below this line.

    <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>

    You'll have to fill in the relevant info for your site:

    <a href="url to page you are linking to" <img src="file path to your image" alt="put alt text here" width="xx" height="xx" class="aligncenter buttonimg" /></a>

    It should be right above this line of code:

    </hgroup>

    The above adds a class to that image so you can style it with CSS if you want:

    img.buttonimg {
       styles go here;
    }

    Having said all that, I'm wondering if what you really want is to add or move the menu to that location on the page?

  7. teasider
    Member
    Posted 1 year ago #

    nop, the menu is good where it is, I just want a button after the header, before the posts - that will lead to a page.
    I tried adding that code exactly where you stated - but nothing new appears on the updated website.

    I edited header.php, lets presume i wont be updating the theme.

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    presume i wont be updating the theme.

    And when the theme is no longer compatible with WP? Or there is a security issue? That's not a good way to go.

  9. teasider
    Member
    Posted 1 year ago #

    I know, as soon as i figure out (hopefully with your help), how to set up this button, i will restart and do it in child theme.

    I did exactly as you state above, but nothing appears on the webpage, do you have any speculations on why?

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Did you put in the appropriate file path for the image and the link? And upload the image?

    Make sure you are clearing any caches.

    Without seeing your site, no real way for me to guess any further.

  11. teasider
    Member
    Posted 1 year ago #

    Sorry :) Appreciate the help.
    This is the website - http://bit.ly/VlcekA

    The file path is correct and the code is filled as instructed.

  12. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Oh sorry, I think what I posted above might have been messed up -- try this:

    <a href="http://badroommate.net/post-item"><img src="http://www.psdgraphics.com/wp-content/uploads/2012/02/blank-button-template.jpg"  class="aligncenter buttonimg" height="25" width="105" alt="Submit your content!" /></a>
  13. teasider
    Member
    Posted 1 year ago #

    Its working now, What did you change from the last 'messed up' line?

    a couple of other questions -

    *do you think there's a way to put a separator (like under the button) , but above it ?

    *This is cosmetic, Is there a way to make the button not appear on the post page? or would i have to get rid of the header in the post php file?

  14. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    That code was kind of garbled up - dunno why - but the pieces of it were not right :). Code gremlin?!

    Try this in your style.css for the separator:

    .site-description {
        border-bottom: 1px solid #xxxxxx;
        padding-bottom: 15px;
    }

    Add the color you want and adjust the px as desired.

    You can hide that on a specific page or template using the page id in the CSS - look in the body tag for page specific classes -- for example:

    body.single-post img.buttonimg {
       display: none;
    }
    
    .site-description {
        border-bottom: 0;
        padding-bottom: 0;
    }

    See if that works - though you may need to change the class used in that example.

  15. teasider
    Member
    Posted 1 year ago #

    The seperator works great.

    about leaving that button out of single.php and page.php
    they both have
    get_header(); ?>

    but that's it, I just want the button not to show up.

    Can I make another header.php (lets say header_no_button.php) but without the line we added earlier for the button, and use that in single.php and page.php?

  16. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yep, that should work too. Though you'd need to change the CSS so it doesn't add that line to both headers... Get it set up and I can look at that part of it if need be. But really, don't do all this work without the child theme -- it's much, much harder to go back and make one after you've made changes :).

  17. teasider
    Member
    Posted 1 year ago #

    Thank you, I made two headers, calling each one differently if its the main page or post\single page.
    Everything works great!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic