Quick fix for Temperate theme

Voice your opinions, concerns and suggestions on how to make the Transport Tycoon Forums better.
Post Reply
User avatar
Killer 11
Tycoon
Tycoon
Posts: 2458
Joined: 06 Jan 2004 18:38
Location: Kaunas, Lithuania
Contact:

Quick fix for Temperate theme

Post by Killer 11 » 30 Nov 2019 02:17

Currently the temperate theme is borderline unusable as it got borked by the update.

I sat down for ~2 hours and banged this CSS patch out, it restores most of the missing structure. It still has problems but it's miles better than the current state of the stylesheet.

EDIT:
I continue working on this and latest version is always posted here with older versions kept if you prefer them.

Code: Select all

@media only screen and (min-width: 701px) {
  * {
    box-sizing: border-box !important;
  }
  
  #page-header .headerbar {
    padding-left: 0;
    padding-right: 0;
  }
  
  #page-header .logo {
    padding-left: 0;
  }
  
  #page-header #search-box {
    margin-right: 0;
    padding-right: 0;
  }
  
  li.row {
  	border-bottom: none;
  	border-top: 2px groove #adadad;
  }
  
  li.row:last-child {
  	border-bottom: 1px solid #595959;
  }
  
  li.row > dl {
    padding-bottom: 3px;
  }
  
  li.row > dl > dt {
    padding-top: 3px;
  }
  
  ul.topiclist li.row dl {
  	margin: 0;
  }
  
  ul.topiclist li.row dl .topic-poster .icon  {
    color: black;
    font-size: 11px;
  }
  
  ul.topiclist li.row dl .lastpost .icon {
    color: black;
  }
  
  li.row:hover dd,
  ul.topiclist dd {
  	border-left: 2px groove #adadad;
  }
  
  .forabg,
  .forumbg {
  	background: #3c5830;
    border-radius: 0;
    border: 2px ridge #adadad;
    padding: 0 !important;
  }
  
  .topiclist .header .row-item dt,
  .topiclist .header .row-item dd {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  
  .topiclist .header .row-item dt {
    padding-left: 6px;
    box-sizing: border-box;
  }
  
  .stat-block {
  	background-color: #848484;
  	padding: 6px 12px;
  	border-style: ridge;
  	border-color: #adadad;
  	border-width: 2px 2px 0;
  }
  
  .stat-block:last-child {
  	border-bottom-width: 2px;
  }
  
  .stat-block > h3 {
  	margin-top: 0;
  	border-bottom-color: #595959;
  }
  
  .stat-block > p:last-child {
  	margin-bottom: 0;
  }
  
  .forumbg.announcement {
  	background: #187bde;
  }
  
  .navbar {
  	border-radius: 0;
  	border: 2px ridge #adadad;
  }
  
  ul.navlinks {
  	border-top-color: #595959;
  }
  
  .post {
  	border-radius: 0;
  	border: 2px ridge #adadad;
  	padding: 0;
  }
  
  .post .inner {
  	display: flex;
  }
  
  .post .inner .postprofile {
  	padding: 6px 0;
  	border-right: 2px groove #adadad;
  	margin: 0;
  	width: 150px;
  	flex-shrink: 0;
  }
  
  .post .inner .postprofile dt,
  .post .inner .postprofile dd {
  	padding: 0 6px;
  	margin-left: 0;
  	margin-right: 0;
  }
  
  .post .inner .postprofile dt {
  	border-bottom: 2px groove #adadad;
  	padding-bottom: 6px;
  }
  
  .post .inner .postprofile dt .avatar-container {
  	margin-bottom: 6px;
  }
  
  .post .inner .postprofile dt .username,
  .post .inner .postprofile dt .username-coloured
  {
      font-size: 1.2em;
  }
  
  .post .inner .postprofile dt .username {
  	color: #000000;
  }
  
  .post .inner .postbody {
  	padding: 6px 0;
  	flex-grow: 1;
  	width: 0;
  }
  
  .post .inner .postbody > div > * {
  	padding-left: 6px;
  	padding-right: 6px;
  }
  
  .post .inner .postbody .content {
  	border-top: 2px groove #adadad;
  	padding-top: 6px;
  }
  
  .post .inner .postbody .content blockquote {
  	margin: 5px;
  }
  
  .post .inner .postbody div .author,
  .post .inner .postbody div>h3:first-child {
    display: inline-block;
  }
  
  .post .inner .postbody div .author {
  	margin: 0 150px 0 0;
  	padding: 2px 0 7px 6px !important;
  }
  
  .post .inner .postbody div>h3:first-child {
  	font-size: 1.2em;
  	margin: 0 !important;
  	padding: 2px 0 7px 6px !important;
  	max-width: 330px;
  }
  
  .post .inner .postbody div .signature {
  	border-top: 2px groove #adadad;
  	box-sizing: border-box;
  }
  
  .post .inner .postbody div .post-buttons {
  	top: 3px;
  	right: 29px;
  	padding: 0;
  	margin: 0;
  }
  
  .post .inner .postbody div .attachbox {
    margin-left: 6px;
  }
  
  .post .inner .back2top {
  	position: absolute;
  	top: 3px;
  	right: 13px;
  }
  
  .post .inner .back2top .top,
  .post .button {
    background: #187bde;
    box-shadow: none;
    border: 1px solid;
    border-color: #84c6ff #0063d6 #0063d6 #84c6ff;
  }
  
  .post .inner .back2top .top:hover,
  .post .button:hover {
    border-color: #0063d6 #84c6ff #84c6ff #0063d6;
  }
  
  .post .inner .back2top .top {
    padding: 4px 2px 3px 4px;
  }
  
  .action-bar .button {
    box-shadow: none;
    background: #ffb531;
    border-color: #ffde9c #e79400 #e79400 #ffde9c;
  }
  
  .action-bar .dropdown-visible .button,
  .action-bar .button:hover {
    color: black;
    background: #ffb531;
    border-color: #e79400 #ffde9c #ffde9c #e79400;
  }
  
  .pagination li.active span {
    color: black;
    border-radius: 0;
    background-color: #848484;
    font-weight: 600;
    border-color: #595959 #adadad #adadad #595959;
  }
  
  .action-bar .button,
  .post .button:hover i.icon,
  .post .button:focus i.icon {
    text-shadow: none;
  }
  
  .pagination li a:hover .icon {
    color: black;
    background: none;
  }
  
  input[type="search"],
  .button {
    border-radius: 0 !important;
  }
  
  .action-bar .button,
  .button i.icon,
  .button:hover i.icon,
  .button:focus i.icon,
  .post .inner .back2top .top .icon,
  .post .inner .back2top .top .icon:hover {
    color: black;
  }
  
  .action-bar .button .caret {
    border-color: black;
  }
  
  i.icon {
  	color: #fcc000;
  }
  
  .jumpbox .button {
    margin: 0;
  }
  
  .row .pagination .icon {
    font-size: 9px;
    color: black;
  }
  
  .row .pagination li a {
    background: none;
    border: none;
    color: #fcc000;
  }
  
  .row .pagination li a:hover {
    color: #fcf880;
    text-decoration: underline;
  }
}
Previous versions:

