aunque en mi humilde sugerencia deberian continuarlo y hacerlo mas pesonalizable..
bueno en mi afan de colocar un formulario a mi pagina... me tope con CKforum... la verdad es que googleando lo haye en español... pero por respeto a quien no hizo el favor de traducirlo no publicare el plug in [por cualquier caso o problema], me limitare a decir que eso fue una gran ayuda..
bueno usando la interfaz del componente me fije que al colocarlo en mi pagina...
No haye la menera de colocarlo en un articulo... por alli se mencionaba 1 que dice que hay que colocar el codigo
como cambiar la apariencia... solo se limita a colocar un espacio para agregar CSS... de donde? como se de donde referenciarme?.... no se explica...
No haye la menera de colocarlo en un articulo... por alli se mencionaba 1 que dice que hay que colocar el codigo
y otra parecida{ckform <nombre del formulario>}
pero lamentablemente no me funciono.{ckform nombre del formulario}
como cambiar la apariencia... solo se limita a colocar un espacio para agregar CSS... de donde? como se de donde referenciarme?.... no se explica...
bueno mi solución fue... construir el formulario y vincularlo a un item de menu para poder acceder a el ... unicamente asi me funciono...
bueno lo que me lleva a la apariencia del mismo...
estaba tranparente... y no era muy visible en la plantilla de mi pagina...
y al revisar el calendario... estaba en ingles... (como yo hablo español)... el ancho de los espacios de relleno de datos estaban muy amplios...
solución a lo primero...
menu Componentes > CK forms > y seleccionan el formulario que ya construyeron... en mi caso mi formulario se llama Certificado.
dentro de CK Forms: [ Editar ]
en la pestaña General en el espacio > descripción
dibujar una tabla con las propiedades que requieran en mi caso son estas...
Lineas: 1 Columnas: 1 Ancho: 100% percent Headers: none Border: 2 alignment: not set
en mi caso como la tabla tenia que ser igual a la apariencia de la pagina tenia que igualar el color...
use una herramienta llamada COLORPIX [url]colorschemer.com[/url] para igualar el color con los colores de mi plantilla...
Dentro de la tabla le aplique el siguiente formato a la celda...
Color de fondo: #EDF0F0
Color de Borde: #EDEDED (recuederden el borde ya estaba en 2px)
dento de la tabla con estas propiedades escribi mi texto deseado que seran las instrucciones de mi formulario...
asi lo puedo hacer para personalizar el mensaje de salida (su mensaje fue enviado exitosamente... bla, bla, blaa.)
Creando el estilo adecuado:
dentro de mi sitio
Sitio > components > com_ckforms > css > ckforms.css > agregar esta linea
- Code: Select all
.Ds_style{background-image:url(la direccion en donde se aloja tu imagen.png);
background-repeat:repeat; /*El fondo se repite*/
background-position:center; /*posicion centrado*/
margin-bottom:10px; /*margen de abajo*/
margin-left:5px; /*margen de izquierdo*/
margin-right:5px; /*margen de derecho*/
margin-top:10px;/*margen de superior*/
border:2px solid #EDEDED; /*borde, tipo de borde y color*/
padding:2px;
background:#EDEDED;
}
yo la agrege al inicio de mi archivo ckforms.css y no me da ningun problema...
para la imagen de preferencia PNG o JPEG... y para no usar mucho peso usa una imagen que tenga el alto del formulario y por lo menos 5px ya que con el atributo background-repeat:repeat; la imagen se repetira hasta llenar nuestro formulario... ten encuenta que la imagen debe tener el color adecuado en mi caso mi imagen PNG tiene el color #EDF0F0 que es como un gris.., sin borde...
Bueno ya tengo mi estilo creado y tomo de referencia el nombre que le puse
.Ds_style
Ahora regreso al
menu Componentes > CK forms > CK Forms: [ Editar ] > pestaña Avanzado
y en la linea Clase CSS: coloco el nombre del estilo que acaba de incluir Ds_style
y ya tengo mi fondo personalizado en mi formulario...
y para no irme del codigo siempre queda el asunto de las letras en color negro por defecto...
las cambio en las siguientes lineas de codigo del archivo ckforms.css
Sitio > components > com_ckforms > css > ckforms.css
Para cambiar las letras del texto "Obligatorio*"
- Code: Select all
.ck_mandatory {
color:#FF0000; /*codigo de color*/
padding: 0px;
font-size:0.83em; /*tañaño*/
font-weight: bold; /*negrilla*/
}
Aqui se cambia el color de las palabras de los items del formulario y el código color
- Code: Select all
.ckCSSlabel {
display: block;
float: left;
margin-top: 10px;
width: 20%;
font-size:1em;
color:#1489C8; /*Esta linea añadida para color de las palabras*/
font-weight:bold; /*Esta linea añadidas para negrilla*/
}
Aqui se cambia el color del cuadro de ingreso de datos
- Code: Select all
.ckCSSinputnormal {
display:block;
float: left;
margin-top: 10px;
background: #FFFFFF; /*aqui cambie el color del cuadro de ingreso de datos avanzados */
opacity: 0.85;
}
- Code: Select all
.ckCSSinputnormal input {
background:#FFFFFF; /*aqui cambie el color del cuadro de ingreso de datos*/
}
Aqui el ancho del cuadro de ingreso de datos...
- Code: Select all
.ckCSSnoTip {
width: 70%; /*Ancho de cuadro de ingreso de datos avanzados*/
}
- Code: Select all
.ckCSSTip {
width: 70%; /*Ancho de cuadro de ingreso de datos*/
}
Asi lo personalizo....
Bueno por ultimo el reloj... para pasarlo a español... manualmente... modifique el archivo
Sitio > components > com_ckforms > js > ui.datepicker.packed.js
en la linea final agrege... monthNames
monthNames:["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],monthNamesShort:["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"],dayNames:["Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado"],dayNamesShort:["Dom","Lun","Mar","Mie","Jue","Vie","Sab"],dayNamesMin:["Do","Lu","Ma","Mi","Ju","Vi","Sa"]
esta es la anterior que remplace
- Code: Select all
monthNames: [ "January", "February", "March", "April", "May", "June" "July", "August", "September", "October", "November" "December" ] monthNamesShort: [ "Jan", "Feb", "Mar", "Apr" "May", "Jun", "Jul", "Aug" "Sep", "Oct", "Nov" " Dec "], dayNames: [" Sunday "," Monday "," Tuesday "," Wednesday "," Thursday "," Friday "," Saturday "], dayNamesShort: [" Sun "," Mon "," Mar " , "Wed" "Thu", "Fri", "Sat"], dayNamesMin: [ "Do", "Lu", "Ma", "Mi", "Th", "Fr", "Sa"]
y asi traduci el calendario... aunque me fije en la carpeta js hay una traduccion al español... pero no encntre lamanera de hacerlo de esa manera... creo que me extendi pero asi tambien tengo mis personalizaciones para una futura consulta...
Saludos desde Guatemala...
INGLES
Firstly thank you for this good component ...
although in my humble suggestion should continue and make it more customizable ..
good in my eagerness to put a form to my page ... CKforum my butt ... the truth is that Google will haye in Spanish ... but out of respect for who did the favor of translating it does not publish the plug-in [for any event or problem], I will just say that was a great help ..
[list] good using the component interface that I fixed by putting it on my page ...
Haye the Menera not put it in an article ... there was mentioned by 1 that says you have to put the codeand other similar [{ckform <name form>}but unfortunately did not work.{ckform name form}
how to change the appearance ... just simply put a space to add CSS ... where? as referenced from where ?.... not explain ...
well my solution was ... build the form and link it to a menu item to access the ... I only worked well ...
good which leads me to look the same ...
Transparent was ... and was not very visible in the template of my page ...
and to revise the calendar ... was in English ... (as I speak Spanish) ... the width of the spaces were filled with very large data ...
solution to the first ...
Components menu> CK forms> and select the form you have already built ... in my case, my form is called a certificate.
CK within Forms: [Edit]
General tab in space> description
draw a table with the properties required in my case are these ...
Line: 1 Column: 1 Width: 100% percent Headers: none Border: 2 alignment: not set
in my case as the table had to be equal to the appearance of the site had to match the color ...
COLORPIX use a tool called colorschemer.com to match the color with the color of my template ...
In the table the following format will apply to cell ...
Background color: # EDF0F0
Border Color: # eded (recuederden the edge was already 2px)
tooth of the table with these properties desired text I wrote my instructions that will be my form ...
so what can I do to personalize the outgoing message (your message was successfully sent ... blah, blah, blaa.)
Creating the right style:
within my site
Site> components> com_ckforms> css> ckforms.css> add this line
. Ds_style (background-image: url (the address where you are staying imagen.png);
background-repeat: repeat; / * The background repeats * /
background-position: center; / * position centered * /
margin-bottom: 10px; / * bottom margin * /
margin-left: 5px; / * left margin * /
margin-right: 5px; / * right margin * /
margin-top: 10px; / * top margin * /
border: 2px solid # eded; / * border, border type and color * /
padding: 2px;
background: # eded;
)
I added at the front of my ckforms.css file and gives me no problem ...
preference for the image of PNG or JPEG ... and not using much weight to use an image that has the height of the form and at least 5px since the attribute background-repeat: repeat, repeat until the image is fill in our form ... Please note, the image must have the right color in my case my PNG image has the color # EDF0F0 which is like a gray .., no border ...
Well I have my style and created a reference volume name I gave Ds_style
Now back to
Components menu> CK forms> CK Forms: [Edit]> Advanced tab
Class line and CSS: I put the name of the style that has just added Ds_style
and I have my custom background on my form ...
and not to leave the code there is always the matter of the letters in black by default ...
the change in the following lines of code file ckforms.css
Site> components> com_ckforms> css> ckforms.css
To change the letters of the text
. ck_mandatory (
color: # FF0000; / * color code * /
padding: 0px;
font-size: 0.83em; / * tanan * /
font-weight: bold; / * bold * /
)
Here you change the color of the words of the items on the form and color code
. ckCSSlabel (
display: block;
float: left;
margin-top: 10px;
width: 20%;
font-size: 1em;
color: # 1489C8; / * This line is added for color words * /
font-weight: bold; / * This line added for bold * /
)
Here you change the color of the data entry box
. ckCSSinputnormal (
display: block;
float: left;
margin-top: 10px;
background: # FFFFFF; / * change the color here box advanced data entry * /
opacity: 0.85;
)
. ckCSSinputnormal input (
background: # FFFFFF; / * here the color change data entry box * /
)
Here the width of the data entry box ...
. ckCSSnoTip (
width: 70%; / * Width of box advanced data entry * /
. ckCSSTip (
width: 70%; / * Width data entry box * /
)
So what .... customize
Well finally the clock ... to pass to Spanish ... manually ... modify the
Site> components> com_ckforms> js> ui.datepicker.packed.js
in the final line of add ... monthNames
monthNames: [ "January", "February", "March", "April", "May", "June" "July", "August", "September", "October", "November" "December" ] monthNamesShort: [ "Jan", "Feb", "Mar", "Apr" "May", "Jun", "Jul", "Aug" "Sep", "Oct", "Nov" " Dec "], dayNames: [" Sunday "," Monday "," Tuesday "," Wednesday "," Thursday "," Friday "," Saturday "], dayNamesShort: [" Sun "," Mon "," Mar " , "Wed" "Thu", "Fri", "Sat"], dayNamesMin: [ "Do", "Lu", "Ma", "Mi", "Th", "Fr", "Sa"]
to
monthNames:["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],monthNamesShort:["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"],dayNames:["Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado"],dayNamesShort:["Dom","Lun","Mar","Mie","Jue","Vie","Sab"],dayNamesMin:["Do","Lu","Ma","Mi","Ju","Vi","Sa"]
and thus reflected the calendar ... although I noticed the js folder is a translation into Spanish ... Lamanère encntre but not to do it that way ... I think I extendi But so have my customizations for future reference ...
Saludos desde Guatemala ...