16 replies to this topic

[thomstark]

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. 

[thomstark]

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.

[catrina]

What is the third party modal plugin you're using?

[thomstark]

I'm not using it anymore. I'm using the Paglines modal.

[thomstark]

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

[catrina]

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:

Please Login or Register to see this Hidden Content

 

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:

Please Login or Register to see this Hidden Content

[thomstark]

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.

[catrina]

Are you using Firebug to try to find the parameter? If not, I highly recommend it.

[thomstark]

Yup. I am. And I've been over every inch of the modals.less file three times. Oh well. Something will click eventually.

[thomstark]

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:

 

 

input.button {

width:60px;

position:absolute;

right:20px;

bottom:20px;

background:#131f33;

color:#fff;

font-family: Roboto;

height:16px;

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

border-radius: 15px;

border: 1p solid #999;

}

 

input.button:hover {

width:60px;

height:16px;

background:#294168;

color:#fff;

}

 

 

 

I've tried it with and without the height/width params in the hover function. No different either way.

[thomstark]

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.

[James B]

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 -

Please Login or Register to see this Hidden Content

you could style the html to create your own button using this method too. Just paste the html directly into the content area.

[thomstark]

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. 

 

 

 

 

// TABS AND PILLS

// -------------

 

// Common styles

.nav-tabs,

.nav-pills {

  .clearfix();

}

.nav-tabs > li,

.nav-pills > li {

  float: left;

  margin-bottom:-1px;

}

.nav-tabs > li > a,

.nav-pills > li > a {

  padding-right: 12px;

  padding-left: 12px;

  margin-right: 2px;

  line-height: 14px; // keeps the overall height an even number

}

 

.hentry .nav-tabs > li{

  list-style:none;

  margin:0;

}

  ul.nav.nav-tabs {

    padding-bottom:5px;

    margin:0;

  }

  ul.nav.nav-tabs a:hover {

    text-decoration:none;

  }

 

// TABS

// ----

 

// Give the tabs something to sit on

.nav-tabs {

  border-bottom: 1px solid #ddd;

}

 

// Make the list-items overlay the bottom border

.nav-tabs > li {

  margin-bottom: -1px;

}

 

// Actual tabs (as links)

.nav-tabs > li > a {

  padding-top: 8px;

  padding-bottom: 8px;

  line-height: @baseLineHeight;

  border: 1px solid transparent;

  .border-radius(4px 4px 0 0);

  &:hover {

    border-color: @grayLighter @grayLighter #ddd;

  }

}

// Active state, and it's :hover to override normal :hover

.nav-tabs > .active > a,

.nav-tabs > .active > a:hover {

  color: @gray;

  background-color: @white;

  border: 1px solid #ddd;

  border-bottom-color: transparent;

  cursor: default;

}

 

// Fix for framework

  .entry_content .tab-content :first-child{

    margin:1em 0;

}

 

// PILLS

// -----

 

// Links rendered as pills

.nav-pills > li > a {

  padding-top: 8px;

  padding-bottom: 8px;

  margin-top: 2px;

  margin-bottom: 2px;

  .border-radius(5px);

}

 

// Active state

.nav-pills > .active > a,

.nav-pills > .active > a:hover {

  color: @white;

  background-color: @linkColor;

}

 

 

 

// STACKED NAV

// -----------

 

// Stacked tabs and pills

.nav-stacked > li {

  float: none;

}

.nav-stacked > li > a {

  margin-right: 0; // no need for the gap between nav items

}

 

// Tabs

.nav-tabs.nav-stacked {

  border-bottom: 0;

}

.nav-tabs.nav-stacked > li > a {

  border: 1px solid #ddd;

  .border-radius(0);

}

.nav-tabs.nav-stacked > li:first-child > a {

  .border-radius(4px 4px 0 0);

}

.nav-tabs.nav-stacked > li:last-child > a {

  .border-radius(0 0 4px 4px);

}

.nav-tabs.nav-stacked > li > a:hover {

  text-decoration:none;

  border-color: #ddd;

  z-index: 2;

}

 

// Pills

.nav-pills.nav-stacked > li > a {

  margin-bottom: 3px;

}

.nav-pills.nav-stacked > li:last-child > a {

  margin-bottom: 1px; // decrease margin to match sizing of stacked tabs

}

 

 

 

// DROPDOWNS

// ---------

 

// Position the menu

.nav-tabs .dropdown-menu,

.nav-pills .dropdown-menu {

  margin-top: 1px;

  border-width: 1px;

}

.nav-pills .dropdown-menu {

  .border-radius(4px);

}

 

