Jump to content

Archived

This topic is now archived and is closed to further replies.

Ryan Logan

Place Button in Branding Area & Base Theme

Recommended Posts

Ryan Logan+    0
Ryan Logan

www.nationalrealtaxtracking.com/nrttwp

 

Hi.  I have a site developed in Framework 2.4.4.  I'd like to add a button, just above the social media icons, but I'm not sure how to go about it.  I've read that this may require installing/activating the base theme and using hooks.

 

1. Do I/Should I use the base theme to do this?

 

2. If I don't need to use a base theme, how would I accomplish this?

 

3.  If I should use the base theme...

    

     3a.  Is it safe to install/activate the theme, with the site already developed in Framework 2.4.4?

     3b.  Can you please provide a download link for the base theme?  i only know of the DMS version.

 

Thank you

Ryan

Share this post


Link to post
Share on other sites
James B    436
James B

Hi Ryan

 

You can do this using a hook and the base theme, the base theme is a blank child theme so it won't have any negative effect on the existing site, it will simply add the additional code you put inside it to the existing site and keep that code safe when you update the core theme etc. 

 

You can download the base theme from here - https://www.dropbox.com/s/muyy8k5xcjvbvlo/Framework-included-content.zip. It's listed as PageLines template theme near the bottom.

 

This thread shows something similar to what you're trying to do and has an example of the hook code. Simply replace the html in the example of their button for your own. http://forum.pagelines.com/topic/22799-donate-button-next-to-social-media-icons-in-header/

 

Information on hooks for the framework can be found at - http://support.pagelines.me/docs/customization/hooks/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Ryan Logan+    0
Ryan Logan

Getting closer, but still about to pull my hair out.  I was able to change the font to Calibri and the font size to 14px.  However, the button color is not consistent amongst browsers. In Chrome and IE, the button color is unchanged (still Blue) on view and on hover.  In Firefox, the button is my desired color on view, but it turns half Blue on hover.  Please see my questions below.

 

Here is my current Custom CSS.

 

.btn-primary {
    background-color: #FFFFFF;
    background-image: -moz-linear-gradient(center top , #B0174A, #B0174A);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
 
.btn {
    font-family: calibri;
    font-size: 14px;
}
 
1.  Where is the Blue still coming from?
2.  How do you edit the CSS in Firebug, for "hover" items?  As soon as I move my cursor away from the hovered item, Firebug shows the previous code
3.  I want to move the button to the left, further away from the Search box, but I can't find out how.
 
Thank you.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

The issue is with your custom CSS, in order to make your custom CSS throughout all browsers, you will need to add the code that is supported by that browser. At the moment, you only have mozilla support code i.e. -moz-...

 

All other browsers use alternatives, you can either use this site - http://www.colorzilla.com/gradient-editor/

Or even easier is using LESS CSS such as:

 

#site .btn-primary {

    #gradient .vertical(#B0174A, #B0174A);
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
 
The #gradient .vertical will add all the correct browser specific CSS for gradients, so you don't have too. You can find more info about the LESS here - http://docs.pagelines.com/advanced/less-css
 
We also have an old guide on how to add your own custom buttons here, which can be used in DMS too - http://support.pagelines.me/docs/customization/create-custom-buttons/

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Ryan Logan+    0
Ryan Logan

That did the trick.  The only thing is now the "clickable" area of the button very strange.  Only the top left of the button and right side of the button...are "clickable".

 

Hook

 

add_action( 'get_search_form', 'client_login_button' );
 
function client_login_button()  { ?>
 
<a class="btn-primary btn-small" href="http://www.msn.com">Client Login</a>
    
    <?php
    
}
 
CSS/Less
 
#site .btn-primary {
    #gradient .vertical(#B0174A, #B0174A);
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
 
#site .btn-primary {
    font-family: calibri;
    font-size: 14px;
  ;
}

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

This because the Navs div is overlapping it, do the following:

 

Replace:

 

<a class="btn-primary btn-small" href="http://www.msn.com">Client Login</a>

 

With:

 

<a class="client-btn btn-primary btn-small" href="http://www.msn.com">Client Login</a>

 

Then add the following CSS:

 

.client-button {
position: relative;
z-index: 1000;
}

Try that, if that doesn't work, you may need to adjust the navs width to accommodate your client button.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Ryan Logan+    0
Ryan Logan

I have the button located and styled exactly where I want.  It does appear as if the nav is overlapping the button. I've been trying to find where to shink the right side of the nav bar.

Share this post


Link to post
Share on other sites
Ryan Logan+    0
Ryan Logan

Fixed it!  This was the magic...for me at least.  Good to go.  Thanks again!!!

 

.navigation_wrap .main_nav {
    height: 0px;
}

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×