#rollinginthedeep

[livelovecaliforniadreams]

[inevitable-curiosity]

"I want a divorce.."

[kurtarrigo]

Rolling into a new week. . . . . #oceanpower #lifeatsea #surf #seaspray #rollinginthedeep #texture https://www.instagram.com/p/COYUpkRJbBi/?igshid=rw7z2hvtjuow

[bettyleg]

Tutorial [Rolling in the deep]

Con Rolling in the deep nos pasa algo feísimo. Al usar inputs, al querer poner una playlist en un post y volver a postearlo nuevamente en el mismo tema... todo se rompe. Se debe a que los nombres de los inputs y los labels son iguales y la página se nos vuelve loca intentando entender qué queremos hacer. 

La solución es un tanto trabajosa y deben hacer a mano cada vez que quieran usarla en el mismo tema o en temas donde otras personas también postean, pero si solamente lo usarán 1 vez no hace falta.

¡Comencemos!

RECUERDEN: Este tutorial aplica cuando ya posteaste una playlist y quieres postear nuevamente otra en el mismo tema. Si es tu primera vez posteandolo ¡No hace falta que hagas todo lo de a continuación!

Recomiendo como siempre usar codepen o jsfiddle el editor de su preferencia. 

1) Vamos a buscar todos los inputs y labels. Mi código tiene estos:

<input type="radio" id="btb25-can1" name="btpl1-modulCan btpl1-modul1" checked /><label for="btb25-can1"><i class="fas fa-play"></i><span></span></label>

<input type="radio" id="btb25-can2" name="btpl1-modulCan btpl1-modul1" /><label for="btb25-can2"><i class="fas fa-play"></i><span></span></label>

<input type="radio" id="btb25-can3" name="btpl1-modulCan btpl1-modul1" /><label for="btb25-can3"><i class="fas fa-play"></i><span></span></label>

Y los vamos a cambiar de la siguiente forma.

btb25-can1  →   btb25-can4

btb25-can2  →  btb25-can5

btb25-can3  →  btb25-can6

También los vamos a buscar en el CSS y los modificaremos de acuerdo a la lista anterior.

Recuerda que los cambios son HTML + CSS.

2) Van a buscar todos las clases que se llamen:  “ btpl1-modul1 “ tanto en el HTML (dentro de los input) como en el CSS.

Vamos a modificar su nombre por “ btpl1-modul2″ o cualquier otro que te guste.

Recuerda fijarte bien que cambies todos y que no elimines sin querer los puntos al lado del nombre en el CSS o las comillas en el HTML. Estos últimos son errores bastante frecuentes si no tienes experiencia en el HTML ¡Pero ánimo!

3) Si se quiere cambiar el color de acento y que tengan los dos diferentes colores: 

Busca la primer línea del código en el HTML 

<div class="btplay1list btplay1list-acent1">....

Cambia el  btplay1list-acent1 →   btplay1list-acent2

Y en el CSS

.btplay1list-acent2{--btpl1-acento-1:#40A75E;}

¡Y listo! Recuerda verificar no borrar cosas de más y cambiar correctamente los nombres. Cada vez que quieras agregar otra playlist en el mismo tema se deberá hacer lo mismo. No es necesario cambiar el 1 por el 2 o el 3 y así sucesivamente, puede ponerse cualquier otro nombre que les parezca respetando que sean diferentes entre sí. 

Espero haberme explicado bien, pero si hay dudas o algo no se termina de entender ¡No duden en preguntar!

Saludos. 

[sanjeevbabbar]

Set Fire to the Rain - Adele - Guitar Cover by @skbguitar & @mansha__gupta #instamusic #instavideo #instateacher #guutarlesson #taylorswift #selennagomez #justinbieber #brunomars #piano #casio #yamaha #keyboardnotation #agtfinale2019 #agt #americagottalent #hello #rollinginthedeep #skyrapper #adele #adelesongs #adelesinger (at India Gate) https://www.instagram.com/p/B2llCXVFYVO/?igshid=ezyps8pqo0bp

[puppy4mybirthday]

🎤🎼

[lady-rogers-stark]

Steve Rogers  ➺ Traicionó a su país por su familia, no teme disparar para matar. Ha abandonado incluso su honor, sumergiéndose en la oscuridad de su orgullo. 

[daughtersofbeer]

Merry Christmas Karaoke! @fortgeorgebeer #cityofdreams #dreamybeer #paleale #carsonellis #karaoke #adele #rollinginthedeep (at Montavilla Neighborhood)