help with customizing a dusty foot layout?

[ar]

Hi! I've expended all my (admittedly paltry) CSS knowledge trying to figure this out, so I thought I'd put it to you all. ♥

At thraxios, I'm using the Dusty Foot layout and customizing it with images. If you take a look at it right now, you'll see that there's a brown paper background for the journal as a whole and a white paper background for individual entries. In between those, there's a white box.

I'd like to replace that white box with the white paper background so that the entries look like a single sheet of paper. Is this possible with this layout? All I've been able to manage with custom CSS is taking the white box away so that the brown background shows through, and that's really not the look I'm hoping for.

Thanks!

ETA: If possible, I'd like to do the same with the charcoal grey boxes on the header (the long, thin strip behind the links), the side modules, and the strip behind the "top of the page" link on the bottom. Except with my black image, natch.

Comments

[seleneheart]

You need to add the background image to the primary container. Like this:

#primary {background: #ffffff url(http://i50.tinypic.com/z4755.jpg) repeat top left;
    float: left;
    width:100%;
    margin-right:-100%;
    margin-left: 0;
}

Every other place you want that image to show up, put the same code in.

[ar]

Okay! Is there a way to see the CSS for the Dusty Road layout so I know what other places I need to put it in?

(I'm sorry, I am really bad at CSS. I usually make my roommate figure it out for me. D:)

[seleneheart]

This is the link to your stylesheet so you can see all the code: http://thraxios.dreamwidth.org/res/1765890/stylesheet?1366151152

In the DW style wizard, there is a box for Custom CSS. You can just paste the code above into that box and save changes. That will be the only thing that changes.

[thraxios]

Oh, thank you so much! I usually work with custom stylesheets, so I just monkey around with the Custom CSS box. This is the first time I've tried mucking with one of the original site layouts. I really appreciate your patience in this. ♥

[carene_waterman]

I would amend that code a little. Some of it that you've copied into the custom CSS box is related to the layout of the page. Right now you have this:

#primary {
    background: #ffffff url(http://i50.tinypic.com/z4755.jpg) repeat top left;
    float: left;
    width:100%;
    margin-right:-100%;
    margin-left: 0;
}

everything except the background property declaration is already in the Dusty Foot stylesheet to position the main column and you don't need to repeat it. Copying it over to other elements might cause some very unexpected results.

put this in your custom CSS instead:

#primary {
    background: #ffffff url(http://i50.tinypic.com/z4755.jpg) repeat top left;
}

The layout stuff from the style layer will still do its job.

Then you can add the other areas you want the white background, so if you want it as a sidebar background you can do this:

#primary,
#secondary {
    background: #ffffff url(http://i50.tinypic.com/z4755.jpg) repeat top left;
}

sorry, sorry, I forgot about the sidebar not going all the way to the bottom, as per comment below.

You want

#primary,
#secondary,
#content  {
  background: #ffffff url(http://i50.tinypic.com/z4755.jpg) repeat top left;
}

#content is the main, well, content div that the two columns sit on, so that should give you the white where you want it.

[momijizukamori]

For the dark images:

#header .module-navlinks, #secondary, #footer {background: url("http://i50.tinypic.com/2ajoz8k.jpg") repeat scroll left top #D5D5D5;}

.module {background: none !important;}


Getting rid of the excess white at the bottom of the sidebar is a little trickier and will have to wait until I get home from work or someone else gets to it. Unfortunatel you can't make the background image go all the way down on CSS

(also haha, hi, Thamuris-mun here)

[momijizukamori]

Make that


#content, #header .module-navlinks, #footer {background: url("http://i50.tinypic.com/2ajoz8k.jpg") repeat scroll left top #464646;}

.module {background: none !important;}



Should make the dark background solid all the way down!