[artes] Layout . Step To the Beat
And it's time for another new layout! Yay! Or something. This one's the one I'm currently using on my own journal, except with a more universal image over the sidebar. I've purposely placed the stars for that in a manner that will make it easy for you to color over them if you want to put something more specific "peeking" over the sidebar, though (like how my journal has the Hitachiin twins climbing over it). Tips, tricks, and css are all beyond the jump, as always, and if you click on the windowpane preview below, you'll be linked to a full-size preview of the layout (which will show you how it looks with two entries per page and a sticky post; the layout can, of course, take as many entries as you feel like throwing on to the page, but I figured that a ten-entry preview would be overkill).
style . expressive, mixit (s2)
preview . click the image above.
works with . paid/permanent, basic*, plus*
use layout's style sheet(s) . no
comment pages . yes
ad compatibility . Vertical, Between Entries(+Vertical)
resolution compatibility . 1024x768 and above
installation help . check here
style . expressive, mixit (s2)
preview . click the image above.
works with . paid/permanent, basic*, plus*
use layout's style sheet(s) . no
comment pages . yes
ad compatibility . Vertical, Between Entries(+Vertical)
resolution compatibility . 1024x768 and above
installation help . check here
css and more information: Tested in FF3 and IE7. Custom comment/entry pages, custom images (user, community, feeds, news, anonymous, OpenID) are included.
*For Plus and Basic accounts (since Basic journals will have ads for logged out viewing), I highly recommend against the use of Horizontal advertisements. This is because the images are coded to be background images of certain page elements, and the horizontal ads will push the sidebar content down awkwardly, leaving a very unpleasant gap between the rounded top of the sidebar segment and the actual content. If you are going with Between Entries as your option, please make sure to first switch to Vertical and then to Between Entries, so that on pages like your Calendar, it will swap out to Vertical advertisements instead of Horizontal.
Coloring notes, I'll point out here that there's no display of italic text or bold+italic text on the preview, so I'll inform you that italics will display in pink, and bold/italic text is a medium gray. Likewise, I didn't put a blockquote preview, either; it uses the light gray background+meduim gray text that you see in the text area below. Other than that, the dots for the calendar do switch to purple for visited links and to blue when you hover over them; the two links in the sidebar's list are both visited, and the unvisited links will have a pink dot, while hovering over one of them will, again, give you a blue dot. Also, yes, your default icon will show on the sidebar, it's just that
resonated happens to not have an icon uploaded to display there, so, obviously, none shows.
Finally, there areextremely simplistic custom images for the user, community, feeds, news, anonymous, and openid images, as well as for the RSS and Atom syndication links for the sidebar. If you would prefer to use the official LJ images for these, remove the CSS from the section header of "User Image" down.
If you would like to turn your sticky post into a sort of "free talk" area without a title on the post, add the following into the CSS:
.post-asset .asset-name-hover { display:none; }
And, if you find that the blue background is a little much for you, there are also a few color variations of the sidebar image; I'll give them to you here, along with the background colors. The background color given will replace the #34d4d5 in: body { background:#34d4d5; color:#333333; font:10pt arial, sans-serif; text-align:justify; margin:0px; padding:0px; }
Also, you will have to search for and replace http://pics.livejournal.com/artes/pic/009ca408 with the image URL listed below for the color you go with.
#92dfdf: http://pics.livejournal.com/artes/pic/009cch8s [light blue]
#4e3125: http://pics.livejournal.com/artes/pic/009cda56 [brown]
#333333: http://pics.livejournal.com/artes/pic/009cehcp [dark gray]
#b3b3b3: http://pics.livejournal.com/artes/pic/009cf8xh [medium-ish gray]
#cdcdcd: http://pics.livejournal.com/artes/pic/009cggfy [light gray]
*For Plus and Basic accounts (since Basic journals will have ads for logged out viewing), I highly recommend against the use of Horizontal advertisements. This is because the images are coded to be background images of certain page elements, and the horizontal ads will push the sidebar content down awkwardly, leaving a very unpleasant gap between the rounded top of the sidebar segment and the actual content. If you are going with Between Entries as your option, please make sure to first switch to Vertical and then to Between Entries, so that on pages like your Calendar, it will swap out to Vertical advertisements instead of Horizontal.
Coloring notes, I'll point out here that there's no display of italic text or bold+italic text on the preview, so I'll inform you that italics will display in pink, and bold/italic text is a medium gray. Likewise, I didn't put a blockquote preview, either; it uses the light gray background+meduim gray text that you see in the text area below. Other than that, the dots for the calendar do switch to purple for visited links and to blue when you hover over them; the two links in the sidebar's list are both visited, and the unvisited links will have a pink dot, while hovering over one of them will, again, give you a blue dot. Also, yes, your default icon will show on the sidebar, it's just that
resonated happens to not have an icon uploaded to display there, so, obviously, none shows.Finally, there are
If you would like to turn your sticky post into a sort of "free talk" area without a title on the post, add the following into the CSS:
.post-asset .asset-name-hover { display:none; }
And, if you find that the blue background is a little much for you, there are also a few color variations of the sidebar image; I'll give them to you here, along with the background colors. The background color given will replace the #34d4d5 in: body { background:#34d4d5; color:#333333; font:10pt arial, sans-serif; text-align:justify; margin:0px; padding:0px; }
Also, you will have to search for and replace http://pics.livejournal.com/artes/pic/009ca408 with the image URL listed below for the color you go with.
#92dfdf: http://pics.livejournal.com/artes/pic/009cch8s [light blue]
#4e3125: http://pics.livejournal.com/artes/pic/009cda56 [brown]
#333333: http://pics.livejournal.com/artes/pic/009cehcp [dark gray]
#b3b3b3: http://pics.livejournal.com/artes/pic/009cf8xh [medium-ish gray]
#cdcdcd: http://pics.livejournal.com/artes/pic/009cggfy [light gray]