Tema de Revista

Uso

Este es un tema sigma9 creado por EtinjatEtinjat, inspirado por el Tema Periódico y el Tema Semestral de hoah2333hoah2333. Y el logo de la revista en la barra lateral está hecho por KcorenaKcorena.

Para utilizar este tema, pon la siguiente sintaxis en cualquier página:

[[include theme:magazine]]

Opciones Personalizables:

[[include theme:magazine
|collapsible-sidebar=---] Para utilizar la barra lateral plegable.
|content-width= Cambiar el ancho del contenido principal.
|header-title= 'textos' Cambia el gram título del encabezado1.
|header-subtitle= 'textos' Cambia el subtítulo del encabezado pequeño
|mob-title= 'textos' Cambia el título del encabezado cuando está en pantalla estrecha (como la del móvil).
|mob-subtitle= 'textos' Subtítulo de encabezado cuando se encuentra en pantalla estrecha.
|logo-image=url('tuenlace') Logo en encabezado.
|logo-image-mob=url('tuenlace') Logo en encabezado en pantalla estrecha.
|logo-sidebar=url('tuenlace') Logo en barra lateral.
|sidebar-content='textos' Texto debajo del logo en barra lateral.
|page-title= none Quita el título de página
|title-underlines = none Quita subrayado del título de página
|title-orn-content= '★' El ornamento debajo de la página de título
|title-orn-size= 1.5rem
|title-orn-color= #542429
|title-orn-width= 2rem
]]

Añadir imagen de fondo

[[module css]]
#container {
background: url('ENLACE DE TU IMAGEN') center 0 repeat;
}

#content-wrap #side-bar::before,
#content-wrap #side-bar {
background-color: transparent ;
}

[[/module]]

  • PD:Para muchos se utiliza la función calc, por lo que si deseas cambiar los valores de los elementos, por favor, modifica las variables en :root y utiliza rem como la unidad.



Ejemplos

Primer Título

Segundo Título

Tercer Título

Cuarto Título

Quinto Título
Sexto Título

Los títulos se pueden crear poniendo entre uno y seis más "+" al principio de la línea.

Puntuación:

Puntuación: +5+x

Puntuación con Módulo de Crédito:

Puntuación: +5+x

negrita | cursiva | subrayado | tachado | monoespaciado superíndicesubíndice


Bloque de imagen

LOGO_magazine.svg

Bloque de Imagen Estándar

Envuelve los siguientes códigos div en
el exterior del bloque de imagen estándar
para utilizar los estilos especiales de abajo:

[[div class="mz-img-wrap " ]]
[[include component:image-block
name=
|width=
|caption=
|align=
]]
[[/div]]


IMG-vintage-dragon.png

Image
class="mz-img-wrap"

IMG-vintage-dragon.png

Image
class="mz-img-wrap img-frame"

IMG-vintage-dragon.png

Image
class="mz-img-wrap img-b3d"

IMG-vintage-dragon.png

Image
class="mz-img-wrap img-border"

IMG-vintage-dragon.png

Image
class="mz-img-wrap img-border img-frame"


Regla horizontal

Una regla horizontal puede crearse con 5 guiones "-" y se extiende a lo largo de toda la página si no está colocada dentro de nada (por ejemplo, un blockquote). Las líneas que separan las secciones de este documento son reglas horizontales.




Regla horizontal personalizada



Envuelve un bloque div, y añade un nombre de clase

  • Reduce el tamaño de las rhs':hr-contract
  • Cambias las rhs a sólidas :hr-solid
  • Para que sean de puntos:hr-dotted

[[div class="mz-hr hr-contract hr-solid" ]]

------

[[/div]]

ICON_eagle.svg

#

Woohoo

#


#

Puntuación: +5+x

Agregar cosas a uno o ambos lados de la(s) regla(s) horizontal(es):

  • Deja una línea de texto en blanco entre cada cosa.
  • Las reglas horizontales se pueden añadir repetidamente.
  • Ten en cuenta que no debes añadir tantas cosas para evitar que se amontonen en pantallas estrechas.

[[div class="mz-hr" ]]

[[image xxxx ]]

------

