Magazine Theme

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: +56+x

Rating w/ Credit Module:

  • rating: +56+x

bold | italic | underline | strikethrough | Mono text superscriptsubscript


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.










Wrap a div block, and add classname:

  • Reduce hrs' size:hr-contract
  • Change hrs to solid :hr-solid
  • To dotted:hr-dotted
  • Double line: hr-double

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

------

[[/div]]

ICON_eagle.svg

#

Woohoo

#


#

rating: +56+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 pages

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]]


Row-striped pages


Usage

To enable the style of row-striped pages and notebook pages bellow, add a line of code in the include:

[[include :scp-wiki-cn:theme:magazine
|extensions=true
]]


To use more similar stuff, see the component here.



[[div class="mz-notepage-wrap chew-left"]]5
[[div class="notepage-body"]]
[[div_ class="notepage-header"]]
Top text.
[[/div]]
[[div class="notepage-main"]]
Main text.
[[/div]]
[[div class="notepage-footer"]]
Bottom text, usually the page number.
[[/div]]
[[/div]]
[[/div]]




The usage method is the same as above, just replace

mz-notepage-wrap

to:

mz-notequote-wrap

That's done.




Notebook


[[div class="mz-notebook-wrap"]]
[[div class="notebook-body"]]
[[div class="notebook-left"]]
[[div class="notepage-main"]]
Left text.
[[/div]]
[[/div]]
[[div class="notebook-mid"]]
[[/div]]
[[div class="notebook-right "]]
[[div class="notepage-main "]]
Right text.
[[/div]]
[[/div]]
[[/div]]
[[/div]]


Hey, it look like a tab6.

Widening the page of site and folding the sidebar may improve the visual effect of this block.

Note:

  • This block only displays the full appearance on a wide screen, and changes to the row-striped page style above on a narrow screen.
  • To modify the color of background/row-stripes/text of bookpage separately, add style="--color-notepage: blue;--color-rowline: green;--color-bookpage-txt:red" to the div which class="notebook-body".
  • To remove the bookseam style in the middle of the notebook, add notebook-noseam in the div which class="notebook-body".
  • To enable the bookmark, add notebook-bookmark in the div which class="notebook-left/right".
  • To change the default row stripe style of the bookpage block to single stripe, add rowline-single in the div which class="notepage-main".
    • Add rowline-none to remove the stripe.


Dialogues

Mabe you want a talk.

See the folow to create a sheet of speech bubbles.



TABs

This is a tab view.


Teared tab

This teared tab flipped the second time it was selected.

Not good.


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 narrow7.

[[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.

Goto Bottom


Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License