Engadir follas de estilo CSS a Drupal 8

drupal_8

 

Procedo a explicar o procedemento para engadir CSS en Drupal 8 co tema bootstrap, pero entendo que se fai de maneira análoga con calquera outro tema:

Accedemos á carpeta do tema, neste caso bootstrap

cd /var/www/html/drupal/web/themes/bootstrap

Editamos o seguinte fichiero:

nano bootstrap.info.yml

Na sección libraries, engadimos o nome da nosa librería personalizada, que no paso seguinte editaremos (bootstrap.libraries.yml). No meu caso engado a librería bootstrap/martin

libraries:
  - 'bootstrap/theme'
  -  bootstrap/martin

Editamos seguidamente o ficheiro das librerías:

nano bootstrap.libraries.yml

E creamos unha sección ao final do ficheiro. No meu caso chameille martin

martin:
  version: VERSION
  css:
    base:
       css/base/atio.css: {}


E por último teño que crear o ficheiro atio.css en ruta /drupal/themes/bootstrap/css/base/atio.css. E neste css engado as regras CSS desexadas.

Pero, falta un paso importante. Deberemos de ir a Configuración. Neste apartado, e concretamente en Rendemento debemo de valeirar a caché, para que se cargue o novo ficheiro CSS

CSS NUN DRUPAL MULTISITE

No caso dun Drupal multisite, antes de nada deberemos de facer unha copia do tema no site correspondente

cd /var/www/html/drupal/web/themes/

cp -rp bootstrap /var/www/html/drupal/sites/blog/themes

E tal e como expliquei desde o principio, seguir os mesmos pasos, pero iso si, coa nova ruta específica para o site correspondente, neste caso blog (/var/www/html/drupal/sites/blog/themes)

CSS EXTERNO

Se desexamos ter un ficheiro CSS externo, que nos poida servir para varios sitios con Drupal, cambiamos na librería bootstrap.libraries.yml

martin:
  version: VERSION
  css:
    base:
      https://atio.es/pub/blog_atio.css: { type: external, minified: true}

 

 

Termo

Converter un Drupal nun multisite

1. Non noso proveedor de dominio, creamos o subdomino que apunte á IP do noso hosting. No meu caso creo un subdominio chamado linux que apunta á IP

domion

 

2. Creamos unha base de datos específica para o drupal que formará parte do subdominio. No meu caso tamén o chamo linux

database

 

3. Creamos un cartafol  dentro da carpeta /drupal/sites. Dentro do mesmo creamos a súa vez dentro de sites as carpetas files, modules, themes, tmp

cd  ....drupal/sites/linux

mkdir files modules themes tmp

A súa vez dentro de files, debemos de crear o cartafol translations

cd files

mkdir translations

Dámoslle premisos para poder escribir no cartafol files

cd ..

chown -R 777 files

4.Copiamos da carpeta /www/drupal/sites/default, os ficheiros settings.php e default.services.yml na carpeta do novo sitio creado. No caso de default.services.yml cambiámoslle o nome por services.yml no novo cartafol.

cd ~/www/drupal/sites/default

cp settings.php ../linux

cp default.services.yml ../linux/services.yml

Modificamos settings.php, engando:

$databases['default']['default'] = array (
  'database' => 'linux',
  'username' => 'usuario',
  'password' => 'contrasinal',
  'prefix' => '',
  'host' => 'localhost',
  'port' => '3306',
  'namespace' => 'Drupal\\Core\\Database\\Driver\\mysql',
  'driver' => 'mysql',
);

5. Dentro de /www/drupal/sites hai un ficheiro chamado example.sites.php. Renomeámolo por sites.php

cd ~/www/drupal/sites/

mv example.sites.php sites.php

Modificamos o fichieros sites.php, engandindo o nome dos subdominios

$sites = array(
      'linux.atio.es' => 'linux',
      'rdp.atio.es' => 'rdp',
      'blog.atio.es' => 'blog',
);

7. Accedemos ao subdomino e procedemos coa instalación de Drupal

novositio

8. Despois de instalar o Drupal, deberemos de retirar o permiso de escritura do ficheiro settings.php situado dentro do cartafol linux (neste caso en concreto)

 

Termo

Acelerar Drupal

Podemos acelerar un pouco Drupal empregando o módulo memcache. Antes de nada debemos de instalar o módulo memcached de php

apt install php-memcached (para php versión 7)

apt install php5-memcached (para php versión 5)

Reiniciamos o servizo Apache2

systemctl restart apache2

En Drupal engadimos o módulo memcache:

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

 

Termo

Sobreescribir regras de estilo CSS en Drupal 6. Engadir cor nos bloques do tema 0Point

