Reply page in Core 1 layout

[rozarka]

I've copied my LJ style to DW using a Core 1 layout layer (Flexible Squares) and a custom css stylesheet (by circa77 on LJ, modified by me) in the customization wizard. It works fine on DW with one exception that I can see: the entry text isn't right on the reply page (?mode=reply). It does work in the entry view (the one you get to by following a cut or a direct link) and even the 'read comments' view, and it's not a problem on LJ, so the issue seems to be DW-specific. It seems to affect only the entry and date/subject text, too — the entry background colour and all other parts of the page are fine.

I've tried to tweak it using .lj-view-reply .entry or .entry_text, which hasn't made a difference in any variation I've tried. If anyone has any idea of how to fix this, I'd be most grateful to know. :)

Comments

[marahmarie]

To modify it using .lj-view-reply you would need a "body class" in the source, which your style doesn't have. (So you can strip out all .lj-view-whatever CSS - it doesn't work, anyway).

The problem is pretty simple - you've got the text color as "bbb" (grey) in your CSS, and there's no entry_text class on the reply mode page, so the font size and font family are using system default.

Try this instead (changes in bold):

.entry {border:0; background:transparent; margin:0 10px; color:#000;font-size:13px; font-family:verdana, sans-serif;}
div.entry_text {text-align:left;font-family:verdana, sans-serif; font-size:13px; color:#000; min-height:100px;}

[rozarka]

Oh, thank you so much, that worked to change the font! :) I can't believe I didn't notice that in the css. *facepalm*

The reply page date/subject lines are still the wrong font/size/text (though at least legible plain black), but I think this may be a general problem with importing FSq to DW — I looked around at other FSq layouts here that had the same issue on the reply page. It seems it reverts to the default Fsq date/subject line (I also tried pasting in a couple of other FSq-based style-sheets in my css box and the same thing happened). If I can bother you some more — you wouldn't know a way around that in the css? I suspect I'll need to go and do something in my layout (or rather theme?) layer, but no idea of which part of code to change.

Yeah, try this:

[marahmarie]

.datesubject {padding: 0; margin-right:20px; margin-left:20px; background:transparent;}
.date, .replytoposter {color:#bbb; border-bottom:1px dashed #ccc; padding-top: 2px; padding-bottom: 2px; font-size:9px; text-transform:uppercase;margin-top: -20px;}
.subject,.replytosubject {display:block; position: static; color:#db5c83; padding: 6px 0px; font-family:verdana, sans-serif; font-size:18px; line-height:15px; letter-spacing: 2px; font-weight:normal;}
.subject a, .subject a:link, .subject a:visited {color:#db5c83; font-weight:normal;}
.subject a:hover {color:#db5c83; background:transparent;}

.entry {border:0; background:transparent; margin:0 10px; font-size: 13px; font-family:verdana, sans-serif; color:#000;}

It's not absolutely perfect but it's pretty close. Any more questions please feel free to ask.

It's not, btw, a "formatting problem" per se...it's that the view-reply or reply-mode pages (same thing) use different markup than view-recent in your particular style. On top of that, the view-reply/reply mode pages don't have body class markup to allow you to target their different and/or missing classes directly. This is quite a common issue with LJ and DW styles. :)

Re: Yeah, try this:

[rozarka]

Hey, that's close enough to perfect that I'm more than happy. :D

Thank you so much, I truly appreciate all your help! :)

Add this, too, fixes userpic border issues (change is in bold):

[marahmarie]

.userpic, .userpicfriends {float:right; clear:right; background:transparent; border:0; border-left:1px dashed #ccc; padding:0 9px;}

*Now* it should be just right. Can't say in IE though; IE probably eats my code up and spits it out, but in Firefox it's divine.

Re: Add this, too, fixes userpic border issues:

[rozarka]

Hmm, I changed the code like you suggest, but it didn't work to change the crossed dashed borders (I didn't notice before you pointed it out).

It seems it affects every entry except the sticky post on top (but does affect the reply page of the sticky too).

I'm using Firefox, too, by the way, and sweated blood to get my banner/sidebar to display properly in IE (over on the LJ version). No idea if it works in IE after this, but I'm about done worrying about IE. ;)

Re: Add this, too, fixes userpic border issues:

[marahmarie]

It fixes the crossed borders for me in Firefox. I've got to get the laundry out of the dryer now (damn my laundry) but if you give me a few minutes I'll upload a screen cap that shows it fixes it in my copy of Firefox (please don't change your CSS for a few minutes if you can help it, it doesn't take me all that long to fold my laundry).

edit OK, laundry's done: my code fixes it in view-recent, but not view-reply, and I don't know why, since I thought I had it working a few minutes ago...so let me play with it some more.

edit 2 OK, it's even weirder than I thought: my code fixes the first post only in view-recent. I didn't scroll down to see the rest or I would have caught that before. Still working on it....

Re: Add this, too, fixes userpic border issues: (one more change in bold)

[marahmarie]

.userpic, .userpicfriends {float:right; clear:right; padding:0 9px;margin-top: 3em; background:transparent; border:0; border-left:1px dashed #ccc; }

But...and this is a big "but"...for some reason that gives too much userpic clearance to the userpic on your first (top) post on view-recent. Did you date that one out of order (but if so, I can't see how that would affect the HTML either way; I checked your source and the code for that post and the one that follows it is identical).

If I come up with anything else I'll let you know...

Re: Add this, too, fixes userpic border issues: (one more change in bold)

[rozarka]

Laundry definitely takes precedence. :)

I added the margin on top, and as you said, it fixes everything else but pushes the top entry userpic too far down. The top entry was backdated plus marked as a sticky post in my settings; I tried taking away either or both of the backdating and the sticky setting and it didn't change anything (removing both and changing the year back to 2010 pushed the entry down on the recent page, but the new top entry got the same userpic issue instead). I've got only the sticky setting now, fwiw.

If you figure out something else, that would be great, but I'm honestly so much happier with it than I was this morning!

(ETA: I see now that the reading page has the same top entry userpic issue, actually.)

Re: Add this, too, fixes userpic border issues: (one more change in bold)

[marahmarie]

I can't stand wrinkled laundry, and I can't stand ironing, so I make sure the washer and dryer "irons" everything for me so I don't have to whip out an actual iron...that's why I need to get my wash out of the washer and dryer the second it's done, before any wrinkles set in. I know...I'm a little OCD like that... :)

Re: Add this, too, fixes userpic border issues: (one more change in bold)

[rozarka]

Ooh, that explains the note of urgency — and hey, who wants wrinkles in their laundry? *g*

Re: Add this, too, fixes userpic border issues: (one more change in bold)

[marahmarie]

OK, this is also weird: I changed so many little things since my last reply, since I don't know how to give up, that I'm not even sure what to point out is now different, but if you copy this entire style sheet (overwrite your own with it 100%) it seems to fix the border issue altogether:

/* Cleaned CSS: */
/* Template: The Shutter Falls */
/* Date: 13 August 2010 */
/* S2 Style: Flexible Squares */
/* Made by Anita aka bzzinglikeneon */
/* Available at circa77.livejournal.com */


/* General */
body {background:#fbfbfb; margin:0; color:#000; font-family:helvetica, arial, sans-serif;}
a, a:link, a:visited {color:#db5c83;}
a:hover {color:#bbb; text-decoration:none;}

h2, h3 {color:#666;}
ul, ol {color:#666;}
h2, h3 {padding:0px 20px; margin:0 20px 10px 20px; border-bottom:1px dashed #ccc;font-size:20px; font-weight:normal; text-transform:lowercase;}
blockquote, code {background:#fff; border-right:4px solid #e6e6e6; padding:15px;}
input, textarea {border:1px solid #ccc; background:#fbfbfb; color:#000;}
textarea {opacity:1; padding:5px;}
textarea:hover {opacity:1;}
select {border:1px solid #ccc; background:#fff; color:#000;}

#content {width:auto; border:0; padding:0; background:transparent;}
#maincontent {margin:0 0 0 300px; background:#f4f4f4; color:#000 !important; border:0; border-left:1px dashed #ccc;}

/* Header & Footer */
#header, #footer {margin-left:300px; background:#f4f4f4; border:0; border-left:1px dashed #ccc; padding-top:0;}
ul.navheader, ul.navfooter {background:#333; padding:15px; margin:0; text-align:left;}
ul.navheader li, ul.navfooter li {font-weight:normal; text-transform:uppercase; font-size:10px; color:#aaa;}
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {color:#fbfbfb; padding:15px 8px;}
div#header a:hover, div#footer a:hover {color:#fff; background:#db5c83;}
.clearfoot {display:none;}

.title {color:#333; background:#ccc; text-transform:uppercase; text-align:right; padding-right:15px;}

.subtitle {color:#333; background:#ccc; text-transform:lowercase; text-align:right; padding-right:15px; padding-bottom:15px}

/* Entries */
.datesubject {padding: 0; margin-right:20px; margin-left:20px; background:transparent;}
.date, .replytoposter {color:#bbb; border-bottom:1px dashed #ccc; padding-top: 2px; padding-bottom: 2px; font-size:9px; text-transform:uppercase;}
.subject,.replytosubject {color:#db5c83; padding: 6px 0px; font-family:verdana, sans-serif; font-size:18px; line-height:15px; letter-spacing: 2px; font-weight:normal;}
.subject a, .subject a:link, .subject a:visited {color:#db5c83; font-weight:normal;}
.subject a:hover {color:#db5c83; background:transparent;}

.entry {border:0; background:transparent; margin:0 10px; font-size: 13px; font-family:verdana, sans-serif; color:#000;}

.entry_text {text-align:left;font-family:verdana, sans-serif; font-size:13px; color:#000;}
* html .entry {}
.entry ul li, .entry ol li {color: #000;}

.ljtags {font-weight:bold; text-transform:lowercase; margin-top:15px; padding-left:12px; background:transparent url(http://pics.livejournal.com/bzzinglikeneon/pic/001k2k83) no-repeat center left; padding-bottom:0;}
.ljtags a, .ljtags a:link, .ljtags a:visited {font-weight:normal;}
.currents {margin-top:-30px; text-transform:uppercase;}
.currentlocation {background:transparent url(http://pics.livejournal.com/bzzinglikeneon/pic/001k9deg) no-repeat center left; padding-left:12px;}
.currentmood {background:transparent url(http://pics.livejournal.com/bzzinglikeneon/pic/001k535a) no-repeat center left; padding-left:12px; padding-top:15px;}
.currentmood img {padding-right:5px;}
.currentmusic {background:transparent url(http://pics.livejournal.com/bzzinglikeneon/pic/001k614q) no-repeat center left; padding-left:12px; padding-top:5px;}
.currentgroups {background:transparent url(http://pics.livejournal.com/bzzinglikeneon/pic/001k407q) no-repeat center left; padding-left:12px;}

.comments {background:transparent url(http://pics.livejournal.com/bzzinglikeneon/pic/001rzhhf) no-repeat center right; padding:8px 20px 8px 10px; color:#ccc; border-top:1px dashed #ccc;}
div.comments a, div.comments a:link, div.comments a:visited {color:#999; text-transform:uppercase; font-size:9px;}
div.comments a:hover {color:#db5c83;}

.separator {height:50px;}

/* Userpics */
.userpic, .userpicfriends {float:right; background:transparent; margin-top: 3em; border:0; border-left:1px dashed #ccc; padding:0 9px;}
.userpic img, .userpicfriends img {opacity:1;}
.userpic img:hover, .userpicfriends img:hover {opacity:1;}
.userpicfriends {background-color:#f4f4f4 !important; text-transform:uppercase; font-size:10px; color:#ccc;}
.userpicfriends a font, .userpicfriends a:link font, .userpicfriends a:visited font {color:#333; background:transparent;}
.userpicfriends a:hover font {color:#aaa;}
.userpicfriends img {margin-bottom:10px;}
.userpiccomment {float:left; margin:20px 10px 0 -95px; max-width:100px; max-height:100px; border:0; background:#e6e6e6;}

/* Page View */
.skiplinks {text-align:right; font-size:10px; text-transform:uppercase; color:#ccc; margin:-15px 15px 15px 15px;}
.box {border:0; padding:0; border-top:1px dashed #ccc; color:#333; margin:0 20px;}
center {color:#333; padding-top:15px;}

.commentbox, .commentboxpartial {border:0; background:#fbfbfb; margin:15px 0; border:1px solid #ddd; border-right:4px solid #ddd; padding:0 0 0 10px; color:#333;}
.commentbox a, .commentbox a:link, .commentbox a:visited {background:transparent; color:#db5c83;}
.commentbox a:hover {color:#ccc;}
.datesubjectcomment {padding:10px 0; background:transparent; margin-left: 85px; margin-right:10px; border-bottom:1px dashed #ccc; color:#000;}
.commentreply {margin-left:110px; text-align:left; font-size:12px; color:#000;}

.entry span.datetime {
text-transform: uppercase;
padding: 0;
color: #D4D4C9;
}


/* Sidebar */
#sidebar {width:270px; padding:0 15px; margin: -60px 0 0 0; border:0; background:transparent; color:000000;}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited {color:#954e64;}
div#sidebar a:hover {color:#666;}

li.sbartitle {background:transparent; border:0; border-bottom:1px dashed #ccc; margin:10px 0 10px 0; color:#db5c83; font-family:verdana, sans-serif; font-size:18px; line-height:15px; letter-spacing: 2px;}

.sbarbody, .sbarbody2 {color:#ccc; text-align:left; font-family:tahoma;}

.calendar {width:100%;}
.sbarcalendar {border:0; background:#e6e6e6; color:#666; padding:5px;}
.sbarcalendarposts {border:0; background:#f2d3dc; padding:5px;}
.sbarcalendarposts:hover {background:#db5c83;}
.sbarcalendar a:hover {color:#fff;}

li.sbaritem {padding:1px 3px; margin:0 0 0px 0;}
li.sbaritem a {padding:1px 4px;}
#sidebar_summary li.sbaritem {border:0; margin:0; padding:0 0 0px 0; width:100%;}
.sbaritem a {display: block; background:#f2d3dc;}
.sbaritem a:hover {background:#e6e6e6; border-right:4px solid #db5c83;}
#sidebar_summary .sbarbody {padding:0;}
.count {display:none;}
li.sbaritem .ljuser {}
#sidebar_summary {display:none;}

/* Archive & Tags Pages */
ul.year {margin:-10px 20px 0 20px; padding-top:10px; border-top:1px dashed #ccc; color:#666;}
.yearmonth {text-transform:lowercase; color:#666; font-size:20px;}
.yeartable {width:80%;}
table.yeartable td.yeardate {border:1px solid #ddd; color:#666;}
table.yeartable td.yearday {background:#f2d3dc; border:0; color:#954e64;}
.lj-view-month .entry{color: #666; padding-bottom:250px;}
.lj-view-month dd a {}
.lj-view-tags {min-height:350px;}
.ljtaglist {list-style-type:none; padding-bottom: 50px;}



/* Control Strip */
#lj_controlstrip {background:#ccc; color:#fff;}
#lj_controlstrip_userpic {padding:3px; background:#e6e6e6;}
#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks {border-right:1px dashed #e6e6e6; text-transform:lowercase;}
#lj_controlstrip_search_input_text {border:1px solid #999; opacity:0.6;}
#lj_controlstrip_search_input_text:hover {opacity:1;}
#lj_controlstrip_search_submit, #lj_controlstrip input {background:#fff; border:1px solid #999; opacity:0.6;}
#lj_controlstrip_search_submit:hover, #lj_controlstrip input:hover {opacity:1;}
#lj_controlstrip_search {border-right:0;}

/* Contextual Popup */
div.ContextualPopup {margin: 20px 0 0 50px; font: normal 10px "Helvetica", "Verdana", sans-serif !important;}
div.ContextualPopup img {border: 0;}
div.ContextualPopup div.Inner {background-color: #f2d3dc !important; opacity:0.9; color: #666 !important; border: 1px dashed #ccc;}
div.ContextualPopup .Relation {text-transform:lowercase; font-size:10px; color:#db5c83;border-bottom:1px dashed #cccccc;}
div.ContextualPopup .Userpic {padding:10px; background:#fff; margin:4px;
border-left:1px dashed #cccccc;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited, div.ContextualPopup div.Inner div.Content a {text-decoration: none !important; font-weight: normal; color: #954e64 !important;}



/*Icon Replacement - p.yusukekamiyamane.com*/

.ljuser img {width: 0; height: 0; background: transparent url(http://pics.livejournal.com/bzzinglikeneon/pic/001hd1hc) no-repeat 0 0; padding: 10px 10px 0 2px !important; vertical-align: baseline !important;}
.ljuser img[src*="userinfo.gif"] {background: transparent url(http://pics.livejournal.com/bzzinglikeneon/pic/001hd1hc) no-repeat center left !important; padding: 10px 10px 0px 2px !important;}
.ljuser img[src*="community.gif"] {background: transparent url(http://pics.livejournal.com/bzzinglikeneon/pic/001kat12) no-repeat scroll 0 0 !important; padding: 10px 10px 0 2px !important;}

img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"] {height: 0px; width: 0px; padding: 0 20px 12px 0px !important; background: transparent none no-repeat scroll 0 0;}

.subject img {vertical-align: middle !important;}
img[src*="icon_protected.gif"]{background-image: url(http://pics.livejournal.com/bzzinglikeneon/pic/001kb45f);}
img[src*="icon_private.gif"]{background-image: url(http://pics.livejournal.com/bzzinglikeneon/pic/001k811f);}
img[src*="icon_groups.gif"] {background-image: url(http://pics.livejournal.com/bzzinglikeneon/pic/001k72z6);}

/* Additional Customizations Go Below */

#content {background:transparent url(http://i167.photobucket.com/albums/u132/owlrozarka/tf_textgrey_noborder.jpg) top left no-repeat;}
#sidebar {margin-top:322px;}




What I know is different:

-I took out your min entry sizes, which you can probably put back in without harming anything
-I took out your minused out margin on .date and .replytoposter
-I took out clear:right on .userpic, .userpicfriends
-I took out display:block; position: static; on .subject,.replytosubject, since it changed nothing anyway (it was just an artifact from me having that absolutely positioned, then changing it back to normal)...

-I changed some other stuff, and added some other stuff, but I honestly cannot recall what...

Let me know what you think...any new problems I created I can probably fix without breaking anything else *crosses fingers*

Also, it has something to do with how crap clears on your journal, so I changed that, though I can't recall right now exactly how (you'll notice the space between entries is a little wider on view-recent now, but I think that might play into how the top post alone was acting so wonky when I set a margin-top on userpic )...

Re: Add this, too, fixes userpic border issues: (one more change in bold)

[rozarka]

That took care of the userpics. :D I had to add in the min-height for entries again to stop the comment line under entries shifting left on short entries, but that doesn't seem to upset anything else. Woot!

I don't mind that the entries are set a bit wider apart; it's not so much it looks weird.

Thanks, again! It's damn nice of you to do all this to help me out — I'm very glad that you don't know how to give up. ;)

Re: Add this, too, fixes userpic border issues: (one more change in bold)

[marahmarie]

You're very welcome! And, like I said, if any other issues arise, just let me know. :)