Magazine Theme
+ CODE

Usage

This is a sigma9 theme created by EtinjatEtinjat, which is inspired by Newspaper Theme and hoah2333hoah2333's old Semimonth Theme (Now it looks better). And the magazine logo on sidebar is made by KcorenaKcorena.

To use this theme, put the following syntax on any page:

[[include :scp-wiki:theme:magazine]]

Custom Options：

[[include :scp-wiki:theme:magazine
|collapsible-sidebar=---] To use the collapsible sidebar.
|content-width= Change the width of main content.
|header-title= "texts" Change the big header title1.
|header-subtitle= "texts" Change the small header subtitle
|mob-title= "texts" Change the header title when in narrow screen (like phones).
|mob-subtitle= "texts" Header subtitle when in narrow screen.
|logo-image=url('yourlink') Logo on header (Hidden by default).
|logo-image-mob=url('yourlink') Header Logo in narrow screen (Default to the Foundation logo).
|logo-sidebar=url('yourlink') Logo on sidebar (Default to the magazine logo).
|sidebar-content= "texts" Text under the sidebar logo.
|page-title= none Remove page-title.
|title-underlines = none Remove underlines of page-title.
|title-orn-content= "★" The ornament below page-title
|title-orn-size= 1.5rem2
|title-orn-color= #542429
|title-orn-width= 2rem3
]]

Add background image

[[module css]]
#container {
--hollow-image: url('YOUR IMAGE LINK');
background: var(--hollow-image) center 0 repeat;
}

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

[[/module]]

  • PS：For many calc function are used, so if you want to change the values of elements, please modify the variables in :root and use rem as the unit.



Examples

First Title

Second Title

Third Title

Fourth Title

Fifth Title
Sixth Title

Rating:

rating: +44+–x

Rating w/ Credit Module:

rating: +44+–x

Info

Info about your page.

More information

More information

More information about your page.

rating: +44+–x

bold | italic | underline | strikethrough | Mono text superscriptsubscript

+ A collapsible


Image block

LOGO_magazine.svg

Standard Image Block

Wrap the following div codes on
the outside of the standard image block
to use the special styles below:

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


LOGO_magazine.svg

Image
class="mz-img-wrap"

LOGO_magazine.svg

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

LOGO_magazine.svg

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

LOGO_magazine.svg

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

LOGO_magazine.svg

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


Horizontal rule

A horizontal rule can be created with 5 hyphens "-" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.



Customized horizontal rule


Wrap a div block, and add classname：

  • Reduce hrs' size：hr-contract
  • Change hrs to solid ：hr-solid
  • To dotted：hr-dotted

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

------

[[/div]]

ICON_eagle.svg

#

Woohoo

#

#

rating: +44+–x

Add stuff to one or both sides of the horizontal rule(s):

  • Leave a blank text line between each thing.
  • Horiz rules can be added repeatedly.
  • Notice that not to add so much stuff to avoid a pile on the narrow screen.

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

[[image xxxx ]]

------