Code: Select all

li.row {
	border-bottom: none;
	border-top: 2px groove #adadad;
}

li.row:last-child {
	border-bottom: 1px solid #595959;
}

ul.topiclist li.row dl {
	margin: 0;
}

li.row:hover dd,
ul.topiclist dd {
	border-left: 2px groove #adadad;
}

.forabg,
.forumbg {
	background: #3c5830;
    border-radius: 0;
    border: 2px ridge #adadad;
}

.stat-block {
	background-color: #848484;
	padding: 6px 12px;
	border-style: ridge;
	border-color: #adadad;
	border-width: 2px 2px 0;
}

.stat-block:last-child {
	border-bottom-width: 2px;
}

.stat-block > h3 {
	margin-top: 0;
	border-bottom-color: #595959;
}

.stat-block > p:last-child {
	margin-bottom: 0;
}

.forumbg.announcement {
	background: #187bde;
}

.navbar {
	border-radius: 0;
	border: 2px ridge #adadad;
}

ul.navlinks {
	border-top-color: #595959;
}

.post {
	border-radius: 0;
	border: 2px ridge #adadad;
	padding: 0;
}

.post .inner {
	display: flex;
}

.post .inner .postprofile {
	padding: 6px 0;
	border-right: 2px groove #adadad;
	margin: 0;
	width: 200px;
	flex-shrink: 0;
}

.post .inner .postprofile dt,
.post .inner .postprofile dd {
	padding: 0 6px;
	margin-left: 0;
	margin-right: 0;
}

.post .inner .postprofile dt {
	border-bottom: 2px groove #adadad;
	padding-bottom: 6px;
}

.post .inner .postprofile dt .avatar-container {
	margin-bottom: 6px;
}

.post .inner .postprofile dt .username,
.post .inner .postprofile dt .username-coloured
{
    font-size: 1.2em;
}

.post .inner .postprofile dt .username {
	color: #000000;
}

.post .inner .postbody {
	padding: 6px 0;
	flex-grow: 1;
}

.post .inner .postbody > div > * {
	padding-left: 6px;
	padding-right: 6px;
}

.post .inner .postbody .content {
	border-top: 2px groove #adadad;
	padding-top: 6px;
}

