Look & Feel

Tags: #<Tag:0x00007fa4a3a20748>

A bit of left margin will be no bother.

The look of the avatar + meta section being one item is not how the HTML layout goes. The structure is:

( [Avatar] [ <Meta> <Body> ] [Gutter] )

So it’s easy to push the avatar around, but tricky to push the avatar and meta around consistently.

The default style (with the meta along the top of the post) copes much better with a narrow window, but wouldn’t it be jarring to switch between the two?

  • Note: Gutter still needs fixing but I don’t have time right now

I don’t understand, but I am happy to show you how to tinker with css/html if you need more help…

@media ( max-width: 600px ) {
  .topic-meta-data {
    width: 100%;
  }
  .username, .user-title, .post-info {
    clear: none;
  }
  .contents {
    float: left;
    clear: left;
    width: auto;
  }
}

Cheers. That doesn’t quite work as typed - the body drops under, but doesn’t slide left.

I’m sure it can be fixed. I will work some more on it this evening.

I’m getting very confused with the CSS changes while mid reading of posts lol :laughing:

Aagh, I thought I was working in preview mode!

EDIT: Right. Things should stop junmping around now :smiley:

Fixed everything I broke, but also fixed other things that were already broke. Tidied up and consolidated the CSS so it reads in the same order as the HTML layout. Now in much better shape to tackle the narrow window text-wrapping. Tomorrow.

What does a green circle with a 1 in it above the speech bubble indicate?

That I was invited/mentioned? It lead me to a post I’d already read.

Green notifications are for private messages. Red ones for topics

1 Like

Narrow window now pushes content under meta as per Tommel’s spec.

Showing replies/replied posts in-line is still horribly ugly and I’m not sure what CSS selector to use to style them, because they don’t have a class of their own. This is where I need some help.

Can you hack your way down to it using descendant selectors?

.class>element>element {

}

Probably. I have a horrible feeling I’m going to have to copy and paste all the css for regular posts and rejig it for the “embedded” ones, which have a subtly different structure. Sigh.

Ouch…

1 Like

Actually, I might just display:none a bunch of it to make my life easier :smiley:

body, html { display:none; }

:slight_smile:

1 Like

Actually, that wasn’t so bad :slight_smile:

Are you playing with the CSS right now? The desktop version posts have gone to about 60% width.

That’s weird. Looks fine at my end. Let me try another browser.

EDIT: That’s the default style - all the custom CSS has fallen off. Try a refresh is all I can say?

Yep works fine in IE too. Posts should be max 900px wide, including the avatar and meta.

Refresh shunted everything back to centre. How odd.

Could have been me, I am developing at the moment and sodding around with browser settings.

Back to 906px including margins and borders :+1: