• 0
Sign in to follow this  
Followers 0

Place Button in Branding Area & Base Theme

Question

Posted · Report post

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

9 answers to this question

  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

I answered #3.  Cool.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

No problem.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0