Dreamwidth style system discussion

style_system @ 2026-02-10T21:57:00

2026-02-10T22:07:14Z

Posted by: sharpiefan

I've just changed my journal layout to Modular by branchandroot and I'm having issues putting a header banner in. I want it to show above the header box with the journal title, 'Latest entries' etc in - at the top of the page below the nav bar - but the CSS code that I know puts it in the header, in that box.

The CSS in question is

#header {
margin-top: 5px;
background-image: url('https://sharpiefan.dreamwidth.org/file/5524.png');
background-repeat: no-repeat;
background-position: top center;
padding-top: 275px;
}

What should I change in order to position the header above that top box? (It doesn't look as if posting the image URL into the provided area in the Images area of 'Customise your theme' does anything at all, so that's not much help either.)

It's been a long time since I changed my journal layout, I'm willing to accept I might be missing something really obvious!

comments

Navlinks Issue With Custom Override

2026-01-27T17:53:31Z

Posted by: wishfulfilled

So I'm trying to add the Previous/Next links to my Navlinks Module using a code that was previously posted here, but I'm having issues with the Previous link showing up regardless of whether or not there's previous entries (I'm testing on this journal with public entries for reference).

The code I'm using in my theme layer is this:

# code by ninetydegrees/foxfirefey
function print_module_navlinks() {
 
 var Page p = get_page();
 var string prev_link;
 var string next_link;
 
 if ( $p isa EntryPage ) {
 var EntryPage ep = get_page() as EntryPage;
 var Entry e = $ep.entry;
 var Link prev = $e->get_link("nav_prev");
 $prev_link = """<a href="$prev.url">$prev.caption</a>""";
 var Link next = $e->get_link("nav_next");
 $next_link = """<a href="$next.url">$next.caption</a>""";
 } elseif ( $p isa DayPage ) {
 var DayPage dp = get_page() as DayPage;
 $prev_link = """<a href="$dp.prev_url">$*text_day_prev</a>""";
 $next_link = """<a href="$dp.next_url">$*text_day_next</a>""";
 } elseif ( $p isa RecentPage ) {
 var RecentPage rp = get_page() as RecentPage;
 if ( $rp.nav.backward_count > 0 ) { 
 $prev_link = """<a href="$rp.nav.backward_url">""" + get_plural_phrase( $rp.nav.backward_count, "text_skiplinks_back" ) + "</a>"; 
 }
 if ( $rp.nav.forward_count > 0 ) { 
 $next_link = """<a href="$rp.nav.forward_url">""" + get_plural_phrase( $rp.nav.forward_count, "text_skiplinks_forward" ) + "</a>"; 
 }
 } elseif ( $p isa MonthPage ) {
 var MonthPage mp = get_page() as MonthPage;
 	if ($mp.prev_url != "") { $prev_link = "<a href='$mp.prev_url'>Previous</a>"; }
 	if ($mp.next_url != "") { $next_link = "<a href='$mp.next_url'>Next</a>"; }
 }

var string[] navlinks_order = [];
  var string{} navlinks_urls = {};
  var string{} navlinks_text = {};
 
  $navlinks_order =
    [
        "entries",
        "archive",
        "read",
        "profile",
    ];
 
 $navlinks_urls =
    {   "profile" => "$p.base_url/profile",
        "entries" => "$p.base_url",  
        "archive" => "$p.base_url/archive",
        "read" => "$p.base_url/read",

};
 
 $navlinks_text =
    {   "profile" => "Profile",
        "archive" => "Archive",        
        "read" => "Read",        
        "entries" => "Recent",      
        
    };

open_module("navlinks", "", "");
 var string[] links = [];
 
 if ( $prev_link ) {
 $links[size $links] = $prev_link;
 } 
 
 foreach var string k ($navlinks_order) {
 if ($navlinks_urls{$k} != "") {
 var string css = """ class="$k" """;
 if ($p.view == $k) { $css = """ class="current $k" """; }
 $links[size $links] = """<a href="$navlinks_urls{$k}"$css>$navlinks_text{$k}</a>""";
 }
 }
 
 if ( $next_link ) {
 $links[size $links] = $next_link;
 }
 
 
 print_module_list($links);
 close_module();
}

comments

Colours for Comments

2026-01-26T10:09:14Z

Posted by: magnavox_23

I have been futzing with my new layout, which is 'Gibbous' by Phidari for Heads Up.