En moitas ocasións os temas dos que dispoñemos en Drupal poden resultar un tanto serios. Para algunha páxina ou blog non se axustan, xa que procuramos dar unha imaxe máis viva e alegre. Velaquí temos un exemplo:

Cra os Remuiños: http://www.edu.xunta.gal/centros/craremuinos/

IES Ramón Caamaño: http://www.edu.xunta.gal/centros/iesramoncaamano/

 

cra_web

 

ies

O proceso para a configuración dunha páxina é o seguinte:

1. Crear unha carpeta para colocar os códigos CSS que sobreescriban os propios de Drupal. Para isto debemos de activar o módulo IMCE Mkdir

Indo ao apartado "a miña conta" -> xestor de ficheiros, e facemos un clic en engadir/editar imaxe e seguidamente en examinar. No explorador de ficheiros debemos de pinchar en Directory

directory

E creamos o cartafol chamado css. Neste cartafol crearemos un ficheiro de estilos css.
 

folder_css

 

2. Analizamos cales son os nomes identificativos dos bloques, para ir escribindo o código no fichero css que podemos chamar style.css, por exemplo

Imaxinemos que na nosa web temos un bloque como o seguinte:

bloque_cra

Xa temos o bloque coa información necesaria, o único que queremos é mudar a cor de fondo e quitarlle o borde que o tema 0Point de Drupal lle engade por defecto. Para iso, premendo co botón dereito do rato sobre o cadro e seguidamente en "Inspeccionar elemento"

inpec

Aparece no borde inferior o código da páxina web. Aparece un dos elementos que forma parte do bloque en cor azul. Pero debemos de procurar o div raiz no cal están tódolos elementos do bloque, tan só temos que recorrer o código cara arriba, ata atopar a etiqueta div id="block-block-xx", onde xx é un número

codigo

 

Pois esta etiqueta será a que teñamos que configurar (tamén podemos configurar por class, pero vexamos unha maneira sinxela).

3. Creamos co editor de notas (mousepad, gedit, leafpad, etc), un ficheiro que chamamos style.css. E engadimos o seguinte contido:

/*contacto*/
#block-block-22 {
    border: 0px;
    background: #66b8dd;

  }

Onde:

/*contacto*/ é un comentario que nos sirve para identificar a que bloque nos estamos referindo

#block-block-22, é o id do bloque, que procuramos no paso anterior (id="block-block-22"

border: 0px;, no caso de non querer engadirlle un borde ao bloque

background: #66b8dd; , que é unha cor de fondo azulada

Obviamente repetimos os pasos anteriores cos diferentes bloques que queremos personalizar.

4. Subimos o ficheiro ao cartafol css que creamos no apartado nº1. Subímolo desde a miña conta -> xestor de ficheiros.

mousepad

 

style_subido

 

Pinchando en style.css aparece na parte inferior o nome style.css (ver imaxe), e ao pinchar neste segundo style.css,  ábrese a fiestra do editor de imaxes, desde o cal podemos copiar a url na que se atopa o ficheiro style.css

segundo_sty

 

url_copiar

Neste exemplo trátase da seguinte url:     /centros/iesramoncaamano/system/files/css/style.css

5. Seguidamente dirixímonos á zona de administración ->Construción da páxina -> Bloques. Prememos en Engadir bloque

engadir_bloque

Ao bloque chamarémoslle css_code, por exemplo. Non lle poñemos ningún título. Prememos en Formato de entrada e escollemos PHP code e seguidamente en "Desactivar texto enriquecido", e pegamos o código:

<html>
<head>
<?php
echo '<link href="/centros/iesramoncaamano/system/files/css/style.css" rel="stylesheet">';
?>
</head>
<body>
</body>
</html>

Deberemos de modificar o enderezo que aparece na etiqueta link href=  polo enderezo do ficheiro css do teu caso. Gardamos o bloque.

Finalmente colocamos o bloque css_code recén deseñado na parte superior da Cabeceira:

cabeceira

Deste xeito, cada vez que un usuario abre a páxina, o bloque css_code chamará ao ficheiro style.css, que sobreescribirá os estilos de Drupal. O resultado é o seguinte:

contacto

 

Termo

Instalación de Drupal 8 en configuración multisite en Dinahosting

O seguinte titorial describe como instalar un Drupal 8 en modo multisite en Dinahosting. Imaxino que poderá funcionar tamén para otros servidores compartidos

O primeiro que debemos de decidir é se queremos ter unha soa base de datos ou compartir a mesma para todos os sitios do multisite.

  1. Instalamos un drupal 8. Para iso podemos empregar o drush, tal e como expliquei na entrada: http://blog.atio.es/node/8

  1. Unha vez rematada a instalación, debemos de facer un backup da base de datos do drupal a un ficheiro sql. Podemos facelo desde phpMyAdmin, dentro do portal de Dinahosting. Para iso vamos ao apartado de Mysql, abrimos o phpMyAdmin da base de datos empregada e vamos ao apartado exportar.

