#tag theme

theme 220      static preview

tags/navigation page (1, 2, and 3 styles)

important: colors and text shown in the preview match the type of theme applied there. so when you use, the colors, fonts and text size may look different if you’re using a different theme, but you can freely customize this in css too

the one used in the preview is my theme 219

another example, this one is my theme 208

how to use

SCRIPT PART

pastebin / google docs

copy the script on <!-- masonry navigation -->

search for </body> and place it before that tag. if you already have scripts there, place this one after all of them

next, there should be another <script> or <script type="text/javascript"> there too, if there is you’re gonna copy mine and paste above all of them

this is how it should look like. if you want, the second script can be like this, here i put them with all the other scripts i have

CSS PART

pastebin / google docs

copy all the the code above

search for </style> that’s where it ends the style on your html, so you place before that tag

HTML PART

pastebin / google docs

copy all the code above

create a new page and select the type as standard layout. press the html and paste the code there

how to edit

everything is in the html part. here on this ‘full version’ (the html code) i explain a bit more about the tags, but i left them as simple as possible. you only need a main div (masonry-navigation) and the item div (masonry-navigation-item + which columns you want) inside. then add the content inside the item. you can use any html related tags there, not only ul and li. 

works for all posts sizes, but this one is configured to 540px posts. to change that and if the two and three columns look a bit off, search for .masonry-navigation-item.two-columns and .masonry-navigation-item.three-columns, and adjust their widths!

Thank you for the tag @petrichorsis!!

Rules: Bold the themes that are covered in your wip and italize the ones that are loosely covered, and tag 10 people

I'm doing both of my main wips at the moment: TMOWS and WCB

—The Monsters Only We See—

addiction | beauty | betrayal | change vs. tradition | chaos vs. order | circle of life | coming of age | communication | convention vs. rebellion | corruption | courage | crime and law | dangers of ignorance | darkness and light | death | desire to escape | dreams | displacement | empowerment | facing darkness | facing reality | faith vs. doubt | fall from grace | fame and fortune | family | fate | fear | fear of failure | free will | friendship | fulfilment | good vs. bad | government | greed | guilt and forgiveness | hard work | heroism | hierarchy | honesty | hope | identity crisis | immortality | independence | individual vs. society | inner vs. outer strength | innocence | injustice | isolation | knowledge vs. ignorance | life | loneliness | lost love | love | man vs. nature | manipulation | materialism | motherhood | nature | nature vs. nurture | oppression | optimism | peer pressure | poverty | power | power of words | prejudice | pride | progress | quest | racism | rebirth | relationships | religion | responsibility | revenge | sacrifice | secrets | self-awareness | self-preservation | self-reliance | sexuality | social class structure | survival | technology | temptation and destruction | time | totalitarianism | weakness | vanity | war | wealth | wisdom of experience | youth

—Where Camellias Blossom—

addiction | beauty | betrayal | change vs. tradition | chaos vs. order | circle of life | coming of age | communication | convention vs. rebellion | corruption | courage | crime and law | dangers of ignorance | darkness and light | death | desire to escape | dreams | displacement | empowerment | facing darkness | facing reality | faith vs. doubt | fall from grace | fame and fortune | family | fate | fear | fear of failure | free will | friendship | fulfilment | good vs. bad | government | greed | guilt and forgiveness | hard work | heroism | hierarchy | honesty | hope | identity crisis | immortality | independence | individual vs. society | inner vs. outer strength | innocence | injustice | isolation | knowledge vs. ignorance | life | loneliness | lost love | love | man vs. nature | manipulation | materialism | motherhood | nature | nature vs. nurture | oppression | optimism | peer pressure | poverty | power | power of words | prejudice | pride | progress | quest | racism | rebirth | relationships | religion | responsibility | revenge | sacrifice | secrets | self-awareness | self-preservation | self-reliance | sexuality | social class structure | survival | technology | temptation and destruction | time | totalitarianism | weakness | vanity | war | wealth | wisdom of experience | youth

tag page 03

Preview × Get the code

a modern tag page with filters and an optional “show archived” checkbox. icons by the following users on flaticon.com: Freepik, Smashicons, Pixel perfect, Good Ware, fjstudio

guide for editing is in the code

fully responsive (3rd picture shows mobile)

all colors easily changeable

filtering by category (16 different icons available)

optional "show archived” checkbox (this is just another category that you can put your tag groups into, to keep old/unused tags out of the visitor’s view while still making them available)

I was tagged by @rinskiroo! Thank you! :D

POST THE LAST SENTENCE YOU WROTE AND THEN TAG AS MANY PEOPLE AS THERE ARE WORDS IN THAT SENTENCE.

From the ever expanding prompt fic that refuses to end. (We’re at 2300 words now)

“I wouldn’t say it’s so bad,” she said, tilting her head with that soft look that had a tendency to make Theron forget what he was arguing about.

NAVIGATION BY LITANYOFBLOOD

I’m learning, evolving, and so I’ve made both a dark and a light version of this navigation theme. It’s fairly simple, but I wanted something that worked for me, and hopefully it’ll work for you as well. It’s fairly simple to use, even with minimal knowledge of CSS/HTML.

FEATURES:

clean masonry function

3 additional links (can add more if wanted)

allows for a shitload of navigation

theme 203       static preview it’s a navigation page to use as standard layout, meaning it will show up as a regular page in your theme, as the preview link. you have to create a new page, select the type as standard layout to paste the html part

how to use:

script: copy this code (or alternative) and paste above <style>. or where your scripts go. this is to use custom icons for the links

to change the icons, you search the one you want here and pick the name, then go to this list, search the icon name you chose and copy the content code. go back to the theme, search for .nav_list:before for the navigation links, and .nav_tags_list:before for the tags. both have content, so you just change the code

part two (css): copy this code (or alternative) and paste anywhere between <style> </style> in your html

part three (html): copy this code (or alternative), create a new page and select the type as standard layout. press the html and paste the code there

IMPORTANT !! text and link colors, font and text size, and scrollbar style will automatically match the settings in your theme unless you know what you’re doing you can change the style in the css (part one). but to edit the content is all in the html (part two)

you can add as many links as you want and how you want. also add paragraphs

the second part it’s like a tags page, or more links. you can add how many you want, they will always be on three

it will work on 400px, 500px, and 540px posts sizes. even 300px, but i wouldn’t recommend less than that, it can get weird

CUSTOM LAYOUT VERSION: in case you don’t want the page style static preview

how to use: 

create a new page, but change to custom layout and paste this code (or alternative)

you have to customize everything there in the html

also, if you want to use more boxes in a row, you can change the width in .nav_container

Theme #6 ❝Tranquility❞ ft. Sehun

Static Preview (1) (2) | Code (1) (2)

A navigation/tag page with optional cherry blossoms!

Features:

Topbar image (600x320)

Easily customizable on colors, categories, and tags.

Falling petals effect that can be altered or removed (Code 2 contains blossoms)

Categories can have as many or as few links as you like

There can be as many or few categories as you like

Tags can be as long or short as you like

5 sidebar links

Rules:

Don’t claim as your own

Don’t use without credit

Alter as much as you like, but keep credit intact

It would be nice if you liked or reblogged if you’re using it!