Jump to content
Sign in to follow this  
Jason M

Button Dropdown Formatting

Recommended Posts

Jason M    1
Jason M

I need some help figuring out how to format the button dropdown feature.  Here's the page for the site I'm working on:

 

http://be2.jasonmcvay.com/guide-to-books/

 

I would like the buttons in the REAL Lean Volumes 1-6 banner to look similar to the regular button used with the other banners.  I'm comfortable with searching making CSS customizations and using Chrome's developer tools, but I cannot find what I need to make the changes.  Specifically, I'd like no space between the buttons and the text and the two buttons on the same line.  It appears paragraph breaks are being added and I'm not sure why or how to remove them.  I'd then like to make the buttons the same size, but that's probably easier and I'll worry about that second.

 

Thanks for any help pointing me in the right direction.

Share this post


Link to post
Share on other sites
catrina    103
catrina

It's odd that those buttons look different from the other ones. Have you tried deleting that banner and creating a new one (with the same content) to see if the problem persists?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Jason M    1
Jason M

Just deleted the original and made a new one that's now at the top of the page and titled "Test Banner."  These are different button types with different shortcodes.

 

[pl_button] vs [pl_buttondropdown]

 

I'm not surprised they are different out of the box.  It's the alignment that's the biggest problem.  The html for the botton options seems to be the problem.  As I mentioned above, it adds paragraph breaks which I don't want.

Share this post


Link to post
Share on other sites
Rob    547
Rob

Did you paste the code in Visual mode or Text mode? That will make all the difference in the world.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Jason M    1
Jason M

Text mode.  I tried it again using Text mode to make sure and had the same result (see Test Banner 2).

Share this post


Link to post
Share on other sites
Rob    547
Rob

Okay, thanks for your prompt reply.

 

Did you assign a size to the [pl_buttondropdown] tag?

 

The instructions found here say there's specific sizes. 

 

[pl_buttondropdown size="large" type="info" label="button"]
<ul>
<li><a href="#">This</a></li>
<li><a href="#">That</a></li>
<li><a href="#">The Other</a></li>
</ul>
[/pl_buttondropdown]

I would imagine that without any specific code telling it the size it's supposed to render, the drop down will default to the mini size. Checking your site, the drop down you have is setting to mini.  Please try it with the Large option and see if that works.

 


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Jason M    1
Jason M

I did assign the size to be mini and tried the large size as well.  I'm more concerned with them lining up correctly so the two buttons are next to each other and there isn't a space between the text as the button, like the other banners with single buttons.  I had read the instructions and believe my shortcode and html are the same are yours, Rob.  Here's what I have on my site:

 

Explains Lean management and Lean leadership in six topical categories. Buy this book if you want to learn the details of Lean management and Lean Leadership.
[pl_buttondropdown size="mini" type="default" label="More Info"]
<ul>
<li><a href="http://be2.jasonmcvay.com/real-lean-volume-1/">Volume 1</a></li>
<li><a href="http://be2.jasonmcvay.com/real-lean-volume-2/">Volume 2</a></li>
<li><a href="http://be2.jasonmcvay.com/real-lean-volume-3/">Volume 3</a></li>
<li><a href="http://be2.jasonmcvay.com/real-lean-volume-4/">Volume 4</a></li>
<li><a href="http://be2.jasonmcvay.com/real-lean-volume-5/">Volume 5</a></li>
<li><a href="http://be2.jasonmcvay.com/real-lean-volume-6/">Volume 6</a></li>
</ul>
[/pl_buttondropdown][pl_buttondropdown size="mini" type="warning" label="Buy Now"]
<ul>
<li><a href="http://www.amazon.com/Real-Lean-Understanding-Management-System/dp/0972259112/ref=la_B001JS76OU_1_3?ie=UTF8&amp;qid=1364185551&amp;sr=1-3">Volume 1</a></li>
<li><a href="http://www.amazon.com/Real-Lean-Critical-Opportunities-Management/dp/0972259147/ref=la_B001JS76OU_1_5?ie=UTF8&amp;qid=1364185551&amp;sr=1-5">Volume 2</a></li>
<li><a href="http://www.amazon.com/Real-Lean-Sustaining-Management-Three/dp/0972259163/ref=la_B001JS76OU_1_7?ie=UTF8&amp;qid=1364185551&amp;sr=1-7">Volume 3</a></li>
<li><a href="http://www.amazon.com/Real-Lean-Learning-Craft-Management/dp/0972259171/ref=la_B001JS76OU_1_10?ie=UTF8&amp;qid=1364185551&amp;sr=1-10">Volume 4</a></li>
<li><a href="http://www.amazon.com/Real-Lean-Strategies-Management-Success/dp/0972259198/ref=la_B001JS76OU_1_8?ie=UTF8&amp;qid=1364185551&amp;sr=1-8">Volume 5</a></li>
<li><a href="http://www.amazon.com/Real-Lean-Unsolved-Problems-Management/dp/0984540008/ref=la_B001JS76OU_1_6?ie=UTF8&amp;qid=1364185551&amp;sr=1-6">Volume 6</a></li>
</ul>
[/pl_buttondropdown]

Share this post


Link to post
Share on other sites
Rob    547
Rob

The mini size is bound to stack if there's no space between the two sets of code.

 

[/pl_buttondropdown][pl_buttondropdown size="mini" type="warning" label="Buy Now"]

 

This code will always stack the code.  But you can fix this by making each its own line.

[/pl_buttondropdown]

[pl_buttondropdown size="mini" type="warning" label="Buy Now"]


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Jason M    1
Jason M

Made the above change and it didn't help.  Also, I tried taking out the shortcode and using the source code instead.  I then tried moving the </p> tag from where it was automatically put in after the block of text to after the second button's closing </div> tag.  Didn't help.  For some reason <p> tags are added and I can't seem to remove them.

Share this post


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

Hi there,

 

The way i got this to work was to add float:left to each of the button classes.

 

 

[pl_buttondropdown size="mini" type="default" label="More Info" float="left"]
<ul>
 

 

 

Then add the following css to remove the clear fix so each button doesn't span the whole row.

 

.btn-group:after {
    clear: none;
}

That gave me this (ignore the email button, that's not part of the button group code) - http://screencast.com/t/ND4VvxBgwc


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
Jason M    1
Jason M

Thanks, James.  It's getting very close.  I also made CSS changes to the button height, padding, and font size to make them look like the single buttons.  Here's what I have for CSS so far.

 

.btn-group:after {
    clear: none;
}
.btn-group .btn-mini.dropdown-toggle {
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 12px;
	padding-left: 9px;
	padding-right: 9px;
	height: 31px;
}

 

I'm still not sure how to get rid of the space above the buttons and below the text.  Also, I'd like a space between the buttons.  I can live with what I have so far, but if anyone knows how to make those last couple changes I'd appreciate the help.

Share this post


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

The space under the text is coming from a margin applied to the <p> tag.

 

 

#banners .banner-content p:first-child {
    margin-bottom: 0;
}

 

To add space between the buttons add a margin-right to the button css.

 

.btn-group .btn-mini.dropdown-toggle {
    margin-right: 10px;}
 

 


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
Jason M    1
Jason M

Thanks, James!  The dropdown buttons now look the same as the others.

Share this post


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

You're welcome, glad that worked :-)


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

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  

×