Forum: Rails-ES DAr formato a botton_to

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
Daniel E. (Guest)
on 2008-12-03 20:51
Estoy tratando de darle formato a un button_to

Investigando encontre en la documentacion de rails esto:

The generated FORM element has a class name of button-to to allow
styling of the form itself and its children

Me parece que quiere decir: que existe una clase llamada button-to, pero
no la encuentro en las plantillas  de estilo para modificarla.

Como modifico el color de los button_to o la imagen de fondo?
Borja Martín (Guest)
on 2008-12-03 20:58
(Received via mailing list)
Tendrás que definir en tu propia hoja estilos la clase button-to y darle
la apariencia que necesites.
Así mismo, todos los helpers que generan código html aceptan un
parámetro para añadir opciones al tag generado, y por lo tanto también
puedes indicar tu propia clase.
<%= link_to "Mi enlace", model_path(@obj), :class => 'enlace' %>

Saludos


Daniel E.
escribió:> Estoy tratando de darle formato a un button_to
Daniel E. (Guest)
on 2008-12-04 21:36
Borja Martín wrote:
> Tendr�s que definir en tu propia hoja estilos la clase button-to y darle
> la apariencia que necesites.
> As� mismo, todos los helpers que generan c�digo html aceptan un
> par�metro para a�adir opciones al tag generado, y por lo tanto tambi�n
> puedes indicar tu propia clase.
> <%= link_to "Mi enlace", model_path(@obj), :class => 'enlace' %>
>
> Saludos
>
>
> Daniel E.
> escribi�:> Estoy tratando de darle formato a un button_to


A ver si hago esto:

<%= button_to('Guardar',  :action => "soloGuardar" , :class=>
"opcionButton") %>

y en la hoja te estilos coloco esto:

#opcionButton {
        margin-top: auto;
        margin-bottom: auto;
        margin-left: auto;
        margin-right: auto;

  border-top: 1px solid #839399;
  border-bottom: 1px solid #839399;
  border-left: 1px solid #839399;
  border-right: 1px solid #839399;
  background-color:#990000;

  font-family:Verdana;
  font-size:2;
  font-weight:bold;
  color:#FFFFFF;
}
----------------------------

Ya lo hice y no funciona, que estoy haciendo mal?

Lo que si me di cuenta es que al modificar:

input{
  background-color: #f0f0f0;
  border: solid 1px #c6c6c6;
}

Entonces si cambia el color del buttom, pero asi mismo el de los campos
de texto.

Debe ser una tonteria lo que tengo mal pero no se que es
Manuel González Noriega (Guest)
on 2008-12-04 22:12
(Received via mailing list)
2008/12/4 Daniel E. <removed_email_address@domain.invalid>

>
>
Pues que estás estilando un elemento con id optionButton y en tu marcado
tienes un elemento *con clase* optionButton
[Webmaster]_Yoel_Villarreal (Guest)
on 2008-12-05 01:39
(Received via mailing list)
Manuel González Noriega wrote:
>     #opcionButton {
>
>     Ya lo hice y no funciona, que estoy haciendo mal?
>
>
> Pues que estás estilando un elemento con id optionButton y en tu marcado
> tienes un elemento *con clase* optionButton
>

Error tipico en CSS

--
Visite nuestra web en Internet
http://www.ispvc.rimed.cu
"50 Años de Educación en
Revolución"
--
Este mensaje ha sido analizado por MailScanner
en busca de virus y otros contenidos peligrosos,
y se considera que está limpio.
xurde dix (Guest)
on 2008-12-05 09:31
(Received via mailing list)
seria

.opcionButton {
       margin-top: auto;
       margin-bottom: auto;
       margin-left: auto;
       margin-right: auto;

 border-top: 1px solid #839399;
 border-bottom: 1px solid #839399;
 border-left: 1px solid #839399;
 border-right: 1px solid #839399;
 background-color:#990000;

 font-family:Verdana;
 font-size:2;
 font-weight:bold;
 color:#FFFFFF;
}

INPUT.boton -> input con class = boton
INPUT#boton -> input con id = boton


Jorge G.
Daniel E. (Guest)
on 2008-12-05 17:27
xurde dix wrote:
> seria
>
> .opcionButton {
>        margin-top: auto;
>        margin-bottom: auto;
>        margin-left: auto;
>        margin-right: auto;
>
>  border-top: 1px solid #839399;
>  border-bottom: 1px solid #839399;
>  border-left: 1px solid #839399;
>  border-right: 1px solid #839399;
>  background-color:#990000;
>
>  font-family:Verdana;
>  font-size:2;
>  font-weight:bold;
>  color:#FFFFFF;
> }
>
> INPUT.boton -> input con class = boton
> INPUT#boton -> input con id = boton
>

Bueno miren, es importante que tomemos en cuenta que
cuando hacemos un:

<%= button_to('Guardar',  :action => "Guardar")  %>

en realidad estamos haciendo un:

<form method="post" action="Guardar" class="button-to">
<div><input type="submit" value="Guardar" /></div>
</form>

De manera que, si creamos una clase siguiendo las instrucciones que me
han dado:

.button-to{
.....descripcion...
}

en realidad le estoy dando formato al formulario y no al boton submit
del mismo.

Le he dado muchas vueltas al asunto de manera que lo he resuelto
lamentablemente sin la elegancia de Rails.

Lo que hice fue colocar directamente el siguiente código html en la
vista:

<form method="post" action="Guardar" class="button-to">
<div><input type="submit" value="Guardar"  class="opcionButton"/></div>
</form>

NOTESE LA DIFERENCIA EN EL CLASS DEL INPUT SUBMIT

Y defini la clase:

input.opcionButton{
.....descripcion...
}


Debe haber una manera de darle formato al boton submit que genera el
button_to con Rails, y asi no perder la magia

Las sugerencias que me han dado sirven perfectamente para los casos de
un button_to_function pero yo necesito es un button_to
Manuel González Noriega (Guest)
on 2008-12-05 17:34
(Received via mailing list)
2008/12/5 Daniel E. <removed_email_address@domain.invalid>

> <div><input type="submit" value="Guardar" /></div>
> </form>
>

¿Quieres estilar el input en este código? No necesitas hacer nada
especial

form.button-to input {
..
}

En cualquier caso, necesitarías colaborar con alguien con conocimientos
básicos de HTML/CSS
This topic is locked and can not be replied to.