Display signup buttons in header

[LeeParticipant]

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.

[ZeaksParticipant]

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

[LeeParticipant]

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

[ZeaksParticipant]

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.

[LeeParticipant]

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.

[ZeaksParticipant]

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

and

Here’s an example using those two classes …

This is the code you’re currently using, it should be within an @media query

Code:

@media screen and (min-width: 600px) {
.top-signupsignin {
display: inline;
float: right;
height: 100px;
margin-top: -100px;
width: 300px;
}
}

This code should not be within an @media query because it’s the mobile CSS and Twenty Twelve is a mobile first theme.

.signup-button, .login-button {
clear: both;
float: right;
}

You should try the wordpress.org forums http://wordpress.org/support/ or a CSS forum http://www.welovecss.com/ for any further help as this is not theme support related.

[Author]

Posts