Drupal

Centrar texto nun div

A. Nesta primeira opción centramos horizontalmente o contido. Para isto creamos un div con clase contido e ademais de darlle as dimensións de alto e ancho, aplicamoslle un margin 0 auto. Seguidamente engadimos outro div dentro do cal está inserido o texto. Neste segundo div, fillo de contido, aplicamos un display:table-cell e un vertical-align:middle.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Centrar div</title>
    <style>
    .contido{
        margin:0 auto;
        width:300px;
        height:200px;
        background:black;
    }    
    .texto{
        height:200px;
        display:table-cell;
        vertical-align: middle;
    }

    .texto p{
        color:white;
    }
    </style>
</head>
<body>
    <div class="contido">
        <div class="texto">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            Aut quas voluptas culpa ea corporis alias nobis vel, doloribus illo obcaecati.</p>
        </div>
    </div>
</body>
</html>

 

B. Na segunda opción, centramos o div fillo texto empregando a propiedade de CSS transform. Para isto ao div pai configuramos a propiedade de position como relative. O div fillo (texto), configúrase coa propiedade absolute, para desprazalo div fillo o 50% da altura do elemento pai, contido. Seguidamente facemos un transform:translateY(-50%); para subir de novo o 50% da altura do div fillo texto.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Centrar div</title>
    <style>
    .contido{
        margin:0 auto;
        width:300px;
        height:200px;
        background:black;
        position:relative;
    }    
    .texto{
        position:absolute;
        top:50%;
        transform:translateY(-50%);
    }

    .texto p{
        color:white;
    }
    </style>
</head>
<body>
    <div class="contido">
        <div class="texto">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            Aut quas voluptas culpa ea corporis alias nobis vel, doloribus illo obcaecati.</p>
        </div>
    </div>
</body>
</html>

Una práctica máis completa podémola ver no seguinte exemplo, incluso empregando o media query para visualizalo correctamente en dispositivos móbiles.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
   
<style>
        .strong{
            font-weight: bold;
        }  
        .titulo_seccion{
            font-family: Verdana, Geneva, Tahoma, sans-serif, serif;
            font-size:25px;
            font-weight: 100;
            text-align: center;
            color:white;
        }

        .contenido_seccion {
            font-family: Verdana, Geneva, Tahoma, sans-serif, serif;
            text-align: left;
            font-size: 14px;
            color:white;   
        }

        .contenido_seccion a{
            color:black;
            text-decoration:none;
        }
        
        #diseño{
            width:100%;
            height:355px;
            overflow: hidden;
            background:#7d5c7d;
            position:relative;
            
        }

        #diDesarrollo{
            width:50%;
            position:absolute;
            top:50%;
            left:25%;
            transform:translateX(-25%);
            transform:translateY(-50%);
      
        }

        @media  (max-width: 480px) {
            #diseño{
            height:415px;
            position:relative;
            }

            #diDesarrollo{
            width:95%;
            position:absolute;
            top:50%;
            left:2.5%;
            transform:translateX(-2.5%);
            transform:translateY(-50%);
            }
                    
        }    
   
 </style>
</head>
<body>
        <section id="diseño">
                <article id="diDesarrollo">
                    <h3 class="titulo_seccion">Texto centrado</h3>
                    <p class="contenido_seccion">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                         Totam, deserunt officia exercitationem hic accusamus ipsam optio error eum facere
                         magni, et fuga. Fugit incidunt at ipsa beatae eos inventore pariatur tempore rem
                         possimus repellat! <span class="strong">Ipsam debitis dicta</span> voluptatem consequatur? Perspiciatis tempora
                          repellendus vel harum inventore quo ratione deleniti voluptatem ad.</p>
                </article>
    
        </section>
    
</body>
</html>

Engadir unha imaxe na que aparece unha ligazón ao pasar o cursor

 

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            width:200px;
            height:300px;
            margin:50px auto;  
        }

 

        .imaxe{
            width:100%;
            height:100%;
            position:relative;                  
        }

        .imaxe-overlay{
            
            height: 100%;
            width:100%;
            position:absolute;
            top:0;
            left:0;
            background:rgba(255,255,255,0.6);
            visibility: hidden;
            opacity:0;
          
        }
        
        .imaxe .img-info{
            font-family: 'Open Sans', sans-serif;
            position:absolute;
            top:45%;
            display:table-cell;
            width:100%;
            text-align: center;
            visibility: hidden;
            opacity:0;
        }

        .img-info a{
            text-decoration:none;
            color: black;
        }

        .imaxe:hover .imaxe-overlay, .imaxe:hover .img-info {
            visibility: visible;
            opacity:1;
        }
      
 
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="imaxe">
            <img src="https://picsum.photos/200/300" alt="">
            <div class="imaxe-overlay">
                <div class="img-info">
                <h3><a href="#">Imaxe link</a></h3>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

