layout 003

[chimney]

o-okay i think this will be the last one for a while I NEED TO STOP MAKING MORE....

edit: 8/03/14 added code to remove the 'modules' link under the title/page title

EDIT to fix the custom links list, follow instructions here. pastebins have been updated as well!
EDIT2 pastebins updated again for easier editing of entry width via #canvas, or follow these directions
EDIT3 pastebins updated for custom text (hopefully)
EDIT4 for those experiencing a missing journal title/subtitle and sidebar overlapping the navigation header, go into #canvas and edit the margin field to make the FIRST 0 into anything over 80px.

margarita full size also available in: lemon | blueberry | guava | orange | passionfruit but feel free to enter your own color! code. lime | lemon | blueberry | guava | orange | passionfruit but feel free to enter your own color! instructions. 1. apply one of the crisped themes. make sure the page layout is two column, sidebar on left! 2. go to customize css and turn off 'use layout stylesheet'. 3. apply whichever code you wish. 4. if you need or want to, ctrl+f the hex code of the accent color: lime: #CF0 orange: #F90 lemon: #FF0 guava: #F99 blueberry: #6CF passionfruit: #C36 and replace with whatever you like! just make sure it stands out against black. 5. profitt???? 6. comment pages are not stylized! NOTES to change the default userpic image to a hosted image, follow the instructions here! credit. please credit pastries somewhere and/or leave credit in the css!

Comments

[vertebraebyvertebrae]

using this for my rp journal! uh it doesn't seem to want to work actually, i'm using the passionfruit one.

[chimney]

it's set for two column, sidebar on left page layout. does that fix it? :x /quietly adds to instructions

[tropicsbear]

Adding to my memories! Will credit when I use.

[nestingdevil]

Snagging two different colors for two different journals. These are excellent. Just one quick question! Anyway to change the default userpic to an image hosted? If not, is there anyway to change the text color that's over the default user pic? Thank you very much.

[chimney]

Yes to both!

for the image, find .module-content .userpic img and replace the entire section with this, with the hosted image url going where it says URL HERE:
.module-content .userpic img { width: 0 !important; height: 0 !important; background: transparent url(URL HERE) no-repeat !important; padding: 100px 0 0 100px !important; overflow:hidden; margin:-6px 0 0 7px; border-radius:50px; }
tested in both ff and chrome P:

to change the text color, search for .journal-name and replace the hex value for color: o7

[clarionromance]

Using Passion Fruit.

[mutemime]

Using and crediting. Thanks for this. :)

[colorsnap]

This is absolutely gorgeous and I'm totally using it!! Thank you for making it.

I have one question though: Is there a way to make the links list seamless with the navigation links or even a bit more aesthetically uniform? As you can see on this journal, the navlinks look great and then the links list is huge and jammed onto the left side of the sidebar and doesn't hover. I've tried fiddling but the modules are defeating me..

Thanks in advance, if you have a minute.

[chimney]

there is! i hadn't modified that part since i always forget to take care of everything.

just copy/paste , .module-typelist a:hover next to .navigation li a:hover including the comma, and then add this somewhere

.module-typelist {
margin: 15px 0 0 0;
width: 180px;
font-size: 10pt;
text-align: center;
letter-spacing: 0.2em;
list-style: none;
}

and that should just about do it! but lemme know if it doesn't o7

[dualii2m]

This is really great, thank you for making it! I did some color changes and it fits what I wanted perfectly.

But I was wondering if there was a way I could take the text over the icon on the sidebar off (without setting my name to nothing, that is). I still like the black bar and all, but I'd rather not have any text, since my name field is kind of long.

Any advice you could give would be great! thank you!

[tofindthesun]

hi this is me

yes! find .journal-name and change the color field to color: transparent;.

[treasuresunclothed]

Hello! I super love this layout and all the color variations are wonderful; but is there any way to get the icons to show up on the left part of the entries? I easily removed the display:none; bit and fiddled with the size, but I can't seem to get them to pop over to the left where the journal names are. Thank you in advance!

WHOOPS sorry for the edit-- but if there's a way to just get the icons to show up on the read page instead of it affecting both read and journal entries, that'd be awesome too! I like the clean look of no icons on the regular journal entries, but in communities, icons on the read page are way helpful.

[tofindthesun]

hi it's me i'm in the middle of tagging u_u

