Styling requests

[alethiophile]

In our illustrious new home on the XenForo, the tech infrastructure is sound, but the rendering occasionally leaves a little to be desired.

Thus, Vanathor and I have been appointed the Imperial Stylists, here to make the forum's appearance faithfully reflect the true awesomeness underneath. Not every problem in appearance or function can be ameliorated by altering styles, but the majority can. It is our charge to make such alterations, to resolve and make harmless the travails of the userbase. Such do we seek to realize.

Hereunder, kindly report any difficulties or infelicities associated with the forum styles, or requests for adjustment to same. In any request, please include the name of the style in use, accessible by viewing the 'Preferences' screen under the user control menu. We will respond to such requests at our earliest capability.

 

[Vanathor]

Uh. Basically what @alethiophile said. We are here to help, and anything that makes your user experience better as far as forum skins and such go, we will try to do.

 

[dalmedya]

Recent.
Posts.
Box Monolith.

 

[Nuit]

For the Flexile Dark style I wouldn't mind having quotes look like this.

/* Quotes */
.bbCodeBlock {width: 100%;}
.bbCodeQuote .quoteContainer .quoteExpand {color: #999;background: linear-gradient(to bottom,rgba(27,39,53,0) 0%,rgb(18, 18, 18) 80%);}
.bbCodeQuote .attribution {background: #393939;border-color: #646464;}
.bbCodeQuote .quoteContainer {background: #1E1F20;}
.bbCodeQuote {border-color: #393939;}

 

[tehelgee]

Recent.
Posts.
Box Monolith.

Click to shrink...

That's not part of styles. That's an add-on.

 

[alethiophile]

Changes made to Flexile Dark, including recolored quote boxes, correct logo and non-generic header text.

 

[nick012000]

Has anyone else not had the DNS changes propogate for them yet? I'm still having to use the IP address directly.

 

[alethiophile]

This has been noticed. It will end up depending on what DNS you're using, which varies per ISP. Given an extra 24 hours, it should come around.

Also, technically not related to styling, which is the ostensible purpose of this thread.

 

[Nuit]

Also here are some more tweaks for errors that always seem to pop up with Flexile Dark.

#QuickSearchQuery {color:black;}
.xenOverlay .formOverlay .textCtrl {color:white;}

Both of these change the text color, the former being the search bar above and the latter being the form that pops up when you insert an Image, Video or name a Spoiler among others.

 

[macdjord]

I like the element design and color scheme of Flexile Dark and Dark Responsive, but I don't like the way they omit the user stats (post count, likes, gender, location, etc.) that's supposed to be under the username.

For the Blackend themes, can you make the background colour of the quote/code/etc. boxes a few shades darker? There's not enough contrast between it and the default text colour.
Also, the colour scheme of the plain-text editor is a black-on-off-white combination that doesn't fit at all with the light-on-dark theme of the rest of the style.

Finally, I'm not sure if this is a styling issue or not, but could we get a proper generic reply button at the bottom of the thread? Right now, the only way to open the standalone compose-reply page without quoting anything is by hitting the 'more options' button under the quick-reply editor, and since that's a form button rather than a proper link, it can't be opened in a new tab.

 

[doomlord9]

I like the element design and color scheme of Flexile Dark and Dark Responsive, but I don't like the way they omit the user stats (post count, likes, gender, location, etc.) that's supposed to be under the username.

Click to shrink...

I do agree with this, at least post count and likes should be shown. Not really for any functional reason, it just feels like the avatars are naked without them.

Fitting considering the forum but it feels weird every time I glance at the avatar to quick-check who the poster is.

 

[doomlord9]

Oh hell, I don't know why I didn't see this before, I spotted the exact same thing on SV as it was starting up within an hour.

Using Flexile Dark, the background for the boxes to input links or images combined with the text color makes them almost impossible to read.

 

[Ampersandwich]

In ".messageText" and ".previewTooltip blockquote", in all themes except Hydrogen and Nitrogen, there are the following lines:

font-size: 11pt;
font-family: Georgia, "Times New Roman", Times, serif;
line-height: 1.4;

I'd like them to be removed without replacement. (Preferably in all of those themes, but if there are actually people who like serif fonts, then pick one and let me know so I can switch to it.)

 

[alethiophile]

Sans-serif fonts have been made default in both the Dark Responsive and Flexile Dark themes.

The problem with form elements under Flexile Dark is known, but its solution has not yet been ascertained. Work is continuing.

 

[macdjord]

What about improving the contrast in quote boxes for Blackened?

 

[alethiophile]

Blackend now has darker-backgrounded quote boxes and sans-serif font.

 

[macdjord]

Blackend now has darker-backgrounded quote boxes and sans-serif font.

Click to shrink...

Can you change the font back, please? Serif is much easier to read.
Also, code and spoiler boxes boxes still use the old background colour. There might be other elements that do so too. I suggest searching the style definition for all uses of that colour code as a background.

 

[alethiophile]

Searching the style definition isn't so simple. Modifying styles here isn't a matter of typing CSS; it requires dealing with XF's 'style properties' setup, which is nice in some ways but requires clicking through every individual pane in about two hundred of them to be sure you've found every use of some given thing.

I'll leave Blackend in serif and Responsive and Flexile in sans, for now. Ought to have some option for most preferences.

 

[macdjord]

The new quote boxes are no longer unreadable, but they're still a bit low-contrast. Darkening the background any more would make it hard to distinguish quotes from regular text, but could you maybe lighten the default text colour a tad?
Also, can you get rid of the all-italics thing for the quotes? It conceals the deliberate use of italics for emphasis in the text.

 

[Selias]

The text color in things like the link insertion's URL box, and the drop-down menu for your time zone and style are way too dark, in Flexile Dark. Reading dark gray text on a navy blue background is pretty difficult. Can you change it to something brighter?

EDIT: Oh, doomlord9 already mentioned that.

 

[Nuit]

Using Flexile Dark, the background for the boxes to input links or images combined with the text color makes them almost impossible to read.

Click to shrink...

The problem with form elements under Flexile Dark is known, but its solution has not yet been ascertained. Work is continuing.

Click to shrink...

The text color in things like the link insertion's URL box, and the drop-down menu for your time zone and style are way too dark, in Flexile Dark. Reading dark gray text on a navy blue background is pretty difficult. Can you change it to something brighter?

EDIT: Oh, doomlord9 already mentioned that.

Click to shrink...

I know it's not the most elegant solution but you can plug this into EXTRA.css

Also here are some more tweaks for errors that always seem to pop up with Flexile Dark.

#QuickSearchQuery {color:black;}
.xenOverlay .formOverlay .textCtrl {color:white;}

Both of these change the text color, the former being the search bar above and the latter being the form that pops up when you insert an Image, Video or name a Spoiler among others.

Click to shrink...

Appearance > Styles > Flexile Dark > Templates > EXTRA.css

 

[alethiophile]

I know it's not the most elegant solution but can you just plug this into EXTRA.css?

Appearance > Styles > Flexile Dark > Templates > EXTRA.css

Click to shrink...

Quite possibly. I'll look that over to see if I can't find anything better.

 

[alethiophile]

The new style 'Light Responsive' is now live and is the default. For those who need it, there is a link to the QQ IRC channel at the top with the navigation links.

Any issues with this should be reported, as per usual.

 

[Ampersandwich]

The inline link color for both Light Responsive and Dark Responsive (Green) is a little too subtle for me; I find it easy to miss that it's a link at all.

Under Light Responsive, hovered links get a black background; this is somewhat jarring. (Oddly, Dark Responsive's white background for hovered links feels relatively normal.)

The default text size for the Responsives/Flexile feels too big, especially compared to SB/SV/old!QQ; stepping down to 10pt or 13px feels much more comfortable. (For future reference: old!QQ was font: 12px/1.5em "Verdana", "Arial", "Helvetica", sans-serif;.)

 

[alethiophile]

Okay, the Responsives have had link color changed; Light now has underlining instead of backgrounds; Responsives have text size stepped down to 10pt.

 

[macdjord]

Can you change Darkened so that stuff in a quote box isn't automatically italicized?

 

[alethiophile]

Yes.

 

[Selias]

Darkened Responsive quick-reply buttons are a bit weird-looking, now. They weren't like that, a few hours ago.

 

[dalmedya]

The quickbar-type thing up in the top right is dumb. When you've got a new message or alert and hover 'inbox'/'alerts', the width of the 'button' changes when the counter vanishes. Which means if you were near the left edge, the cursor gets dropped onto the next thing over, and you have to move it again to get back to the shit you actually wanted. Fixed width would be nice.

Darkened Responsive quick-reply buttons are a bit weird-looking, now. They weren't like that, a few hours ago.

Click to shrink...

HUGE BUTTONS MUST PRESS.
Also, the 'insert qoutes', 'post reply' and 'more options...' buttons are hard to see. Grey-blue text on grey-green buttons on grey-grey background is not good. Needs a little more contrast.
Yes I know I originally complained they were too bright, you fixed them too much.

 

[GiftofLove]

Nitrogen's reply box is a complete mess now. It's huge, the buttons are jumbo sized, and everything is steel grey. The font is almost impossible to see on the text box background because of its color.

Though the word count feature is neat.