new layout [revised post]
7 Dec 2010 11:19 am![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
kaigouDid this new layout over the weekend, which might sound like a lot but it's really just a riff off a redesign I did for a non-DW site, so the basics were already in place. (Well, mostly, given that all LJ-clones have the same wacky multiple-multiple-multiple divs coming out of the ears.)
The font is entirely em-based, and the width is fluid, with a fixed left column. This is only the first draft, so there's no flipping columns and no double-column -- not sure I'd do a double-column with this layout, but having the option to flip might be nice, for anyone who prefers sidebars on the right. Anyway, here's how I got what you see on my pages.
Prepping the CSS file:
1. Pick a color scheme. There are eight nine eleven of them. I can't COUNT. Anyway, download the image you want, then upload it to your server of choice.
2. Click here to download the text file (or open it in a new window).
3. Open the text file, in something simple like Notepad (PC) or TextEdit (Mac). Do a search and replace for each header in the table, replacing with the corresponding color for the color scheme you want. In other words, if you want the blue color scheme, replace X05X with F6F8FF, replace X04X with E9EEFF, and so on, to X01X.
4. Last important step in the file! About the 12th line in the text file, replace the underlined part with the URL of wherever you've stored the image online: photobucket, flickr, DW, LJ, etc. (Note: if you've already done the colors, the "X05X" will be a color-code at this point.)
background: #X05X url(http:// PUT-URL-ADDRESS-FOR-IMAGE-HERE) 0 0 repeat-y;
5. Save this edited file, so it'll be ready for copying into the "Custom CSS" page.
Now for the setup in the DW admin end. Go to your "Customize Style" page...
1. Select the base layout of "Crossroads". I don't think it makes any difference which one, though I used "Persimmon."
2. Make sure the column option is one sidebar, on the left-hand side. This part won't get overwritten so you do need to make sure of this detail. (Technical version: the CSS contains options for right-hand sidebar, but I haven't flipped the images for right-hand version yet).
3. In the first tab, double-check your choices against what I've got here. I'm not sure most of these choices make a difference, EXCEPT the one about which side the icon is on -- you'll need to put the icon on the RIGHT.
4. In the second tab, make sure all the colors options are completely blank. (Expand the rest and check them, too.)
5. Also in the second tab, clear out all the fonts. You can put fonts in if you have other preferred fonts, but it's probably best to start with default and then adjust to your taste. Anyway, like with colors (#4), expand all the rest and clear them out as well.
6. In the third tab, make sure "Navigation" is in the #1 slot and is in the "Group One" -- and anything else you want visible is also in Group One. (The style won't show Group Two, or if it does, it'll probably show up way wacky.)
THIS IS VERY IMPORTANT! The "navigation" option must be the FIRST in order, so it'll show up at the TOP LEFT of your page. If you leave this out, the entire page shifts upwards. (Still working on this part, but for now, consider the "navigation" option to be, well, NOT an option.)
7. In "Customize Your Theme", click on "Custom CSS" (bottom option, on the left-hand tabs). Make sure the first checkbox IS checked -- "Use layout's stylesheet(s)". For now, this style requires the foundation of the existing style.
Check your page. If all your columns are shoved to the waaaaaaay right and practically off-screen, it means you don't have the checkbox clicked on the "Custom CSS" page. The colors should be pretty monochromatic, so if there's a wacky one in there, make sure you copied all of the same line.
Note: the links remain the conventional blue on hover in the sidebar, because I removed the underscore... so it seemed best to keep at least the blue. In a post, the text will be the darkest shade, but will go the conventional blue on hover AND show an underline, in case you're wondering.
Sidebar background images:
http://i385.photobucket.com/albums/oo292/solnull/other/yellow.jpg
http://i385.photobucket.com/albums/oo292/solnull/other/taupe.jpg
http://i385.photobucket.com/albums/oo292/solnull/other/tan.jpg
http://i385.photobucket.com/albums/oo292/solnull/other/steel.jpg
http://i385.photobucket.com/albums/oo292/solnull/other/pink.jpg
http://i385.photobucket.com/albums/oo292/solnull/other/lilac2.jpg
http://i385.photobucket.com/albums/oo292/solnull/other/lilac.jpg
http://i385.photobucket.com/albums/oo292/solnull/other/green.jpg
http://i385.photobucket.com/albums/oo292/solnull/other/gray.jpg
http://i385.photobucket.com/albums/oo292/solnull/other/blue.jpg
Click on one to open it. If you want that color, right-click on the image and do a "save as".
Colors:
Alright, those are all the setups I've got currently, so if you run into trouble, I'll dig deeper on what it might be... but I'm hoping the extra bits do the trick.
The font is entirely em-based, and the width is fluid, with a fixed left column. This is only the first draft, so there's no flipping columns and no double-column -- not sure I'd do a double-column with this layout, but having the option to flip might be nice, for anyone who prefers sidebars on the right. Anyway, here's how I got what you see on my pages.
Prepping the CSS file:
1. Pick a color scheme. There are eight nine eleven of them. I can't COUNT. Anyway, download the image you want, then upload it to your server of choice.
2. Click here to download the text file (or open it in a new window).
3. Open the text file, in something simple like Notepad (PC) or TextEdit (Mac). Do a search and replace for each header in the table, replacing with the corresponding color for the color scheme you want. In other words, if you want the blue color scheme, replace X05X with F6F8FF, replace X04X with E9EEFF, and so on, to X01X.
4. Last important step in the file! About the 12th line in the text file, replace the underlined part with the URL of wherever you've stored the image online: photobucket, flickr, DW, LJ, etc. (Note: if you've already done the colors, the "X05X" will be a color-code at this point.)
background: #X05X url(http:// PUT-URL-ADDRESS-FOR-IMAGE-HERE) 0 0 repeat-y;
5. Save this edited file, so it'll be ready for copying into the "Custom CSS" page.
Now for the setup in the DW admin end. Go to your "Customize Style" page...
1. Select the base layout of "Crossroads". I don't think it makes any difference which one, though I used "Persimmon."
2. Make sure the column option is one sidebar, on the left-hand side. This part won't get overwritten so you do need to make sure of this detail. (Technical version: the CSS contains options for right-hand sidebar, but I haven't flipped the images for right-hand version yet).
3. In the first tab, double-check your choices against what I've got here. I'm not sure most of these choices make a difference, EXCEPT the one about which side the icon is on -- you'll need to put the icon on the RIGHT.
4. In the second tab, make sure all the colors options are completely blank. (Expand the rest and check them, too.)
5. Also in the second tab, clear out all the fonts. You can put fonts in if you have other preferred fonts, but it's probably best to start with default and then adjust to your taste. Anyway, like with colors (#4), expand all the rest and clear them out as well.
6. In the third tab, make sure "Navigation" is in the #1 slot and is in the "Group One" -- and anything else you want visible is also in Group One. (The style won't show Group Two, or if it does, it'll probably show up way wacky.)
THIS IS VERY IMPORTANT! The "navigation" option must be the FIRST in order, so it'll show up at the TOP LEFT of your page. If you leave this out, the entire page shifts upwards. (Still working on this part, but for now, consider the "navigation" option to be, well, NOT an option.)
7. In "Customize Your Theme", click on "Custom CSS" (bottom option, on the left-hand tabs). Make sure the first checkbox IS checked -- "Use layout's stylesheet(s)". For now, this style requires the foundation of the existing style.
Check your page. If all your columns are shoved to the waaaaaaay right and practically off-screen, it means you don't have the checkbox clicked on the "Custom CSS" page. The colors should be pretty monochromatic, so if there's a wacky one in there, make sure you copied all of the same line.
Note: the links remain the conventional blue on hover in the sidebar, because I removed the underscore... so it seemed best to keep at least the blue. In a post, the text will be the darkest shade, but will go the conventional blue on hover AND show an underline, in case you're wondering.
Sidebar background images:
http://i385.photobucket.com/albums/oo292/solnull/other/yellow.jpg
http://i385.photobucket.com/albums/oo292/solnull/other/taupe.jpg
http://i385.photobucket.com/albums/oo292/solnull/other/tan.jpg
http://i385.photobucket.com/albums/oo292/solnull/other/steel.jpg
http://i385.photobucket.com/albums/oo292/solnull/other/pink.jpg
http://i385.photobucket.com/albums/oo292/solnull/other/lilac2.jpg
http://i385.photobucket.com/albums/oo292/solnull/other/lilac.jpg
http://i385.photobucket.com/albums/oo292/solnull/other/green.jpg
http://i385.photobucket.com/albums/oo292/solnull/other/gray.jpg
http://i385.photobucket.com/albums/oo292/solnull/other/blue.jpg
Click on one to open it. If you want that color, right-click on the image and do a "save as".
Colors:
| img | #X01X | #X02X | #X03X | #X04X | #X05X |
| blue | #939EC0 | #727EA5 | #DDE5FE | #E9EEFF | #F6F8FF |
| gray | #7494A7 | #5489AA | #B8CFDD | #C4D9E6 | #F0F9FF |
| green | #7AC786 | #58BF69 | #BAF3C3 | #CCF5D2 | #EFFFF2 |
| lilac | #AA7EB7 | #89758F | #EACFF2 | #F6E5FB | #FCF4FF |
| lilac2 | #986BA5 | #7A4B88 | #DBBAE5 | #EED5F5 | #FAEEFE |
| pink | #BD656C | #992830 | #FFCBCF | #FEE0E2 | #FFF6F7 |
| steel | #6B8399 | #446685 | #A1AEBA | #B8C2CB | #F4FAFF |
| tan | #97897E | #716256 | #DCC6B3 | #EDDCCD | #F9F0E7 |
| taupe | #8B7875 | #683228 | #CBBBB8 | #D9CDCB | #FFF4F2 |
| yellow | #BBBF3D | #999D13 | #F9FC9D | #FBFDC8 | #FEFFDF |
Alright, those are all the setups I've got currently, so if you run into trouble, I'll dig deeper on what it might be... but I'm hoping the extra bits do the trick.
no subject
Date: 7 Dec 2010 06:14 pm (UTC)Sorry to keep bugging the crap out of you! Um, is there any way I can get the entries to be closer to the sidebar? Like say, about half of what the distance is now? If you just tell me the place in the code I can poke at it, I know CSS I just don't know where that specific piece is.
Also, two things are showing up with little scrollbars... might be easier for me to take a screenshot. Do you see what I mean? The tags and the entry links are scrolling, and it's annoying me.
Sorry to be so picky! I love the layout!
no subject
Date: 7 Dec 2010 06:28 pm (UTC).entry .tag {
margin: 0;
display: inline-block;
overflow: auto;
width: 130px;
position: absolute;
right: 0;
top: 120px;
}
Change "overflow: auto;" to "overflow: visible;" and that should remove the scrollers. It'll make the tag appear beyond the boundaries, I expect, but that's at least a short-bit of fix.
You can tell I never add sound/mood to my posts, so I completely forgot to style anything for those, and that might be why they're showing up peculiarly on your posts, since I really should've adjusted for that. (And will, if/when I transfer it to a full style, without wacky redux-from-crossroads in there.)
Hmmm.
That's odd, okay, this may require assistance of someone wiser than me -- when I look at it in Safari, the border is as wide (on the left) as yours, but in Firefox both your journal and mine look pretty much the same. The one exception being the header, which I still can't figure out. So maybe this is a browser issue, somewhere, that's getting mucky. (Time for research, because I never have gotten clear on all the browser hacks needed, and which aren't. Guhhhh.)
AAAAAAHHHH. Try adding in the "navigation" option in the sidebar -- I wonder if it not being in there (at the very top left) is causing your header to push up, for some reason. At least give it a try, and see what that does, since the result might give a clue as to what's going on (and what I need to fix).
no subject
Date: 7 Dec 2010 06:31 pm (UTC)So, um... the header might be because I scrolled down for the screenshot so as to get the two bars in place. <feels dumb>
It's not like I don't have a big enough monitor! I could've just expanded the window! But noooo. <_<
no subject
Date: 7 Dec 2010 06:34 pm (UTC)no subject
Date: 7 Dec 2010 06:38 pm (UTC)no subject
Date: 7 Dec 2010 06:42 pm (UTC)whew, I really don't know why I mess with DW/LJ styles at all, so many moving parts (and why on earth is there a sideways scrolling bar showing up when I post a reply? ... things like that, it's always something) ... but still, very nice to hear someone likes it!
no subject
Date: 7 Dec 2010 06:43 pm (UTC)no subject
Date: 7 Dec 2010 06:47 pm (UTC)no subject
Date: 7 Dec 2010 08:46 pm (UTC)Okay so how do I decrease the margin between the entries and the sidebar?
no subject
Date: 7 Dec 2010 07:00 pm (UTC)no subject
Date: 7 Dec 2010 07:11 pm (UTC)(honestly, it really is always something)
no subject
Date: 7 Dec 2010 08:53 pm (UTC)