Creación y diseño de themes en Drupal 7

Explicaremos como funciona un tema en drupal, como editar el css, trabajar con Sass, Compass y diseño responsivo
2.6 (6 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
31 students enrolled
Instructed by Ivan Mejia Design / Web Design
$20
Take This Course
  • Lectures 25
  • Contents Video: 3 hours
  • Skill Level Intermediate Level
  • Languages Spanish
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 8/2014 Spanish

Course Description

Al tomar este curso aprenderas como crear un subtema para drupal y como aplicarle un diseño por medio de CSS. Explicaremos la estructura de un subtema y terminaremos usando Sass y Compass, pero primero empezaremos por aprender como crear un subtema basado en el popular tema Omega 4. Luego explicaremos las opción de la administración dentro del subtema. Despues aplicaremos un diseño con css y finalmente pasaremos todo a Sass.

What are the requirements?

  • Saber CSS y html
  • Tener un conocimiento mínimo de uso de la terminal
  • Un editor de código

What am I going to get from this course?

  • Aprender a usar Omega 4 como tema base
  • Entender la estructura de un tema y un subtema para Drupal 7
  • Crear el diseño de un tema con css, Sass y compass
  • Aplicar estilos a diferentes partes de un sitio web
  • Saber las bases de un diseño responsivo en un subtema

What is the target audience?

  • Diseñador web
  • Frontend developer
  • Site builder

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Para iniciar
03:44

En este video se explica que programas y herramientas usaremos para trabajar.

00:32

Presentación del creador del curso.

02:33

Navegando los archivos de drupal 7 para saber donde se colocara el nuevo subtheme con el que trabajaremos.

11:45

En este video explico que es un subtema y como crearlo en drush para usarlo con el tema Omega 4.

08:00

Revisamos las opciones de administración que existen en el subtema que creamos,

08:44

En este video se muestra el diseño que crearemos y se explica como están ordenados algunos archivos y carpetas del subtema.

6 questions

Preguntas para saber que tan bien esta la primera parte del curso

Section 2: Armando el subtema
08:57

En este video empezamos a escribir código CSS

09:31

Respondiendo esta pregunta mostramos donde están y como funcionan.

06:43

En esta clase acomodamos un poco las regiones para que el sitio empiece a verse como un sitio web.

07:43

Es tiempo de terminar el diseño de la cabeza y de poner un ancho fijo.

05:49

Armando el diseño de la area de contenido

07:53

Seguimos aplicando el diseño a el area de contenido

04:21

Ahora le toca al menú tomar forma, en esta primera parte empezamos.

06:34

En esta segunda parte terminamos de darle forma al menú principal

05:59

Estamos casi terminando de aplicar el diseño, ahora vamos con los bloques.

05:43

Terminamos de aplicar el diseño a los bloques

06:58

Toca dar estilo a la parte de abajo del diseño, casi terminamos!

06:06

En esta segunda parte terminamos de darle estilo al pie de la pagina.

6 questions

Algunas preguntas para saber más sobre que tan sencillo ha sido armar el subtema.

Section 3: Trabajando con Sass
09:16

En este video se muestra como instalar, en este caso en linux. Esta instalación varia en cada sistema operativo

08:09

Explicando la estructura de la carpeta Sass en nuestro subtema.

10:43

Segunda parte de la explicación de la estructura de la carpeta Sass

05:06

Ahora toca convertir un poco del código CSS a Sass para ver las diferencias.

Section 4: Diseño responsivo
01:05

Un brevisimo video para instalar singularity. Se agregan ligas para saber más de singularity y de gemas.

09:55

En este video empezamos a ver como aplicar el diseño reponsivo a nuestro código Sass

08:32

Finalizamos la explicación de como aplicar el diseño responsivo a nuestro código Sass.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Ivan Mejia, Diseñador web

Soy un Diseñador web. Me dedico diariamente a desarrollar sitios web que usen directamente los clientes.

Durante más de 7 años he creado sitios web para empresas, instituciones, hoteles y escuelas la mayoría de ellos con la herramienta que veras en este curso. He dado cursos de manera presencial en escuelas y eventos de software libre.

Mis herramientas de trabajo son drupal. html, css y Sass. Me interesa mucho todo lo relacionado a organizar contenidos dentro de los sitios web. También me dedico a participar en eventos de software libre.

Ready to start learning?
Take This Course