Diseñé un formulario tipo (perfil de empresa) donde se introduce el nombre de la empresa, logo, datos de contacto, etc justamente este formulario tiene un campo que se llama color en el cual eligo un color a través de una paleta de colores todo se guarda perfecto. Ahora lo que quiero hacer y nose como hacerlo es que ese color elegido se refleje y modifique la apariencia de la plantilla adimlte cambiando de color el header, nabvar y footer como pasar los colores elegidos a la plantilla, precisamente al archivo app.blade?
1 respuesta
Puedes cambiar el color de fondo de cualquier elemento añadiéndole un estilo directamente con jQuery. Solo tienes que situar el script en un template Blade que cargue en la página en cuestión.
Un ejemplo donde cambio el color de fondo de algunos elementos, con dos botones. Los colores los he prefijado y uso una forma diferente de aplicar el estilo para cada botón:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pruebas jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
* {
text-align: center;
}
body {
margin: 5% 12%;
}
button, footer, header, nav {
border : 1px solid grey;
margin : 1rem;
padding : 1rem;
}
</style>
</head>
<body>
<header>
This is the header
</header>
<nav>
a nav
</nav>
<main>
<button id="bg-grey">Set grey color</button>
<button id="bg-pink">Set pink color</button>
</main>
<footer>
The footer
</footer>
<script type="text/javascript">
$(document).ready(function()
{
$('#bg-grey').click(function()
{
console.log('bg-grey');
$('footer').css("background", "grey");
$('header').css("background", "grey");
$('nav').css("background", "grey");
});
$('#bg-pink').click(function()
{
console.log('bg-pink');
$('footer').attr("style", "background:pink");
$('header').attr("style", "background:pink");
$('nav').attr("style", "background:pink");
});
});
</script>
</body>
</html>