21 October 2015 @ 11:09 pm
Musilhouette layout & profile layout  
I haven't made any progress in fixing my old layouts and I've just noticed I need to fix profile layouts too (because the cellpadding attribute isn't supported in HTML5), but I've finally finished a layout again!


Click here for live preview, then click on the layout's icon.

layout info Based on Flexible Squares.
Works for all account types.
Tested in Firefox 41, Google Chrome 46 and Internet Explorer 11.

The background colors alternate for an uneven number of entries. If you have set an even number of posts per page, you can make the footer blue by inserting
.lj-view-recent .pagewide-wrapper + .wrapper #footer, .lj-view-friends .pagewide-wrapper + .wrapper #footer {
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -90px fixed no-repeat;

into the CSS and adding the following to .lj-view-recent #footer, .lj-view-friends #footer:
background: #A0C5C9 url(http://fatfrog.info/Ma/A/layout/musilhouette/bg-dark.png) center -200px fixed no-repeat;

If you want to change the width, you need to change it in 3 places:
- #sidebar (needs to be 12px wider than the others)
- right above #sidebar, where I put together all the elements for your convenience
- and ul.year (10px less)

If you're looking for your navigation strip, it's on the left and rolls in on hover. I put it there so it doesn't cover part of the header (or ad).
If you have ads on your journal (even blocked ones), you'll see a yellow gap above the header. Long story, short: The point of it is to always have the blue and yellow backgrounds match in position.
For some reason the ad in the sidebar loads and then becomes invisible. It doesn't just go away, it leaves a gap. Sorry, I don't know how to fix this.
how to implement this layout Go to the Customize Journal page.

Make sure Style System is S2.

Choose the Flexible Squares layout.

Go to Custom CSS
» Use layout's stylesheet(s): No
» Use layout's stylesheet(s) when including custom external stylesheet: No
» Use external stylesheets: No

insert custom stylesheet

  This profile layout has a fixed width, changing the width would somewhat mess up the layout.

Because I can only use HMTL here and you can't position background images with that, the blue background is only color, no picture.
  Go to Edit Profile and insert the code into the Bio part.
To copy the code, click in the text area and then press Ctrl+A and Ctrl+C.

You don't have to use the lj-raw tags. With them you can only make line breaks/new paragraphs with <br> and <p>. Without the lj-raw tags you can also create line breaks and new paragraphs just by hitting the enter key.

If you want to change the link color, put a font tag with a different color in your link. Like so:
<a href="URL"><font color="#A25674">LINK TEXT</font></a>
  To add a blue part to the table, insert

<tr><td height="20" colspan="3" bgcolor="#A0C5C9"> </td></tr><tr><td width="20" bgcolor="#A0C5C9"> </td><td bgcolor="#A0C5C9"><font size="2" color="#674B76">
</font></td><td width="20" bgcolor="#A0C5C9"> </td></tr><tr><td height="20" colspan="3" bgcolor="#A0C5C9"> </td></tr>

before </table>.
For a yellow one, insert

<tr><td height="20" colspan="3"> </td></tr><tr><td width="20"> </td><td><font size="2" color="#674B76">
</font></td><td width="20"> </td></tr><tr><td height="20" colspan="3"> </td></tr>
( Post a new comment )
[identity profile] millionstar.livejournal.com on April 26th, 2016 01:17 am (UTC)
I've snagged this and credited you. It's gorgeous. Thank you.
(Reply) (Link)