I would like to know if there is a framework that can make standard html forms look more web 2.0 style, I would like to have rounded corners on text boxes and a more casual looking submit button, other than the out of box html one, which looks very old school.
If you know of something that's quick to implement, and open source, thank you in advance.
Try NiceForms a Javascript library for styling forms.
Or JqTransform for jQuery.
You can find some other resources below:
http://www.noupe.com/css/form-elements-40-cssjs-styling-and-functionality-techniques.html
http://speckyboy.com/2009/08/26/20-jquery-plugins-and-tutorials-to-enhance-forms/
http://devsnippets.com/reviews/using-jquery-to-style-design-elements-20-impressive-plugins.html
You will have to style the form elements with a combination of css and image backgrounds. This is fairly easy to do though and you should be able to find a lot of examples out there...
http://www.assemblesoft.com/examples/form/
http://pupungbp.erastica.com/css/rounded-corner-input-form/
It's called CSS.
The plain old HTML look is created by the default CSS settings. If you want to change the look, then you need to change the CSS. Find a website that has a look similar to what you want, and look at the HTML source. You will see a lot of CSS near the begining wrapped by STYLE tags. For instance:
<style type="text/css">
input {
border: none;
background: #FFF;
width: 165px;
}
.rounded {
background: url(rounded.gif) no-repeat left top;
padding: 8px;
width: 180px;
}
</style>
In order to get the actual rounded corners you are going to need some images that can cover the sharp corners. In the example CSS it refers to a single image of a box, but generally you will need four corner images, and four separate line images (top, bottom, left, right).
Check this article about creating forms with rounded elements: http://www.picment.com/articles/css/funwithforms/
Regarding rounded corners, you can use a background image which is rounded off using transparencies or if a user is using mozilla based browser or opera, you can use:
#formbox {
-moz-border-radius: 5px;
background-image: url('roundededges.jpg');
}
In your CSS to add rounded corners to any div. Either that or use some simple flash.
Related
Consider this html:
<div class="logo-b"></div>
And this CSS:
div.logo-b {
content: url(http://placehold.it/350x150);
height: 150px;
border: 1px solid darkred;
}
I am trying to display an image using CSS. The image is not being displayed. Please see this jsfiddle to see what I mean. What am I missing please?
EDIT: It appears that Chrome renders the fiddle as I provided it above fine, but Firefox (which I use) does not. If I add :before or :after to the class name in my CSS the image displays in Firefox. Could someone shed some light on why this would be please?
EDIT: I am using the wrong construct to place the image on my page. In the context of what I am doing I should use the <img> html tag. The CSS content construct uses :before and/or after to place content, including images, but I understand these are used in specific contexts. I simply want to display a logo.
This property content is used with the :before and :after
pseudo-elements to generate content in a document. -W3C
I think the behavior in Firefox is correct.
I have simple image of red indicator and I put to the image title, the html code is as below:
<img alt='' src='imageUrl' title='myExplanation' />
The problem is that the title is align to the right, you can see it in the following snapshot:
I want the title to align to the left how can I achieve this?
Also you can try some custom tooltip plugins. Like jquery tooltip
You cannot, title aligns relative to the position of your mouse pointer. OS or the Browser has control over this feature and you cannot change the default behaviour.
If you want, then create your own div element, add the content to it, and then use CSS to align it to the left
div.title {
position: absolute;
left: 0;
}
..this will float that div to the left side and use more CSS to stylize it.
Another way
Another way of doing this functionality is to use a bootstrap, twitter bootstrap would be a good start. It is a framework for CSS, JavaScript and you can use that framework to create the Title tags which are more stylized by the developers and is good for UI and UX too. Try that one if you don't want to create your own from scratch.
http://getbootstrap.com/2.3.2/
img[title]:hover:after // while hover
worked for me
<style>
img[title]:hover:after {
content: attr(title);
border:1px solid #ccc;
background-color:#aaa;
color:#f00;
}
</style>
The problem was that my browser was in Hebrew version which by default aligns text from right to left I changed my chrome to English version and it is now working! Thanks for all the answers!
I would like to get an idea from you guys. I have 3 checkboxes that I would like to display one in each line inside a box, kind of like a text area. What Bootstrap tool would allow me to accomplish that?
I tried to create a text area and out my checkboxes in them, but the code is translated as text in the text area. So I could not do that. What's the way of doing it?
You shouldn't restrict yourself to using only Bootstrap elements when making your site. Bootstrap is just a collection of nifty elements; it's fine (and probably necessary) to make your own, too.
If you just want your checkboxes to be in a box with an outline, well, that's a bit too simple for there to be a corresponding Bootstrap element.
In the simplest form, the HTML and CSS for this would look like this JSFiddle.
Html
<div class='checkbox-container'>
<input type='checkbox' id='one'>
<label for='one'>Hello</label>
</div>
Css
.checkbox-container {
margin: 10px 0;
padding: 10px 0;
border: 1px solid #aaa;
}
If you want all of the checkboxes in a single box, then you can do that with just a bit more code. View on JSFiddle.
If for some strange reason you must only use use Bootstrap elements, ananda's answer is pretty good. Using the well element gives you a border, but also an inner shadow and a background color. View the well on JSFiddle
try putting them inside the 'well' element
I tried to figure it out using Firebug, but no chance. How is the Facebook status input border wrapped round the autosize input? Particularly, I am interested in the small triangle joined into the border. Using Firebug, I managed to find the triangle itself, which is provided in the form of a GIF image:
.uiComposerAttachment, .nub {
background: url(http://static.ak.fbcdn.net/rsrc.php/v1/zf/r/PfBgtiydy5U.gif) no-repeat center top;
height: 7px;
width: 11px
position: absolute;
left: 2px;
top: 18px;
}
But I couldn't figure out how it is placed above the input and how the border is added, in the form of a background image or defined as a CSS border?
I made a fiddle that mimics the facebook status box...
http://jsfiddle.net/UnsungHero97/mFuD4/5/
I added some functionality to the example, in particular, I found a cool jQuery plugin that allows for textarea auto-resizing.
Facebook actually uses a <textarea> element and the way they take care of the border is simple.
The "What's on your mind?" text is inside the <textarea> element and the border around it is due to several <div> element wrappers (more than the 2 I've shown above). Also, as you pointed out, the little arrow on top of the "What's on your mind?" is a .gif image, but there are ways to do this using only CSS!
Regarding the triangle...
If you're interested in alternative ways to do this using only CSS, I asked a question recently about the little triangle! Here's the question...
How can I create a "tooltip tail" using pure CSS?
... and here are the answers:
answer 1
answer 2
answer 3
answer 4 (this one is REALLY cool!!!)
I hope this helps.
Hristo
Here's how you can do it using only CSS: http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/
A similar question has been asked before though...
The border around the textarea is actually around parent div's (.uiTypeahead, .wrap) within the form. Looks like the actual textarea has no border.
As for the triangle it is just a css background inside the li (the items status, photo, video, link, etc are a list). The triangle is this element: <i class="nub"></i>. It is then positioned absolute to sit at the bottom of the list which has the form just below.
Thanks for your useful hints,
I finally managed to solve it in a four-liner:
#type_indicator { /* img#type_indicator is the triangle image tag, followed by the input field in HTML code */
position:absolute;
left:100px;
}
Greetings
Chris
I want my html link to look like a real submit button. Any good codes with css? I have found some examples, but I want it to be more real than just a grey box.
Make a button image in your favourite image precessing tool and use these codes:
HTML
CSS:
.link_button
{
background-image: url(path/to/button_image.png);
background-position: 0 0;
background-repeat: no-repeat;
display: block;
width: 79px; /*your image width*/
height: 35px: /*your image height*/
}
That should set up your link to look like a nicely styled button, that you created.
If you don't want to use an image, you can use normal CSS borders and baackground colors/gradients as well.
Regarding the this is so no text is shown on the image itself, another way to do this is with css: text-indet: -9999px; or you can use the text as part of the element like normal and just style the background :)
Do you mean you'd like to create links that look like buttons, but a bit nicer than the standard old grey box?
There are tons of tutorials out there for this: just search "css buttons". A good one is this: http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
If your widget toolkit's theme does some snazzy theming (most do), you most likely won't be able to reproduce the button's look. Even if you could, it would only emulate your computer's theme.
Of course, if you don't mind your button not being consistent with normal buttons, there are many tutorials that allow you to create nice CSS buttons.
If you could consider actually using a button rather than a link, that'd probably be even better.