Centrar unha imaxe

Para centrar unha imaxe débemos de configurar o display como block e seguidamente centrala con margin 0 auto;

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
margin:0 auto;
background:yellowgreen;
width:600px;
height: 70vh;
}
 
img{
display:block;
margin:0 auto;
position:relative;
top:50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="container">
<img src="https://picsum.photos/200" alt="">
</div>
</body>
</html>

Centrar un div dentro doutro

Cando maquetamos na web, non debemos de empregas as táboas. As táboas só se empregan para almacenar valores numéricos. A alternativa ás táboas son dos contedores div. Neste caso creo un contedor chamado container e dentro del outro que chamo texto. O primeiro está centrado con respecto á pantalla e o segundo está centrado con respecto ao primeiro tanto vertical como horizontalmente.

 

a. Coa clase flexbox. Moi sinxela. Debemos de asignalle ao contenedor .container as seguintes instrucións:

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .container{
 margin:0 auto;
 background:yellowgreen;
 width:600px;
 height: 70vh;
 display:flex;
 justify-content: center;
 align-items: center;
 }
 
 .texto{
 background:orangered;
 width:400px;
 height: 200px;
 
 }
 </style>
</head>
<body>
 <div class="container">
 <div class="texto">
 </div>
 </div>
</body>
</html>

 

 

b. A segunda forma de facelo pode ser a seguinte. Darémoslle unha posición relative ao contedor texto e seguidamente empregaremos margin:o auto; para centralo horizontalmente e un top:50%; e tranform:translateY(-50%) para centralo verticalmente.


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .container{
 margin:0 auto;
 background:yellowgreen;
 width:600px;
 height: 70vh;
 }
 
 .texto{
 background:orangered;
 position:relative;
 width:400px;
 height: 200px;
 margin:0 auto;
 top:50%;
 transform: translateY(-50%);
 }
 </style>
</head>
<body>
 <div class="container">
 <div class="texto">
 
 </div>
 </div>
 
</body>
</html>

 

 

Crear unha galería de imaxes responsive design en Drupal 6 co tema 0Point

Con seguridade hai moitas maneira de crear unha galería cun conxunto de imaxes coa característicade responsive design, é dicir, que se adapten a distintos tipos de pantalla. Procedo a explicar unha das maneiras:

1. Ir á zona de Administración > Construción da páxina > Plantillas. Pinchamos en configurar na plantilla OPoint que esteamos empregando

2. No apartado Layout width, escollemos a segunda opción_ Fluid width (custom)

3. Agregamos Crear Contido > Páxina, e engadimos un título. Seguidamente pinchamos en Disable Rich Text e pegamos o código e finalmente gardamos, sen pinchar en ningunha outra opción. En canto ao código, dicir que empreguei a clase Grid de css (aínda que tamén se podería facer con flexbox) e para darlle un aspecto máis dinámico engadín unha ligazón de cada imaxe a outra de maior tamaño empregando a súa vez a librería Lightbox. Lembra que debes de ter activo este módulo para que se visualice con este efecto. 

 

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

.box {
  box-sizing: border-box;

}
.wrapper {
  padding: 50px;
  background: #f2f2f2;
   max-width:100%;
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 200px));
   grid-column-gap: 10px;
   grid-row-gap:10px;
   justify-content: space-around;
   
}

.img{
    width:200px;
    height:200px;
    }
</style>
</head>
<body>

    <div class="wrapper">
   <div class="box"><a href="https://atio.es/pub/costamortex/foto1.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto1.jpg"></div>
   <div class="box"><a href="https://atio.es/pub/costamortex/foto2.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto2.jpg"></div>
   <div class="box"><a href="https://atio.es/pub/costamortex/foto3.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto3.jpg"></div>
   <div class="box"><a href="https://atio.es/pub/costamortex/foto4.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto4.jpg"></div>
   <div class="box"><a href="https://atio.es/pub/costamortex/foto5.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto5.jpg"></div>
   <div class="box"><a href="https://atio.es/pub/costamortex/foto6.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto6.jpg"></div>
   

</div>

</body>
</html>

 

E este é o resultado. Podes comprobar se o comportamento é o correcto ao modificar o tamaño da pantalla.

Formación Drupal CRA SANTA COMBA

WEB DO CRA SANTA COMBA