It's looking great, the only thing I am stuck on is that I am wanting the comment box background (#ffffff) to be the same colour as the post background (#c6b6b3). Unfortunately, I cannot find an option for this in the customizer:

I can toggle it on and off in the Firefox inspector, but my knowledge beyond that is limited:

Are there any options for using some custom css to change that colour, or hide it?

Any help or advice is much appreciated! <3

comments

resizing while keeping proportions without using aspect-ratio

2025-10-02T15:37:18Z

Posted by: pixellated

this issue is solved! turns out aspect-ratio works just fine on DW, i was just not using it correctly so the problem was in front of the keyboard and not in the code, haha

here's what i originally posted:

hi again! this is more of a general html/css question, but it has to work within dreamwidth's constraints, so i decided to ask it here. please let me know if this isn't the appropriate comm for this. i hope i used the right tags for this post.

here's what i'm trying to achieve (this would be displayed inside the most recent entry on my journal, so i can use regular CSS and not just inline, in case this matters):

i want to have a big box, and inside it a picture and a small box below that. i want the big box to resize responsively while keeping its proportions: suppose its width:height ratio is 1:2; i want it to keep that ratio always. as it resizes, i want the picture and small box inside to also resize while also keeping their proportions.

normally this would be really easy to do with aspect-ratio (<- this is a link to mozilla's developer resources) but that property doesn't seem to work on dreamwidth -- when i put it in my custom CSS, it doesn't seem to do anything, and it gets highlighted in red. (it works okay when i try it in online CSS editors, so i think it's not my mistake that's causing this.)

assuming this is true and i can't use aspect-ratio on DW, i need to cobble together some other solution, but i'm completely out of ideas. is this possible to achieve without aspect-ratio, or should i just change my idea to something that can be done on DW?

thanks again for your time!

comments

[solved] moving around the module content or hiding it!

2025-09-27T18:00:12Z

Posted by: kakkoi

i was able to fix the problem i was having by removing the

.module-content .userpic {
	position: relative;
	left: 280px;
	bottom: -65px;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	border-style: solid;
}

problem i was having

hello! i'm back again~ working on another thing, and having issues with the module userpic and hiding it or moving it, essentially. i was able to move where i want the contents of the module userpic to be displayed and how i want the module content to be displayed, but i'm still having the issue of it showing up at the center and top, with the border.

you can view the live version at testerjournal, and the image here. as you can see, or hover over the circle at the top it still shows as if the module userpic is up there which i don't want it to do.

module coding is here, and i can't figure out how to fix this

eta: using tabula rasa, plain

/* secondary */

#secondary {
font: 'Montserrat', sans-serif, #33343F, 7px;
background: #transparent;
width: 607px;
}

#secondary > .inner:first-child {
background: transparent;
padding: 0;
width: 500px;
text-align:right;
}

.module-wrapper {
padding: 10px;
}

.module-content li {
margin: 0;
}

ul.module-list {
list-style: none;
margin: 0;
padding: 0;
text-transform: lowercase;
font-color: #ffffff;
}

.module-navlinks {
	font-family: Montserrat;
	font-size: 9px;
	position: relative;
	left: 75px;
	bottom: -40px;
	font-color: red;
	text-shadow: 0.5px 0.5px 0.5px #D7D9D7;
}

.module-navlinks:hover {
	font-family: Montserrat;
	font-size: 9px;
	position: relative;
	left: 75px;
	bottom: -40px;
	font-color: red;
	text-shadow: 0.5px 0.5px 0.5px #D7D9D7;
}

.module-list li {
margin: 0 .0 0;
display: inline-block;
font-size: 30px;
font-color: ;
}

div.journal-name {
	font-family: Sour Gummy;
	font-size:40px;
	display:inline-block;
	position: relative;
	left: -10px;
	bottom: -80px;
	font-color: #fff;
}

.module-content .userpic {
	position: relative;
	left: 280px;
	bottom: -65px;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	border-style: solid;
}

.module-content .userpic img {
	position: relative;
	left: 280px;
	bottom: -65px;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	border-style: solid;
}

.module-customtext {
text-transform: lowercase;
font-size: .8rem;
margin: .8em 0 .8em 0;
}

comments

changing how a journal shows entries are posted in a comm?

2025-09-09T16:02:53Z

Posted by: kakkoi

hello! i've been working on layout for a bit, and while i've got most things i want done the way i want it, i'm having issues with the way a poster is displayed on the read page

~~ignore the padding, i'll be fixing that~~, but is there any way to get the "posting in" to not display on the reading page, and have it just show the entry poster and the community?

