Friday, July 09, 2010

CSS

I should start this entry with a caveat that I know very little about CSS and html and by very little I mean I know codes exist for colors on the web and that you need to close < / > brackets but that's pretty much it. With my very limited knowledge, I customized a google form. Also, I embedded it into a static page in blogspot (which is edited like any other blog entry). Given that, I would not say I did things "the right way" and wouldn't trust this to be the ultimate guide, I merely did what was within my power to get it to do what I wanted. In this entry, I describe the things I did* to get this:

into this:

Many people in the help forums say google forms is not customizable, but it's not true if you can figure your way around html & css. And if I'm not proof enough, I would say it's reasonably do-able if you have the patience to look through code. I'm sure it would've taken I.S. 5 minutes to customize it for me, but I was determined to do it myself, dang it.

These are the goals I wanted to achieve with my code tweaking:
1. embed google form into blogspot page
2. get rid of white background
3. customize font, style, color
4. make it look pretty overall

First I need to figure out where to access the code for the form. At first I was OK embedding the form using the link in google forms but it kept pushing all the text to the left-most-edge of the form frame, which looked dumb. With that problem, I first tried to play around with just the iframe sizing and trying to add code to increase the border/margin, but it wasn't right and I still didn't fix the text justification.
At that point, I figured out how to view the source code for the form (open the "live form" and right click the page and go to "view page source"). To achieve goal #1 & 2 - imbed the form without the white background - I copied the code that was in between < span style="color: blue;">< style >
& < span style="color: rgb(0, 0, 255);">< /form>
and pasted it into the "Edit HTML" tab of the editing page for the page/blog entry. At this point, the font style and coloring will be managed by the blog style settings (aka whatever style your text is in your blog entries/other pages) unless explicitly defined in the code. That helped me partly achieve goal #3.

At the top with all the stuff inbetween and , that is where you want to add the style changes you want to see to your headings & text like font type, sizing, style, color, etc. Since the font type and colors came from the css of the blog posting itself, I didn't bother with those things; I only had to worry about font sizing, style, and color for the heading text I wanted to emphasize using white instead of the default grey color defined by the blog style settings. All headings were defined as ss-q-title and all help text was defined as ss-q-help in the code so in the style section, I added:

.ss-q-title{font-size: 16px; color: #FFFFFF}  to increase the font size and make the text white
 
.ss-q-help{font-style: italic} to italicize the text
To get the form description italicized and to change the asterisk color to red (respectively), I added the following:

.ss-form-desc{font-style: italic}
 
.ss-required-asterisk{color: #FF0000}
To achieve goal #4:
I also went in & changed everywhere it was < / li > & < li to < /p > and < p
respectively 'cause "li" was making my options bulleted points so changing it to & helped me get rid of the bullet points.
I also had spacing issues with places where there was several lines of spacing between nearly everything, which I discovered to be a result of paragraph spacing between < /label > and < label > in the code so I went in & deleted the paragraph spacing to just a single space.

The paragraph response box for the address field (not shown) was by default very large (8 rows x 75 columns) so I changed that part of the code (highlighted in yellow) to read as follows:

<textarea name="entry.4.single" rows="2" cols="50" class="ss-q-long" 
id="entry_4">textarea>
All in all, it was a very educational exercise. Definitely lots more to learn, but for now, I got it to look the way I wanted it to. I should probably go take a real course at some point though...





*it consisted of a lot of googling, reading, & testing things in preview mode but hey: a person can get lost, digging through online forums.
I took bits of knowledge from here, here, and here and I thank them for sharing =)