Community Forums › Forums › Archived Forums › Design Tips and Tricks › Add Button – Parallax Pro
Tagged: button, parallax-pro
- This topic has 14 replies, 3 voices, and was last updated 9 years, 6 months ago by susanta.
-
AuthorPosts
-
March 3, 2014 at 11:05 am #93226BlueNinjaMember
Hi Guys,
I am trying to display a button in a page on my site but can't seem to
figure this one out ??I have tried to use the same code as featured in the home page widgets
"Get Started Today"
I have also used a CSS button genrator to create a new button but again
this does not seem to be working as I would have thought ??http://blueninja.staging.wpengine.com/trying-get-buttons-post/
In an ideal world I would like to add the home page style buttons (black
version) to my posts and pages ??Kind Regards
James
Little Blue Ninja
http://blueninja.staging.wpengine.com/trying-get-buttons-post/March 4, 2014 at 1:01 am #93325nutsandboltsMemberYou should be able to add a button to any link by doing the following:
(1) Add the text and format it as a link
(2) Switch to the HTML post/page editor
(3) You should see a link like this:
<a href=http://url.com>My Button Text</a>
(4) Add
class="button"
to the link so it looks like this:<a class="button" href=http://url.com>My Button Text</a>
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+March 4, 2014 at 1:05 am #93326nutsandboltsMemberOkay, scratch that. I see that you've tried that and it's not working. It looks like the theme is missing CSS rules for just
.button
and only has them for specific ones.So, to steal from this in your stylesheet:
.footer-widgets a.button, .home-even a.button, .home-odd a.button { clear: both; display: inline-block; font-family: Montserrat, sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 1px; margin-top: 20px; padding: 15px 25px; text-transform: uppercase; }
combined with this:
.footer-widgets a.button:hover, .home-odd a.button:hover { background-color: #fff; color: #000 !important; }
Try adding this:
.button { clear: both; display: inline-block; font-family: Montserrat, sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 1px; margin-top: 20px; padding: 15px 25px; text-transform: uppercase; background-color: #000; color: #fff !important; }
You might want to change the background color and add a border so it looks more like the homepage but that is working for me in Chrome's Inspector.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+March 4, 2014 at 5:32 am #93342BlueNinjaMemberHello Nutsandbolts
Thanks so much got this working now 🙂
October 3, 2014 at 7:29 am #126664susantaParticipantHello Andrea,
Thanks a lot for the code! I recently switched to Genesis and I'm just getting familiar with Parallax Pro.
I'm not into coding but I'm trying to learn gradually.
I followed your instructions mentioned above and managed to create buttons as well. However, as can be seen in this page (http://seo-contentwriter.com/services/sales-copywriting/) the button is keeping to the right. I tried to change it but failed.
Is there any specific reason behind it in your observation?
I appreciate your help. Thanks!
October 3, 2014 at 9:05 am #126676nutsandboltsMemberHi!
To center the text, your HTML should look like this:
<center><a href="http://seo-contentwriter.com/contact-us/" onclick="_gaq.push(['_trackEvent', 'outbound-article-int', 'http://seo-contentwriter.com/contact-us/', 'Request a Quote']);" class="button alignright">Request a Quote</a></center>
I see right now there is a div tag around the button code, which should be able to be removed.
HTH!
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+October 3, 2014 at 9:06 am #126677nutsandboltsMemberOh, and you might want to remove "alignright" from the class as well so it will center.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+October 3, 2014 at 7:55 pm #126723susantaParticipantThanks for the help! I appreciate it!
October 5, 2014 at 1:29 pm #126847susantaParticipantHello Andrea,
With regards to the button, I copied and pasted the combined codes you suggested to BlueNinja above. My aim was make the buttons in the internal pages work properly. However, apparently, this is interfering with the home pages buttons now. Could you please take a look and help me? Thanks!
As you can see, I have the code after the last line in the CSS.
.footer-widgets a.button,
.home-even a.button,
.home-odd a.button {
clear: both;
display: inline-block;
font-family: Montserrat, sans-serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 1px;
margin-top: 20px;
padding: 15px 25px;
text-transform: uppercase;
}
.footer-widgets a.button:hover,
.home-odd a.button:hover {
background-color: #fff;
color: #000 !important;
}
.button {
clear: both;
display: inline-block;
font-family: Montserrat, sans-serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 1px;
margin-top: 20px;
padding: 15px 25px;
text-transform: uppercase;
background-color: #000;
color: #fff !important;
}It might be possible I will have found a solution but I'm not sure about this. I keep doing things on a trial and error fashion. Thanks!
October 5, 2014 at 1:31 pm #126848nutsandboltsMemberWhich specific buttons on the homepage are giving you trouble? I'm seeing some with a border that are white on hover, then others that are black with no hover state and no border.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+October 5, 2014 at 2:16 pm #126849susantaParticipantThe ones with border that are white on hover - They are no problem with them
The ones that back with no hover state and no border - They are due to the CSS issue.
As per the demo theme, the buttons displayed on the home page that have a border and remain transparent until hover.
Likewise, the demo theme also says the buttons for internal pages, archives, and posts should have NO border, have black background, and blue on hover (I have chosen the blue theme).Currently, there is not issue with the home page display. However, if you look at this URL on my website: http://seo-contentwriter.com/about/our-team-of-writers/, something is seriously wrong.
FYI, I have pasted the following code immediately after last line of the CSS:
.button:hover {
background-color: #44ace8;
border: none;
color: #fff;
cursor: pointer;
font-family: Montserrat, sans-serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 1px;
padding: 20px;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
}Can you tell me the correct code please? All I need is the button to work in the internal page the way that is consistent with the intended design of the theme. I wonder why the developer of the theme even missed such a basic feature.
October 5, 2014 at 2:24 pm #126850nutsandboltsMemberTry replacing what's at the end of your stylesheet with this:
.button { background-color: transparent; border: 2px solid #000; color: #000 !important; cursor: pointer; font-family: Montserrat, sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 1px; padding: 20px; text-transform: uppercase; -webkit-font-smoothing: antialiased; } .button:hover { background-color: #44ace8; border: 2px solid #44ace8; color: #fff; cursor: pointer; font-family: Montserrat, sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 1px; padding: 20px; text-transform: uppercase; -webkit-font-smoothing: antialiased; }
That should give you a transparent button with black text, black border, then blue with black text on hover.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+October 5, 2014 at 2:25 pm #126851nutsandboltsMemberActually that's a little redundant. You can probably do this instead:
.button { background-color: transparent; border: 2px solid #000; color: #000 !important; cursor: pointer; font-family: Montserrat, sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 1px; padding: 20px; text-transform: uppercase; -webkit-font-smoothing: antialiased; } .button:hover { background-color: #44ace8; border: 2px solid #44ace8; color: #fff !important; }
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+October 5, 2014 at 2:57 pm #126853susantaParticipantThanks a lot for your help with this, Andrea!
While it's working now, the newly added code still seems to be interfering with the the them design:
Here are some example:
http://seo-contentwriter.com/contact-us/ (The Text is Invisible Until Hover)
Plus, it's displaying the red color on hover. Technically, it's inconsistent with the rest of the buttons on other pages and archives, which are blue on hover.
You can compared the following examples and find it for yourself:
The button is working well on the achieves: http://seo-contentwriter.com/social-media/ (matches the blue theme)
The button is working well on the posts but is inconsistent with the theme chosen: http://seo-contentwriter.com/blog/optimize-seo-content-google-webmaster-tools/
And, as explained above, the button on the contact us page neither matches the theme color nor shows the text until hover: http://seo-contentwriter.com/contact-us/
Thanks,
October 5, 2014 at 3:07 pm #126855susantaParticipantAs per my observation, the designer of theme must have intended two types of buttons (although a webmaster can modify it as per her own choice).
#1 - All buttons on home page have the following features:
A - They are transparent until over
B - They have borders (black or white depending on the background color of the widgets)
C - They become highlighted on hover (black or white depending on the background color of the widgets)#2 - All buttons that are NOT on the home page have the following features:
A - They are NOT transparent on default (http://demo.studiopress.com/parallax/contact/?color=blue)
B - They do NOT have any border at all
C - They become blue on hover (because that's the thing about blue theme)Hope this helps. Thanks!
-
AuthorPosts
- The topic ‘Add Button – Parallax Pro’ is closed to new replies.