Archived

This topic is now archived and is closed to further replies.

  • 0

How to style forms like in Twitter Bootstrap?

Question

Posted · Report post

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: http://demo.pagelines.com/framework/tools/ - 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 http://twitter.github.com/bootstrap/base-css.html#forms into a page into PageLines and you will see that it doesn't look the same) Thank you for your help.

Share this post


Link to post
Share on other sites

20 answers to this question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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?

	        
Text input
In addition to freeform text, any HTML5 text-based input appears like so.
Checkbox
Option one is this and that??”be sure to include why it's great
Select list
something2345
Multicon-select
12345
File input
Textarea
Save changes Cancel
[/code]

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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 Firebug for Firefox and check out W3 Schools for more info. I have provided you with a link to the Bootstrap download page where you can download the code. http://twitter.github.com/bootstrap/download.html

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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 :-(

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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)

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

I agree with Zouleo: as Pagelines is integrating bootstrap on its core, it would be useful for developers to know which parts are not implemented ;-)

Share this post


Link to post
Share on other sites