TITORIAIS DRUPAL

1. Engadir unha URL

http://oaoamatematicas.org/

https://drive.google.com/drive/u/0/folders/0Bw8FsVGnN_X3YmlHVFY5bXk0Y1E

2. Procupar unha imaxe libre en Google e publicala en Drupal

 

- Buscamos "Regletas de Cuisenaire"

- Descargamos a imaxe e publicámola na web

   a. A través da URL

   b. Subindo a imaxe ao servidor

3. Youtube

   Resta por descomposición: https://www.youtube.com/watch?v=cmvhANYivVg

4. Pdf

   https://oaoa.atio.es/sites/oaoa/files/inline-images/resta_rocodromo/resta_rocodromo_menor_30.pdf

   <iframe src="https://docs.google.com/viewer?url=https://oaoa.atio.es/sites/oaoa/files/inline-images/resta_rocodromo/resta_rocodromo_menor_30.pdf&embedded=true"  style="width:100%; height:500px;" frameborder="0"></iframe>

5. Vídeo

   a. Descargamos vídeo da web

   Montaxe dun Escornabot. CEIP DE BAIÑAS http://www.edu.xunta.gal/centros/ceipbainas/node/319

   http://www.edu.xunta.gal/centros/ceipbainas/system/files/escornabot.mp4

   Código:

   <div>
   <video width="512" height="240" controls="controls">
   <source src="http://www.edu.xunta.gal/centros/ceipbainas/system/files/escornabot.mp4" type="video/mp4" />
   O teu navegador non soporta este vídeo.
   </video>
   </div>

DIMINUIR O TAMAÑO DUN VÍDEO

6. Lightbox

   Titorial

   http://atio.es/acristina/data/_uploaded/image/abarca/abarca.jpg

https://blog.atio.es/sites/blog/files/inline-images/crastacomba/abarca2.jpg

  

SESIÓN 3

1. Crear unha nova cun texto, elixindo de forma axeitada a taxonomía e termo

https://www.lipsum.com/

a. Crear contido > páxina

b. Crear contido > Páxina portada

Volver a editala, cambiando o título. Borrala nova.

2. Descargar unha imaxe libre, cambiarlle o tamaño a un máximo de 500px de ancho co Gimp

https://unsplash.com/

3.Subir un pdf

a. Descargar este ficheiro pdf: https://oaoa.atio.es/sites/oaoa/files/inline-images/suma_arbol/suma_arbol_nivel_1.pdf

b. Sacar unha captura de imaxe de parte do pdf

c. Subir a imaxe resultado da captura

d. subir o pdf como ficheiro adxunto

e. Enlazar a imaxe co pdf

4. Inserir un vídeo de Youtube. Antonio Fraguas e os seus mestres. I.E.S de Cotobade

https://www.youtube.com/watch?v=HTYrYVjaeIA&feature=share

5. Inserir un vídeo con código html5

a. Descargar o vídeo: http://www.edu.xunta.gal/centros/ceipbainas/system/files/Mu%C3%B1eira%20Global.mp4

b. Crear contido Páxina. Adxuntamos o ficheiro de vídeo. Copiamos a URL e adaptamos o seguinte código.

<div>
<video width="720" height="406" controls="controls">
<source src="http://atio.es/fi/video.mp4" type="video/mp4" />
O teu navegador non soporta este vídeo.
</video>
</div>

6. Redimensionar un conxunto de imaxes por lotes e crear un álbum

a. Descargar o xnconvert e instalalo e configurar o idioma: https://www.xnview.com/en/xnconvert/#downloads

b. Baixar a seguinte carpeta comprimida con imaxes. Descomprimila. Dentro da carpeta creamos unha subcarpeta chamada escaladas, na que introduciremos as fotos coas novas dimensións.

http://www.edu.xunta.gal/centros/zonaceed6/system/files/album_fotos_cra.zip

c. Co XnConvert, abrimos o cartafol no cal teñamos as fotos. En accións, escollemos a de Imaxe > Redimensionar, cun ancho de 300px

d. En saída, escollemos a subcarpeta escaladas e Nome de Ficheiro, deixamolo así {Filename}_r

e. Clic en convert

f. Editar o seguinte código html, modificando o src das imaxes

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <style>
        #galeria_cra{
            box-sizing: border-box;
            width:100%;
            padding: 10px;
            background:#343C44;
            border-radius: 7px;
            overflow:hidden;
        }
        #galeria_cra .filagaleria{
            display:flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        #galeria_cra .caixa{
            display:flex;
            position: relative;
            width:300px;
            height: auto;
            margin-top:10px;
        }
    </style>
