erinptah: (Default)
Where the towels are oh so fluffy ([personal profile] erinptah) wrote2012-01-10 01:13 am
Entry tags:

DW Layout (Transmogrified): Open Skies


Layout code modified from the DW-modified Elegant Grunge layout by Alis Dee ([personal profile] dee).
Color scheme and some graphics by yours truly.

Live preview | Screenshot

Title: Open Skies
Credit to: Mostly [personal profile] dee, frankly.
Base style: Transmogrified
Type: Full layout in CSS
Best resolution: 1024x768+
Tested in: Firefox, Internet Explorer, Chrome
Features: customizable, fixed width, 2 columns

To use:
  1. Go to Select Journal Style, make sure you have a Reading Page Title chosen, and set your theme to one of the Transmogrified styles.

  2. Go to Customize Journal Style: Text and set Link text to read comments to 1 // #. Repeat with Link text to read comments on a friends view entry.

  3. Go to Customize Journal Style: Custom CSS, untick Use layout's stylesheet(s), and copy the contents of the above textarea into Use embedded CSS.

  4. Save and enjoy!
valiha: watercolor painting of my cat Lola (Default)

[personal profile] valiha 2012-01-11 08:35 pm (UTC)(link)
Hi! Your layout looks truly beautiful, and I, being addicted to beautiful layouts, had to try it out. I have a couple of questions, if I may:

- How do I remove the top padding (between the header and the navstrip)? I can't seem to find what's causing it.

- How do I get the subtitle to show?

- What were the images you used in the footer because they are not shown due to photobucket bandwidth problems?

- I figured out how to swap content and sidebar because I prefer my sidebar on the left side, but I also want to make the layout wider. Since you used an image for the background and made the layout fixed, I imagine that I will need to either edit the background image, or use background color and borders to achieve the effect. Would I need to expand #content? I'm also thinking of making it fluid.

These are all the questions I have at this point. I hope you're not finding them overwhelming!
valiha: watercolor painting of my cat Lola (Default)

[personal profile] valiha 2012-01-11 11:38 pm (UTC)(link)
1. Excellent, thank you! -17px is just about right for my header.

2. That's a bummer, because I really like having a subtitle. :(

3. Yeah, that particular image is still there, but there's something else as well; you'll see if you look at my journal (unless you did look at my journal and the images are showing for you??), in which case here's a screencap: (I haven't altered the footer image yet).

4. I can play around with width and colors/borders to see what I need to do, that won't be a problem. Regarding images, I was wondering if it would be possible to have the header center left, but still have that amount of left space that shows now...

Another thing I noticed is that when you click on Previous 10, there's a (I don't know how to call it) vertical line next to the number 10. Like a pipe character? Do you have an idea what that might be?

In any case, thank yo so much for taking the time to answer my questions!
valiha: watercolor painting of my cat Lola (Default)

[personal profile] valiha 2012-01-11 11:44 pm (UTC)(link)
I figured out that last item:

.navigation .page-separator {
display: none;
valiha: watercolor painting of my cat Lola (Default)

[personal profile] valiha 2012-01-12 01:43 am (UTC)(link)
I probably will when time allows.

LOL, don't mind me, just thinking aloud and trying different things. :)

I tried your suggestion, and resizing the window down (because I sometimes have two windows open and like to have them overlapping) pushes the title to the middle of the page. I'm not going to work on it now, since I edited my header and added both the title and subtitle. I might try it some time later, though.

Thing is, I got my monitor fairly recently, and at 22" it was the smallest and cheapest in the shop. My old one had broken down and I had to get this sucker because of an urgent translation. Ever since then all the sites have huge extra spaces that get on my nerves! Your layout he way it is would have been perfect for my old monitor. :(

I've got the code set up so that my header is at 1280px, #wrap at 65%, and #content at 80%. I left the sidebar at 210px, but I might try percentage just to see how it would look resized to 1024x768 (right now resizing to that pushes the sidebar down below the #content). These numbers would probably work only for me or someone with the same monitor size.

So like I said, gorgeous layout, wonderful base, very easy to customize. Thank you once again!
valiha: watercolor painting of my cat Lola (Default)

[personal profile] valiha 2012-01-17 02:41 pm (UTC)(link)
So I'm back to trying to customize your layout to flexible width, because I'd like it to be usable both for mz tiny netbook and my large monitor. I asked for help at the dw-styles comm, but no ideas so far. I wanted to see whether you maybe know something that might help me.

I can't get #wrap to extend all the way down and serve as white background for #content and .module-section-two. Is there anything you would recommend?

I also need to fix the #footer so that it blends in with the #content, and to get some inner padding for #content since the entries are all right next to the edge.

valiha: watercolor painting of my cat Lola (Default)

[personal profile] valiha 2012-01-19 08:36 pm (UTC)(link)
:hugs fixed-width layouts: They are much easier to work with! But my monitor makes most of them look like a speck in a vast expanse of liquid crystal, and my eyesight isn't what it used to be. ;_;
valiha: watercolor painting of my cat Lola (Default)

[personal profile] valiha 2012-01-19 08:29 pm (UTC)(link)
Hi there, just wanted to let you know I managed to convert the layout to a liquid one. I'm sure an expert would tell me it's hacky, but resizing to 1024x768px works without pushing the sidebar down. Even 800x600px is workable, but the calendar and user icon do stick out of the sidebar a bit.

I had to change #content percentage, and change the header as well. If possible, I'd like to figure out how to keep the header the way it is so that people can use tiled images if they prefer. (I'm still unable to solve the #wrap issue, so removing background and borders should make it blend in with the layout background - mine is blue for the moment, but I'll try some other colors as well, mostly shades of green).

[personal profile] multifangeek 2012-04-23 11:20 pm (UTC)(link)
Hello - I'm using your very cool layout for the [community profile] flashpoint community (with a few edits). I was wondering if there was a way to switch the interaction links under the entries back to text only?

[personal profile] multifangeek 2012-04-24 12:02 am (UTC)(link)
Close! It took most of the images off but it looks like the tops are still there, but no text either.

ETA: Okay I fussed, with it a little and got rid of more images - but still no text.

ETA2: Oh, now I see - need to fix the css for the text version of the interaction links - they were set to 1px size and the color was off.
Edited (Added more info) 2012-04-24 00:09 (UTC)

[personal profile] multifangeek 2012-04-24 01:17 am (UTC)(link)
Nope, I think I've got it now. Thanks!
pohutukaryl: (Default)

[personal profile] pohutukaryl 2013-07-06 09:06 am (UTC)(link)
Hi! I'm using this layout on [community profile] witchesreign (with some colors and fonts altered) and I've run into a problem displaying entry tags on entries with three or more lines of tags, like so. Suggestions?
pohutukaryl: (Default)

[personal profile] pohutukaryl 2013-07-14 09:03 am (UTC)(link)
"clear:both" only forced the comment links a line or so down; the post control links didn't follow it (tada). shoving some pixels into "padding-bottom" for ".tag ul" didn't do anything; what spacing tag should I be altering? I really don't know my way around CSS.

I borrowed this layout code...

[personal profile] pjcatsinthetardis 2017-01-18 10:01 pm (UTC)(link)
And I tweeked it a bit for my own layout...I hope you don't mind. I can totally give you credit on there if you wish. My issue is this... if you look at my page the icon in the profile module is not where it should be and I don't know why that is...I tried searching for something in the code to cause this and couldn't find anything...can you help?

Thanks! :-)

Re: I borrowed this layout code...

[personal profile] pjcatsinthetardis 2017-01-19 12:11 am (UTC)(link)
ok, so I fixed it a little bit...the misallignment is not as big as it was...

I go not find

.module-userprofile .userpic img {

anywhere in the code I copied and pasted from your text box. It's under this section that I have been trying everything with...

.module-section-two .userpic {
display: block;
margin: 1em auto;
padding: -15px;
width: 100px;
height: 100px;
Edited 2017-01-19 00:12 (UTC)

[personal profile] pjcatsinthetardis 2017-01-19 01:45 am (UTC)(link)
ok, so I figured out a problem...and I fixed it...I feel super smart right now. but my issue now is how do I change the white BG color on entries and sidebar? I'll keep looking but I can't find the spot.


[personal profile] pjcatsinthetardis 2017-01-19 03:40 pm (UTC)(link)
Oh OK... That makes sense. Thanks! I used to do a lot of CSS, but it's been years since I did... So it's like figuring out how to ride a bike again after a decade... Lol

[personal profile] pjcatsinthetardis 2017-01-20 12:18 am (UTC)(link)
I got it...I think everything is looking good. Thanks you much again for your assistance, and I will post credit to you and your friend who helped you tweek it on my page. :-)