{{,,#,,}} Convert to a vertical line.

text

[[module Rate]]

------

[[/div]]

Magazine Theme

#

Author：Etinjat

Date：02 Aug 2022 08:47

Tags：theme

Modules can be used for a variety of things. Like this:

[[include :scp-wiki:theme:magazine
|page-title= none
]]

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

OR MORE!
Move your mouse over the picture to see the hovertip box.

[[div class="mz-log-wrap"]]
[[module ListPages category="*" limit="1" fullname="="]]
[[div class="mz-log-list"]]
[[div class="mz-hr" ]]
%#%title%%
{{,,#,,}}
------
[[div class="mz-log-trigger"]]
[[/div]]
[[div class="mz-log-hovertip"]]
**Author：**%#%created_by%%
**Date：**%#%created_at|%m-%d-%Y%%
**Tags：**% %tags%%
[[/div]]
[[/div]]
[[div class="mz-log-content"]]
OR MORE!
[[/div]]
[[/div]]
[[/module]]
[[/div]]


Blockquote

This is a blockquote, created by putting "> " at the start of each line.
More text

That's a horizontal rule

Nested blockquotes4

Other blockquote

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

mz-blockquote

[[/div]]

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

mz-board

[[/div]]

[[div class="mz-cover"]]
normal text
{{teletype text}}
[[/div]]

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

mz-paper

[[/div]]

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

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

Composite

ICON_angry-eagle.svg

NO OIL HERE


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.


More div blocks

Clip

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

PHO_ravine-gully.jpg

content

PHO_ravine-gully.jpg
Code

[[div class="clip-wrap"]]
[[div class="clip-body"]]
[[image YOUR-IMAGE-LINK]]
content
[[/div]]
[[/div]]

[[div class="clip-wrap"]]
[[div class="clip-img"]]
[[image YOUR-IMAGE-LINK]]
[[/div]]
[[/div]]

Note paper

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

Note tip

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

Left Dogear:

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

Swap the background color of note:

[[div class="mz-note" style="--tip-color:blue"]]
[[/div]]

Dialogues

Mabe you want a talk.

See the folow to create a sheet of speech bubbles.

Code

[[div class="mz-talking-wrap"]] The Beginning-block
[[div class="talking-left talkimg-below" ]]The Dialog-block
[[div class="talking-img"]] The Image-block
[[/div]]
[[div class="talking-box"]]The Text-block
Left
[[/div]]
[[/div]]

[[div class="talking-right talkimg-below" ]]
[[div class="talking-img"]]
[[/div]]
[[div class="talking-box"]]
Right
[[/div]]
[[/div]]

[[/div]]

Intro

Maybe the speech bubbles sheet is too broad to display a well visual effect on the wide screen (like PC), so you can add the coda style="width:80%;margin: 0 auto" at the beginning-block to narrow the whole sheet. Meanwhile, add the classname pc-width to make it restore 100% width when on narrow screen (like phone).

[[div class="mz-talking-wrap pc-width"  style="width:80%;margin: 0 auto"]]

On narrow screens, the picture in the image-block are hidden to leave space for text. If you want to hide the picture in wide screen, add the classname no-image in the image-block. Like this:

 [[div class="talking-img no-image"]]


Left dialog-block：

[[div class="talking-left talkimg-below" ]]

Right dialog-block：

[[div class="talking-right talkimg-below" ]]

To place the dialog-block below the picture, follow this:

1. Fill in the classname of dialog-block with talkimg-upper to modify the picture position.

[[div class="talking-left talkimg-upper" ]]


2. Fill in the classname of text-block with talkbox-lefttop / talkbox-righttopr to modify the position of speech triangle of dialog-block.

[[div class="talking-box talkbox-lefttop"]]

To place the picture in the center of image-block, do not fill in the classname of dialog-block with anything except talking-left / talking-right and add talkbox-inby into text-block.

[[div class="talking-box talkbox-lefttop  talkbox-inby"]]

To swap a new picture, need to fill in --tk-img-left or --tk-img-right to the style of text-block according to its direction.

[[div class="talking-right" style="--tk-img-right:url(IMAGE_LINK)"]]

If you fill both codes in the beginning-block, the left and right pictures in the whole sheet will be converted.

 [[div class="mz-talking-wrap" style="--tk-img-left:url(IMAGE_LINK); --tk-img-right:url(IMAGE_LINK);" ]]

To change the colors of text-block, need to full --shadow-line and --tk-box-bg within its style definition.

[[div class="talking-box talkbox-lefttop  talkbox-inby " style="--shadow-line:green;--tk-box-bg:skyblue;color:darkred"]]

Full in the classname of text-block with talkbox-round to change its border to round; Full with talkbox-dark to make a dark style.

[[div class="talking-box talkbox-round  talkbox-dark"]]

Full with talkbox-doubleline to change its border to doubleline.

[[div class="talking-box talkbox-doubleline"]]

Full with talkbox-bubles to change the speech triangle to two bubles (default to square).

[[div class="talking-box talkbox-bubles"]]

Add the talkbox-round to make them round).

[[div class="talking-box talkbox-round talkbox-bubles"]]



TABs

This is a tab view.


linear tab

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

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



Horizontally center title

○ Type A

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

Type B

○ text

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

Type C

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

Or just horizontal line:

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

Meta Title

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

Or just horizontal line:

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


Pseudo Blacklight box

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

texts

+* more titles

[[/div]]

Customization

[[module CSS]]
:root{
--ttbox_h1BDR-color: #333; Color of the title box's border
--ttbox_boxBDR-color: #333; Color of the content box's border
--ttbox_bevel-color: #333; Color of the title box's bevel

--ttbox_h1-bg: #333; Background color of title
--ttbox_h1-color: fff; Color of title
}

[[/module]]


Individual title

[[div style="height: 0;--ttbox_h1BDR-color:#333;--ttbox_before-color:#888;--ttbox_h1-bg: #000;--ttbox_h1-color: #fff;"]]
+* Individual title
[[/div]]


Columns

The following codes divide the page into two or three columns, but it would be shrinked to one column if the screen is narrow5.

[[div class="mz-column"]]
Two columns
[[/div]]

[[div class="mz-column column-333"]]
Three columns
[[/div]]

[[div class="mz-column column-nip"]]
No column-rule
[[/div]]

[[div class="mz-column column-nip column-333"]]
Three columns without column-rule
[[/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

Goat sheet

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

Box of text wrapping

○ Nobody


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.

How to use


Select all and replace the following placeholders:

{$name} Unique ID of each wrapped box.
{$box-width} Fixed width of wrapped content.
{$box-height} Fixed height of wrapped content.

+ CODES

Goto Bottom

Footnotes
_cctheme
page revision: 192, last edited: 26 Apr 2023 08:43
Edit Rate (+44) Tags Discuss (5) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License