Help me to embiggen my background images, please?

[marahmarie]

Title says it all - well, almost.

I'm using a narrow-width layout made waaaay back in 2009 and I still love it - but I don't much love its narrow width. I'm looking to pay somebody via Paypal or other similar method somewhere in the area of $10 to open up their copy of Photoshop and make me bigger versions of the background images I use on my layout right now. I've tried to do this myself with Paint.NET but I suck I just can't figure it out- the images come out grainy, fuzzy and weird looking. I've also tried most CSS tricks known to man but nothing has worked right or looked right, at least not so far.

Someone in my Circle has suggested I try running the images through GIMP, and I probably will if no one bites, but I'd just rather have someone who knows Photoshop help me get this done the right way.

Dimensions and other details...

Guess I should have mentioned all this to start with, but anyhow, this is based on what I wrote to someone on fiverr just now (with additional edits for DW based on my conversation with ninetydegrees below) along with my request:

I want the post entry space to be about 650px wide (measuring from end to end and including the margins and padding it is currently set at about 552px wide), 140px wide for each gutter if possible, and 250px wide across the sidebar (same as it is now). To edit or remake the background image for the post space probably means resizing the sidebar, header and footer images, too (because the top of the sidebar image currently attaches to the bottom right of the header and to the footer). I'm asking that all of the images stay the same colors and look as they are now and that the total page width does not exceed what it's at now (so in other words, I don't want a scroll bar on the bottom of the page because now the images make the page too wide to display full screen). But I want to keep at least one full inch of gutter on either side of the post entry space and sidebar.

Hope that's not all too much to ask...Thanks in advance!

Comments

Re: one more request (which maybe I'll have to top-level post, so no pressure)

[marahmarie]

I've got one more problem: I went wider on this style to solve a comment-indenting problem I was having but doing so isn't really solving it and I can't show you what's wrong because my entire DW is locked and I can't unlock the entry where the problem is most severe because of its personal nature.

I can tell you that the problem starts at "comment-thread comment-depth-even comment-depth-16" according to page source and that the thread is just one long back and forth between me and another user. What happens is indentation becomes so severe at depth-16 and below (the thread went on to 20 comments altogether) that each comment starts printing just one word per line and snaking down the far right side of the comment post space and the usericon and title and date get all squished together so you can't even make out what you're looking at.

So....I thought resetting the entire DW to a wider width like I just did would solve that problem but apparently not?

And I can't see what there is in my code that I should either change, delete or add on to fix this issue.

Help me please???

Re: one more request (which maybe I'll have to top-level post, so no pressure)

[ninetydegrees]

Hmm. Do you have a public entry with some comments I could look at? I'm a visual person and I think best when I can see stuff :)

Re: one more request (which maybe I'll have to top-level post, so no pressure)

[marahmarie]

I can take one of the public Emily Dickinson poems and lorem ipsum it 20 times, but it may take me just a few minutes to get done. Thank you for wanting to take a look - give me maybe 10-20 minutes and it should be up.

Re: one more request (comments visible now)

[marahmarie]

http://mm-writes.dreamwidth.org/163080.html#comments

(21 comments; if you start from the bottom and scroll up you'll see the problem instantly)

Re: one more request (comments visible now)

[ninetydegrees]

Thanks!
Ok not sure what's going on as things aren't correctly aligned for me (Firefox 34; 1600px wide screen): separator and background aren't aligned, entry has a wide margin on the left, things overlap. Took a quick look at your CSS and shouldn't #wrap be at 900px (650+250)? That would at least leave more room for comments. If having things align doesn't help enough reducing the indentation might be a solution too.

Re: one more request (comments visible now)

[marahmarie]

(Sorry, a job interview intervened so I had to be away for a few hours...)

Um, OK, I'm using native 1366 x 768 widescreen on Firefox 34.0.5 and not having any issues but the only thing I've changed so far is the width on #content (which, with it being set to a percentage, will probably behave fluidly without further adjustment - I didn't really think about that). I didn't check any other sizes besides native so I'll go ahead and fiddle with things and get back to you - thanks.

Re: one more request (you're right, something's not lining up)

[marahmarie]

It does fine at my laptop's native res but at any other res no matter what I change or adjust I can't get edges to line up at all. Kind of at a loss as to what's causing it. Will keep poking it, I guess...thanks again.

Re: one more request (you're right, something's not lining up)

[ninetydegrees]

Might be due to the fact that all the bkg pics have different widths. I assumed this was done on purpose and I didn't know how they were set (like left aligned, centered, etc.) so I widened them all towards the right side. Maybe that was the wrong way to go about it.

Re: one more request (you're right, something's not lining up)

[marahmarie]

Yes, there's definitely a right-side bias to what I'm seeing. I had to stop for a while and rest/eat but I'll poke at it some more between now and the am... I'm just really not sure how to adjust my CSS to account for what's going on.

Re: one more request (you're right, something's not lining up)

[ninetydegrees]

Food for thought: I can redo the images, it's not a problem but do you actually wanna keep them at different widths? It doesn't seem to me that makes a lot of sense: somebody with a very wide screen must see where one image stops or repeats itself whereas others 'keep going'.

Re: one more request (you're right, something's not lining up)

[marahmarie]

No, I probably don't want to do that - you're quite right. All the same width (if that's possible), I guess. :)

Do you want me to pick the width again (which I ask because I'm afraid I'm just going to mess it up, again)...?

Wait...check it now...is it better? It seems OK now...

[marahmarie]

Is it working for you? I reset it to my old style sheet to start us over from scratch, then changed the positioning on the main bkg and separator that you gave me. It looks good to me (with the caveat that of course my entries and sidebar are in the wrong places, but that's nothing to fix)???

ETA: the images aren't moving for me anymore at any res from native on down so it's just the comment nesting still acting weird. It seems OK through about the same depth as before, but after that it squishes comments against the right-hand side again.

Looking at style system's layout while in 1024 x 768 res I see the same problem after a certain comment depth, not just with comment-squishing but with qrform placement, as well (also a huge issue on my DW) where the comments squish down to one word per line and appear all snaky-like and qrforms are breaking out of the content box altogether and displaying in the right-hand gutter (yeah, as Alis might say: wheee!!!).

So fwiw that issue might not be fixable without some backend changes via fu, et al - and I'm saying so not because I'm some sort of CSS wiz who is sure of that already but because I've gone through the HTML and CSS so many times on and off for years now trying to adjust it in ways that might undo some of the damage done (mostly via DW's inline CSS, which does not inherit from comment to comment re: left margin indentation) that anyone who can come up with a workable solution definitely gets a tip of my hat (now that I'm seeing it's not a native problem to my DW at all but is likely a problem across the entire site, yeah).

Thank you so much for your help; there's still a lot of realignment of almost everything to be done on my DW but outside of the comment indenting I'm pretty sure I've got it from here. You are the greatest. :)

Re: Wait...check it now...is it better? It seems OK now...

[ninetydegrees]

It looks perfect to me too!
Yeah the comments getting squished is a problem for all styles with wide side margins if you stick to your custom style instead of the site style. There's no solution really because when you run out of space you can't create some. The only alternative is to implement sidebars and yuck.

Re: Wait...check it now...is it better? It seems OK now...

[marahmarie]

Well, I grew curious about site scheme comment display last night so I changed my comment pages to use it. And on any resize downward (like say, from phablet size on down to regular smallish smartphones) the same thing happens - major squish occurs.

I've been in and out of style_system for years now asking for help with this issue (I know you've tried to help me with it a few times before, for sure) and thought I had it licked a year or so ago with a float and min-width I added to .dwexpcomment but all that did was take threads after a certain nesting level and flatten them out (removing all indentation) so while it might have worked on that one layout (though I'm not sure how or even if it really did) I was using at the time it isn't working on this one.

So last night I looked at page source again and noticed DW indents exactly 25px for every comment (something I may have noticed in the past but since forgot). And that we use .comment-depth-even, .comment-depth-odd, and .comment-thread as a qualifier on the first two.

Well, a comment thread can never start with an even number because the first comment on the page (at least the way we do it now, since we're rather fond of ignoring the number 0 around here) will always be #1. So a comment thread will always have to start with an odd number, which helped me to come up with this:

.comment-depth-even{margin-left:-15px; /* comment thread can never start with even # */}.comment-thread .comment-depth-odd{margin-left:-15px}

I haven't tested the code against any comment pages except the one I was having a problem with, but it's working quite well on that one. While it doesn't fix the issue, it does re-widen comment threads up to a deeper nesting level than 20 or so, so comments will still squish at some point after that.

You're absolutely right, though - any page design that constrains comments to a finite amount of space (and technically, any comment thread that goes on long enough even given no space constraints whatsoever) will run into this issue.

Thanks again for all your help! I can't test right now to see if the differences in background image sizes will be noticeable on larger screens but if I ever get my widescreen monitor out of storage and back in the house I'll hook it up to my laptop and let you know.