Soporte » Diseño – Temas y plantillas » Aplicar mi CSS después del padre

  • Resuelto gairhald

    (@gairhald)


    Buenas,
    estoy montando una web en wordpress y pese a no haberlo hecho nunca, lo estoy haciendo bastante bien la verdad. Se programar y he hecho webs en la antiguedad con HTML a pelo y con boostrap después por lo que esto de wordpress no es complicado del todo, pero tengo problemas a la hora de aplicar mis estilos.

    Tengo un wordpress y me he creado un tema hijo con su style.css y su functions.php, a priori funciona porque lo que aplico en mi style, se aplica, pero por ejemplo quiero poner una IMAGEN dentro de un circulo y uso esto:

    .circular-image {
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        -o-border-radius: 50%;
    }

    y la etiqueta en la pagina es esta:

    <div class="rouned-box">
    <img class="circular-image" width="1024" height="1024" src="foto.jpg" sizes="(max-width: 1024px) 100vw, 1024px">
    <p>&nbsp;</p>
    <figcaption><h3 style="text-align: center;"><span style="color: #707265;">Asesoria</span></h3>
    <p style="text-align: center;">texto a poner debajo</p>
    </div>

    Decir que ademas lo que hago es RECUADRAR la imagen y el texto y esto si funciona, llamando a esta parte:

    .rouned-box {
    margin:0 0 25px;
    overflow:hidden;
    padding:20px;
    /*background-color:#6BD5F1;*/
    	border:1px solid ;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -o-border-radius: 10px;
    }

    Pero, lo que no me hace es ponerme la foto en un circulo…. SI depuro la WEB, veo que esta aplicando la parte de IMAGEN del tema padre…

    .elementor img {
        height: auto;
        max-width: 100%;
        border: none;
        -webkit-border-radius: 0;
        border-radius: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    Concretamente el -webkit-border-radius: 0; y si lo descomento en la depuración del chrome, si me aplica el de mi estilo y pone la foto en un circulo… Lo que no es es porque PREVALECE el etilo del TEMA PADRE y no el del TEMA hijo…. alguién sabe porque? muchas gracias

    saludos

Viendo 8 respuestas - de la 1 a la 8 (de un total de 8)
  • Moderador LGrusin

    (@lgrusin)

    Si cargas los estilos del tema hijo debe tomarlos. Todo depende de si has cargado correctamente el style.css de uno o del otro.

    Consulta
    child-themes

    Pero es que es lo que justamente hago, en mi functions.php acabo de pegar lo que aparece en el enlace que me has pasado

    <?php
    // ./wp-content/themes/child_extension/functions.php
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    function my_theme_enqueue_styles() {
     
        $parent_style = 'parent-style';
     
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/style.css',
            array( $parent_style ),
            wp_get_theme()->get('Version')
        );
    }

    Tal cual, pero sigue obviando mi estilo, y aplica el general… he de modificar algo de lo que pongo en el functions.php?? he de poner en algun lugar la ruta de mi hoja css o algo? es que no me queda claro..
    Si por ejemplo en mi style.css pongo que el fondo sea rojo, pero en el style.css del PADRE pongo que sea azul, hace caso al del padre, por lo que el functions.php no esta funcionando….es lo que no se acabar de configurar, muchas gracias

    saludos

    Moderador LGrusin

    (@lgrusin)

    parent-style se refiere a tu tema padre, te lo explica en el ejemplo, es decir, si fuese twentytwenty tendrías que sustituir
    $parent_style = 'parent-style';
    por
    $parent_style = 'twentytwenty-style';
    Si tienes dudas mira en el functions.php del tema padre en la parte que carga los estilos.

    Comprueba que sea eso lo que ocurre. El código tal como está carga los estilos del tema hijo después de los del tema padre, de manera que prevalecen los del hijo.

    Puede que sea porque el ESTILO que me esta pisando el MIO no viene del wp-content/themes/extension/style.css del padre, sino del wp-content/plugins/elementor/assets/css/frontend.min.css puede que sea por esto??

    pq cuando debugo veo que me aplica este estilo, que esta en donde he indicado wp-content/plugins/elementor/assets/css/frontend.min.css

    .elementor img 
    {
    height: auto;
        max-width: 100%;
        border: none;
        -webkit-border-radius: 0;
        border-radius: 0;
        webkit-box-shadow: none;
        box-shadow: none;

    Si desmarco estos dos elementos

        border-radius: 0;
        webkit-box-shadow: none;

    Entonces si aplica mi style.css y redondea la imagen.

    La parte del functions.php esta correcta porque he aplicado el mismo cambio en mi style.css y en el del padre, cambiando el color y prevale el mio, asi que creo que tiene que ser esta parte,no??

    Pero segun he leido en el link que me has pasado, se supone que los CSS estan vinculados, pero ese al estar en la parte de plugins….

    • Esta respuesta fue modificada hace 3 semanas, 2 días por gairhald.
    • Esta respuesta fue modificada hace 3 semanas, 2 días por gairhald.
    Moderador LGrusin

    (@lgrusin)

    Lógicamente si los estilos los modifica un plugin no vas a poderlos cambiar desde el style.css del tema. Lo suyo es hacerlo desde Elementor o cargar los estilos desde el menú Apariencia – Personalizar – CSS adicional.

    ahhh y como hago eso? si me voy a la parte de Apariencia – Personalizar – CSS Adicional y pongo el CSS que redondea la imagen:

    .circular-image {
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        -o-border-radius: 50%;
    }

    y lo guardo, cuando debugo, me dice que la imagen aplica mi CSS el circuar-image pero prevale la parte del plugin :/

    Acaba siendo desquiciante esto jajaja

    gracias por la ayuda a todo esto

    Moderador LGrusin

    (@lgrusin)

    Prueba con !important al final de cada elemento que desees modificar.
    border-radius: 50% !important;

    De todas formas sigo diciendo que eso se tiene que poder desde Elementor, que para eso está.

    No parece que tenga mucho sentido usar un Page Builder si después tienes que andar retocando estilos.

    SIIII con el !important; si me lo aplica!! muchas gracias

    En parte tienes razon, que es absurdo andar modificando el codigo si tengo un page builder, pero como uso una plantilla free, no tengo todas las opciones y muchas veces para hacer las cosas, se hacerlas mejor directamente por codigo que no con el page builder la verdad… por eso ando con las dos cosas….empiezo con el page builder pero luego acabo modificnado por codigo jeje

    Muchas gracias por la ayuda!

Viendo 8 respuestas - de la 1 a la 8 (de un total de 8)
  • Debes estar registrado para responder a este debate.