Jump to content
thomstark

Customizing Tabs And Modal Box Styles

Recommended Posts

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. 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
thomstark

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

Share this post


Link to post
Share on other sites
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).

Share this post


Link to post
Share on other sites
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: http://demo.pagelines.me/tools/

 

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: http://www.pagelines.com/wiki/Custom_CSS


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

Share this post


Link to post
Share on other sites
thomstark

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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 - http://twitter.github.com/bootstrap/javascript.html#modals you could style the html to create your own button using this method too. Just paste the html directly into the content area.


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

Share this post


Link to post
Share on other sites
thomstark

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

Share this post


Link to post
Share on other sites
thomstark

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

Share this post


Link to post
Share on other sites
James B

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

  • Like 1

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
thomstark

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

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


×