PimpMyJoomla.com - Quality Joomla Components - Re:Form using css

	pimpMyJoomla Board	Forum Rules Help

Welcome, Guest
Please Login or Register.
Lost Password?

pimpMyJoomla Board

Forme

Forme Showcase

Form using css (1 viewing)

TOPIC: Form using css

Forum Tools

#310

oleman (User)

Senior Boarder

Posts: 12

Form using css 2007/05/14 02:21 Karma: 0

This form uses css built directly in the field style option. I have tabled it to get the desired look and column widths are changable.
View My form

Here is the code i used simply place this in the field style area

Code:


 <style type="text/css">
<!--
.fielddescclass {
    font-size: 14px;
    color: #FFFFFF;
    background: #333333;    
}
.fieldtitleclass {
    font-size: 14px;
    color:#0099CC
}
.fieldvaliclass {
    font-size: 12px;
    color: #FF0000
}

-->
</style>

<table width="100%" border="0">
  <tr>
    <td  colspan="4"  class="fielddescclass"><div align="center">{fielddesc}</div></td>
  </tr>
  <tr>
    <td width="10%" height="27"> </td>
    <td width="40%"><div align="center"><span class="fieldtitleclass">{fieldtitle}</span></div></td>
    <td width="5%"><div align="right"><span class="fieldvaliclass">{validationsign}</span></div></td>
    <td width="45%"><span class="fieldclass">{field}</span></td>
  </tr>
</table>

although once i added the backgrond color to the feild description I also got dividing lines that i can not seem to get rid of without taking out the background color. Possibly because it calls for a field description for every field. until a new selection is incorporated for a sectionheader, Thats what i come up with.

I'm having alot of fun with this component......Its great...

Post edited by: oleman, at: 2007/05/14 02:38

The topic has been locked.

#314

alex (Admin)

Admin

Posts: 301

Re:Form using css 2007/05/14 09:22 Karma: 8

hm, for the divisions, try changing

Code:


 <table width="100%" border="0">

into

Code:


 <table width="100%" border="0" cellspacing="0" cellpadding="0">

The topic has been locked.

#426

oleman (User)

Senior Boarder

Posts: 12

Re:Form using css 2007/05/16 01:51	Karma: 0
I've changed attributes and still the same. The way that the form style reads the form field is why its showing a line. the form style is picking up that theres something in the form field desc even though its only a background color. Do you think if a new field style were added like {fieldsection) would work? still not sure if you can make it not see the background color though.

The topic has been locked.

#453

ag2simal (User)

Senior Boarder

Posts: 11

Re:Form using css 2007/05/16 16:41

Karma: 1

I had the same problem with my form. Even I've solve it, I've left the line 'couse I like it that way.

Solution is to move class="fielddescclass" from table into div.

Reason is quite simple. There is difference how table and div display content. Table will display class setings allways, but div only if it has value inside. If div is empty then it visualy does't exists.

After that add paddings into css. That way you can control field distances.

hope it helped

p.s. move css into template css file.

Post edited by: ag2simal, at: 2007/05/18 08:30

The topic has been locked.

#563

oleman (User)

Senior Boarder

Posts: 12

Re:Form using css 2007/05/19 04:09 Karma: 0

Thanks ag2simal that worked. But like you, I liked it better with the dividing lines. But I didnt want them to appear as dark or the same color as the section header so I added a new style to the table.
also by moving the css attributes to a template file takes away the ability to change attributes right with the forme, So I opted to leave it there. the only thing is you can not set a height for the fielddesc or the background color will be picked up by the div tag. and over each id.

heres the new style.

Code:


 <style type="text/css">
<!--
.fielddescclass {
    font-size: 14px;
    color: #FFFFFF;
    background: #333333;
    text-decoration: none;
    
}
.fieldtitleclass {
    font-size: 14px;
    color:#0099CC
}
.fieldvaliclass {
    color: #FF0000;

}
.line {
    border-bottom: thin #c0c0c0 solid;
}

-->
</style>

<table class="line" width="100%">
  <tr>
    <td  colspan="4"  ><div class="fielddescclass" align="center">{fielddesc}</div></td>
  </tr>
  <tr>
    <td width="10%" height="27"> </td>
    <td width="40%"><div align="center"><span class="fieldtitleclass">{fieldtitle}</span></div></td>
    <td width="5%"><div align="right"><span class="fieldvaliclass">{validationsign}</span></div></td>
    <td width="45%"><span class="fieldclass">{field}</span></td>
  </tr>
</table>

I havent done anything with the padding yet but the % can be changed easily to create the effect needed.

Thanks again for the help.

Post edited by: oleman, at: 2007/05/19 04:16

The topic has been locked.

#606

ag2simal (User)

Senior Boarder

Posts: 11

Re:Form using css 2007/05/21 17:06	Karma: 1
You wellcome. btw. I like it much better now. Well done.

The topic has been locked.

#833

evilrobot (User)

Gold Boarder

Posts: 42

Re:Form using css 2007/06/06 20:25	Karma: 0
how do you get the text into the black bars?

The topic has been locked.

#834

evilrobot (User)

Gold Boarder

Posts: 42

Re:Form using css 2007/06/06 20:27	Karma: 0
oh nevermind, i see now that you put it in field description

The topic has been locked.