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.
-
AuthorPosts
-
April 27, 2014 at 3:58 am #13484
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).
April 27, 2014 at 4:29 am #15409It 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.pngIt should be
/working/wp-content/themes/twenty-plus-pro/images/signup-button.pngtwenty-plus-pro instead of Twelve-Plus-Pro
April 28, 2014 at 2:12 am #15410Fixed 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 /> }
April 30, 2014 at 5:45 am #15411That 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.May 6, 2014 at 4:54 am #15412I 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.
May 8, 2014 at 8:46 pm #15413You 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 asandHere’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.
-
AuthorPosts
You must be logged in to reply to this topic.