Teremos un ficheiro que podemos gardalo co nome backup_mysql_drupal.sql

Subimos este ficheiro ao servidor. Por exemplo podemos gardalo na carpeta bin, ou en calquera outra. Para subilo podemos facelo c

on scp, por exemplo:

scp backup_mysql_drupal.sql user@servidor.es:bin

  1. Seguidamente debemos de crear tantas carpetas como sitios queremos ter activos. O máis cómodo é facelo por ssh.

ssh usuario@servidor.es

cd ~/www/drupal/sites

mkdir sitio1 sitio2

Os nomes, deben de corresponder cos que queiramos empregar no subdominio. Se por exemplo no subdominio queremos algo así:

http://xoel.servidor.es

entón a carpeta que creamos dentro do drupal, debería de chámarse xoel

cd ~/www/drupal/sites

mkdir xoel

  1. Aínda que non teño demasiado claro se é necesario, dentro de cada carpeta creada debemos de crear as seguintes:

cd ~/www/drupal/sites/xoel

mkdir files modules themes tmp

  1. Copiamos da carpeta /www/drupal/sites/default, os ficheiros settings.php e default.services.yml na carpeta do novo sitio creado. No caso de default.services.yml cambiámoslle o nome por services.yml no novo cartafol.

cd ~/www/drupal/sites/default

cp settings.php ../xoel

cp default.services.yml ../xoel/services.yml

  1. Dentro de /www/drupal/sites hai un ficheiro chamado example.sites.php. Renomeámolo por sites.php

cd ~/www/drupal/sites/

ms example.sites.php sites.php

  1. Editamos o ficheiro sites.php. Nel engadimos un array dos diferentes sitios que temos no drupal

nano sites.php

E pegamos nel co seguinte contido, imaxinado que crearamos tres sitios: sitio1, sitio2, xoel. Para pegar ou copiar no terminal podemos facelo con Shift+Control+C ou Shift+Control+V

<?php

$sites = array(

      'sitio1.atio.es' => 'sitio1',

      'sitio2.atio.es' => 'sitio2',

    'xoel.atio.es' => 'xoel',

);

Preta moita atención ás comiñas!

Para saír do editor nano, prememos en Control+x e seguidamente en Y para salvar o cambios.

8. Entramos no portal de Dinahosting e vamos ao apartado de dominios. Dentro deste apartado dirixímonos ao subapartado subdominios.

Creamos 3 subdominios que apuntan ao cartafol no cal temos a instalación de Drupal

sitio1.servidor.es  www/drupal

sitio2.servidor.es  www/drupal

xoel.servidor.es  www/drupal

9. Tamén desde o portal de Dinahosting, vamos ao apartado de Mysql e creamos tantas bases de datos como espacios creemos. Debemos de indicar o nome da base de datos, o usuario e contrasinal.

Por exemplo, podemos poñer os seguintes datos:

base de datos: xoel_servidor

utente: user_xoel_servidor

contrasinal: Pass1234

Fixámonos que hai un check xusto embaixo que serve para importar unha base de datos xa existente.

10. Volvemos á carpeta xoel (para o resto de carpetas deberíanos de facer o mesmo):

cd ~/www/drupal/sites/xoel

dámoslle permisos de escritura:

chmod 700 settings.php

e editamos settings.php

nano settings.php

Desprazámonos ata o final do ficheiro ata que atopamos o apartado no cal se configura a base de datos. Engadimos os datos do apartado 9

$databases['default']['default'] = array (

 'database' => 'xoel_servidor',

 'username' => 'user_xoel_servidor',

 'password' => 'Pass1234',

 'prefix' => '',

 'host' => 'localhost',

 'port' => '3306',

 'namespace' => 'Drupal\\Core\\Database\\Driver\\mysql',

 'driver' => 'mysql',

);

11. Debemos de instalar o módulo Devel. Se non o temos instalado o Drupal liase cos enderezos, por mor da caché. Por exemplos se vamos a xoel.servidor.es/user/login, danos erro, decindo que non atopa o enderezo.

Para instalalo entramos co seguinte enderezo:

http://servidor.es/drupal

O enderezo do módulo devel é:

https://ftp.drupal.org/files/projects/devel-8.x-1.0-beta1.tar.gz

Tamén debemos de limpar a caché. Iso facémolo  desde o terminal e empregando o drush

drush cache-rebuild

Termo
Subscribe to Drupal