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}
no subject
no subject
no subject
no subject
no subject
no subject
no subject
no subject
(no subject)
no subject
no subject
(no subject)
(no subject)
no subject
no subject
(no subject)
(no subject)
no subject
i tried the theme and i'm just ♡_♡ completely in love with it, i really wanted a theme that had a tumblr vibe and i'm glad i found this one. thank you so much :)
no subject
no subject
no subject
no subject
no subject
no subject
no subject
into the "Custom stylesheet URL" input area above the custom css! but in reality you only actually need to keep the Material Icons part and are free to use any variety of google fonts you want afterward, updating this section at the beginning of your css if you'd like to use different fonts with your layout (instead of the default sans serif):
also alternatively, if you want to do away with the tag icon before your tags altogether, you can remove it by getting rid of this block:
but again just the sylesheet url alone should fix your icon problem! hope this helps and let me know if you have any other questions :DD
(no subject)
no subject
I'm using it for my imported fics comm (finally updated from a now-broken theme, goodness) but I can't figure out why the spacing with the material icons isn't working. I've probably missed something obvious (insert facepalm). comm:
no subject
(no subject)
(no subject)
(no subject)
no subject
no subject
(no subject)
no subject
no subject
no subject
no subject
Thank you so much!
no subject
1. go to Your Layers and create a Theme layer for Tabula Rasa, like this:
2. this will make the layer show up under your Tabula Rasa row in the Layers table. click on Edit to open the code editor. i'm going to paste the entire file i'm using on this blog so that you can see exactly what to replace, but basically all you need to paste this whole block and then replace the names and urls you want for each link in navlinks and navlinks_urls.
the box should look like this:
once you have this pasted and edited, just hit Save & Compile on top!
3. now go to Your Styles, you should see the style you're using in bold. hit Edit there to actually select your custom layer and put it into action.
4. here, just open the Theme dropdown and select the nav (#someidnumber) layer you created, then hit Save Changes.
this should work, but let me know if anything else comes up !!!
(no subject)
(no subject)
no subject
no subject
(no subject)
(no subject)
(no subject)
(no subject)
(no subject)
(no subject)
no subject
no subject