using tabula rasa - plain, and this is the current base layout and the code regarding posters and user pics looks like this

comments

display one entry centered vertically

2025-07-04T18:36:34Z

Posted by: pixellated

hi! here's what i'm trying to achieve: i want my journal's main page to display one entry (the most recent one), and i want that entry to be vertically centered, so that the distance from the top of the entry to the navstrip is the same as the distance from the bottom of the entry to the bottom of the page. here is a quick mockup of what i have in mind:

click here for fullsize
i've tried using margin: auto for this, but it didn't work; googling around leads me to believe that that's because the entry container is an inline element and thus doesn't have a specified height, which you need for that to work. i thought about using a flexbox inside the entry with three elements arranged in a column, with the middle element holding the actual contents of the entry and the top and bottom elements growing/shrinking to provide padding, to achieve something visually similar, but i don't think that would work either for the same reason (no specified height).

is there any way to do this? the theme i'm currently using is blanket, but i'm not married to it, so if there is a different theme that allows me to do this, i will happily switch.

thank you!

comments

style_system @ 2025-06-30T19:19:00

2025-06-30T16:43:16Z

Posted by: porn_clips

Hi, I would like to ask why every new topic and every new page piles up vertically in the form of posts in the main home page? I would like to have separate pages, for each separate category, and when the link on the page is clicked, it opens a whole new page instead of scrolling down the posts! I tried changing the template with other templates, it doesn't help...

I also looked in the settings: Select Journal Style / Customize Journal Style / Test Beta Features, but I didn't find a function to create separate pages anywhere.

I also looked in the CREATE menu, but there is no option to create a new separate page, only Post Entry / Edit Entries, but again I didn't find a function to create separate pages anywhere.

I would be glad if someone with more experience could help, thanks in advance!

comments

style_system @ 2025-06-21T20:47:00

2025-06-21T17:48:08Z

Posted by: raivotar

hi again! i think how i can make my layout fonts looks like here -> sarliina.livejournal.com

codes: https://pastebin.com/zygPhnxZ

comments

Adding a otf font to a pre-existing theme.

2025-06-19T18:13:35Z

Posted by: numb3r_5ev3n

I'd like to use an otf font file type that doesn't appear to be hosted on google fonts or other font sites (Dalelands.) I have some experience tweaking things via css and linking to fonts, but I've never added a font. If I have to host it offsite, where would be a good place to do this? Thanks!

comments

style_system @ 2025-06-19T16:49:00

2025-06-19T13:50:31Z

Posted by: juneghost

hi! anyone know how i add header and background image for this layout --> https://shinemagic.dreamwidth.org/2821.html?style=mine#cutid1

comments

Attempting to Borrow a Layout

2025-04-23T01:36:52Z

Posted by: elyusion

Hello everyone :-] Look, I feel really sorry linking the journal of a stranger who presumably haven't used their journal in over a decade, but I never really used LJ and don't know anything about how it works besides what you see as a logged-out user. Does anyone know the name of this layout, which I see a lot, and is there a way I can repurpose it for DW? I think it's really cute, and if I just play with the CSS a little I could make it even better (according to my tastes).

comments

Journal Whole Page Width Issue

2025-04-15T00:46:08Z

Posted by: sireesanwar

Okay I've been working on Transmogrified as other themes I had some major frustrations with. I think I've figure most things out but suddenly I realized there is a horizontal scrollbar when there shouldn't be.

You can see it at sireesanwar . I can not figure out why my journal is like 150% wide. Anyone see what I'm not?

comments

Nested divs in a post header

2025-04-14T16:12:50Z

Posted by: jali

How can I modify the HTML side of my layout to achieve this result? I am using Practicality as my base theme.

comments

Access Filter Tiny Icons... Private, Locked, Sticky

2025-04-11T18:47:39Z

Posted by: sireesanwar

Okay I have several issues here. I'm trying to customize Transmogified from my LJ FlexiSquares and Expressive layouts. But a couple things.

1. How do I code them to provide my custom tiny icon? I figured out currents or metadata and tags and user and community but not Sticky, Private, Locked etc. DONE

2. Why are my "access filter" icons (provided by DW) showing up in the post? See images below... if you need me to friend you so you can see the "friends locked" post... let me know. The sticky one appears to be working except it disappears upon clicking a tag on the post or going into the post and I don't know if that is normal... you can see it live at my journal but a friends lock one will have to friend you.