i haven't been able to figure out how to make it go to the left yet :(a i tried with quite frankly but gave up after a while. i might tackle it again next time i work with crisped and if i find out i'll be sure to let you know, if you'd like!

[bombkind]

love this layout! Using it for my personal journal and an RP journal ♥

[ladyhoneydarlinglove]

This is a beautiful layout and I'm looking so forward to using it! My only problem with it is that I don't like the way my name ends up over my icon. Is there a way to change that?

[tofindthesun]

hi it's chimney

with the way this is set up, moving the name field means moving the navigation list back into position as well and it's just a lot of stuff to change around.

it's possible though, if you don't mind going through it. P:

[colorsnap]

Hello, I have another question for you! I'm sorry DX Is there a way to make the main content column wider? A glance through the coding shows way more stuff than I'm used to working with, so I thought I'd ask before I tried myself and broke something..

[chimney]

there is! i will go fix this in the base code too because it's coded ridiculously atm hahhaha gj self

ANYWAY ctrl+f and find .entry {, change the width to 100%
then find #canvas and change the width (it should be 875) to however much you want.

[(Anonymous)]

I love this layout but I have a question. Directly underneath the left side text like "userinfo" and "profile" and etc, there is an extra bit of text showing the title of recent entries. Is there a way to change the text color of that? I'm not very good with code.

[attend]

Oops, I didn't mean to make this anonymous.

[imzadis]

thank you so much! using it for my new journal <3

[katieastrophe]

hmm, I just put the orange one on my journal and I'm finding that visited tag links are black against the black background, so you can't see them :S I looked at the code in Espresso (which shows colours in the styles menu at the side) but I can't see the failing piece of code. can you help?

[chimney]

--oops. that should hopefully be an easy fix.

ctrl+f to find a:visited where it reads
a, a:visited, a:active, .ljuser, a:hover{ color: #000; font-weight:normal!important; text-decoration:none!important;
}

remove a:visited from that line-up and make a new entry under that group of code
a:visited { color: inherit }

i don't have this issue on my end (which is why i didn't catch it) so i can't promise it'll work :X

[darkyulate]

Thanks for this! I hope this makes my profile seem really cool or sth rofl

[lucida]

Modified and am using here! :D Credited you on the profile.

[veryspecialagent_dinozzo]

The layout is beautiful! Using and crediting.

Unfortunately, here comes a question that messes it up. D=

Is there any way you know of to allow userpics on the reading page but not on the "recent entries" (my entries)? I love how clean it looks as you've coded it, without userpics, but I know with the reading page I'll probably never manage to remember who people are by username alone I'm lazy. I need pictures.

I found the userpics display:none; code line, but when I made it display it was on both reading and recent. Any suggestions?

[lordof]

i think i've been asked this before-- as far as i know there's no way to differentiate between the two, since they're both controlled by the same class (that very same .entry .userpic) so.. no :< can't turn on one but not the other.

[thespirits]

hey! is it possible at all to change the title for an image banner?

[tofindthesun]

yes indeed!

ctrl+f to find /* Header; you'll find the #header that you want to modify under this section.

there, change the width and add a height:; value to match the size of the banner**
to insert the banner, modify the background value to read background: url(IMGURLHERE);

if you want to get rid of the title/subtitle text, add display:none; values to #title and #subtitle

**AS A NOTE the entries are only 555px (in a really weird convoluted way), so if the banner is wider than that they won't line up. if you do want to use a wider banner and have them line up, it's just a bit of math sob math sob involved to stretch width of the entries-- subtract 555 from the width of the banner, then add that difference to the #canvas width value.

hope this makes sense and works..!!

[marineko]

Thank you! Using this for my personal journal now :)

[taranais]

great layout! using it. thank you!

[hewasweak]

Love this layout! Quick question though, I couldn't find an easy answer while looking over the code: is there any way to make the sidebar not extend up over the navigation? It covers the home/post/reading/settings links up there, but I'm not sure how to nudge it down.

Thanks for the help!

[chimney]

i did a bit of quick fiddling around and have found a solution!

under the #secondary tag, add z-index:-#; where # is any number you fancy. as far as i know i haven't used any z-index tags in the code, so any negative number should make that navigation bar layer underneath the navheader.

alternatively, if you'd rather there just be a bit of space between the top of the sidebar and the navheader (like in the sample image), adding margin-top: >100px; will do that. the bigger the number, the bigger the gap.

[badnewsbears]

I love this and am using a modified version on this journal!