Website Tweaks

Dev Zone Web Development
1

Here are a bunch of tweaks I made to the forums. Changed it around, now includes a single file + comments on it's different sections.

Background

html {
    background-color: hsl(0, 0%, 19%) !important;
}

.topic-list>tbody>tr:nth-child(odd), .d-header {
    background-color: hsl(0, 0%, 13%) !important;
}

#main-outlet .container {
    background: none;
}

H1- H6

Overrides for all of the heading sizes.

Desktop

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 1.9375rem;
}

h4 {
  font-size: 1.5625rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

Mobile

h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.25rem;
}

h3 {
  font-size: 1.1875rem;
}

h4 {
  font-size: 1.125rem;
}

h5 {
  font-size: 1.0625rem;
}

h6 {
  font-size: 1rem;
}

Youtube Videos

.lazyYT-container, .lazyYT-video-loaded, .lazyYT-image-loaded {
  width: 693px !important;
  height: 120px !important;
}

.lazyYT iframe {
  width: 693px !important;
  height: 390px !important;
}

Small Changes

#post_1 .topic-body, #post_1 .topic-avatar{
    border-top: none;
}
3 Likes
2

I'll never get this subtle color stuff lol, but thanks anyway :)

edit: im a retard.

3

I'll take a look at this.

4

interesting.

5

Pretty cool
@sarhatabaot re: the views - that button has helped me find out more useful threads over others over in the linux forums. Its pretty useful for knowing what articles are of higher value.

1 Like
6

Good point. Although wouldn't the 'replies/activity' tabs be enough? An active thread is generally a good one.

1 Like
7

Not necessarily. I recently created a thread that defies all analytics logic (except for views) :D

However, these cases are few and far between.

8

ahhh this is the thing you were asking me about creating... yes these tweaks look fantastic..

@MisteryAngel you should totally listen to him... he really knows what he is doing.. we were talking the other night on MC/mumble

9

deployed. discourse has a separate mobile theme, can someone make sure I didnt break anything witht hese tweaks/

1 Like
10

Everything looks good for me running on an i pad mini iOS 9

11

everything looks ship shape wendell.. though mobile is still acting funny but then again discourse on mobile at the development level is still very buggy

12

Tested on Nexus 6. Nothing is broken.

13

I wanted to ask for this for a few days now, and this thread might be the right place..

@wendell @Logan Could you please add a class to the <tr> representing a read topic in category views? Something like that would make it much easier to skip read topics.

<tr id="ember1615" class="ember-view topic-list-item category-teksyndicate has-excerpt read-topic" data-topic-id="91496">
...
</tr>
14

Why not just use the "unread" option?
EDIT: oh, I get it. Looking into it atm.

15

You might want to apply a custom style for this. I'm assuming read = visited. 

 a.title.visited::after {
      content: "\f00c";
      font-size: 14px;
 }

or something similar.

16

Read = visited, where all post have been viewed. The way I do it now is to via JavaScript detecting the background color, which is less than ideal.

17

"interesting."

18

Hello everyone, found some stuff too:

first: "next" arrow on Tek homepage in slideshow doesnt work, can move only to prev slide, not next

second: Tek logo on forums is too big on mobile devices - user area drops under it. Fix:

@media(max-width:450px){
.d-header #site-logo {
max-height: 30px;
padding-top: 4px;
}
}

third: reading topic - topic content - use max-width instead of width:


.topic-body {
max-width: 850px;
}

hope it helps :)