// Default dropdown links

// -------------------------

// Make carets use linkColor to start

.nav-tabs .dropdown-toggle .caret,

.nav-pills .dropdown-toggle .caret {

  border-top-color: @linkColor;

  border-bottom-color: @linkColor;

  margin-top: 6px;

}

.nav-tabs .dropdown-toggle:hover .caret,

.nav-pills .dropdown-toggle:hover .caret {

  border-top-color: @linkColorHover;

  border-bottom-color: @linkColorHover;

}

 

// Active dropdown links

// -------------------------

.nav-tabs .active .dropdown-toggle .caret,

.nav-pills .active .dropdown-toggle .caret {

  border-top-color: @grayDark;

  border-bottom-color: @grayDark;

}

 

// Active:hover dropdown links

// -------------------------

.nav > .dropdown.active > a:hover {

  color: @black;

  cursor: pointer;

}

 

// Open dropdowns

// -------------------------

.nav-tabs .open .dropdown-toggle,

.nav-pills .open .dropdown-toggle,

.nav > .open.active > a:hover {

  color: @white;

  background-color: @grayLight;

  border-color: @grayLight;

}

.nav .open .caret,

.nav .open.active .caret,

.nav .open a:hover .caret {

  border-top-color: @white;

  border-bottom-color: @white;

  .opacity(100);

}

 

// Dropdowns in stacked tabs

.tabs-stacked .open > a:hover {

  border-color: @grayLight;

}

 

 

 

// TABBABLE

// --------

 

 

// COMMON STYLES

// -------------

 

// Clear any floats

.tabbable {

  .clearfix();

}

.tab-content {

  display: table; // prevent content from running below tabs

  width: 100%;

}

 

// Remove border on bottom, left, right

.tabs-below .nav-tabs,

.tabs-right .nav-tabs,

.tabs-left .nav-tabs {

  border-bottom: 0;

}

 

// Show/hide tabbable areas

.tab-content > .tab-pane,

.pill-content > .pill-pane {

  display: none;

}

.tab-content > .active,

.pill-content > .active {

  display: block;

}

 

 

// BOTTOM

// ------

 

.tabs-below .nav-tabs {

  border-top: 1px solid #ddd;

}

.tabs-below .nav-tabs > li {

  margin-top: -1px;

  margin-bottom: 0;

}

.tabs-below .nav-tabs > li > a {

  .border-radius(0 0 4px 4px);

  &:hover {

    border-bottom-color: transparent;

    border-top-color: #ddd;

  }

}

.tabs-below .nav-tabs .active > a,

.tabs-below .nav-tabs .active > a:hover {

  border-color: transparent #ddd #ddd #ddd;

}

 

// LEFT & RIGHT

// ------------

 

// Common styles

.tabs-left .nav-tabs > li,

.tabs-right .nav-tabs > li {

  float: none;

}

.tabs-left .nav-tabs > li > a,

.tabs-right .nav-tabs > li > a {

  min-width: 74px;

  margin-right: 0;

  margin-bottom: 3px;

}

 

// Tabs on the left

.tabs-left .nav-tabs {

  float: left;

  margin-right: 19px;

  border-right: 1px solid #ddd;

}

.tabs-left .nav-tabs > li > a {

  margin-right: -1px;

  .border-radius(4px 0 0 4px);

}

.tabs-left .nav-tabs > li > a:hover {

  border-color: @grayLighter #ddd @grayLighter @grayLighter;

}

.tabs-left .nav-tabs .active > a,

.tabs-left .nav-tabs .active > a:hover {

  border-color: #ddd transparent #ddd #ddd;

  *border-right-color: @white;

}

 

// Tabs on the right

.tabs-right .nav-tabs {

  float: right;

  margin-left: 19px;

  border-left: 1px solid #ddd;

}

.tabs-right .nav-tabs > li > a {

  margin-left: -1px;

  .border-radius(0 4px 4px 0);

}

.tabs-right .nav-tabs > li > a:hover {

  border-color: @grayLighter @grayLighter @grayLighter #ddd;

}

.tabs-right .nav-tabs .active > a,

.tabs-right .nav-tabs .active > a:hover {

  border-color: #ddd #ddd #ddd transparent;

  *border-left-color: @white;

}

[thomstark]

I think I've figured it out. Checking...

[thomstark]

Yup. It was the max-height property of the modal that was causing the overflow. I elevated the max-height, problem solved. 

[James B]

Sites looking really good Thom, well done, glad you got it solved

[thomstark]

Thanks, man. I should sleep one of these days here soon.