</head>
<body>
        <section id="galeria_cra">
                 
                    <div class="filagaleria">
                        <div class="caixa"> <img src="https://picsum.photos/300/200?random=1" alt=""></div>
                        <div class="caixa"> <img src="https://picsum.photos/300/200?random=2" alt=""></div>  
                        <div class="caixa"> <img src="https://picsum.photos/300/200?random=3" alt=""></div>  
                        <div class="caixa"> <img src="https://picsum.photos/300/200?random=4" alt=""></div>  
                        <div class="caixa"> <img src="https://picsum.photos/300/200?random=5" alt=""></div>  
                    </div>
        </section>  
</body>
</html>

f. Crear contido páxina. En formato de entrada escollemos PHP code e seguidamente clic en Desactivar texto enriquecido. Pegamos o código html modificado e gardar.

 

7. Cambiar a resolución de un vídeo con Handbrake

a. Descargar o handbrake: https://handbrake.fr/

b. Instalar ffmulticonverter


su root

apt update

apt install ffmulticonverter

b. Descargamos o ficheiro de alta resolución: https://drive.google.com/file/d/1uE4k7ZzwJ2whNgaWG9vRkNYEPekCXxBf/view

c. Cambiamos a resolución, seguindo este tutorial: https://blog.atio.es/node/125

     Dimensións finais: 512 x 288

     Bitrate: 600 kbps

     Audio bitrate:120

d. Publicámolo

 

Engadir unha cor de fondo a un texto en Drupal 6

En ocasións desexamos resaltar un texto. Para iso podemos engadir unha cor de fondo a esa nova en concreto. Podemos empregar os seguintes métodos para a súa edición. Un dos datos que hai que engadir é o código da cor que desexamos engadir de fondo. Unha maneira de consultar eses códigos e a través da páxina https://picular.co

OPCIÓN Nº1

Coa axuda das táboas

Inserir táboa → avanzado → Cor de fondo

taboa0.png

taboa1.png

taboa2.png

OPCIÓN Nº2

Coa axuda de código CSS (máis elegante). Creamos un novo contido tipo páxina. Clic en disable rich text:

disable.png

E pegas un código html similar ao seguinte, pero modificando o texto que aparece entre as etiquetas <p> ---</p>, polo desexado. É interesante engadir un padding, para que a nova manteña un marxe en todo o contorno.

 <!doctype html>
<html>
<head>
   <style type="text/css">

      #texto_cor_fondo {
          padding: 10px;
          background-color: #d8da3d; }
  </style>
</head>

<body>

<div id="texto_cor_fondo">
<p>


¿Qué es Lorem Ipsum?

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto... 

</p>
</div>
</body>
</html>

codigo.png

OPCIÓN Nº3

No caso de que traballemos cun ficheiro css nunha carpeta pública, eliminaremos do código html anterior a parte correspondente a <style> --- </style>, que debe de estar reflexado no ficheiro css da carpeta pública. Se queremos empregar ese estilo de fondo en máis dun sitio, en vez de escoller un id, debemos de definir unha clase, coa etiqueta class. Quedaría do seguinte xeito:

No ficheiro css:

 .texto_cor_fondo {

    padding:10px;
    background-color: #d8da3d;

  }

En cada entrada creanda engadiremos código html, dispoñendo entre a etiqueta <p> ---</p> o texto que consideremos

<!doctype html>
<html>
<head>
</head>

<body>

<div class="texto_cor_fondo">
<p>

¿Qué es Lorem Ipsum?

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

</p>
</div>
</body>
</html>

resultado.png

 

 

Diminuir o peso dun vídeo e publicalo en Drupal

Aínda que existen moitas maneiras de baixar o peso, é dicir os megabytes dun vídeo, deixo por aquí o método que emprego eu.

1. HandBrake

En Source escollemos o vídeo que desexamos baixarlle o tamaño

source.png

Na pestana Summary indícanos as dimensión que ten o vídeo. Neste exemplo ten 1920*1080 px. Pero ocupa 160 mb. Deberemos de baixarlle o tamaño, basicamente para non arruinarlle o ancho ancho de banda aos usuario que queiran visualizalo.

Pinchamos en Picture

picture.png

En Storage Geometry, baixamoslle o tamaño ata o desexado. Con un width de 512 mantén unha visualización moi boa. Ao ir baixando o ancho, automaticamente xa adapta o alto (height). Tamén deberemos definir o nome do ficheiro e o cartafol de saída. Fixámonos que o Handbrake cambia a extensión a m4v.

novasdimensions.png

