WordPress.org

Ready to get started?Download WordPress

Forums

MaxButtons: WordPress Button Generator
[resolved] Placing button over header image (15 posts)

  1. sourcecodedynamics
    Member
    Posted 10 months ago #

    Hi all - I know this has been asked but some of the answers were handled offline.

    Theme: Celestial lite
    Site: http://sourcecodedynamicsco.ipage.com/
    Child theme with style.css file already created.

    I would like the button to go just beneath the "e" & "r" of the "Repair" text that is the background of the header image.

    I have this, but it's obviously not working:

    .header-image {
    position: relative;
    }
    .maxbutton-2 {
    position: absolute !important;
    top: 20;
    left: 10px;
    }

    Thanks in advance for your help, I have read some other posts and you have always been great!

    http://wordpress.org/plugins/maxbuttons/

  2. johnbhartley
    Member
    Plugin Author

    Posted 10 months ago #

    An option where you wouldn't have to really worry about absolute positioning is to make that large image the background image.

    If that's not possible, then please read the following.

    The CSS you have above tells the <img> to be positioned relatively. This does nothing. The div that would need relative positioning is #st-banner0-wrapper, but that is already the case. So, I added a test element just above #st-header-image and used the CSS you are using for .maxbutton-2, but without !important and also adding z-index: 10; Also, try giving it a left value of around 20% since the site is responsive.

    That should do it, but I can't be sure since the button was not in the actual page to test. Let me know if this works or if there are still issues.

  3. sourcecodedynamics
    Member
    Posted 9 months ago #

    Sorry for the delayed response. Okay so I changed the child theme to reflect:

    /*
    .header-image {
    position: relative;
    }
    .maxbutton-2 {
    position: absolute;
    z-index: 10;
    top: 20%px;
    left: 20%px;
    }
    -------------------------------------------------------------- */

    I added the button to the home page. Something still isn't right here. I appreciate your help, newbies like me really rely on it!

  4. johnbhartley
    Member
    Plugin Author

    Posted 9 months ago #

    Your button currently resides in the "entry-content" div. You should most likely place it in the #st-banner0-wrapper if that's where you would like it to go.

  5. sourcecodedynamics
    Member
    Posted 9 months ago #

    I'm not sure where to find that? Am I editing a page? Am I editing a .css file? If so which one?

  6. johnbhartley
    Member
    Plugin Author

    Posted 9 months ago #

    You'd have to the PHP file, most likely the index.php or front-page.php file, then use

    <?php do_shortcode('[maxbutton id="2"]'); ?>

    To get it to display.

  7. sourcecodedynamics
    Member
    Posted 9 months ago #

    I found this in header.php:

    <div id="st-banner0-wrapper" style="background-color:<?php echo get_theme_mod( 'banner_background', '#446b9a' ); ?>; border-color:<?php echo get_theme_mod( 'banner_top_line', '#525458' ); ?>; padding:<?php echo get_theme_mod( 'banner_fp_bg_padding', '0px' ); ?>;">

    <?php if ( ! dynamic_sidebar( 'sidebar-0' ) ) : ?>
    <?php if ( get_theme_mod('demo_on','0') ) : ?>
    <img src="<?php echo get_template_directory_uri() ; ?>/images/demo/showcase-banner.jpg" alt="sample banner" />
    <?php endif; ?>
    <?php endif; // end sidebar widget area ?>

    <?php $header_image = get_header_image();
    if ( ! empty( $header_image ) ) : ?>
    <div id="st-header-image" >
    <img src="<?php header_image(); ?>" class="header-image center" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="<?php bloginfo( 'name' ); ?>
    " />
    </div>

    I tried adding <?php do_shortcode('[maxbutton id="2"]'); ?> in a few different places but I could not get the button to show up. Any particular spot I should insert it into?

  8. johnbhartley
    Member
    Plugin Author

    Posted 9 months ago #

    If you add it in after the first chunk:

    <div id="st-banner0-wrapper" style="background-color:<?php echo get_theme_mod( 'banner_background', '#446b9a' ); ?>; border-color:<?php echo get_theme_mod( 'banner_top_line', '#525458' ); ?>; padding:<?php echo get_theme_mod( 'banner_fp_bg_padding', '0px' ); ?>;">
    
    <?php echo do_shortcode('[maxbutton id="2"]'); ?>

    you should be able to see it and adjust with CSS.

    My fault for leaving out the echo portion of the snippet.

  9. sourcecodedynamics
    Member
    Posted 9 months ago #

    Great, this got it to show up on the page!

    Now how do I position it? I tried inserting some of the initial code I mentioned but ti didn't work out.

  10. johnbhartley
    Member
    Plugin Author

    Posted 9 months ago #

    You should be able to use that initial code, just don't use the % signs. Writing 20%px is not valid CSS and it won't do anything, so try just 20px;

  11. johnbhartley
    Member
    Plugin Author

    Posted 9 months ago #

    Did this help at all? Marking as resolved but can re-open if you would like.

  12. sourcecodedynamics
    Member
    Posted 9 months ago #

    I still can't position it correctly. I tried this:

    [ Moderator note: please wrap code in backticks or use the code button. ]

    <?php echo do_shortcode('[maxbutton id="2"]'); ?>
    
    .maxbutton-2 {
    position: absolute;
    z-index: 10;
    top: 20px;
    left: 20px;
    }

    but it did nothing. So then I tried this:

    <?php echo do_shortcode('[maxbutton id="2"]'); 
    
    .maxbutton-2 {
    position: absolute;
    z-index: 10;
    top: 20px;
    left: 20px;
    }
    
    ?>

    and got a 500 internal server error.

  13. johnbhartley
    Member
    Plugin Author

    Posted 9 months ago #

    You have to place the CSS in a separate file (generally style.css). Placing it inside the PHP bits, aka <?php ... ?> will definitely give you an error.

    For more on CSS, please refer to this document: http://codex.wordpress.org/CSS

  14. sourcecodedynamics
    Member
    Posted 9 months ago #

    I realized I did not have my child theme active. I ended up putting this into a text widget.

    Thanks for your help thought, I do appreciate your time.

  15. johnbhartley
    Member
    Plugin Author

    Posted 9 months ago #

    No problem, glad it eventually worked out.

Reply

You must log in to post.

About this Plugin

About this Topic