Conoce que clase o id modificar con CSS

Abr 21, 2018 | CSS, DIVI (Elegant Themes), Tutoriales, Wordpress

En la comunidad Divi en Español, observo que hay una gran cantidad de dudas referente a como hacer tal o cual cosa que en el 90% de los casos, por poner una cifra, se soluciona mediante CSS. El problema está en saber a que clase, id o conjunto de ellas habría que aplicar reglas CSS para encontrar una solución al problema que se plantea.

Personalmente pienso que aprender CSS es fundamental para este mundo (profesión o hobby) en el que nos movemos, pero también entiendo que hay personas que están empezando y no entienden ó comprenden la importancia de este metalenguaje a la hora de realizar sus diseños. Aprovecho para aconsejarles que empiecen a aprenderlo, ya que una vez dominado, no habrá diseño que se le pueda resistir.

Si me preguntan ¿Por donde empiezo a aprender? “HTML y CSS” sería mi respuesta. Considero que es lo básico y mínimo que se debe aprender y por cierto, no le tengáis miedo ya que no es nada difícil de dominar.

Después de esta retahíla que os he soltado, vamos a ver un ejemplo de como identificar que tenemos que tocar para cambiar aspectos de la página.

Os pondré el último que me surgió en el foro, que era cambiar el tamaño del menú hamburguesa en versión móvil.

Por cierto, cada vez que alguien pregunta algo, lo primero que les pido es la url de la página sobre la que tiene dudas y ahora sabréis porque.

Para identificar las clases o id´s que tenemos que tocar usaremos la herramienta para desarrolladores de Google.

Para ello una vez dentro de nuestra página, pulsamos F12 y a la derecha nos saldrá el código HTML (no php) así como el CSS que se le aplica a la página.

 

Desarrolladores Google Namaste Web Málaga

En la parte superior nos aparece el código HTML y despues otro panel con las reglas CSS que se aplican. No os asustéis por tanta palabra ó lineas, ahora veremos como ir directamente a la que nos interesa.

No entraré en detalles de como usar esta herramienta, ya que de lo que se trata ahora es identificar lo que nos interesa cambiar. Esto lo digo porque podríamos ver la versión móvil directamente con esta herramienta, pero de momento lo haremos de otra manera.

Justo donde termina la previsualización de la página y empieza la herramienta de google, podemos agrandar ó achicar la página hasta el punto de que el menú normal se convierta en hamburguesa ya que detecta que el tamaño es en teoría para móviles. En este caso nos desplazamos a la izquierda para achicar la previsualización de nuestra página.

Desarrolladores Google Namaste Web Málaga

Ya tenemos nuestro menú hamburguesa en azul. Lo cambiaremos a rojo y le cambiaremos el tamaño.

Aquí es donde viene el Kit de la cuestión y sobre todo explicarlo sin video, pero bueno lo intentaremos.

Nos colocamos justo en lo alto del menú hamburguesa y le damos al botón derecho del ratón, al final nos aparece la opción inspeccionar. Pulsamos sobre dicha opción.

Desarrolladores Google 3 Namaste Web Málaga

Al pulsar, sobre el código HTML nos saldrá una linea resaltada en azul. En principio esa es la línea sobra la que tendremos que navegar.

Siempre que veáis una flecha a la izquierda de la linea abridla, ya que posiblemente el menú hamburguesa este aún mas escondido entre lineas.

Si me coloco en lo alto de la linea que se ha resaltado en azul (en este caso span) veremos que el menu hamburguesa se resalta, pero tiene un espacio abajo también resaltado, lo que me lleva a pensar que hay lineas más abajo que son las que verdaderamente afectan al menú. En este caso vemos un ::before. Nos colocamos en lo alto del mismo y pulsamos con el botón izquierdo.

Ahora vemos solo resaltado el menú, sin espacios raros y es cuando podremos empezar a aplicarle reglas CSS para modificar su aspecto. ¡Ojo!, los cambios que se hacen aqui, son solo una previsualización, en ningún caso se guardan, por lo que lo que aquí escribamos, debemos trasladarlo a DIVI > Personalizador de Temas >CSS adicional.

En principio está así:

Desarrolladores Google 6 Namaste Web Málaga

Después de aplicarles 2 reglas la cosa cambia:
color: red;
font-size: 50px;

Veremos que una de las reglas se ha tachado, eso es porque ha entrado en conflicto con otra que yo he escrito. Por una lado tiene 32px de tamaño predeterminado, pero al yo decirle que sea 50px, la de 32px se anula.

Ahora estaría así:

Desarrolladores Google 7 Namaste Web Málaga

Ya solo nos queda trasladar el código introducido a la ruta que mencione antes DIVI > Personalizador de Temas > CSS adicional

.mobile_menu_bar:before
{color: red;
font-size: 50px;
}

Ya tendríamos hecho los cambios necesarios. Solo tendremos que incluir las líneas que nosotros hayamos introducido.

Como siempre, espero que este post os haya sido de utilidad y en tal caso, comenten. Gracias

Share This
A %d blogueros les gusta esto: