Dreamwidth style system discussion

style_system @ 2019-02-18T14:42:00

2019-02-18T20:11:42Z

Posted by: athlum

Hey, I have a few questions I'm hoping somebody can help with!

I'm using Tabula Rasa Plain, with this custom css. There's three things I want to do but am not sure how/can't get to work.

1. I want the "network" link removed from the navigation without leaving a gap. Leaving the text box in the "Text" area blank left a gap, so I tried adding:
.module-navlinks .network {
display: none;
}

as I found that in another post, but the gap is still there.

2. How can I make the "edit/tags/memo/etc" and the "link/#/reply" at the end of entries all display on one line?

3. Down at the bottom under the Profile module, (how) can I hide the "subscribe/post entry/tell someone" links? (that I assume are only visible to me, but they still bug.)

I used to do layouts on LJ, so I have some understanding of CSS, but that was 10+ years ago and I've never done any on DW. I feel like I have no idea what I'm looking for. I also have a paid account and so can make layers if necessary I guess, but that's also been a good 10+ years since I did any on LJ and I would need to be walked through it.

Any help would be appreciated!

comments

Sidebar blocking banner and icon border issues

2017-01-08T12:11:57Z

Posted by: promethia_tenk

Hello all,

I'm on a devious mission to ~~convert my friend to DW~~ make my friend happier with her DW by helping make her layout closer to her LJ one (she uses Compact over there). I've made my own journal into a testing lab with Librarian's Dream as my base. This community's archives have been deeply helpful, but I'm running up against the limits of my hunt-and-fiddle knowledge of CSS and I still need to get my laundry done today.

Here is a screen grab of where I am now.

Is anyone able to help me with:

( Read more... )

Thank you in advance for any insight you're able to provide!

comments

Userpic Links {bullet points solved}

2016-03-07T23:56:13Z

Posted by: jhumor

In one of my communities, I'm using a slightly modded Abstractia.

I'd like to be able to change the userpic so that it will ALWAYS display Keyword order|View All.
Mostly I'm kind of tired on waiting for DW to do anything about this for all style sheets and I'm wondering if there's a way to code it using Custom CSS.

After searching through this comm, I came across some code that looked like it worked for CSS2, but probably won't work for Abstractia?

Anyway, so I tried changing it to this (and several derivatives of it). So, I'm just guessing this isn't the way to go about it. (I wish I understood the different CSS better.)

Any help you could grant would be great, because I have this comm and several journals that I'd like to update to forcing the keyword order and view all options.

ETA: perhaps easier? Is there a way to change the bullet point image? I know I can do it by finding a URL and doing 'background img', but I'd rather do it natively via text. (IE: currently on the style they are squares (■) I want them to be one of my choice.)

SOLUTION: Use this code:

Where XXX are options from a CSS List Style website.

Thanks in advanced.

comments

show lock icon in page summary module?

2015-12-13T02:04:27Z

Posted by: runpunkrun

If a post is locked, is there a way to add the lock icon to its line on the page summary module? LJ does it, like:

username - [protected post icon] entry title

comments

Rounded image/table corners

2015-08-31T04:05:32Z

Posted by: jordannamorgan

This is probably a question I should have asked a long time ago, but it's come up again in my updating of some old layouts, so. :Þ

A couple of different layouts I use (including my own journal and prose_alchemist) not only give rounded corners to entries and modules, they insist on rounding off the corners--or sometimes half the corners--of my header images as well.

Is there a way I can get rid of all the rounded corners, and just have nice, straight, angular ones? I'd like to do that with the header images and entries/modules, although I'd settle for just not having the corners of my headers forcibly rounded off. (If I wanted them rounded, I would have made them that way, DW...)

EDIT: issue solved! CSS to do the trick is here in the comments. Thanks for the helps!

comments

Two questions: module spacing and profile text

2013-02-04T04:29:37Z

Posted by: jordannamorgan

I'm looking for help with a couple of items, respectively related to modules in the Ciel style, and font size in my profile.

