CSS and Forms styling https://brunboardextra.runboard.com/t11479 Runboard| CSS and Forms styling en-us Fri, 29 Mar 2024 11:06:14 +0000 Fri, 29 Mar 2024 11:06:14 +0000 https://www.runboard.com/ rssfeeds_managingeditor@runboard.com (Runboard.com RSS feeds managing editor) rssfeeds_webmaster@runboard.com (Runboard.com RSS feeds webmaster) akBBS 60 Re: CSS and Forms stylinghttps://brunboardextra.runboard.com/p224975,from=rss#post224975https://brunboardextra.runboard.com/p224975,from=rss#post224975I 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. nondisclosed_email@example.com (Pastor Rick)Mon, 07 Jun 2010 12:13:38 +0000 Re: CSS and Forms stylinghttps://brunboardextra.runboard.com/p224965,from=rss#post224965https://brunboardextra.runboard.com/p224965,from=rss#post224965That sounds like a great offer to me! nondisclosed_email@example.com (Lesigner Girl)Thu, 15 Apr 2010 16:27:20 +0000 Re: CSS and Forms stylinghttps://brunboardextra.runboard.com/p224964,from=rss#post224964https://brunboardextra.runboard.com/p224964,from=rss#post224964Hi 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.nondisclosed_email@example.com (Pastor Rick)Thu, 15 Apr 2010 16:19:47 +0000 Re: CSS and Forms stylinghttps://brunboardextra.runboard.com/p224963,from=rss#post224963https://brunboardextra.runboard.com/p224963,from=rss#post224963Hi 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. nondisclosed_email@example.com (Lesigner Girl)Thu, 15 Apr 2010 06:48:12 +0000 Re: CSS and Forms stylinghttps://brunboardextra.runboard.com/p224962,from=rss#post224962https://brunboardextra.runboard.com/p224962,from=rss#post224962I think I'll wait a bit till I learn more before making my own board... This looks complicated...nondisclosed_email@example.com (Susan King)Thu, 15 Apr 2010 05:24:27 +0000 Re: CSS and Forms stylinghttps://brunboardextra.runboard.com/p224954,from=rss#post224954https://brunboardextra.runboard.com/p224954,from=rss#post224954Correct. nondisclosed_email@example.com (Lesigner Girl)Sat, 27 Mar 2010 18:49:30 +0000 Re: CSS and Forms stylinghttps://brunboardextra.runboard.com/p224953,from=rss#post224953https://brunboardextra.runboard.com/p224953,from=rss#post224953quote: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?nondisclosed_email@example.com (Pastor Rick)Sat, 27 Mar 2010 18:20:29 +0000 Re: CSS and Forms stylinghttps://brunboardextra.runboard.com/p224952,from=rss#post224952https://brunboardextra.runboard.com/p224952,from=rss#post224952This 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.nondisclosed_email@example.com (Lesigner Girl)Sat, 27 Mar 2010 18:09:32 +0000 Re: CSS and Forms stylinghttps://brunboardextra.runboard.com/p224951,from=rss#post224951https://brunboardextra.runboard.com/p224951,from=rss#post224951You 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?nondisclosed_email@example.com (Pastor Rick)Sat, 27 Mar 2010 15:07:29 +0000 Re: CSS and Forms stylinghttps://brunboardextra.runboard.com/p224950,from=rss#post224950https://brunboardextra.runboard.com/p224950,from=rss#post224950Thanks. nondisclosed_email@example.com (Lesigner Girl)Sat, 27 Mar 2010 11:54:58 +0000 Re: CSS and Forms stylinghttps://brunboardextra.runboard.com/p224949,from=rss#post224949https://brunboardextra.runboard.com/p224949,from=rss#post224949Both 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 nondisclosed_email@example.com (Pastor Rick)Sat, 27 Mar 2010 03:18:23 +0000 Re: CSS and Forms stylinghttps://brunboardextra.runboard.com/p224948,from=rss#post224948https://brunboardextra.runboard.com/p224948,from=rss#post224948Thank 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.nondisclosed_email@example.com (Lesigner Girl)Fri, 26 Mar 2010 15:34:57 +0000 Re: CSS and Forms stylinghttps://brunboardextra.runboard.com/p224947,from=rss#post224947https://brunboardextra.runboard.com/p224947,from=rss#post224947Oh 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."nondisclosed_email@example.com (Pastor Rick)Fri, 26 Mar 2010 14:37:01 +0000 Re: CSS and Forms stylinghttps://brunboardextra.runboard.com/p224946,from=rss#post224946https://brunboardextra.runboard.com/p224946,from=rss#post224946The 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.nondisclosed_email@example.com (Pastor Rick)Fri, 26 Mar 2010 14:28:41 +0000 Re: CSS and Forms stylinghttps://brunboardextra.runboard.com/p224945,from=rss#post224945https://brunboardextra.runboard.com/p224945,from=rss#post224945I 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. nondisclosed_email@example.com (Lesigner Girl)Fri, 26 Mar 2010 12:31:36 +0000 Re: CSS and Forms stylinghttps://brunboardextra.runboard.com/p224943,from=rss#post224943https://brunboardextra.runboard.com/p224943,from=rss#post224943The 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...nondisclosed_email@example.com (Pastor Rick)Thu, 25 Mar 2010 23:52:18 +0000 Re: CSS and Forms stylinghttps://brunboardextra.runboard.com/p224942,from=rss#post224942https://brunboardextra.runboard.com/p224942,from=rss#post224942I'm not sure what you're asking. How to set up the form?nondisclosed_email@example.com (Lesigner Girl)Thu, 25 Mar 2010 22:59:51 +0000 CSS and Forms stylinghttps://brunboardextra.runboard.com/p224941,from=rss#post224941https://brunboardextra.runboard.com/p224941,from=rss#post224941RunSearch 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?nondisclosed_email@example.com (Pastor Rick)Thu, 25 Mar 2010 20:53:45 +0000