💎 layout 💎

hi dear venties. i made a layout that you can use in bulletins and blog entries. the only thing you must do is spread the word that michi made this if anyone asks. enjoy :3

the code must stay inside <.style><./style> tags, in one line only or it will take up space in the bulletins.
in blog entries you can do multiple style tags without taking up space.

parts of the code you'll probably change:
set-color is the background color of your emotion set
set-txt-color is the color of the text in your emotion set
bg-color is the background color of the body and main
maintxt-color is the text color
borders-color is the color of the thin borders around main
content: "michi is " for the text that goes before your title

you can reuse the colors for things i haven't listed, it's good for keeping track of what is what color in your layout. now, for the code, copy and paste this and change whatever you want:


@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); :root { --set-color: #000000; --set-txt-color: #1c86f2; --bg-color: #1a1a1a; --maintxt-color: #ffffff; --borders-color: #aaaaaa;} body { background: var(--bg-color); background-repeat: repeat; font-family: 'Roboto', monospace;} main { background-color: var(--bg-color); color: white; border-left: 4px solid var(--set-color); border-top: 1px solid var(--borders-color); border-bottom: 1px solid var(--borders-color); border-right: 1px solid var(--borders-color);} .blog-entry .title, .bulletin .title { color: var(--set-txt-color); background-color: var(--set-color); text-align: center; display: inline-block;} .blog-entry .title::before, .bulletin .title::before { color: #ffffff; background-color: var(--bg-color); content: "michi is "; padding: 1px;} nav img.logo{ filter: brightness(0) saturate(100%) invert(80%) sepia(0%) saturate(0%) hue-rotate(186deg) brightness(86%) contrast(89%)!important;} nav label { color: var(--borders-color) !important;} .search-wrapper input[type=text] { background-color: transparent !important; border: 1px solid var(--set-txt-color) !important; color: var(--set-txt-color) !important;} button { background-color: transparent !important; color: var(--set-txt-color) !important; border: 1px solid var(--set-txt-color) !important;} .logout-btn { border: none !important;} a { color: var(--set-txt-color);} a:hover { color: var(--set-txt-color); text-decoration: none;} nav .top { background-color: var(--bg-color); border: none; color: var(--borders-color);} nav .links { background-color: var(--bg-color); text-align: center;} nav .links a { color: var(--borders-color); text-shadow: none;} nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after { color: var(--borders-color);} nav .links .special a { color: var(--borders-color);} nav .links a:hover { color: var(--borders-color);} .edit-info { background-color: var(--bg-color); var(--maintxt-color); border: none;} .count { color: var(--maintxt-color);} footer { color: var(--borders-color); background: transparent;} footer a { color: var(--borders-color);} footer a:hover { text-decoration: none;} .comments-table { border: transparent;} .comments-table td { border-style: solid solid solid solid; border-bottom: var(--set-color); border-width: 1px; background: var(--bg-color); color: var(--maintxt-color);} .comments-table td:first-child { width: 38%; background-color: var(--bg-color); color: var(--maintxt-color);} .comments-table td a { color: var(--set-txt-color);} ::selection { color: var(--set-txt-color); background-color: var(--set-color);}


you can add custom fonts, like i did in the first line of the code as an example.
ran into any issues? let me know if you need help :3




13 Kudos

Comments

Displaying 3 of 3 comments ( View all | Add Comment )

Tom Hiddleston

Tom Hiddleston's profile picture

I'll make sure to spread the word that you made this if anyone asks. we can reuse the colors for other elements in our layout, and I'll definitely keep that in the time card calculator.


Report Comment



This article is a game-changer! So snaptik much valuable information, thanks for sharing.

by NathanaelTenbrink; ; Report

NellyAurora

NellyAurora's profile picture

Thanks for sharing this article. I am glad to see this amazing heardle 80s post.


Report Comment

Emmal

Emmal's profile picture

Your blog is cool. I realize that you offered a lot of beneficial information. You may join trap the cat to get refresh experience.


Report Comment