Jump to content


Photo
- - - - -

Place Button in Branding Area & Base Theme


Best Answer Danny , 26 January 2014 - 04:40 PM

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.
Go to the full post


  • Please log in to reply
9 replies to this topic

#1 rlogan

rlogan

    Super Member

  • Members

  • 153 posts
  • LocationChicago, IL.
  • Framework Version:DMS and Framework Developer
  • Country: Country Flag

Posted 24 January 2014 - 01:47 AM

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



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 24 January 2014 - 07:48 AM

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 -

Please Login or Register to see this Hidden Content

. 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.

Please Login or Register to see this Hidden Content

 

Information on hooks for the framework can be found at -

Please Login or Register to see this Hidden Content



#3 rlogan

rlogan

    Super Member

  • Members

  • 153 posts
  • LocationChicago, IL.
  • Framework Version:DMS and Framework Developer
  • Country: Country Flag

Posted 25 January 2014 - 10:49 PM

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.


#4 rlogan

rlogan

    Super Member

  • Members

  • 153 posts
  • LocationChicago, IL.
  • Framework Version:DMS and Framework Developer
  • Country: Country Flag

Posted 25 January 2014 - 11:42 PM

I answered #3.  Cool.



#5 Danny

Danny

    Is Awesome!

  • Moderators
  • 16555 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 26 January 2014 - 04:06 PM

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 - 

Please Login or Register to see this Hidden Content



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 - 

Please Login or Register to see this Hidden Content

 
We also have an old guide on how to add your own custom buttons here, which can be used in DMS too - 

Please Login or Register to see this Hidden Content



#6 rlogan

rlogan

    Super Member

  • Members

  • 153 posts
  • LocationChicago, IL.
  • Framework Version:DMS and Framework Developer
  • Country: Country Flag

Posted 26 January 2014 - 04:26 PM

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="

Please Login or Register to see this Hidden Content

">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;
  ;
}


#7 Danny

Danny

    Is Awesome!

  • Moderators
  • 16555 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 26 January 2014 - 04:40 PM   Best Answer

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

 

Replace:

 

<a class="btn-primary btn-small" href="

Please Login or Register to see this Hidden Content

">Client Login</a>

 

With:

 

<a class="client-btn btn-primary btn-small" href="

Please Login or Register to see this Hidden Content

">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.


#8 rlogan

rlogan

    Super Member

  • Members

  • 153 posts
  • LocationChicago, IL.
  • Framework Version:DMS and Framework Developer
  • Country: Country Flag

Posted 26 January 2014 - 05:37 PM

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.



#9 rlogan

rlogan

    Super Member

  • Members

  • 153 posts
  • LocationChicago, IL.
  • Framework Version:DMS and Framework Developer
  • Country: Country Flag

Posted 26 January 2014 - 06:07 PM

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

 

.navigation_wrap .main_nav {
    height: 0px;
}


#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 16555 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 27 January 2014 - 09:42 AM

No problem.