( Images )

comments

Making Old Theme Work With Mobile?

2025-04-07T04:39:19Z

Posted by: goneahead

I really would love to keep my old theme (a customized tabula rasa plain) but it no longer works on mobile :( Checking the use layouts style sheets box doesnt help. Any chance somebody can look at my custom code and offer me a fix?

comments

help tweaking abstractia?

2025-03-22T19:06:20Z

Posted by: the_beasts

hello all! we hope everyone's doing well.

we're currently making our friends a homepage for their mutual aid efforts, using the abstractia style. we're having a few minor difficulties, and we're hoping someone with more expertise than us can help!

( cut for length to save reading pages )

thankyou all very much for taking the time to read this, and thankyou in advance for any help offered! it's much appreciated. <3

~ beasties

comments

Are there any layouts like Expressive from LJ

2025-03-13T19:16:10Z

Posted by: sireesanwar

I wanted to transfer some of my layout work over to Dreamwidth but there doesn't seem to be an equivalent of Expressive nor an easy want to move Expressive over to DW. Does anyone know if this can be done or if there is a similar layout I can learn? I've been looking but everything here seems kind of old school.

Not new to DW but not up on everything.

comments

style_system @ 2025-02-24T10:07:00

2025-02-24T08:08:48Z

Posted by: juneghost

hi! i think how i can make little icons in the entries show again, now its only text...

comments

does anyone know how to put gifs in entries?

2024-12-01T14:10:08Z

Posted by: lumemiruuuuuuuuuuu

ive been using the code to put images since nothing else worked tbh, and to host the images ive been using catbox, and everytime i try to upload a gif there and put it here the image doesnt appear sadly ;-;, if u know how to solve this ty!!!

comments

style_system @ 2024-10-27T13:46:00

2024-10-27T11:47:44Z

Posted by: juneghost

Hi! I think how i can change my layout background to black?

comments

does any1 know how to put a gif/image on the banner?

2024-10-04T16:15:03Z

Posted by: lumemiruuuuuuuuuuu

i saw the option while customing and it seemed pretty cool, but i havent been able to do it. maybe bc i have a free account? idk, but if its possible tell me :3

also does any1 know how to put custom fonts? tysm!!!

comments

SOLVED: Adjusting vertical alignment of username icons

2024-09-28T10:52:30Z

Posted by: tropicsbear

Hello!

I tweaked the fonts in my layout then noticed afterwards that the tiny username icons were misaligned with the text beside them. I was able to fix it using the code below for DW users and communities, but for other sites like AO3 and YouTube, the tiny username icons are still aligned at the bottom.

/--------------- tiny icons ---------------/ img[src*="user.png"] { vertical-align: middle !important; } img[src*="community.png"] { vertical-align: middle !important; }

Thanks in advance for any help 🙏🏽

comments

Please help me defeat the Mysterious Ugly Box

2024-09-16T21:47:14Z

Posted by: doodlemancy

I switched to the Mobility theme today so that my blog would look better on mobile devices. I've customized all the colors and fonts and stuff to my liking, but I can't for the life of me figure out how to get rid of this eyesore box at the top:

I've flicked all the modules on and off to see if I can isolate it, and it doesn't seem tied to any of them. IDEALLY I would just have my blog title and subtitle there, and no random "Modules" link (which, for what I'm doing here, is pretty redundant). I've combed all the journal customization options over a few times trying to figure out what controls what happens in that box and how I can modify it or at least shoo it away, but I've come up empty-handed. I assume this is probably something I'd have to attack with CSS? I'm not good at that stuff but I can kinda fake it until I make it, although I just honestly don't know where to start here. I would super appreciate anyone's insight.

comments

About change the Styles

2024-07-18T12:49:32Z

Posted by: porn_clips

Hello, I was pointed by support to contact you regarding templates.
My question is the following: how can I add my own template with TUBE interface? I have my own templates, developed for BLOGGER and WORDPRESS, I use program ARTISTEER and Incomedia WebSite X5 Evolution.

I looked in the options but I didn't find IMPORT TEMPLATE anywhere, I only found a section Advanced Options / Your Styles where it doesn't allow me to attach my own template that I developed myself, it only allows me to change the styles and create new ones styles. I was looking for a TUBE template, in your inline styles, but I couldn't find one anywhere, except for the standard templates that create vertical and deep pages. I would like to ask you to explain in detail how and in what way we can upload our own templates that we have developed by ourselves.

comments