search

IIC2143-2020-1 / proyecto

Repositorio para el proyecto semestral de IIC2143 Ingeniería de Software 2020-1
22 stars 8 forks source link

Cambiar variables Bulma #131

Closed oscars810 closed 4 years ago

oscars810 commented 4 years ago

Hola!

Tengo la duda de como cambiar variables (tamaño por ejemplo) en los elementos de bulma, ya que la documentación dice que hay que hacerlo antes de importar bulma, pero no me funciona (de hecho lo escribe literal en la pagina); también intenté cambiarlo en los archivos de stylesheet y tampoco.

Entonces quería saber si alguien sabe donde hay que hacerlo. 😢

daleal commented 4 years ago

Hola! Estás usando archivos .scss o .sass o archivos .css? Mi recomendación sería cambiar los valores en la hoja de estilo principal. Pero para que eso funcione, debes estar usando archivos .scss o .sass.

Edit: aparentemente puedes alterar las variables de Bulma tanto antes como después de importarlas, pero para que quede todo más ordenado me parece que lo recomendable sería cambiar su valor después de importarla (es decir, en la hoja de estilo principal).

oscars810 commented 4 years ago

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css"> Con ese link estoy usando bulma como se hizo en la ayudantía, por lo que no tengo ningun archivo .css o similar.

Tambien intenté crear un .css e importarlo para cambiar las variables, pero tampoco tuve exito. <link rel="stylesheet" href="../../assets/css/style.css"> Ese es el link al archivo donde intentaba hacer los cambios.

daleal commented 4 years ago

Ya, mira. Tu proyecto debería tener un archivo en app/assets/stylesheets llamado application.css o application.scss. Ese archivo se importa automáticamente en rails, por lo que no debes poner ningún tag link en el template de la aplicación (aparte del de Bulma). Si tu archivo termina en .css, cambia la extensión a .scss. Luego, dentro de ese archivo intenta cambiar el valor de la variable de Bulma que quieres alterar.

oscars810 commented 4 years ago

No me funcionó :c

section.hero.is-bold{
    background-image: url("../images/fondo.png");
    background-size: cover;
    background-position: center center; 
}

Ese es uno de los cambios que intento realizar si sirve de algo. Pero ninguno de los que escribo se ven reflejados. Puse el codigo en aplication.scss(que le cambié la extension) y welcome.scss porque quiero se vean reflejados los cambios en el home. Como info adicional, en bdd tambien estamos usando bulma y pudimos hacer los cambios sin problemas en un archivo mystyles.css, no logro entender porque no lo puedo hacer acá en rails.

daleal commented 4 years ago

Ok, puede ser que tengas una confusión con respecto a las variables de Bulma. Bulma tiene un set de elementos llamados Bulma Variables que puedes modificar solamente si estás usando archivos .scss o .sass. Esas variables se ven de la siguiente manera: $size-1, $primary, etc. Lo que tú estás intentando hacer es estilar tu aplicación web alterando un poco lo que Bulma te entrega usando CSS (no necesariamente alterando las variables de Bulma). En cualquier caso, necesito un poco más de información para entender el problema. Asumiendo que el código que enviaste está en welcome.scss, podrías decirme qué tienes en tu archivo application.scss (o application.css) y qué tienes en tu archivo app/views/layouts/application.html.erb?

oscars810 commented 4 years ago

En aplication.html.erb estoy haciendo la navbar por lo que hay harto codigo. Sin embargo, los .scss estaban vacios (ahora tienen lo que puse arriba). Entonces dices que deberia hacer $size-1 = 3rem por ejemplo en los .scss?

daleal commented 4 years ago

Mandame lo que hay dentro del tag <head> de tu application.html.erb. Los dos archivos tienen exactamente el mismo código? Y por lo que veo estás teniendo problemas para cargar tu CSS (o al menos para direccionarlo a los elementos adecuados), así que usar las variables de bulma tampoco te funcionaría (te recomiendo que no lo hagas, en cualquier caso, los defaults son bastante aceptables)

oscars810 commented 4 years ago 
    <title>MatchMeat</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">
    <link rel="stylesheet" href="../../assets/css/style.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

Eso tengo en mi head. El segundo link fue el que cree en mi intento de cambiar los parametros. Y si, los default son aceptables, pero buscabamos poner un fondo y agrandar la navbar porque en serio que se ve muy pequeña (comparando tambien como se vé cuando se usa en php)

daleal commented 4 years ago

Ok, la línea que dice <link rel="stylesheet" href="../../assets/css/style.css"> puedes borrarla porque rails no entrega los assets desde la estructura que hay en tu proyecto (precompila cosas y las mueve de lugar). Podrías decirme qué pasa si tu body queda así?

<title>MatchMeat</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %></script>

Funcionan tus cambios en el CSS? Si a un título le pones class="very-blue" y después en application.scss escribes

.very-blue {
  color: blue;
}

El texto del título queda azul?

oscars810 commented 4 years ago

Me imagino que te referias a cambiar mi head? Bueno, lo hice así y efectivamente cambia el color 🥳, pero el codigo de section.hero.is-bold sigue sin poner la imagen... Por lo que me imagino que está todo funcionando bien pero me estoy equivocando en escribir el codigo (tal vez no encuentra la imagen).

Entonces cualquier cambio que quiera hacer en toda la aplicacion lo hago en application.scss? Y si quisiera algun cambio en alguna vista en particular lo hago en su respectivo .scss?

daleal commented 4 years ago

Si, los cambios a vistas en particular hazlos en su respectivo archivo. Ojo, en todo caso, con que todas las stylesheets se compilan a una sola, por lo que realmente todos los cambios que hagas se harán en toda tu app, independiente del archivo en que los hagas (en general esto no debería significar problemas, pero es bueno saberlo). Con respecto a por qué no pone la imagen, probablemente estás apuntando mal al tag. Te recomiendo usar una cheat sheet para comprender mejor cómo funcionan los selectores CSS, hay muchos!

oscars810 commented 4 years ago

Yaa!... Muchisimas gracias por la ayuda y la información 🙇‍♂️.

benito-tondreaux commented 4 years ago

Holaa!!

Tengo una duda de como cambiar las variables de pagination en bulma, para poder cambiar el estilo de este componente, ¿Como puedo importar las variables de Bulma en mi application.css para poder cambiarlas?