Finalmente clic en Start, para que faga a conversión de tamaño. O novo tamaño do vídeo é de 33.4 Mb. Procedemos agora co ffmulticonverter a convertilo nun ficheiro mp4

2. ffmulticonverter

Empregaremos este software para convertir a extensión m4v a mp4. Se non o temos instalado, podémolo facer coa seguinte instrución:

su root

apt install ffmulticonverter

Engadimos o ficheiro que nos gardou o Handbrake. Clic en Engadir. En converter, escollemos a extensión mp4. Eliximos o cartafol de saída. Finalmente clic en Converter.

ffmulti.png

Con este software poderíamos evitar empregar o Handbrake, pois pinchado en Máis podemos observar que podemos cambiarlle o tamaño directamente. Sen embargo entendo que é máis sinxelo co Handbrake.

O tamaño final deste vídeo exemplo é de 13.2 Mb, tamaño máis razonable.

3. Publicalo en Drupal

Creamos un novo contido, tipo páxina.

paxina.png

Engadimos o título da nova. Seguindamente en ficheiros adxuntos, subimos ao servidor o vídeo

ficheirosadxuntos.png

Desmarcamos o check de Lista. Se nos fixamos aparece debaixo do cadro o enderezo URL no cal está publicado o vídeo. Neste exemplo é o seguinte: http://www.edu.xunta.gal/centros/ceiplabartapose/system/files/AS%C3%8D%20SE%20FIXO_1.mp4

 

Subimos novamente e prememos en "Desactivar texto enriquecido"

texto_enriquecido.png

E pegamos o seguinte código, pero en src debemos de inserir a url na cal se atopa o vídeo encomillado

<div>
<video width="512" height="288" controls="controls">
<source src="http://www.edu.xunta.gal/centros/ceiplabartapose/system/files/AS%C3%8D%20SE%20FIXO_1.mp4" type="video/mp4" />
O teu navegador non soporta este vídeo.
</video>
</div>

Finalmente clic en Gardar. E este sería o resultado:

resultado_video.png

Outro software alternativo para diminir o tamaño dun vídeo: DEVEDE

apt install devede

Menú adaptable ao móbil en Drupal 8

mmenu.jpeg

Estes foron os pasos que dei para configurar o menú do paxina para que fose adaptable ao móbil. Como sempre, con seguridade de pode facer doutros xeitos, esta é unha máis:

1. Instalación do mógulo responsive_menu

https://www.drupal.org/project/responsive_menu

2. Instalación e activación dos módulos context e context UI

https://www.drupal.org/project/context

3. Instalación da librería mmenu

cd /var/www/html/tic/drupal/libraries
wget https://api.github.com/repos/FrDH/jQuery.mmenu/zipball
unzip zipball
mv mv FrDH-jQuery.mmenu-e5df2d3 mmenu

4. Instalación da librería hammerjs

wget https://api.github.com/repos/hammerjs/hammer.js/zipball
unzip zipball
mv hammerjs-hammer.js-563b5b1 hammerjs

5. Instalación da librería superfish

wget https://api.github.com/repos/joeldbirch/superfish/zipball
unzip
mv joeldbirch-superfish-442820e superfish

6. Activar responsive_menu

7. Comprobar que en Informes -> Informe de estado temos mmenu, hammersjs e superfish instalados.

8. No apartado de adminsitracion / responsive design, e dentro del en OFF CANVAS
Escribimos main e non Main Navigation, xa que main é o nome que lle da a máquina. Pódese observar na seguinte imaxe:

name-main.png

Onde pon marchine name:main

off-canvas.png

9. En Primary menu engadimos o bloque Responsive menu mobile icon

10. En unha páxina monoligüe, podemos activar o bloque horizontal-menu. Sen embargo, nunha páxina plurilingüe non actializa o menú cada vez que cambiamos de idioma, ao idioma desexado. Neste caso, non activamos o bloque horizontal menu, e introducimos o bloque Main Navigation. Pero a súa vez debemos de configurar con CSS a non visibilidade deste bloque no dispositivos máis pequenos, como nunha tablet ou ben nun smartphone. Engadiremos o seguinte código css:

@media screen and (min-width: 0px) and (max-width: 851px) {
 #block-mainnavigation { display: none; }  /* show it on small screens */
}

E tamén para ver a letras en cor branco

#block-mainnavigation ul li a
{ color: white; }

Non debemos de esquecer que ás veces, ao modificar o código css, debemos de valeirar a caché  para que se poida visualizar correctamente no móbil:

/admin/config/development/performance

valeirar.png

Subscribe to Drupal