Jump to content
maureen1671

Full width Buttons

Recommended Posts

maureen1671    2
maureen1671

I made a button :

 

[pl_button type="important" link="http://www.thomashoben.com/resources/schedule-a-consultation/" ]
Schedule an Informational Consultation
[/pl_button]

 

And placed it in a box on the home page @ thhp://www.thomashoben.com   

 

I would like it to stretch the width of the Content Area (left of the Side Bar).

 

Is a button in a box the best way to get this look and how would I make it expand to the correct width (100%) ?

 

I am planning on putting the same looking clickable buttons in the footer columns so I would need something that will work there as well.  I currently have Text Widgets in the Footer Column Sidebar.

 

Thanks. 

 

Sample site that of the look they are trying to achieve (orange buttons)  http://www.recoveryoptions.us/

Share this post


Link to post
Share on other sites
batman    389
batman

Hi maureen1671

Please you try 

.btn-important {
    padding-left: 80px;
    padding-right: 80px;}

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

Nah use display:block.

 

P.S-  FYI you have some JS errors on your site, including jquery 1.5.1 which is badly outdated.


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

No you'll need to apply the display:block with CSS in the Custom CSS area, or inline like this;

 

 


<a href="http://www.thomashob...inking-alcohol/" class="btn btn-important" style="display:block;">Take the Readiness Quiz</a>

Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
maureen1671    2
maureen1671

<p>Ok, I did this in the &lt;&gt;Custom Code, CSS/LESS rules and it great, thank you!:<br />

<br />

<br />

.btn-important {<br />

display:block;}<br />

<br />

<br />

PS: I love the hat....and the blink</p>

Share this post


Link to post
Share on other sites
evscicats    14
evscicats

Can you use this with a split button dropdown?  What is the class for the split button btw and how would you set that up?

Share this post


Link to post
Share on other sites
evscicats    14
evscicats
<div class="btn-group">
  <a class="btn btn-important dropdown-toggle" data-toggle="dropdown" style="display:block;" href="#">
    Login Links
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    [menu name="Login Links"]
  </ul>
</div> 

Changed my mind on the split button and decided on a regular dropdown button.  Here's my code but it doesn't span the width of the sidebar using the block style.  I also tried the btn-block as a class and it didn't work either.  Any other recommendations to make it work? 

 

 

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


×