.post .inner .postbody .content blockquote {
	margin: 5px;
}

.post .inner .postbody div h3:first-child,
.post .inner .postbody div .author {
	display: inline-block;
	margin: 0 !important;
	padding: 2px 0 7px !important;
}

.post .inner .postbody div>h3:first-child {
	font-size: 1.2em;
	padding-left: 6px !important;
}

.post .inner .postbody div .signature {
	border-top: 2px groove #adadad;
	box-sizing: border-box;
}

.post .inner .postbody div .post-buttons {
	top: 3px;
	right: 20px;
	padding: 0;
}

.post .inner .back2top {
	position: absolute;
	top: 8px;
	right: 11px;
}

.post .inner .back2top .icon {
	color: black;
}
Last edited by Killer 11 on 01 Dec 2019 00:56, edited 2 times in total.

User avatar
kamnet
Moderator
Moderator
Posts: 6894
Joined: 28 Sep 2009 17:15
Location: Eastern KY
Contact:

Re: Quick fix for Temperate theme

Post by kamnet » 30 Nov 2019 05:30

Killer 11 wrote:
30 Nov 2019 02:17
Currently the temperate theme is borderline unusable as it got borked by the update.

I sat down for ~2 hours and banged this CSS patch out, it restores most of the missing structure. It still has problems but it's miles better than the current state of the stylesheet.
If you don't mind, could you post a before-and-after screenshot?

User avatar
Killer 11
Tycoon
Tycoon
Posts: 2458
Joined: 06 Jan 2004 18:38
Location: Kaunas, Lithuania
Contact:

Re: Quick fix for Temperate theme

Post by Killer 11 » 30 Nov 2019 10:05

Don't expect miracles this was just a couple of hours of hacking it at 2 am
My main goal was to bring the borked line colors under control, re-add structure to posts(header, sig and profile sections) and nuke the rounding as it's completely against TTD style.
Attachments
Board after.png
Board after
(238.31 KiB) Not downloaded yet
Board before.png
Board before
(244.92 KiB) Not downloaded yet
Index after.png
Index after
(206.09 KiB) Not downloaded yet

User avatar
Killer 11
Tycoon
Tycoon
Posts: 2458
Joined: 06 Jan 2004 18:38
Location: Kaunas, Lithuania
Contact:

Re: Quick fix for Temperate theme

Post by Killer 11 » 30 Nov 2019 10:06

3 more.
Attachments
Index before.png
Index before
(225.73 KiB) Not downloaded yet
post after.png
Post after
(219.13 KiB) Not downloaded yet
post before.png
Post before
(205.81 KiB) Not downloaded yet

User avatar
jfs
Director
Director
Posts: 609
Joined: 08 Jan 2003 23:09
Location: Denmark

Re: Quick fix for Temperate theme

Post by jfs » 30 Nov 2019 11:34

I like the changes on those screenshots.

User avatar
Redirect Left
Tycoon
Tycoon
Posts: 6608
Joined: 22 Jan 2005 19:31
Location: Wakefield, West Yorkshire

Re: Quick fix for Temperate theme

Post by Redirect Left » 30 Nov 2019 12:20

Index I think loops better as ie now, using a lighter colour for headers.
Image
Worst Behaved IRC Member of 2008, 2009 & 2010 - Go Me!

User avatar
Killer 11
Tycoon
Tycoon
Posts: 2458
Joined: 06 Jan 2004 18:38
Location: Kaunas, Lithuania
Contact:

Re: Quick fix for Temperate theme

Post by Killer 11 » 30 Nov 2019 13:26

I'll probably redo the frames in the index/board views to match TT look better than it is now as I am not too happy with that bit myself.

User avatar
kamnet
Moderator
Moderator
Posts: 6894
Joined: 28 Sep 2009 17:15
Location: Eastern KY
Contact:

Re: Quick fix for Temperate theme

Post by kamnet » 30 Nov 2019 18:21

To be honest, I don't see what makes the current "borderline unusable" compared to the after. For the most part, it's just a slight variation in the color scheme, which isn't objectionable but does nothing to actually make the site "usable". The one difference I don't like at all is with widening the left column on the forum posts. It doesn't need to be so wide and I'd prefer to give the screen space to the posts, especially posts which are highly formatted or contain code. It just makes it easier to read posts. I'm also not a fan of returning to 2000-era boxy tables, as it makes the site look peculiarly outdated, but that's a minor quibble.

Have you tested your CSS layout in a mobile browser? That is really the biggest issue, mobile is where more (maybe even most now?) of the traffic will come from, it is quite important that the CSS changes do not degrade usage in mobile browsers.

