Pastor Rick
Registered: 07-2005
Location: Texas
Posts: 395
Karma: 51 (+55/-4)
|
Reply Quote
|
|
CSS and Forms styling
RunSearch has a form that can be copied and placed on boards that choose to have the RunSearch engine on their boards. I did this for a board I am working on and while editing the form settings it occurred to me that maybe CSS could be used to provide a better "RunSearch form" solution for other users... Question is how to set it up?
|
3/25/2010, 8:53 pm
|
Link to post
Email Pastor Rick
PM Pastor Rick
Blog
|
Lesigner Girl
Head of Runboard staff
Registered: 11-2005
Posts: 1895
Karma: 83 (+86/-3)
|
Reply Quote
|
|
Re: CSS and Forms styling
I'm not sure what you're asking. How to set up the form?
|
3/25/2010, 10:59 pm
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Pastor Rick
Registered: 07-2005
Location: Texas
Posts: 395
Karma: 51 (+55/-4)
|
Reply Quote
|
|
Re: CSS and Forms styling
The form at RunSearch looks like this:
<form name="searchform" method="post" action="http://runsearch.rbbt.net/">
<div style="border:1px solid #808080;width:220px;padding:3px;background-color:#9999FF;color:black;font-size:11px;font-family:tahoma;">
<span style="font-weight:bold">RunSearch ~ Looking For A Runboard</span><br />
<input type="text" name="q" size="25" value="" />
<input type="submit" value="Go" />
*New BOOLEAN Search AND/OR/NOT*
<a href="http://runsearch.rbbt.net/submit" title="Submit A Runboard" style="color:black;font-size:10px;font-weight:bold">Submit A Runboard</a>
</div></form>
Now I am seeing a lot of old html style coding on the form and was wondering about changing it over so there was a CSS class or two that could be used to really simplify what the form code looks like...
|
3/25/2010, 11:52 pm
|
Link to post
Email Pastor Rick
PM Pastor Rick
Blog
|
Lesigner Girl
Head of Runboard staff
Registered: 11-2005
Posts: 1895
Karma: 83 (+86/-3)
|
Reply Quote
|
|
Re: CSS and Forms styling
I don't know what form you're talking about, since that code isn't on this page, but here's what I get from what you just posted.
<form id="searchform" name="searchform" method="post" action="http://runsearch.rbbt.net/">
<fieldset>
RunSearch ~ Looking For A Runboard<br />
<input type="text" name="q" size="25" value="" />
<input type="submit" value="Go" />
*BOOLEAN Search AND/OR/NOT*
<a href="http://runsearch.rbbt.net/submit" title="Submit A Runboard">Submit A Runboard</a>
</fieldset>
</form>
#searchform {
border: 1px solid #808080;
width: 220px;
padding: 3px;
background-color: #99f;
color: #000;
font-size: 11px;
font-family: tahoma;
font-weight: bold;
}
#searchform a {
color: #000;
font-size: 10px;
}
Note: The font-family, font-size, and color shouldn't have to be defined if they are already defined that way for the body or whatever parent container it may happen to be in (for instance, a header or footer).
I also removed the word "New" since it's not really new anymore.
|
3/26/2010, 12:31 pm
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Pastor Rick
Registered: 07-2005
Location: Texas
Posts: 395
Karma: 51 (+55/-4)
|
Reply Quote
|
|
Re: CSS and Forms styling
The code is one of the links on that page (this one) Lesa. I was seeing CSS form layout while doing Google searches and thought maybe I was missing something that would make it easier for others.
|
3/26/2010, 2:28 pm
|
Link to post
Email Pastor Rick
PM Pastor Rick
Blog
|
Pastor Rick
Registered: 07-2005
Location: Texas
Posts: 395
Karma: 51 (+55/-4)
|
Reply Quote
|
|
Re: CSS and Forms styling
Oh yeah, The main reason I posted the question here is because I was working at putting that search box on my RBD board and remembered you said somewhere you was trying to figure out a new topic for your blog. So when I finally kludged together a solution for my board I got to thinking "this ain't as easy as it looks."
|
3/26/2010, 2:37 pm
|
Link to post
Email Pastor Rick
PM Pastor Rick
Blog
|
Lesigner Girl
Head of Runboard staff
Registered: 11-2005
Posts: 1895
Karma: 83 (+86/-3)
|
Reply Quote
|
|
Re: CSS and Forms styling
Thank you for thinking of me.
I never really thought about it, but I think it would make for a good post. Forms have a lot of things that other elements don't have, many of which have quirky behavior in various browsers. There are fieldsets, legends, input boxes, textareas, input buttons, radio buttons, checkboxes, select boxes, etc... Thanks for the idea!
Back to the question at hand, what if that was changed to say this?
------------------------------------------------
You can add a css customizable search box to board or site which will allow your board users to search all Runboard Message Boards.
(put the search box itself here)
Step 1: Place this HTML somewhere on your page such as the header or footer
<form id="searchform" name="searchform" method="post" action="http://runsearch.rbbt.net/">
<fieldset>
RunSearch ~ Looking For A Runboard<br />
<input type="text" name="q" size="25" value="" />
<input type="submit" value="Go" />
*BOOLEAN Search AND/OR/NOT*
<a href="http://runsearch.rbbt.net/submit" title="Submit A Runboard">Submit A Runboard</a>
</fieldset>
</form>
Step 2: You can customize it any way you want by altering the CSS below, then adding it to the CSS of your message board or website.
#searchform {
border: 1px solid #808080;
width: 220px;
padding: 3px;
background-color: #99f;
color: #000;
font-size: 11px;
font-family: tahoma;
font-weight: bold;
}
#searchform a {
color: #000;
font-size: 10px;
}
If you need help with this, feel free to stop by Q&A at Runboard Extra.
-----------------------------------
We could even start a thread there for people to ask questions about that form and link to that thread, or wait until someone asks and link directly to that thread later.
|
3/26/2010, 3:34 pm
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Pastor Rick
Registered: 07-2005
Location: Texas
Posts: 395
Karma: 51 (+55/-4)
|
Reply Quote
|
|
Re: CSS and Forms styling
Both of those suggetions sound like excellent ideas. They help promote both the Search Engine and this Board and of course that also promotes Runboard so winners all the way around
|
3/27/2010, 3:18 am
|
Link to post
Email Pastor Rick
PM Pastor Rick
Blog
|
Lesigner Girl
Head of Runboard staff
Registered: 11-2005
Posts: 1895
Karma: 83 (+86/-3)
|
Reply Quote
|
|
Re: CSS and Forms styling
Thanks.
|
3/27/2010, 11:54 am
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Pastor Rick
Registered: 07-2005
Location: Texas
Posts: 395
Karma: 51 (+55/-4)
|
Reply Quote
|
|
Re: CSS and Forms styling
You are most welcome (now that feels strange saying that to you on a coding thing since it is almost always the other way around)
How about this real-time example: I use a CSS class called .smallbox on one of my boards for sidebar items. The CSS code for it looks like this:
.smallbox {
background-color: #f0f3f8;
border: 1px solid #4682b4;
color: #03f;
font-weight: 700;
text-align: center;
width:162px;
margin: 3px 0;
padding:0 0 10px 0;
}
Now to make the RunSearch box fit within this smallbox I modified the RunSearch forms code so it looks like this in the HTML:
<div class="smallbox"><form name="searchform" method="post" action="http://runsearch.rbbt.net/">
<div style="color:#03F;font-size:13px;">
<span style="font-weight:700">~ RunSearch ~</span><br />
<span style=”font-weight:400;color:black;font-size:10px;”>Looking For A Runboard</span><br />
<input type="text" name="q" size="20" value="" />
<input type="submit" value="Go" />
<a href="http://runsearch.rbbt.net/submit" title="Submit A Runboard" style="color:black;font-size:9px;font-weight:700;text-decoration:underline;">Submit A Runboard</a>
</div></form></div>
As you can see there are still several style declarations in the form declarations but would it be better to create h1 h2 and h3 CSS declarations to move the fonts coding from the HTML side to the CSS side?
|
3/27/2010, 3:07 pm
|
Link to post
Email Pastor Rick
PM Pastor Rick
Blog
|