Runboard.com
You're welcome.
Runboard Extra Chat Room Support Search Facebook





Runboard.com       Sign up learn about it | Sign in lost password?

 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

 


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?

---

Advertise Boards On TRDConceptsDE
3/25/2010, 8:53 pm Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

 

Head of Runboard staff

Registered: 11-2005
Posts: 1894
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?

---
Runboard Knowledge Base
Website Creation Tutorials
3/25/2010, 10:59 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

 


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...

---

Advertise Boards On TRDConceptsDE
3/25/2010, 11:52 pm Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

 

Head of Runboard staff

Registered: 11-2005
Posts: 1894
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. emoticon

---
Runboard Knowledge Base
Website Creation Tutorials
3/26/2010, 12:31 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

 


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.

---

Advertise Boards On TRDConceptsDE
3/26/2010, 2:28 pm Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

 


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."

---

Advertise Boards On TRDConceptsDE
3/26/2010, 2:37 pm Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

 

Head of Runboard staff

Registered: 11-2005
Posts: 1894
Karma: 83 (+86/-3)
Reply Quote
Re: CSS and Forms styling


Thank you for thinking of me. emoticon

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! emoticon

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.

---
Runboard Knowledge Base
Website Creation Tutorials
3/26/2010, 3:34 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

 


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 emoticon

---

Advertise Boards On TRDConceptsDE
3/27/2010, 3:18 am Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

 

Head of Runboard staff

Registered: 11-2005
Posts: 1894
Karma: 83 (+86/-3)
Reply Quote
Re: CSS and Forms styling


Thanks. emoticon

---
Runboard Knowledge Base
Website Creation Tutorials
3/27/2010, 11:54 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

 


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

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?

---

Advertise Boards On TRDConceptsDE
3/27/2010, 3:07 pm Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

 

Head of Runboard staff

Registered: 11-2005
Posts: 1894
Karma: 83 (+86/-3)
Reply Quote
Re: CSS and Forms styling


This is all you need in the HTML:

<div class="smallbox">
<form name="searchform" id="searchform" method="post" action="http://runsearch.rbbt.net/">
<h4>~ RunSearch ~</h4>
<p>Looking For A Runboard</p>
<input class="input" type="text" name="q" size="20" value="" />
<input class="submit" type="submit" value="Go" />
<a href="http://runsearch.rbbt.net/submit" title="Submit A Runboard">Submit A Runboard</a>
</form>
</div><!-- end smallbox -->


In case someone has <h2> or <h3> tags in their sidebar, I figured an <h4> might be best there.

Now, you can target all of the text in the form with one ID, because each line is in a different kind of tag.

#searchform -- Define width, margins, padding. Center here, if you want.

#searchform h4 -- define font-size, color, etc.

#searchform p -- define font-size, color, etc.

#searchform a:link, #searchform a:visited -- define font-size, color, etc.

#searchform a:hover -- if you want.

I added class names to the text box and submit button, since those are both <input> tags and there is no other way to target them individually unless you use an attribute selector, which older versions of IE won't comply with.

Btw, you can also link to the appropriate tutorials on IfYouCodeIt. Thor and I have actually discussed linking to it from the layout section along with w3schools, but I haven't gotten around to making a good landing page for it yet. I would actually like to create a whole category there for Runboard, once we get the new board format out. Old format users can settle for the help topics and class charts we already have, while we will still help them at these boards, of course.

---
Runboard Knowledge Base
Website Creation Tutorials
3/27/2010, 6:09 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

 


Registered: 07-2005
Location: Texas
Posts: 395
Karma: 51 (+55/-4)
Reply Quote
Re: CSS and Forms styling


quote:

I added class names to the text box and submit button, since those are both <input> tags and there is no other way to target them individually unless you use an attribute selector, which older versions of IE won't comply with.



So those two class names would be what we would call "optional," not really needed for a functional search box but there just in case a person wants to make a "total" re-vamp of the RunSearch box, correct?

---

Advertise Boards On TRDConceptsDE
3/27/2010, 6:20 pm Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

 

Head of Runboard staff

Registered: 11-2005
Posts: 1894
Karma: 83 (+86/-3)
Reply Quote
Re: CSS and Forms styling


Correct. emoticon

---
Runboard Knowledge Base
Website Creation Tutorials
3/27/2010, 6:49 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Susan King Profile
Live feed
Blog
Friends
Miscellaneous info

 


Registered: 08-2008
Location: Cloud 9-5/8
Posts: 1
Karma: 1 (+1/-0)
Reply Quote
Re: CSS and Forms styling


I think I'll wait a bit till I learn more before making my own board... This looks complicated...

---
`Susan King
4/15/2010, 5:24 am Link to post Email Susan King   PM Susan King
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

 

Head of Runboard staff

Registered: 11-2005
Posts: 1894
Karma: 83 (+86/-3)
Reply Quote
Re: CSS and Forms styling


Hi Susan,

Making a board is easy. Customizing a board can be easy or complicated, depending on your skill level in that area and what you are trying to do. Then you have running a board, which I think you could do a good job with. emoticon

---
Runboard Knowledge Base
Website Creation Tutorials
4/15/2010, 6:48 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

 


Registered: 07-2005
Location: Texas
Posts: 395
Karma: 51 (+55/-4)
Reply Quote
Re: CSS and Forms styling


Hi Susan,

You would have a distinct advantage building a board since we live so close to each other. All the design decisions would be yours (especially since I don't know exactly what you are thinking with "Mommy Approved.")

When you are ready just pop over and I'll help you get started.

---

Advertise Boards On TRDConceptsDE
4/15/2010, 4:19 pm Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

 

Head of Runboard staff

Registered: 11-2005
Posts: 1894
Karma: 83 (+86/-3)
Reply Quote
Re: CSS and Forms styling


That sounds like a great offer to me! emoticon

---
Runboard Knowledge Base
Website Creation Tutorials
4/15/2010, 4:27 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

 


Registered: 07-2005
Location: Texas
Posts: 395
Karma: 51 (+55/-4)
Reply Quote
Re: CSS and Forms styling


I re-visited this topic yesterday and added this to the CSS side of the code:

#searchform input {font-size:11px;}

Then I changed the HTML from this:

<input class="input" type="text" name="q" size="20" value="" />

To read like this:

<input class="input" type="text" name="q" size="18" maxlength="20" value="" />

The results of the changes give a RunSearch box where the "GO" button is beside the input field and the "Submit a Runboard" link is beneath the input field and go button. Much more intuitive and it works even in the IE browsers without breaking out of the specified design area. emoticon

---

Advertise Boards On TRDConceptsDE
6/7/2010, 12:13 pm Link to post Email Pastor Rick   PM Pastor Rick Blog
 


Reply



You are not logged in (login)