#1: Is there a way to put just a few pixels' space between the modules on my journal pages? I don't care for how they're sitting directly on top of each other. (ETA: this is resolved, thanks!)

#2: I want to change the size (and perhaps the colors) of the text on my profile page. I've been trying to do so by using the font size HTML tag in the profile-editing area, since I've coded a table with some graphics there. However, try as I might, I can't get any font-altering tags to work. The size refuses to change. Any solution? (Still haven't found an answer for this!)

Thank you for any help!

comments

Sidebar cuts off on .lj-view-entry,.lj-view-archive and.lj-view-month using Flexible Squares on DW

2012-11-17T01:29:48Z

Posted by: marahmarie

ETA: SOLVED. With this layout, deleting display:none from .clearfoot fixes things right up (yes, the design seems to be inadvertently coded so that it cuts off the sidebar in the three views mentioned in my post title).

Like in this example. Another user in this community had the same problem months ago (not with this style, actually a Core 2 style) and I was one of the ones who helped them, though I wasn't of much help because nothing I tried or suggested at the time really worked. Can't help myself now, either. Any suggestions?

comments

Halp!

2012-07-27T16:41:36Z

Posted by: megwrites

I'm trying to customize my layout. I'm using For The Bold, and what I'd like to do is take each section of the side bar and make it a different color.

So, the top part with my icon would be, say, red, and then the navigation would be blue and the recent entries green, and so on and so forth. I'm not sure how to do this in CSS. Any help you can give would be really great!

comments

Question regarding module headers.

2012-05-06T20:41:04Z

Posted by: ephemeraldelusion

EDIT:: Problem solved, thanks to awakened! C:

Currently, I am having issues with wanting to change the module header text for both "Links" and "Profile" at the bottom of my page [akin to how one may edit said header text for the 'custom text' box module] as is seen like this --

"<body>
<div class="module-userprofile module"><h2 class="module-header"><a href="http://ephemeraldelusion.dreamwidth.org/profile">Profile</a></h2>
<div class="module-typelist module"><h2 class="module-header">Links</h2>
</body>"

"<body>
<div class="module-userprofile module"><h2 class="module-header"><a href="http://ephemeraldelusion.dreamwidth.org/profile">delineation</a></h2>
<div class="module-typelist module"><h2 class="module-header">connections</h2>
</body>"

[Yes, I am one of those obnoxious people who love to use fancy words in place of the given titles.]

However, I have noted that one may not edit any body text, of course, so how may I go about doing this? Is there any way?

Currently I have "h2.module-header { display:none; }" in its place as the titles were bothering me that badly. [Sadly that removes the calender header as well, which I am rather displeased about.]

Is there anything I may do or am I stuck module header-less for the rest of my stay? [I really am not all too savvy in CSS, so I may be asking a stupid question.]

comments

Layout help, fixed & fluid (Tabula Rasa)

2012-02-18T04:40:53Z

Posted by: erinptah

I'm working on two Tabula Rasa layouts -- one fixed, one fluid, with matching graphics -- and starting to hit the limit of what my understanding of CSS can handle. Help?

Here's the current state of the fixed-width layout, currently enabled at punditfic:

/********************DO NOT REMOVE THIS********************
New York Skyline by sailorptah
Theme: Tabula Rasa
CSS inspiration: http://www.csszengarden.com/?cssfile=200/200.css
Image: http://commons.wikimedia.org/wiki/File:Upper_and_Middle_Manhattan.jpg
Layouts: http://sailorptah.dreamwidth.org/tag/layouts
*************************************************************/

/* Cleaned CSS: */

H1, H2, H3 {
    margin: .25em 0;
    padding: .25em 0;
}

img {
    border: none;
}

hr {
    display: none;
}
.entry-content hr,
.comment-content hr {
    display: block;
    margin: 1em 10%;
}

body {
	font-family:Arial, Helvetica, sans-serif;
	background:#0D1A21 url(http://i142.photobucket.com/albums/r102/sailorptah/layouts/nyc-body.png) repeat-y top left;
	font-size:0.8em;
	color:#fff;
	font-weight:normal;
	margin:0;
	padding:0;    
}

html body {
    margin-left: 0em;
    margin-right: 0em;
}

a { 
	color:#a9e0ff;
	border-bottom:#a9e0ff dotted 1px;
        text-decoration: none;
 }
a:visited { 
	color:#fff;
	font-weight:normal;
	border-bottom:#a9e0ff dotted 1px;
	text-decoration:none;
 }
a:hover, a:active { 
	color:#fff;
	border-bottom:#fff dotted 1px;
        text-decoration: none;
 }

q { font-style: italic; }

.one-column #content { float: none; }
.two-columns-left #content,
.three-columns-sides #content {
    border-left: 15em solid transparent;
}
.two-columns-right #content,
.three-columns-sides #content {

}
.three-columns-left #content {
    border-left: 30em solid transparent;
}
.three-columns-right #content {
    border-right: 30em solid transparent;
}
.column-right #content {
    min-width: 15em; /* prevents sidebar overlap of entry, when entry becomes narrower than sidebar */
}

#content-footer {
    height: 0;
    font-size: 0; /*to make IE happy*/
    clear: both;
}

#header, #footer {
    margin: 0;
    clear: both;
    padding: .5em;
}

#header {
	position:absolute;
	top:20;
	left:0;
	background:#0D1A21 url(http://i142.photobucket.com/albums/r102/sailorptah/layouts/nyc-header-2.png) no-repeat top left;
	height:343px;
	width:100%;
}

h1#title span {
    position: absolute;
    top: 30px;
    left: 500px;
    font: 50px "Copperplate Gothic Light";
    text-transform: uppercase;
}

h2#subtitle span {
    position: absolute;
    top: 80px;
    left: 500px;
    font: 20px bold "Arial Narrow";
}
h2#pagetitle span {
    position: absolute;
    top: 100px;
    left: 500px;
    font: 20px "Arial Narrow";
}

#primary {
	position:relative;
	text-align:justify;
	width:400px;
	top:320px;
	left:140px;
	z-index:4;
}

.one-column #primary { float: none; }

#primary > .inner:first-child {
    padding: 1em;
}

.one-column #secondary { width: auto; }

.two-columns-left #secondary,
.three-columns-sides #secondary {
    float: left;
    width: 15em;
    margin-left: -15em;
}
.two-columns-right #secondary {
	position:absolute;
	top:385px;
	width:200px;
	text-align:center;
	left:611px;
	font-size:0.85em;
	background:transparent;
}
.three-columns-left #secondary {
    float: left;
    width: 15em;
    margin-left: -30em;
}
.three-columns-right #secondary {
    float: right;
    width: 15em;
    margin-right: -15em;
}

#secondary > .inner:first-child {
    padding: 1em;
}

.one-column #tertiary { width: auto; }

.two-columns-left #tertiary,
.two-columns-right #tertiary {
    clear: both;
}
.two-columns-left #tertiary { margin-left: -15em; }
.two-columns-right #tertiary { margin-right: -15em; }
.two-columns-left #tertiary .module,
.two-columns-right #tertiary .module {
    float: left;
    width: 15em;
}
.three-columns-left #tertiary {
    float: left;
    width: 15em;
    margin-left: -15em;
}
.three-columns-right #tertiary {
    float: right;
    width: 15em;
    margin-right: -30em;
    margin-left: 15em; /* so that #tertiary won't overlay #secondary in IE7 */
}
.three-columns-sides #tertiary {
    float: right;
    width: 15em;
    margin-right: -15em;
}

#tertiary > .inner:first-child {
    padding: 1em;
}

.topnav, #footer {
display: none;
}

.bottomnav {
	margin-top: 10px; 
	font-size:0.85em;
	letter-spacing: -0.07em;
	font-size: 1.2em;
	text-transform: uppercase;
}

.navigation ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
.navigation li {
    display: inline;
    padding: 0 .5em;
}
.noentries {
    padding: 0 .5em;
}

/* entries */

.entry {

}

.entry h3 {
   font: bold 18px "Copperplate Gothic Light";
}

.contents .userpic {
    background: transparent;
    float: right;
    padding: 5px;
    spacing: 5px;
}

.entry .entry-content {
   margin-top: 30px;
   margin-bottom: 30px;
}

/* To prevent overlapping when icon's on the left */
/* and list is the first thing in content */
.entry-content li,
.comment-content li {
    list-style-position: inside;
    }

.metadata ul {
    display: inline;
    list-style: none;
    margin-left: .5em;
    padding-left: 0;
}
.metadata li {
    margin-bottom: .5em;
}
.metadata.top-metadata ul {
    margin: 0;
}
.metadata.top-metadata {
    margin-bottom: 1em;
}

.tag ul {
    display: inline;
    list-style: none;
    margin-left: .5em;
    padding-left: 0;
}
.tag ul li {
    display: inline;
    padding: .25em;
} /* same for month view */

ul.entry-management-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
ul.entry-management-links li {
    display: inline;
    padding: 0 .25em;
}

ul.entry-interaction-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    text-align: right;
}

.entry-interaction-links a {  }

ul.entry-interaction-links li {
    display: inline;
    padding: 0 .25em;
}

/* comments */

.comment-wrapper {
    padding: .5em 0;
}

.comment-wrapper-odd .header {
   background: #0D1A21;
   padding: 5px;
}

.comment-content {
   margin-top: 10px;
   margin-bottom: 10px;
   min-height: 100px;
   }

.comment-wrapper-even .header {
   background: #294A5D;
   padding: 5px;
}

.comment-title h4 {
    font: bold 18px "Copperplate Gothic Light";
    margin: 0;
    padding: 0;
}

ul.comment-management-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    text-align: right;
}
ul.comment-management-links li {
    display: inline;
    padding: 0 .25em;
}

ul.comment-interaction-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
ul.comment-interaction-links li {
    display: inline;
    padding: 0 .25em;
}

textarea#commenttext {
    width: 100%; /* fix for FF form width glitch */
}

/* archive */

.month {

}

table.month {
    margin: 0 auto;
    border-collapse: collapse;
}
table.month td {
    height: 3.25em;
}
table.month td,
table.month th {
    border: 1px solid; /* ? */
    padding: 3px;
}
table.month td p {
    margin: 0;
    padding: 3px;
}

.month dl dt {
    font-weight: bold;
}
.month dl .time {
    padding-right: .5em;
}
.month dl h3 {
    display: inline;
    font-size: medium;
}
.page-month .month .entry-poster {
    margin-right: .5em;
}
.month dl .tag ul {
    margin-top: 0;
}

/* icons */

.sorting-options ul {
    list-style: none;
    margin-left: 0;
}

.sorting-options ul li {
    display: inline;
}

.keywords ul {
    display: inline;
    list-style: none;
    margin-left: .5em;
    padding-left: 0;
}

.keywords ul li {
    display: inline;
    padding: .25em;
}

/* modules */

.module h2 {
    font: bold 18px "Copperplate Gothic Light";    
}

.module-content ul {
    list-style: outside;
    margin-left: 1em;
    padding-left: 0;
}
.module-content li {
    margin: .5em 0;
    list-style-type: none;
}

ul.userlite-interaction-links.icon-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

ul.userlite-interaction-links.icon-links li {
    display: inline;
    padding: 0 .20em;
}

ul.userlite-interaction-links.text-links {
    text-align: left;
}

.module-calendar .module-content {
    text-align: center;
}

.one-column .module-calendar .module-content {
    text-align: left;
}

.module-calendar table {
    margin: 0 auto;
}

.one-column .module-calendar table {
    margin: 0;
}

.module-calendar td {
    padding: 1px;
}
.module-calendar td a {
    display: block;
    padding: 2px;
}

.search-box {
    margin: .2em auto;
}

/* wrap long content, particularly openid usernames */
.module-pagesummary .ljuser {
    white-space: normal !important;
}
.module-pagesummary .module-content {
    word-wrap: break-word;
}
.module-credit dt, .module-credit dd {
    display: inline;
    margin: 0;
    padding: 0;
}
.module-credit dt {
    font-weight: bold;
    margin-right: 0.5em;
}

.tags_cloud li, .module-tags_cloud li { display: inline;
    list-style-type: none; }

.module-syndicate .module-content {
    text-align: center;
}

.one-column .module-syndicate .module-content {
    text-align: left;
}

.module-time, .module-powered {
   width:200px;
   margin-left:631px;
   font-size:0.85em;
   clear:left;
}

And here's the fluid version, visible in action at andthatstheword:

/*************DO NOT REMOVE THIS*************
New York Skyline (Fluid) by sailorptah
Theme: Tabula Rasa

CSS inspiration: http://visualwit.dreamwidth.org/28429.html
Image: http://commons.wikimedia.org/wiki/File:Upper_and_Middle_Manhattan.jpg
Layouts: http://sailorptah.dreamwidth.org/tag/layouts

********************************/

/*--- main ---*/

* {
	margin: 0px; 
	padding: 0px;
	}

BODY {
	font-family:Arial, Helvetica, sans-serif;
	background: #0E1920 url('http://i142.photobucket.com/albums/r102/sailorptah/layouts/city-bg.png');
	color: #fff;
	font-size: .8em;
	margin: 30px 0px 0px 0px;
	}

a { 
	color:#a9e0ff;
	border-bottom:#a9e0ff dotted 1px;
        text-decoration: none;
	}

a:visited { 
	color:#fff;
	font-weight:normal;
	border-bottom:#a9e0ff dotted 1px;
	text-decoration:none;
	}

a:hover, a:active { 
	color:#fff;
	border-bottom:#fff dotted 1px;
        text-decoration: none;
	}

blockquote {
	background-color: #0D1A21;
	padding: 8px; 
	margin: 15px 55px 15px 15px; 
	text-align: justify;
	}

.contents .userpic {
	background: transparent;
	float: right;
	padding: 5px;
	spacing: 5px;
	}

hr {
	display: none;
	}

#primary { 
	text-align:justify;
	background-image: url('http://i142.photobucket.com/albums/r102/sailorptah/layouts/city-modules.png')
	}

#secondary { 
	text-align:center;
	background-image: url('http://i142.photobucket.com/albums/r102/sailorptah/layouts/city-modules.png'); 
	background-color: #7eadc8;
	}

/*--- header ---*/

#header { 
	height: 306px;
	background:#0D1A21 url(http://i142.photobucket.com/albums/r102/sailorptah/layouts/city-nyc.png) repeat-y top left;
	margin-top: -20px;
	}

h1#title, h2#subtitle, h2#pagetitle {
	color: #fff;
	text-align: right;
	margin-right: 10%;
	}

h1#title {
	font: 50px "Copperplate Gothic Light";
	font-size: 3em;
	}

h2#subtitle { 
	font-size: 1.5em;
	font: 20px bold "Arial Narrow";
	}

h2#pagetitle { 
	font-size: 1.5em;
	font: 20px "Arial Narrow";
	}

/*--- sidebar options ---*/

.two-columns-left #primary {
	float: right;
	margin-right: 8%;
	margin-top: -2px;
	padding: 2%;
	width: 56%;
	}

.two-columns-left #secondary { 
	float: left; 
	width: 19%; 
	margin-left: 8%; 
	margin-top: -2px;
	padding: 1%;
	}

.two-columns-right #primary {
	float: left;
	margin-left: 8%;
	margin-top: -2px;
	padding: 2%;
	width: 56%;
	}

.two-columns-right #secondary { 
	float: right; 
	width: 19%; 
	margin-right: 8%; 
	margin-top: -2px;
	padding: 1%;
	}

.two-columns-right #tertiary, .two-colums.left #tertiary { 
	clear: both; 
	}

.two-columns-right #tertiary .module, .two-colums.left #tertiary .module { 
	float: left; 
	}

/*--- sidebar ---*/

.module { 	
	text-align: center;
	}

.module-content { 
	padding: 10px; 
	font-size: .85em;
	}

.module-content ul {
	list-style: outside;
	margin-left: 1em;
	padding-left: 0;
	}

.module-content li {
	margin: .5em 0;
	list-style-type: none;
	}

.module-active, .module-search, .module-cuttagcontrols, .module-userprofile, .module-customtext, .module-typelist, .module-tags_list, .module-pagesummary, .module-calendar, .module-syndicate { 
	}

.module-powered, .module-time { 
	font-size:0.85em;
	}

.module h2 {
	font: bold 1.5em "Copperplate Gothic Light";
	color: #fff; 
	text-align: center;
	}

ul.userlite-interaction-links.icon-links {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	}

ul.userlite-interaction-links.icon-links li {
	display: inline;
	padding: 0 .20em;
	}

ul.userlite-interaction-links.text-links {
	text-align: left;
	}

div.manage-tags-link { 
	margin: 10px 0px 0px 0px;
	text-transform: uppercase; 
	text-align: right; 
	}

.module-calendar .module-content {
	text-align: center;
	}

.one-column .module-calendar .module-content {
	text-align: left;
	}

.module-calendar table {
	margin: 0 auto;
	}

.one-column .module-calendar table {
	margin: 0;
	}

.module-calendar td {
	padding: 1px;
	}

.module-calendar td a {
	display: block;
	padding: 2px;
	}

/* wrap long content, particularly openid usernames */
.module-pagesummary .ljuser {
	white-space: normal !important;
	}

.module-pagesummary .module-content {
	word-wrap: break-word;
	}

.module-credit dt, .module-credit dd {
	display: inline;
	margin: 0;
	padding: 0;
	}

.module-credit dt {
	font-weight: bold;
	margin-right: 0.5em;
	}

.tags_cloud li, .module-tags_cloud li { display: inline;
    list-style-type: none; }

.module-syndicate .module-content {
    text-align: center;
}

/*--- navigation (for entries) ---*/

.navigation { 
	color: #fff;  
	text-align: center; 
	padding: 5px; 
	margin: 0px 0px 0px 0px; 	
	letter-spacing: -0.07em;
	font-size: 1.2em;
	text-transform: uppercase;
	}

.topnav, #footer { 
	display: none; 	
	}

.bottomnav { 
	margin-top: 10px; 
	font-size:0.85em;
	}

.page-separator { 
	padding: 10px; 
	}

div.navigation ul { 
	display: inline; 
	}

div.navigation li { 
	display: inline; 
	list-style: none; 
	}

li.page-back, li.page-forward {
	display: inline; 
	list-style: none; 
	}

/*--- entries ---*/

div.entry { 
	margin: 0px 0px 15px 0px;
	}

div.entry-content { 
	padding: 10px; 
	min-height: 100px; 
	margin: 20px 0px 20px 0px;
	}

div.entry div.header { 
	padding: 5px 10px 5px 10px; 
	margin: 0px 0px -10px 0px; 
	margin-right: 0px; 
	text-align: left;
	font-weight: lighter;
	}

.entry h3 {
	font: bold 1.4em "Copperplate Gothic Light";
	}

.entry-title a { 
	padding: 3px 5px 5px 5px;
	color: #efefef; 
	}

.datetime {  
	font-size: .85em;
	color: #fff; 
	padding-bottom: 5px;
	}

.entry-poster, .comment-poster { 
	padding: 7px 5px 5px 5px;
	}

/*--- currents and tags ---*/

.metadata { 
	font-size: 0.7em; 
	padding: 10px 15px 5px 15px; 
	margin: 0px;  
	text-transform: uppercase; 
	margin-right: 0px; 
	}

.metadata ul {
	display: inline;
	list-style: none;
	margin-left: .5em;
	padding-left: 0;
	}

.metadata li {
	margin-bottom: .5em;
	}

.metadata.top-metadata ul {
	margin: 0;
	}

.metadata.top-metadata {
	margin-bottom: 1em;
	}

.tag ul {
	display: inline;
	list-style: none;
	margin-left: .5em;
	padding-left: 0;
	}

.tag ul li {
	display: inline;
	padding: .25em;
} /* same for month view */

ul.entry-management-links {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	}

ul.entry-management-links li {
	display: inline;
	padding: 0 .25em;
	}

ul.entry-interaction-links {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	text-align: right;
	}

.entry-interaction-links a {  }

ul.entry-interaction-links li {
	display: inline;
	padding: 0 .25em;
	}

.tags-container ul {

/*--- archive page ---*/

table.month {
	margin: 0 auto;
	border-collapse: collapse;
	}

table.month td {
	height: 3.25em;
	}

table.month td, table.month th {
	border: 1px solid; /* ? */
	padding: 3px;
	}

table.month td p {
	margin: 0;
	padding: 3px;
	}

.month dl dt {
	font-weight: bold;
	}

.month dl .time {
	padding-right: .5em;
	}

.month dl h3 {
	display: inline;
	font-size: medium;
	}

.page-month .month .entry-poster {
	margin-right: .5em;
	}

.month dl .tag ul {
	margin-top: 0;
	}

/*--- comments ---*/

.comment { 
	margin: 0px 0px 20px 0px;	
	}

.comment-content {
	margin-top: 10px;
	margin-bottom: 10px;
	min-height: 100px;
	}

.comment-wrapper {
	padding: .5em 0;
	}

.comment-wrapper-odd .header {
	background: #0D1A21;
	padding: 5px;
	}

.comment-wrapper-even .header {
	background: #294A5D;
	padding: 5px;
	}

.comment-title h4 {
	font: bold 18px "Copperplate Gothic Light";
	margin: 0;
	padding: 0;
	}

ul.comment-management-links {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	text-align: right;
	}

ul.comment-management-links li {
	display: inline;
	list-style: none;
	padding: 0 .25em;
	}

ul.comment-interaction-links {
	display: inline;
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	}

ul.comment-interaction-links li {
	display: inline;
	padding: 0 .25em;
	}

.multiform-checkbox {
	padding-top: 20px;
	}

Issues in the fixed-width layout:

~~When the page isn't tall enough, module-content and module-powered show up in the middle of the sidebar.~~ Avoided!

In the main entry view, how can I get usernames to display reliably under the userpic? The best I got (through messing with margins) was "it'll appear there, but entry text will overlap it." (Also a problem in the fluid version.) Solved in both!

New issue...when #primary is shorter than #secondary, the page only scrolls down as far as #primary.

Things in the fluid layout that I can't get to match the fixed-width layout:

~~On the calendar-by-month view, the entry information isn't indented with respect to the date.~~ Prettied up!

~~Similarly, the bulleted list on the tags page isn't indented.~~ Solved!

~~Information in the entries on the main page is all squished together (title overlapping with date/time, tags overlapping with entry tools).~~ Solved!

~~Everything to do with comment display just isn't happening. The tools won't display inline, there's no space around comment-content, the header has no background...~~ Solved!

Other issues with the fluid layout:

Can I make the #primary and #secondary divs extend to the bottom of the page (to extend the background) without covering the header?

Looks like I need to do something with module-content and module-powered here too. When the sidebar is on the left, they try to squeeze into the gap between #secondary and #primary. This isn't a problem when the sidebar is on the right (or at least, it hasn't been at my resolution). Solved!

Anyone who can point me in the right direction on any of these points would be greatly appreciated!

comments

New at DW and CSS and needing help puppy eyes

2012-02-02T05:07:40Z

Posted by: denig37

Layout: Halloween
by dancing_serpent for ColorSide

Problem 1 : Header - I want to get rid of the journal title, subtitle and the "Recent" (or any nav title) SOLVED!
Problem 2 : Links at the bottom of entries (AKA edit entry, adit tags,...) - I want them to me white :-) SOLVED!
Problem 3 : Navi links - I want to move them under the header and centered. SOLVED!
Problem 4 : Subject of entries - is it possible to move them a few px to the right from the icon? And maybe making the font a bit bigger and in bold? SOLVED!
Problem 5 : I want to get rid of the "Previous 20/Next 20" links/bar at the top of the journal and only leaving the ones at the bottom. SOLVED!
Problem 6 : I would like to move everything (icon, subect, date, TEXT,...) a few px on BOTH sides from the border in the entries AND the module/sidebar. SOLVED!
Problem 7 : I would like to move the entries so when clicking on the "Reading/Friends" page (or any other for that matter) they would be at the same height as on the "Recent" page (AKA same distance from the header everywhere). SOLVED!

