Customizing Tabs And Modal Box Styles
Posted 18 December 2012 - 01:52 PM
I've been unsuccessful trying to get this 3rd party modal login plugin to work with Pagelines, so I spent all night working on my own. Now it's time to style the thing and I'm quite lost. I've used Pagelines shortcode to put a Login and a Registration in two tabs, and then I put those tabs in a modal box, using another Pagelines shortcode. So I suck at styling forms and I don't know where to begin to style the tabs and the modal box. How would I go about that? You can see the mess I have on my hands here: www.bringtheharvest.com in the sidebar, the button that says "Click Me."
Any help would be much appreciated.
Posted 18 December 2012 - 01:56 PM
There are lots of things I need to do, if you're looking at my modal box. To start with, I need to get rid of the top and bottom padding of the modal box to bring the tabs up, and eliminate most of the vertical space between the form fields so I can get rid of that scrollbar. That'd be a start.
Posted 18 December 2012 - 04:00 PM
I'm not using it anymore. I'm using the Paglines modal.
Posted 18 December 2012 - 04:06 PM
I found the modals.less file and I'm looking through it and trying to override each bit of formatting piece by piece so I can figure out how to have full control. Right now I can't figure out how to eliminate the space at the top. There seems to be some padding in the modal-body that I can't get rid of. I've eliminated the header and footer entirely and zeroed out the padding on every modal section. Still not going away. You can see where I'm at if you click the "login" button in the blue sidebar (not the one in the nav).
Posted 18 December 2012 - 04:07 PM
For the modal button, you'll need to use the colortype attribute and either one of the color properties provided here to change the color:
As for styling the modal itself, I think you can use HTML and CSS to style the content inside. If you're not familiar with CSS, please review this documentation:
Posted 18 December 2012 - 04:12 PM
Thanks. I do know CSS. That's what I'm working on right now, styling the box with CSS. But there's a mystery parameter I can't find.
Posted 18 December 2012 - 04:16 PM
Are you using Firebug to try to find the parameter? If not, I highly recommend it.
Posted 18 December 2012 - 04:18 PM
Yup. I am. And I've been over every inch of the modals.less file three times. Oh well. Something will click eventually.
Posted 18 December 2012 - 07:36 PM
I'm making some progress. Could anyone tell me why my Login submit button's hover range doesn't cover the whole button? Go here: www.bringtheharvest.com and click on the login button in the sidebar, then hover over the login submit button on the modal. Do it either in Chrome or Firefox. It's hideous in IE right now; that's a whole nother thing. What am I doing wrong with this hover? Here's the code:
Posted 18 December 2012 - 09:10 PM
On topic since I'm using the modal box shortcode: two questions: (1) Is it possible to use text instead of a button to call the modal? I hope so, but it doesn't seem like it is. (2) How can I make a custom button? I could just overwrite one of the current ones with my own images, but will my customs be overwritten on updates? Thanks.
Posted 18 December 2012 - 09:50 PM
Hi there, yes technically you can use text to call the modal. You'd need to edit the actual code though from bootstrap and use that in the section as opposed to the shortcode option.
You can find the code here -you could style the html to create your own button using this method too. Just paste the html directly into the content area.
Posted 18 December 2012 - 09:56 PM
Interesting. OK. Thanks. I'll give that a shot.
One other thing, if you're interested. I'm working on putting the tabs into the modal popup right now, trying to make it look seamless. I've already managed to make the modal box completely disappear, but with the tabs I'm having trouble. There is some space in between the tabs and my login/registration panel, and I can't figure out how to get rid of it. I need the tabs to be sitting flat atop the blue login/registration panel. www.bringtheharvest.com - click on the login button in the sidebar (not the nav), and it'll come up. I actually need the space both above and below the blue login panel to go, go away, so there's no scrollbar or even the threat of a scrollbar. Here's the code from the tabs-pills.less file. It's unaltered; I'm just overriding it in the custom LESS box.
Posted 18 December 2012 - 11:25 PM Best Answer
Yup. It was the max-height property of the modal that was causing the overflow. I elevated the max-height, problem solved.
Posted 19 December 2012 - 01:27 AM
Sites looking really good Thom, well done, glad you got it solved
- thomstark likes this
Posted 19 December 2012 - 01:29 AM
Thanks, man. I should sleep one of these days here soon.