What is the easiest way to dress up this form to look good? Is there some easy CSS I can just put in the custom.css. I need it to go into a "multimedia box" (Thesis 1.8) that is 420X272px. I have been hacking away in firebug trying but nothing looks contemporary. I am sure there are just many classes I am not familiar with how to use. <div class="quicksearch"> <h3> Where would you like to live? Try a Quicksearch </h3> <form action="http://bbb.aaaa/idx/ntreis/search.html" method="get" class="idx-search"> <!-- Refine Search --> <input type="hidden" name="refine" value="true"> <!-- Sort Order --> <input type="hidden" name="sortorder" value=""> <!-- Map Info --> <input type="hidden" name="map[longitude]" value="-97.053223"> <input type="hidden" name="map[latitude]" value="32.060173"> <input type="hidden" name="map[zoom]" value="12"> <div id="field-location" class="field"><label>Location</label> <div class="details"><input name="search_location" value="" placeholder="City, Neighborhood, ZIP or MLS Number" class="x12 location"> </div></div></li> <div id="field-price" class="field"><label>Price Range</label> <div class="details"><div class="sale range"><span class="min"><select id="minimum_price" name="minimum_price"> <option value="">Min</option> <option value="50000">$50,000</option> <option value="75000">$75,000</option> <option value="100000">$100,000</option> <option value="125000">$125,000</option> <option value="150000">$150,000</option> <option value="175000">$175,000</option> <option value="200000">$200,000</option> <option value="225000">$225,000</option> <option value="250000">$250,000</option> <option value="275000">$275,000</option> <option value="300000">$300,000</option> <option value="325000">$325,000</option> <option value="350000">$350,000</option> <option value="375000">$375,000</option> <option value="400000">$400,000</option> <option value="425000">$425,000</option> <option value="450000">$450,000</option> <option value="475000">$475,000</option> <option value="500000">$500,000</option> <option value="550000">$550,000</option> <option value="600000">$600,000</option> <option value="650000">$650,000</option> <option value="700000">$700,000</option> <option value="750000">$750,000</option> <option value="800000">$800,000</option> <option value="850000">$850,000</option> <option value="900000">$900,000</option> <option value="950000">$950,000</option> <option value="1000000">$1,000,000</option> <option value="1100000">$1,100,000</option> <option value="1200000">$1,200,000</option> <option value="1300000">$1,300,000</option> <option value="1400000">$1,400,000</option> <option value="1500000">$1,500,000</option> <option value="1600000">$1,600,000</option> <option value="1700000">$1,700,000</option> <option value="1800000">$1,800,000</option> <option value="1900000">$1,900,000</option> <option value="2000000">$2,000,000</option> <option value="2100000">$2,100,000</option> <option value="2200000">$2,200,000</option> <option value="2300000">$2,300,000</option> <option value="2400000">$2,400,000</option> <option value="2500000">$2,500,000</option> <option value="2600000">$2,600,000</option> <option value="2700000">$2,700,000</option> <option value="2800000">$2,800,000</option> <option value="2900000">$2,900,000</option> <option value="3000000">$3,000,000</option> <option value="3250000">$3,250,000</option> <option value="3500000">$3,500,000</option> <option value="3750000">$3,750,000</option> <option value="4000000">$4,000,000</option> <option value="4500000">$4,500,000</option> <option value="5000000">$5,000,000</option> <option value="5500000">$5,500,000</option> <option value="6000000">$6,000,000</option> <option value="6500000">$6,500,000</option> <option value="7000000">$7,000,000</option> <option value="7500000">$7,500,000</option> <option value="8000000">$8,000,000</option> <option value="8500000">$8,500,000</option> <option value="9000000">$9,000,000</option> <option value="9500000">$9,500,000</option> <option value="10000000">$10,000,000</option> </select></span> <span class="tween"> to </span><span class="max"><select id="maximum_price" name="maximum_price"> <option value="">Max</option> <option value="50000">$50,000</option> <option value="75000">$75,000</option> <option value="100000">$100,000</option> <option value="125000">$125,000</option> <option value="150000">$150,000</option> <option value="175000">$175,000</option> <option value="200000">$200,000</option> <option value="225000">$225,000</option> <option value="250000">$250,000</option> <option value="275000">$275,000</option> <option value="300000">$300,000</option> <option value="325000">$325,000</option> <option value="350000">$350,000</option> <option value="375000">$375,000</option> <option value="400000">$400,000</option> <option value="425000">$425,000</option> <option value="450000">$450,000</option> <option value="475000">$475,000</option> <option value="500000">$500,000</option> <option value="550000">$550,000</option> <option value="600000">$600,000</option> <option value="650000">$650,000</option> <option value="700000">$700,000</option> <option value="750000">$750,000</option> <option value="800000">$800,000</option> <option value="850000">$850,000</option> <option value="900000">$900,000</option> <option value="950000">$950,000</option> <option value="1000000">$1,000,000</option> <option value="1100000">$1,100,000</option> <option value="1200000">$1,200,000</option> <option value="1300000">$1,300,000</option> <option value="1400000">$1,400,000</option> <option value="1500000">$1,500,000</option> <option value="1600000">$1,600,000</option> <option value="1700000">$1,700,000</option> <option value="1800000">$1,800,000</option> <option value="1900000">$1,900,000</option> <option value="2000000">$2,000,000</option> <option value="2100000">$2,100,000</option> <option value="2200000">$2,200,000</option> <option value="2300000">$2,300,000</option> <option value="2400000">$2,400,000</option> <option value="2500000">$2,500,000</option> <option value="2600000">$2,600,000</option> <option value="2700000">$2,700,000</option> <option value="2800000">$2,800,000</option> <option value="2900000">$2,900,000</option> <option value="3000000">$3,000,000</option> <option value="3250000">$3,250,000</option> <option value="3500000">$3,500,000</option> <option value="3750000">$3,750,000</option> <option value="4000000">$4,000,000</option> <option value="4500000">$4,500,000</option> <option value="5000000">$5,000,000</option> <option value="5500000">$5,500,000</option> <option value="6000000">$6,000,000</option> <option value="6500000">$6,500,000</option> <option value="7000000">$7,000,000</option> <option value="7500000">$7,500,000</option> <option value="8000000">$8,000,000</option> <option value="8500000">$8,500,000</option> <option value="9000000">$9,000,000</option> <option value="9500000">$9,500,000</option> <option value="10000000">$10,000,000</option> </select> </span></div></div></div> <div id="field-rooms" class="field"><div class="details"><div class="pair"><div class="left"><label>Beds</label><div class="details"> <select name="minimum_bedrooms"><option value="">-</option> <option value="1">1+</option> <option value="2">2+</option> <option value="3">3+</option> <option value="4">4+</option> <option value="5">5+</option> <option value="6">6+</option> <option value="7">7+</option> <option value="8">8+</option> </select></div></div> <div class="right"><label>Baths</label><div class="details"><select name="minimum_bathrooms"><option value="">-</option> <option value="1">1+</option> <option value="2">2+</option> <option value="3">3+</option> <option value="4">4+</option> <option value="5">5+</option> <option value="6">6+</option> <option value="7">7+</option> <option value="8">8+</option> </select></div></div></div></div></div> <div class="btnset"> <button type="submit" class="strong">Find your next home</button> </div> </form> </div> Code (markup):
Well, for starters it might help if you had a PROPERLY built form... as in with fieldsets... why the extra DIV around it for nothing? Why are you closing an LI that isn't even opened? What's with all the DIV for nothing? Where are your FOR attributes to point those LABEL at their inputs? Of course I have no clue what a "multimedia box thesis 1.8" is, but given the absurdly undersized fixed metric measurements that sounds like fixed width design asshattery that has NO business on a modern accessible website. This seems supported by the use of absurdly presentational class names which reeks of some sort of garbage "framework" and/or broken presentational design thinking. Much less "contemporary" is a very relative term... Could mean any of a billion different things to a billion different people.
That is the data I pulled from Real Estate Webmasters. I thought the same thing about all the div's but as I said trying to do something quick and it works the way it is. The multimedia box is basically a widget in WP. Contemporary regarding CSS I think is pretty clear. Web v1.0 vs v2.0 you could say.
This isn't going to be one @deathshadow can answer, he's phobic enough about wordpress so I'd hate to think what he thinks of the theme Without seeing your site to use as an example I can't help either, I'm afraid
@deathshadow hates everything....wordpress(turdpress) Bootstrap (bootcrap) PSD jockeys, html5 boilerplates,, Foundation, HTML5....I think he even hates CSS3....sass etc.
You can do some good styling by yourself, since you are keeping everthing inside div with class="quicksearch" . just add the styling .quicksearch input[type="text"] { } .quicksearch input[type="submit"] { } .quicksearch select { }
Unless you are good at CSS, I would hire a freelancer. They can dress this up in a couple hours, relatively cheap. Just my opinion.
Trust your instincts, that code is rubbish and "something quick" most often actually means "how quickly can I paint this bullseye around my backside in the prison shower?" Ah, turdpress... Well there's your problem... -- you want disastrously bad "I canz haz intarnets" code, look no further. Lemme guess, with some rubbish off the shelf template? *SIGH* I hate seeing people led down the garden path to failure like that. I would not say, since using the term "web 2.0" means one knows about as much about the Internet as what can be gleaned from the pages of Forbes -- which taking IT advice from Forbes is like taking financial advice from Popular Mechanics. We'd all be losing our shirts investing in Moller Industries. In fact just SAYING "web 2.0" as what you want something to look like is the fastest way to make anyone qualified to work on a website glaze over with the look of "Christmas sake, another mouth-breather" since appearance actually has jack **** to do with what the term means, other than what the ignorant marketspeak buzzword scam artists tried to do with it. But really, SarahK hit it on the head, without seeing the page it's going into it's hard to weigh in much more meaningfully -- though from what you've said in this thread my advice would most likely be to pitch the entire mess in the trash and start over from scratch. Call it an educated guess... at least if you care about people actually visiting and using the website since that pixel width ALONE screams "accessibility, what's that?!?" I like CSS3, it's one of those "about ***** time" moments and probably the greatest thing to come along in ages... though I wish to hell browser makers would get off their asses and actually get flex-box working properly and consistently given how many problems it COULD solve. (and currently unless you are willing to deploy different code even for browsers using the same engine, well... it can't.) Though SASS (and LESS) are mouth-breathing idiotic bull and a complete and utter waste of time used by people who fail to grasp the "cascading" part of "cascading style sheets" and or don't understand how to leverage selectors properly -- it's just another of those things developers are dumber for it even existing. The only really useful bit of functionality from that dumbass nonsense being avoiding hitting ^C^V^V Home, eight characters, home pgdn, five characters. *OH NOES, NOT THAT* -- is that REALLY worth the extra back-end development step and harder to maintain AND diagnose code? I think not.