I'm totally new here and have no clue how to write CSS so if you managed to help me with these with some CSS coding or even just pointing me in the right direction and telling me what's possible and what not I would be super thankful and might possibly owe you my firstborn :-D
The DW confuses me and takes away my sleep :-( Please help! O.o

comments

Reproducing layout / Links & sidebar in wrong place?

2011-12-24T04:11:17Z

Posted by: scarletseraph

[ETA]: Solved!

Hullo!

I'm not so much an LJ refugee as that I keep an outpost on DW just in case. My layout over there has a lot of personal customzations - it's not one of the public themes; it's something I did the graphics and colours for myself, and not being able to reproduce it has been one of the things that's kept me from wanting to be as active on DW as I am LJ.

Well, I only just tonight found out that there's a tutorial on importing LJ styles (this one here, using the instructions for a Mixit import). While I have the layers created and compiled okay, I have run into one minor(?) problem... On LJ, I'm using Expressive as my base, which I'd gotten the impression was more-or-less the same as Mixit so I thought it might work alright. Apparantly there are more differences than I realized, because while the basics of the layout are there, there are features that have shifted around - the links specific to each entry are now in vertical colums rather than horizontal lines, as are my header links, and my sidebar is appearing at the bottom of the page (after my entires). (That's probably an obvious enough explanation, but in case it's not, this is how it looks on DW, and this it how it looks on LJ).

I don't generally mind trying to tweak things when I know what it is what I actually need to tweak, but I don't have the kind of mind that'll let me paw through code and find the problem. I'm assuming it's either an issue in the CSS somewhere (though I could be wrong) or there's an adjustment I could make to the CSS to compensate for the base code, but it's all just too much like an algebra problem for me and my dyscalculia to figure out. :/ Does anyone have suggestions for what I might be able to do to fix it, or know of a fix that's already in use - preferably one that doesn't involve having to switch to Mixit on LJ, trying to recreate the layout there, and copying it back to here? (Or is there a local style that might be suited to rigging a similar look on DW? I did glance through the themes here, but didn't see anything that seemed to be a good fit. I'm not averse to some changes, but I'd like to keep my header graphic/page background and colours/etc - and a lot of the local styles also have entry boxes that get squashed due to my monitor's resolution being on the lower end.)

[ETA]: Getting the links onto their lines seems to be more-or-less handled, now, so I'm left with:

- The sidebar not positioning properly
- Entry tags vertical-columning (though I suspect I may know how to fix this eventually, if I play around with things enough - now that i see how the link lines were fixed)

comments

How to move a module in css, or get the background image to overlay it

2010-12-13T23:58:34Z

Posted by: mayfly

If you go to my DW page, you can see there is a black background image. Essentially, I want that to show, and I want to move the left green module down further. I added some padding to get the content further down, but I'm not sure how to actually just get the green module to *move*.

The red is just there for testing. Although, I would be trying to move the links over as well with padding.

This would be easily solved if I could figure out how to get the background image to overlay the css - but I think that's not possible.

*Edit* I've been able to move it because I found the page where we can actually edit the css easily (the S2 page). I guess I'll be using that from now on instead of the main CSS box where we have to scroll back down every time we change one line of code!

comments