Display signup buttons in header

Featured Theme Forums Twenty Plus Pro Display signup buttons in header

This topic contains 5 replies, has 2 voices, and was last updated by  Zeaks 10 months, 4 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #13484

    Lee
    Participant

    What is the best way to display signup buttons in header on http://pastebin.com/hNGc7HeN

    I read http://board.zeaks.org/threads/adsense-banner-in-header.749/#post-2534 and created a text box (right name?) for the 2 buttons I want to add below the because that’s where I have the information box for header items (logo, buttons).

    However, the 2 buttons are not displaying.

    #15409

    Zeaks
    Participant

    It looks like the URL given for the images is wrong.

    This is what you’re using
    /working/wp-content/themes/Twelve-Plus-Pro/images/signup-button.png

    It should be
    /working/wp-content/themes/twenty-plus-pro/images/signup-button.png

    twenty-plus-pro instead of Twelve-Plus-Pro

    #15410

    Lee
    Participant

    Fixed the link :)

    One button is on top of the other one even though I set the css to show the buttons inline or side by side. What am I missing?
    /* signup signin style */
    .top-signupsignin {
    float: right;
    height: 100px;
    width: 300px;
    margin-top: -60px;
    display: inline;
    }

    /* signup signin style */<br />
    .top-signupsignin {<br />
    float: right;<br />
    height: 100px;<br />
    width: 300px;<br />
    margin-top: -60px;<br />
    display: inline;<br />
    }
    #15411

    Zeaks
    Participant

    That CSS is for the containing div, you’ll need to add CSS for each image and probably need to shorten the width of the logo div, it’s most likely the same width as the header.
    This is a question better suited for the WordPress or a CSS forum, It’s not related to Twenty plus Pro.

    #15412

    Lee
    Participant

    I had added the 2 buttons in a list so that’s why they weren’t displaying correctly at first.

    On http://mobiletest.me, the website http://pastebin.com/hNGc7HeN is showing the buttons overlapping the logo. Can you help me fix this? I know that on smartphones, people should be viewing websites using the landscape view but too many people are conditioned to use the portrait view.

    #15413

    Zeaks
    Participant

    You can use clear: both http://www.w3schools.com/cssref/pr_class_clear.asp outside an @media query to have the buttons stack on mobile, you might also want to float them to the right. Here’s a great article on how they work http://css-tricks.com/css-media-queries/

    Keep in mind Twenty Twelve is a mobile first theme, so anything not within an @media query will be displayed on mobile devices, all other CSS (for desktops and larger screens) should be within one.
    You should also have a div class around each link such as

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.