User avatar
Killer 11
Tycoon
Tycoon
Posts: 2458
Joined: 06 Jan 2004 18:38
Location: Kaunas, Lithuania
Contact:

Re: Quick fix for Temperate theme

Post by Killer 11 » 30 Nov 2019 20:09

The biggest problem with the current look is the lack of structure to the post, honestly I find it hard to separate signatures from posts at a glance, the subject and profile also having no division just makes it look unformatted and further hinders readability. Then you have the obnoxiously clashing colors (white borders on gray boxes look really bad) and the rounding of corners.

If you want a more modern spin on this type of theme then it kind of needs a redesign from the ground up, the base colors just don't work with design that is in fashion now. This halfway mashup of pro-silver and the old theme is really really hard to look at and I doubt it will ever trully work. If we are to keep a theme that resembles the game with the colors that we have now then the only real way to roll is to just commit to the style fully.

The current code I threw here was just a test but since I see some people like the changes(it has many problems and I did not put a second of time in making it responsive) I'll put in some more work and keep this updated.

User avatar
Killer 11
Tycoon
Tycoon
Posts: 2458
Joined: 06 Jan 2004 18:38
Location: Kaunas, Lithuania
Contact:

Re: Quick fix for Temperate theme

Post by Killer 11 » 01 Dec 2019 01:00

Just posted a new version.

This version is a lot more comprehensive, brings back the old style buttons and whatnot.
I also isolated all custom css to not apply to mobile version thus breaking nothing on that end.

I have not focused on new post interface or user settings but those do not appear to be broken to me, I'll get to it later.
Attachments
board v2.png
(229.43 KiB) Not downloaded yet
index v2.png
(205.49 KiB) Not downloaded yet
post v2.png
(171.61 KiB) Not downloaded yet

User avatar
Redirect Left
Tycoon
Tycoon
Posts: 6608
Joined: 22 Jan 2005 19:31
Location: Wakefield, West Yorkshire

Re: Quick fix for Temperate theme

Post by Redirect Left » 01 Dec 2019 01:10

Those buttons just don't work on this current theme that'd be a step back for sure. Honestly, I think it looks fine as it is now. I've not had any issues with readability, in fact I didn't even notice the missing border lines.
Image
Worst Behaved IRC Member of 2008, 2009 & 2010 - Go Me!

User avatar
kamnet
Moderator
Moderator
Posts: 6894
Joined: 28 Sep 2009 17:15
Location: Eastern KY
Contact:

Re: Quick fix for Temperate theme

Post by kamnet » 01 Dec 2019 06:56

Killer 11 wrote:
30 Nov 2019 20:09
... honestly I find it hard to separate signatures from posts at a glance...
I'll agree, I wouldn't mind some more physical separation between posts and signatures.
If you want a more modern spin on this type of theme then it kind of needs a redesign from the ground up...
This is exactly what Owen wishes to avoid, because a future upgrade of the software will likely break a significant custom re-design. Unfortunately phpBB has chosen to move away from allowing end-users from radically changing the layout. There's too much that's baked into the templates now to make that easy or sustainable.
The current code I threw here was just a test but since I see some people like the changes(it has many problems and I did not put a second of time in making it responsive) I'll put in some more work and keep this updated.
Thank you for the work you've put in so far. If you get everything worked out I'd be supportive of adding this as another theme ("Old School TT-F")

If you really want to go all-in, we currently do not have a proSilver-based winter holiday theme. ;)

User avatar
orudge
Administrator
Administrator
Posts: 24042
Joined: 26 Jan 2001 20:18
Skype: orudge
Location: Banchory, UK
Contact:

Re: Quick fix for Temperate theme

Post by orudge » 02 Dec 2019 09:40

kamnet wrote:
01 Dec 2019 06:56
If you really want to go all-in, we currently do not have a proSilver-based winter holiday theme. ;)
Now that's a good point, the decorations should be up right now but I don't have any to put up. :(

Thanks for your work, Killer 11. The first set of changes you posted I think look fairly decent. I do agree with some of the replies though that some of the changes in proSilver/the new TT theme are intentional - e.g., not being as 'boxy', fewer lines, etc. Bringing back the old-style buttons I'm not completely sure about - if they're purely CSS and 'degrade' nicely on mobile then it may work.

I have a test server set up with a dummy phpBB board and a copy of the theme. Somebody else had volunteered to work on it a little while back but they never found the time to look at it. I'd be happy to give you access and you can apply your changes there for us to test out?

Also, if anybody does want to knock up a winter theme based on the new style, then I'll likewise happily give you access (and a copy of the old theme files)!

Post Reply

Return to “Forum Suggestions and Feedback”

Who is online

Users browsing this forum: No registered users and 2 guests