Tras los logros de primer día ya tenemos una parte vista. Lo más importante es la barra inferior en las que nos aparecen una serie de iconos mediante los que podremos gestionar la mayoría de secciones y partes del nuevo proyecto.
En el segundo día vamos a:
- Crear una nueva página llamada test
- Crear un Menú de Navegación
- Empezar a usar los widgets mediante la inserción de texto
Crear una nueva página llamada test
Esta tárea es demasiado sencilla. Solo hay que darle a Add page y rellenar los campos correspondientes:
Para poder ver las páginas creadas o movernos entre ellas desplegamos el menú de la parte izquierda «pages» y haciendo doble click podremos acceder a las páginas.
Crear un Menú de Navegación
Para ello en primer lugar insertamos el menú haciendo click sobre el símbolo + de la barra inferior y arrastramos el widget menú debajo de la cabecera. Posteriormente volvemos a desplegar el menú «Pages» y arrastramos home y test.
Cómo vereís no hay ningún tipo de estilos. Para dárselo, modificaremos el archivo apps/front/config/view.yml con el siguiente código:
# apps/front/config/view.yml
default:
http_metas:
content-type: text/html
stylesheets:
- layout
- typography
- navigation
javascripts: # we don't need any JS right now
has_layout: true
layout: layout
Como podéis observar lo único que hemos hecho ha sido añadir una hoja de estilo más,navigation.css.
Navigation css:
div.main_menu ul {
font: bold 16px/40px "trebuchet MS", Arial, Tahoma, Sans-serif;
list-style: none;
margin:0;
padding: 0 0 0 20px;
height: 40px;
background: #81C524 url(../images/menu.jpg) no-repeat;
}
div.main_menu ul li {
display: inline;
}
div.main_menu ul li .link {
display: block;
float: left;
padding: 0 12px;
color: #fff;
text-decoration: none;
background: url(../images/sep.jpg) no-repeat 100% 100%;
}
div.main_menu ul li a:hover {
color: #3b5e0b;
}
div.main_menu ul li.dm_current .link {
color: #3b5e0b;
}
.navigation_bread_crumb li, .pager li {
display: inline;
margin: 0 0.5em;
}
.pager {
text-align: center;
font-weight: bold;
}
.pager li.current .link {
font-size: 120%;
color: #666;
}
El archivo ha de ir alojado dentro de la carpeta del theme, dentro de css (www/themCoolWater/css/).
Ahora ya tenemos nuestro menú superior:
Usar Inserción de texto
Igual que en punto anterior vamos a darle al icono + de la parte inferior. Añadimos el widget de texto a la parte central de la página y automáticamente se nos arbirá la siguiente pantalla
Volvemos a modificar el archivo view.yml anterior incluyendo una nueva css:
# apps/front/config/view.yml
default:
http_metas:
content-type: text/html
stylesheets:
- layout
- typography
- navigation
- markdown
javascripts: # we don't need any JS right now
has_layout: true
layout: layout
Y creamos el archivo markdown.css en la carpeta www/themeCoolWater/css.
markdown.css:
.markdown h2,
.text_title {
font-size: 170%;
color: #88ac0b;
font-weight: normal;
}
.markdown h3 {
color:#666666;
font-size:155%;
}
.markdown h4 {
color:#666666;
font-size:125%;
}
.markdown li {
list-style-image: url(../images/bullet.gif);
list-style-position: inside;
}
.markdown ul, .markdown ol {
margin: 5px 15px;
padding: 0 25px;
}
.text_image {
float: left;
margin: 0 1em 0.5em 0;
background: #fff;
border: 1px solid #E5E5E5;
padding: 7px;
}
/* roundbox text styles */
.roundbox .dm_text {
background: #fff;
border: 10px solid #A2E256;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
padding: 15px;
}
.roundbox .text_title {
font-size: 190%;
text-align: center;
text-transform: uppercase;
color: #88AC0B;
margin: 0 0 15px 0;
}
.roundbox .text_image {
float: right;
margin: 0;
padding: 0;
border: none;
}
.roundbox .text_image img {
border: 1px solid #88AC0B;
}
.roundbox .markdown h3 {
color: #88AC0B;
border-bottom: 1px solid #88AC0B;
}
Esta modificación no es para incluir mejoras en la parte vista. Se trata de una especie de motor que automáticamente genera links externos, listas… podéis ver su uso aquí.
Volvemos a abrir el widget de texto (para abrir el widget solo debeís clicar sobre wl texto widget de la zona) e introducimos el siguiente texto:
###Morbi fringilla
Proin nec risus ac nisi interdum faucibus. **Maecenas fringilla**.
#### luctus diam
Suspendisse pellentesque luctus diam. [Diem](http://diem.iliaz.com "Diem") fusce sem lorem, convallis ut, dictum at, blandit eu, erat; Etiam et **nulla convallis** risus adipiscing consectetur. *Morbi velit massa*, dapibus at, pharetra at, auctor ornare, risus.
### Donec lorem mi
Commodo ipsum **suspendisse volutpat** congue massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec lorem mi fermentum at :
* Ut semsddper elisat sed nullateli
* Us ac nisi interdum fau
* Erdum fau utilotieu
* Betagor chaligonatu
#### enim nisl
Nunc lobortis, nulla et auctor ultricies, enim nisl *venenatis turpis*, quis pharetra lectus sapien fermentum mauris. Aliquam erat volutpat. Quisque laoreet nibh et magna. Praesent eros. Proin nec risus ac nisi interdum faucibus. **Maecenas fringilla**.
El resultado es un texto formateado 😉
Así acaba este segundo día. Espero que os sirva igual que el primero. Para ampliar la información seguid el enlace o continuad con los widgets.
Publicidad
Deja una contestación