{{,,#,,}} Convertir a línea vertical.

text

[[module Rate]]

------

[[/div]]

Tema de Revista

#


Traductor:Dc_Yerko

Fecha:06 Nov 2022 19:31

Etiquetas:tema

Los módulos pueden utilizarse para una gran variedad de cosas. Como esto:

[[module css]]
#page-title {
display: none;
}
[[/module]]

[[div class="pgtt-module mz-hr" ]]
[[module ListPages category="*" limit="1" fullname="="]]
Tema de Revista
[[/module]]
{{,,#,,}}
------
{{,,#,,}}
[[image source]]
[[/div]]

¡O MÁS!
Pasa el ratón por encima de la imagen para ver el cuadro de información flotante.

[[div class="mz-log-wrap"]]
[[module ListPages category="*" limit="1" fullname="="]]
[[div class="mz-log-list"]]
[[div class="mz-hr" ]]
Tema de Revista
{{,,#,,}}
------
[[div class="mz-log-trigger"]]
[[/div]]
[[div class="mz-log-hovertip"]]
**Traductor:**%#%created_by%%
**Fecha:**%#%created_at|%m-%d-%Y%%
**Etiquetas:**%#%tags%%
[[/div]]
[[/div]]
[[div class="mz-log-content"]]
¡O MÁS!
[[/div]]
[[/div]]
[[/module]]
[[/div]]


Blockquote

Esto es un blockquote, creado al poner "> " al inicio de cada línea
Más texto


Eso es una regla horizontal

Blockquotes anidados2

Otro blockquote

[[div class="mz-blockquote"]]

mz-blockquote

[[/div]]

[[div class="mz-board" ]]

mz-board

[[/div]]

[[div class="mz-cover"]]

mz-cover

[[/div]]

[[div class="mz-paper"]]

mz-paper

[[/div]]

[[div class="mz-textquote"]]
mz-textquote
[[/div]]

[[div class="mz-outbox"]]
[[div class="mz-innerbox"]]
texto
[[/div]]
[[/div]]

Componer

IMG-vintage-dragon.png

Aquí Yacen Dragones


Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae suscipit ante, quis interdum arcu. Nam efficitur magna nec nulla luctus, eu faucibus magna elementum. Duis tempor odio in magna efficitur, sit amet porttitor purus dapibus. Sed interdum elit vel enim dapibus, quis gravida mi dapibus. Donec tincidunt commodo tellus vitae malesuada. Mauris a volutpat ante, quis tempus ex. Nullam nisl neque, sollicitudin sed congue at, iaculis ullamcorper libero. Praesent egestas urna ut ante accumsan, et posuere lacus bibendum. Nunc sit amet dictum nisi, ac fermentum arcu. Nam eu pretium nibh. Vestibulum efficitur, elit non lacinia semper, turpis nunc cursus orci, vel accumsan dolor felis ac risus.

Cras lacus nulla, finibus sit amet rutrum nec, tincidunt ut est. Ut interdum odio neque, eu finibus leo eleifend sed. Cras porta consequat congue. Vestibulum placerat felis vehicula, imperdiet felis sit amet, vestibulum dui. Sed venenatis, lorem et ullamcorper condimentum, tortor sem hendrerit ipsum, et aliquet nibh orci vel ligula. Fusce in luctus mauris. Aenean elit dui, lobortis vel leo at, iaculis maximus neque. Sed sit amet neque in urna elementum tempus. Nullam at velit eu magna sodales convallis. Donec placerat pulvinar ante, quis volutpat erat dapibus ut. Pellentesque in scelerisque sapien, ac vestibulum felis. Fusce euismod faucibus hendrerit.


Lorem Ipsum



Praesent malesuada lacinia mattis. Vivamus a urna eu orci scelerisque tincidunt sed sed risus. Sed maximus consectetur lectus sed dapibus. Integer sit amet tempor velit. In pellentesque nulla et elit dapibus, sed facilisis nunc semper. Vivamus nisl est, ultricies sit amet placerat ac, imperdiet vitae sem. Quisque dictum quam ac odio tempor, quis scelerisque massa sodales. Praesent ligula ante, sodales ac mi nec, euismod luctus sem. Duis urna erat, bibendum sit amet scelerisque vel, faucibus vitae nunc. Sed consequat mi ex, non lacinia dui tincidunt eget. Donec blandit nec lacus ac pulvinar. Donec ut mollis sem. Proin vel arcu tincidunt, dignissim libero sed, finibus lorem. Aenean nec enim sem.

Proin tellus ipsum, luctus vitae orci sit amet, luctus posuere nisl. In sit amet maximus ante, et molestie risus. Maecenas dignissim, tortor quis egestas commodo, lacus mauris eleifend metus, vel tincidunt nisi nisi a neque. Sed feugiat ante sit amet nibh dictum laoreet. Cras vehicula porttitor magna, quis sollicitudin magna varius ut. Mauris quis urna in mauris pellentesque consectetur. Duis quis enim non turpis dapibus laoreet a id nisi. Duis gravida condimentum mi, ut ornare purus egestas et.


Bloques DIV

Clip

[[div class="clip-wrap"]]
[[div class="clip-body"]]
contenido
[[/div]]
[[/div]]

Más

IMG-weierxun-GuangGao.png

content

IMG-weierxun-GuangGao.png
Código

[[div class="clip-wrap"]]
[[div class="clip-body"]]
[[image ENLACE-DE-TU-IMAGEN]]
content
[[/div]]
[[/div]]

[[div class="clip-wrap"]]
[[div class="clip-img"]]
[[image ENLACE-DE-TU-IMAGEN]]
[[/div]]
[[/div]]


Nota de papel

[[div class="note-page"]]
contenido
[[/div]]

Notita

[[div class="mz-note"]]
contenido
[[/div]]


Tirar a la izquierda:

[[div class="mz-note note-left"]]

[[/div]]


TABs

Esto es una vista de pestañas.


tab linear

[[div class="mz-tab-line"]]
[[tabview]]
[[tab TAB]]

[[/tab]]
[[/tabview]]
[[/div]]



Centrar horizontalmente el título

○ Tipo A

[[div class="mz-tt"]]
+ Tipo A
[[/div]]

Tipo B

○ texto

[[div class="mz-tt222"]]
+ Tipo B
[[/div]]

Tipo C

[[div class="mz-tt333"]]
+* Tipo C
[[/div]]

O simplemente línea horizontal:

[[div class="mz-tt333"]]
[[/div]]

Meta Título

[[div class="Meta Title "]]
Meta Título
[[/div]]

O simplemente línea horizontal:

[[div class="meta-title"]]
[[/div]]


Pseudo Blacklight box

[[div class="mz-tt tt-box" style="padding-top: 0rem"]]
+* title

textos

+* más títulos

[[/div]]

Personalización

[[module CSS]]
--ttbox-h1BDR-color: #333; Color del borde de la caja de título
--ttbox-boxBDR-color: #333; Color del borde de la caja de contenido
--ttbox-bevel-color: #333; Color del bisel de la caja de título

--ttbox-h1-bg: #333; Color de fondo del título
--ttbox-h1-color: fff; Color del título

[[/module]]


Columnas

Los siguientes códigos dividen la página en dos o tres columnas, pero se reducirá a una columna si la pantalla es estrecha3.

[[div class="mz-column"]]
Dos columnas
[[/div]]

[[div class="mz-column column-333"]]
Tres columnas
[[/div]]

[[div class="mz-column column-nip"]]
Sin regla de columna
[[/div]]

[[div class="mz-column column-nip column-333"]]
Tres columnas sin regla de columna
[[/div]]

Lorem Ipsum:
In sit amet velit lacus. Ut finibus lorem vel felis interdum, ut posuere nisl sollicitudin. Proin ultrices neque ac mattis venenatis. Suspendisse potenti. Aliquam quis lacinia lorem, vel facilisis neque. Curabitur imperdiet nisl vitae nibh bibendum cursus. Nunc sollicitudin nisl eget egestas fermentum. Proin facilisis scelerisque ex, non molestie elit ultrices pulvinar. Morbi ac ultricies lacus. Proin consectetur dolor erat, a vestibulum metus scelerisque a. Sed dictum faucibus leo non condimentum. Donec enim augue, vehicula ut porta euismod, pellentesque quis lectus. Nam feugiat nisi nec nulla pretium, vel elementum sapien faucibus.

IMG-goat.png

Ficha de Cabra

Cras dolor velit, fermentum et sem ut, consequat iaculis orci. Ut dictum ipsum sed risus ullamcorper convallis. Nam non molestie odio, et pharetra risus. Aenean velit nisi, iaculis at venenatis a, semper vitae nibh. Vivamus aliquam risus at erat malesuada dapibus. Aliquam sit amet sapien risus. Vivamus efficitur aliquam justo, eget feugiat diam tincidunt vel. Suspendisse potenti. Maecenas eleifend eleifend auctor. Ut eget scelerisque augue. Nunc lacinia massa quam, in cursus erat tristique eget.


IMG-goat.png

Caja de envoltura de texto

○ Nadie


Suspendisse vitae libero a lectus consectetur iaculis non in massa. Suspendisse sed turpis id dolor consectetur egestas quis feugiat eros. Nam porta sit amet massa et volutpat. Praesent ut risus eu purus dictum varius. Nulla facilisi. In hac habitasse platea dictumst. Nam volutpat massa quis risus tincidunt, ut porttitor velit consequat. Ut tincidunt nulla in orci suscipit dapibus. Nulla ante ligula, sollicitudin in mauris nec, sollicitudin pharetra ligula. Quisque congue non metus at tristique. Nam bibendum sem magna, a consectetur elit dictum eu. Duis sagittis, nibh sit amet dignissim feugiat, dui quam mattis nisi, vel convallis lacus dui at nisl. Fusce lobortis non massa in tempus. Nunc ut vulputate magna. Nulla euismod metus quis lorem egestas, eget accumsan diam tristique.

Proin eu ultrices eros. Sed sit amet sapien ornare, tempus mauris tristique, consectetur ligula. Vestibulum ac tincidunt nunc. Morbi suscipit, lacus ut auctor lobortis, libero lacus egestas tellus, non fringilla metus nibh vel nisi. In mi lectus, varius non lorem vel, faucibus tempor enim. Fusce tincidunt libero id efficitur posuere. Integer sit amet dictum ipsum. Phasellus blandit est quis eros mollis sollicitudin. Nunc vehicula arcu vitae nisi pretium scelerisque. Vestibulum tristique odio eget urna facilisis finibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


Praesent id nisl et ligula volutpat venenatis sit amet sit amet massa. Nam feugiat, odio vel tincidunt interdum, lorem sapien fringilla ipsum, vel molestie ipsum mi vitae tortor. Quisque sit amet enim nulla. Aenean consectetur erat ut mauris bibendum ornare. Ut posuere ante id libero tincidunt gravida. Nunc feugiat, lectus vitae consequat iaculis, velit dui placerat mauris, id mollis ipsum felis non sem. Vestibulum et eleifend dolor. Nulla facilisi. Praesent vel sapien pharetra, rhoncus metus id, ornare lorem. Nullam et molestie diam.

Ut ac suscipit nisl. Suspendisse bibendum lorem egestas ex tempor malesuada. Praesent ut facilisis odio, id imperdiet dui. Suspendisse vehicula augue tempor risus porttitor vestibulum. Nam a turpis finibus, hendrerit risus ut, finibus diam. Fusce sed pulvinar augue. Nulla ut arcu eros. Duis tempus egestas risus id maximus. Cras non ex pharetra, posuere risus eget, scelerisque purus. Duis bibendum ultricies molestie. Curabitur hendrerit ligula vitae molestie vestibulum. Etiam vel rutrum massa. Proin quis est eget nulla tristique egestas.

Proin tellus ipsum, luctus vitae orci sit amet, luctus posuere nisl. In sit amet maximus ante, et molestie risus. Maecenas dignissim, tortor quis egestas commodo.


Cómo usar


Selecciona todo y reemplaza los siguientes marcadores de posición:

{$name} Identificación única de cada caja envuelta.
{$box-width} Ancho fijo del contenido envuelto.
{$box-height} Altura fija del contenido envuelto.

Ir al Fondo


Si no se indica lo contrario, el contenido de esta página se ofrece bajo Creative Commons Attribution-ShareAlike 3.0 License