LIVE PREVIEW >> a minimalist, tumblr-esque layout based on tabula rasa [ LAST UPDATED 06/04/22 ] hello and welcome to my first dw layout post πββοΈ i've been meaning to make my own layout since FOREVER but i'd always lose interest after formatting like one section and then never get it done lol....... i also knew that i wanted to make a layout that had easily customizable components and options for people to ~build their own version~, which was maybe a bit daunting to tackle for My First Ever Theme, but well... this is what i managed to come up with! *___* only posting this on my blog because i'm embarrassed and i have no idea if this code is even any good but if you happen to be reading this and are interested in a very simple + limited dreamwidth layout that sort of emulates the look and feel of a tumblr blog, here is my attempt!
also there are several steps to the installation process but i promise it isn't too difficult so just BEAR WITH ME.....
[ FEATURES ]
- 1 layout (2-column, left sidebar)
- 2 post styles
- 2 link styles
- 3 sidebar styles
- 5 color palettes
- responsive formatting for mobile and browser resizing
- easy-to-edit variables for colors, sizing, rounding, etc.
this layout has a lot of customization options, but the structure itself is pretty minimalist since i was kind of designing for myself and didn't have the time/energy/desire to make anything more variable. so this is just a basic 2-column layout with a left sidebar and nothing else; i'll go more into this later, but the only modules i really edited for are
profile (1), custom text (2), and navigation (3)βof course, you are more than welcome to play around with the styling and add in any other modules if you'd like to, but it probably won't look right unless you mess around with the code yourself TT___TT sorry!
[ SET-UP ]
1. select tabula rasa
in your
theme customization page, search for
"tabula rasa" and apply the plain theme. then scroll down and apply the
2 column (sidebar on the left) page setup.
2. select modules
in the
modules section of your theme editor, uncheck
ALL modules except:
β profile (1)
β custom text (2)
β navigation (3)
make sure that they're in that order! your page should look like this:
3. add your custom text
in the
text section of your theme editor, you can now add in your personalized custom text that will appear as the
sidebar title and description on your layout. (add a slash for the url if you want the title to link back to your recent entries!)
4. paste custom stylesheet url
finally, in the
custom css section of your theme editor, add in the code below to the
custom stylesheet url field to get all the main fonts into the layout.
https://fonts.googleapis.com/css?family=Material+Icons|Lato:400,400i,700,700i,900,900i|Archivo:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i
of course these are just the fonts i used, so you're more than welcome to swap them out for your preferred font faces :D (don't remove the material icons tho!) i
personally like lato as a body font because dreamwidth is text-heavier than tumblr so i appreciate its readability over more circular/display-oriented sans serifs, but google has a ton of other ones you can experiment with that include inter, karla, nunito, dm sans, public sans, rubik, lexend, etc. etc.
also make sure to keep "use layout's stylesheet(s)"
checked!
okay now we can construct the actual theme. all you have to do is go through the following steps and paste the corresponding snippets one after another in the
"use embedded css" text area (from the same
custom css page you were just on).
[ THEME BUILDER ] 1. choose a color palette
[ click on the palette you want and then copy the corresponding code block ] DEFAULT β the classic! grey background, white posts, one accent color, that's it.
DARK β a mostly monochromatic dark counterpart of the default theme
CODE β a take on an ide/code editor palette, with more color accents than dark
CANDY β a white bg layout with colorful gradient links
SUNRISE β a warm gradient bg with bright links
[ DEFAULT ] [ DARK ] [ CANDY ] [ CODE ] [ SUNRISE ] this section features all the color variables for the layout but also has things like sidebar width/height, icon rounding, and fonts, so feel free to play around with this to your liking! for example, you can change --icon-rounding to 0px or 8px if you want square or slightly rounded icons instead of circular ones.
2. choose a post style
[ click on the style you want and then copy the corresponding code block ] BORDER β posts have rounded corners and a light border
NO BORDER β posts blend directly into the layout
that's all for the entries!
3. choose a sidebar
[ click on the style you want and then copy the corresponding code block ] [ VERTICAL (NUMBERED) ] [ VERTICAL (ICONS) ] [ HORIZONTAL ] this section also includes placeholder code for the sidebar header image, which looks like this:
/* CHANGE SIDEBAR BACKGROUND HERE */
/* REPLACE URL */
/* EDIT OR REMOVE LINEAR-GRADIENT */
.module-userprofile {
background: linear-gradient(0deg, [rgb val], [rgb val]), [url];
}
please update the image url (or remove it altogether if you don't want a background img) because the current one is just a random photo i pulled as a base for editing LOL. once again there are a lot of ways you can customize your sidebar using the variables defined in section 1 (e.g. adjust the --icon border color, the --icon-rounding value, the sidebar width, etc.), so go ahead and change anything you're comfortable poking around with!!! π
(optional: add in material links)
if you enjoy the minimalism of material icons in place of text links, you can add in a small section of code to achieve thatβthis basically replaces text like "link, x comments, reply" etc. with icons. of course this part is completely optional!
also note that if you do add these icons in, you should go to the "entry β text to read comments" section of your
text settings and change
"1 comment // # comments" to simply "#".
[ MATERIAL LINKS ] 4. paste the rest!
[ EVERYTHING ELSE YOU NEED TO MAKE THIS THING WORK ]
andddd that's it! πhopefully this all made sense, but if there's anything confusing about the installation process please let me know T___T i can help troubleshoot any coding issues or errors in general, and am always open to feedback etc. etc. it was hard to make all the variables work with a variety of customization options so there are probably a lot of little things i still need to fix... but here i am sharing my sillystring code anyway!!! π
[ CHANGELOG ]
- (06/02) fixed dynamic padding calc for sidebar resizing
- (06/02) added back entry poster info to posts on reading page
- (06/04) fixed issue with icons link covering post title
![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
girlrock
