Community Forums › Forums › Archived Forums › General Discussion › Shortcode button plugin & Outreach Pro
- This topic has 4 replies, 2 voices, and was last updated 8 years, 8 months ago by katji83.
-
AuthorPosts
-
August 25, 2015 at 6:18 pm #163498katji83Member
Dear Studiopress forum community:
I have to admit I am completely over my head and I'm not sure what I'm doing, however I don't want to give up just yet. I am trying to put hover buttons over my main image used in the outreach pro theme.
I would really like to include those three buttons (albeit blue) on my main home page image just like the following website: http://www.memorialbaptistpa.org/
Being a newbie and still learning the ropes, I thought it would be a great idea to purchase a plugin that would help me create buttons like those on the memorialbaptistpa page. However, I thought I could just install the plugin and it would create a WYSIWYG platform that would allow me to easily create buttons. However, the only help file included in the plugin is an html file that includes the following table of contents and a bunch of code under each section.
Plugin Descriptions
HTML Structure
CSS Files and Structure
JavaScript
PHP Code ExplanationThe plugin says it's a shortcode plugin, but I have no idea how to use the shortcodes or where to find them. I have also contacted the author of the plugin, but I'm not sure if the author will get back to me. In the event that I can't reach the author of the plugin, is their a parallel plugin that anyone might know of that is organized similarly but includes better instructions? It doesn't even need to be a button plugin, but one that would be easy to compare so I can figure out how to use the plugin I purchased. Even if you could give me hints on what to search for on google that would be a big, big help!
Many, many thanks in advance =D
http://www.deliverancebc.org/testdesignAugust 25, 2015 at 7:15 pm #163503Victor FontModeratorThe "buttons" on your example site aren't really buttons. The are standard hyperlinks that are formatted to look like buttons. A hyperlink is created as:
<a href="my-target-url" class="my-class">Button Text</a>
The class is cascading style sheet code that you add to your theme's style.css file.
The style of the button on the example site is:
.my-class { display: block; padding: 0.25em 0.5em; color: #FFF; background: #3DBC5E none repeat scroll 0% 0%; margin-right: 4px; margin-bottom: 4px; font-size: 0.8em; }
To create the hover effect:
.my-class:hover { background: #00BAF0 none repeat scroll 0% 0%; }
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?August 25, 2015 at 7:30 pm #163504katji83MemberMr. Font,
I greatly appreciate you taking the time to explain how this plugin works! Thank you so much for your quick response!
August 26, 2015 at 3:57 pm #163633katji83MemberI tried using the code you posted above, but it created a block under my image that hovered green and blue. The author of the plugin did eventually explain to me how to use the plugin so I was wondering if you could please tell me how to put this short code on top of my image on my front page?
The plugin's shortcodes creates these buttons: http://deliverancebc.org/testdesign/index.php/sample-page/
I would like to use the shortcode to place these buttons in the center bottom of the image on my homepage.
I read somewhere that I should create a div, create a content block the size of my image, and use the image as a background...however I'm not sure how that would work. Also the only way that I have been able to add the image without a space between it and the nav bar is because of code I placed in the genesis short hooks plugin.
Can I just edit the code I have in the hook below to include these buttons? Thanks!
<?php
if ( ( is_home() ) )
{ ?><div class="home-image"><p><body bgcolor="#140809"></p></div><?php }* I used image.png to prevent the actual pic from showing up in this post. Thanks!
August 26, 2015 at 4:01 pm #163635katji83Memberoops
.<?php
if ( ( is_home() ) )
{ ?><div class="home-image"><p><body bgcolor="#140809"><</p></div><?php }.*added periods at the beginning and end of html and replaced image size attributes with px and image.png for the actual name of pic. Hoping this is easier to read in post.
Thanks!
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.