Runboard.com
Слава Україні!
Runboard Extra Chat Room Support Search Facebook

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

Page:  1  2 

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

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
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: 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. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
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: 1895
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
Runboard Support Forums
Find other message boards
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: 1895
Karma: 83 (+86/-3)
Reply Quote
Re: CSS and Forms styling


Thanks. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
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
 


Reply

Page:  1  2 





You are not logged in (login)