WordPress.org

Support

Support » Plugins and Hacks » WordPress Button Plugin MaxButtons » [Resolved] Placing button over header image

[Resolved] Placing button over header image

  • 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/

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Author johnbhartley

    @johnbhartley

    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.

    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!

    Plugin Author johnbhartley

    @johnbhartley

    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.

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

    Plugin Author johnbhartley

    @johnbhartley

    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.

    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?

    Plugin Author johnbhartley

    @johnbhartley

    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.

    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.

    Plugin Author johnbhartley

    @johnbhartley

    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;

    Plugin Author johnbhartley

    @johnbhartley

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

    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.

    Plugin Author johnbhartley

    @johnbhartley

    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

    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.

    Plugin Author johnbhartley

    @johnbhartley

    No problem, glad it eventually worked out.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘[Resolved] Placing button over header image’ is closed to new replies.
Skip to toolbar