Jump to content


Photo
- - - - -

How to style forms like in Twitter Bootstrap?


This topic has been archived. This means that you cannot reply to this topic.
20 replies to this topic

#1 zouleo

zouleo

    Super Member

  • Members
  • 165 posts

Posted 08 August 2012 - 12:23 PM

Is it possible to get nice looking forms like the ones in Twitter Bootstrap? I've tried their example code within a page in Pagelines, but it doesn't look the same. I've also checked this page:

Please Login or Register to see this Hidden Content

- and forms isn't included. So what I'm wondering is, what do I need to do to get styled forms like the ones in Twitter Bootstrap? (sorry, I don't have a public page to show you right now. But to try it, just paste the example code from

Please Login or Register to see this Hidden Content

into a page into PageLines and you will see that it doesn't look the same) Thank you for your help.

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 08 August 2012 - 02:14 PM

Some of the PageLines CSS may be affecting the look of the forms, so you'll need to further customize the look of the forms with custom CSS. Are you trying to use the horizontal form?

#3 zouleo

zouleo

    Super Member

  • Members
  • 165 posts

Posted 09 August 2012 - 06:30 AM

Yes. So far I'm just using the example from the link above (see below). How can I make this form look good, like in Twitter Bootstrap? If I change the CSS myself, won't I break other form design used in Pagelines? What are your suggestions?

Please Login or Register to see this Hidden Content



#4 zouleo

zouleo

    Super Member

  • Members
  • 165 posts

Posted 09 August 2012 - 08:29 AM

If there is some other preferred way of styling the forms - please let me know. I'm happy as long as the forms doesn't look unstyled :-)

#5 Danny

Danny

    Is Awesome!

  • Moderators
  • 16358 posts

Posted 09 August 2012 - 09:33 AM

Hi, All you need to do is create your contact form, I would recommend using a plugin instead of creating a form yourself, unless you know what you're doing and then apply the CSS that is on the Twitter Bootstrap website and apply it to your form. You can use tools to assist you, such as FireBug or Google's Chrome/Apple's Safari web developer tools, to inspect your form and then apply the CSS to see what the form will look like.

#6 zouleo

zouleo

    Super Member

  • Members
  • 165 posts

Posted 09 August 2012 - 09:41 AM

As I understand it Pagelines already contains Twitter Bootstrap and also has some own form styles. What exactly do I need to use the styles from Twitter Bootstrap OR the predefined forms in Pagelines? I don't want to add my own styles. I want to use the ones that are already available in Pagelines. The reason I don't want to add my own styles is 1) I'm not very good at styling forms 2) I might break the existing forms in Pagelines 3) Isn't styling already available?

#7 Danny

Danny

    Is Awesome!

  • Moderators
  • 16358 posts

Posted 09 August 2012 - 10:29 AM

PageLines implemented most aspects of Twitter Bootstrap into PageLines Framework. However, forms wasn't one of them, due to the amount of contact form plugins available from the Wordpress repository.

Therefore, what you can do is create your form and then get the CSS from Twitter Bootstrap's website and apply this CSS.

Keep in mind we can't design your site for you so if you need CSS help, make sure you've downloaded

Please Login or Register to see this Hidden Content

and check out

Please Login or Register to see this Hidden Content

for more info.

I have provided you with a link to the Bootstrap download page where you can download the code.

Please Login or Register to see this Hidden Content



#8 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts

Posted 09 August 2012 - 01:26 PM

So yeah forms.less is included, so no need to add it in. I actually built a form yesterday, so I know it's all there. but here's the thing; it's hooked into the LESS system, so it kinda changes when you change your sites base color, or background color, etc. SO you'll see it be a diff color depending on your sites style.

#9 zouleo

zouleo

    Super Member

  • Members
  • 165 posts

Posted 09 August 2012 - 01:37 PM

beardedavenger: did you have to do anything special to use the styles? Because when I add my forms (se above) it doesn't get styled :-(

#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 09 August 2012 - 02:40 PM

I think that may have to do with your site's base colors (it will vary depending on those).

#11 zouleo

zouleo

    Super Member

  • Members
  • 165 posts

Posted 09 August 2012 - 07:33 PM

Catrina: Could you elaborate please? How can my base colors affect the styling of forms? I don't get it. I've tried resetting the colors, but that didn't make any difference. If you paste the code above in a page - do your form get styled? My doesn't get any Twitter Bootstrap styling at all. Could someone please give me a example page with a form on pagelines that have styling - thank you! Danny: I've tried downloading styles for the forms on that download-page, but that styles messes up the forms that are already in pagelines (search)

#12 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 11 August 2012 - 07:19 PM

Bearded Avenger is off for the weekend. I have written to him and asked for his intervention in this matter. Thanks for your kind patience.

#13 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts

Posted 11 August 2012 - 07:47 PM

Can you explain further when you mean "doesn't get styled?" What exactly is it missing? The only styles it has are the background color, border color, and active "glow" color, all of which we have in color.less. As I said above, the background, border, and the slight "glow" effect, will be different depending on your base color. Your base color, is the "content background" color set in Color Options. If yours is white, the fields will likely be gray. If your base is black, they'll be lighter black. You can of course always override this with CSS.

#14 zouleo

zouleo

    Super Member

  • Members
  • 165 posts

Posted 11 August 2012 - 08:05 PM

Thank you for your reply. This is a screenshot from my unpublished page:
Posted Image

I've used the code posted above which I copied and paste from this page:

Please Login or Register to see this Hidden Content



#15 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts

Posted 11 August 2012 - 08:48 PM

1. Background Color (explanation above) 2. Rounded Borders (you can easily add this with css) 3. Minor css conflict with checkbox and multi-icon select (we can fix this on next release) So it seems your forms are getting styled by Bootstrap 100%, albeit with 2 minor css conflicts, which we can look into fixing.

#16 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts

Posted 11 August 2012 - 08:54 PM

P.S

Checkbox Fix
.radio input[type="radio"], .checkbox input[type="checkbox"] {float:none;}

MultiSelect Fix
select#multiSelect {width:220px;}

Border Radius Fix
textarea, input {.border-radius;}

#17 zouleo

zouleo

    Super Member

  • Members
  • 165 posts

Posted 11 August 2012 - 09:04 PM

Thank you - much better. Is it possible to get the bluish border for the multiselect box also?

#18 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts

Posted 11 August 2012 - 09:10 PM

I'm already showing a bluish border on the multi-select box. Any further color mods you can do with CSS easily.

#19 zouleo

zouleo

    Super Member

  • Members
  • 165 posts

Posted 12 August 2012 - 09:25 PM

Ok. I don't get any blush border on multi-select. I do get it on the other elements. Thanks for helping!

#20 Danny

Danny

    Is Awesome!

  • Moderators
  • 16358 posts

Posted 13 August 2012 - 08:56 AM

Hi, For moderation issues, I have accepted Nick's response above.