Widescreen support


#1

I see this forum still doesnt support widescreen monitors, so i made this style for myself:

.topic-body {
    width: 1500px;
    left: -300px;
}

.timeline-container {
    right: 400px;
}

.full-width {
    width: 1500px;
    margin-left: -200px;
}

You can use it with any browser extension, that allows you to overwrite website css styles, i use stylish extension with firefox. I also use 1440p monitor, so you might need to change the values. The web is ridiculous these days, everything is incompatible between the components, and everyone all the time is trying to invent their own wheel…


#2

It is advised (in 2018) to use relative dimensions, i.e per cent.


#3

I prefer to use rem over px. Your px layout is fixed.


#4

here is how I modified it for me:

@-moz-document url-prefix("https://forum.manjaro.org") {

  /* ************************************************************************** */
  /*  Don't show all useless and annoying things                                */
  /* ************************************************************************** */ 
  
 /* .widget-button.toggle-like.like.no-text {
    display: none;
  }
  
  .widget-button.toggle-like.has-like.fade-out.no-text {
    display: none;
  }
  
  .widget-button.like-count.highlight-action {
    display: none;
  }
 */   
  #share-link .social-link {
    display: none;
  }
  
  .topic-map {
    display: none;
  }
  
  /* ************************************************************************** */
  /*  Main hack to use more the horizontal space                                */
  /* ************************************************************************** */  
  .wrap {
    max-width: 4096px;
    padding-right: 15px;
    padding-left: 15px;
  }
  
  /* ************************************************************************** */
  /*  Header                                                                    */
  /* ************************************************************************** */  
  .d-header{
    padding-top: 2px;
    height: 43px !important;
  }
  
  .d-header .contents
  {
    margin-top: 2px;
    margin-bottom: 2px;
    line-height: 15px;
  }
  
  .extra-info h1 {
    font-size: 1.1em;
  }
  
  .d-header #site-logo {
    max-height: 33px;
  }
  
  #main-outlet {
    padding-top: 55px;
  }
  
  /* ************************************************************************** */
  /*  Modal                                                                     */
  /* ************************************************************************** */  
  .modal-inner-container {
    max-width: 4200px;
    width: 98%;
  }
  
  .span8 {
    width: 49%;
    float: left;
  }
  
  .offset1 {
    margin-left: 2%;
  }
  
  /* ************************************************************************** */
  /*  Time line                                                                 */
  /* ************************************************************************** */
 .timeline-container {
   margin-left: calc(~"100% - 160px");
  }
    
  /* ************************************************************************** */
  /*  Pager Time line                                                           */
  /* ************************************************************************** */
  #topic-progress-wrapper {
    right: 150px;
  }
  
  /* ************************************************************************** */
  /*  Handy Hacks                                                               */
  /* ************************************************************************** */
  .topic-list .main-link a.title {
    padding: 0px !important;
  }

  .topic-list .num.posts a {
    padding: 0px !important;
  }
  .topic-list .num.activity a {
    padding: 0px !important;
  }
  
 /* .topic-list-item .discourse-tags { */
 /*    display: none; */
 /* } */
  
  /* ************************************************************************** */
  /*  Tags                                                                      */
  /* ************************************************************************** */
  .discourse-tag.box {
    border-radius: 4px;
  }

  /* ************************************************************************** */
  /*  Post Header                                                               */
  /* ************************************************************************** */
  .topic-meta-data {
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
  }
  
  .topic-meta-data span.username a {
    vertical-align: middle;
  }
  
  /* ************************************************************************** */
  /*  Post separation                                                           */
  /* ************************************************************************** */
  .topic-post {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  /* ************************************************************************** */
  /*  Post border and width                                                     */
  /* ************************************************************************** */
  .topic-body {
    width: calc(~"100% - 190px");
    border-radius: 5px;
    border-style : solid;
    border-width: 1px;
  }
  
  /* ************************************************************************** */
  /*  Post Content                                                              */
  /* ************************************************************************** */
  .quote {
    border-left-style: solid;
  }
  
  /* Code */
  pre code {
    max-height: 205px;
   /* border-left-style: solid; */
  }
  
  /* ************************************************************************** */
  /*  Embeded post in other and reply in post                                   */
  /* ************************************************************************** */
  .embedded-posts.top {
    margin-bottom: 3px;
  }
  
  .reply {
    padding-bottom: 10px;
    padding-left: 10px;
  }
         
  /* ************************************************************************** */
  /*  gutter: reply as topic links, links to other linked topic, etc            */
  /* ************************************************************************** */
  .gutter {
    float: left;
    padding-left: 0px;
    width: auto !important;
  }
  
  .menu-panel {
    width: 500px !important;
  }

  .menu-panel span.badge-category {
    max-width: 170px;
  }
  
  #suggested-topics table {
    border-radius: 10px;
  }
  
  .list-controls .category-dropdown-menu .badge-wrapper.bullet .badge-category {
    max-width: 250px;
  }
  
  .stats {
    display: none;
  }
  
  .share {
    display: none;
  }
  
  #suggested-topics {
    display: none;
  }

  .topic-list.categories .featured-topic a.last-posted-at, .topic-list.categories .featured-topic a.last-posted-at:visited {
    float: right;
  }
  
  
  /* **************************************************** */
  /* Screen < 977px                                       */
  /* **************************************************** */
  @media only screen and (max-width: 977px) {
      .topic-body {
         width: 90% !important;
      }
      
      #topic-progress-wrapper {
         /* right: 30%; */
      } 
    
      .wrap {
        padding-right: 10px;
        padding-left: 10px;
      }
  }
}

with some color modifications

@-moz-document url-prefix("https://forum.manjaro.org") 
 
   :root{
    --darkgreen: #035F1D;
  }
  
  #list-area, .topic-list, .topic-body {
    background-color: #FBFBFB !important;
  }
 
  /* ************************************************************************** */
  /*  Time line                                                                 */
  /* ************************************************************************** */

  .timeline-container .topic-timeline .timeline-scrollarea {
    border-color: var(--darkgreen);
  }
  
  .timeline-container .topic-timeline .timeline-handle {
    background-color: var(--darkgreen);
  }
  
  .timeline-container .topic-timeline .start-date{
    color: var(--darkgreen);
  }
  
  .timeline-container .topic-timeline .now-date{
    color: var(--darkgreen);
  }
  
  .timeline-container .topic-timeline .timeline-ago{
    color: var(--darkgreen);
  }
  
  /* ************************************************************************** */
  /*  Some text color                                                           */
  /* ************************************************************************** */
  /* topic map statistics (first post) */
  .topic-map h4 {
    color: var(--darkgreen);
  }
  
  /* Likes stats button */
  nav.post-controls .highlight-action {
    color: var(--darkgreen);
  }
  
  /* other actions buttons buttons */
  nav.post-controls button {
    color: var(--darkgreen);
  }

  /* reply button */
  nav.post-controls button.create{
    color: var(--darkgreen) !important;
    opacity: 1 !important;
  }
  
   nav.post-controls button .read-icon.bookmarked::before {
    color: #E34D32;
  }
  /* ************************************************************************** */
  /*  Tags                                                                      */
  /* ************************************************************************** */
  .discourse-tag.box {
    background-color:  var(--darkgreen);
    color: #D0D0D0 !important;
  }
   header .discourse-tag {
    color: #D0D0D0 !important;
  }
  
  /* ************************************************************************** */
  /*  Post Header                                                               */
  /* ************************************************************************** */
  
  /* Post Header */
  .topic-meta-data {
    background-color: #CCF0C0;
    border-color: var(--darkgreen);
    /*border-color: #c6c6b8; */
  }
  
  /* Post Author */
  .topic-meta-data span.username a {
    color: var(--darkgreen) !important;
  }
  
  /* Post time */
  .post-date {
    color: var(--darkgreen)!important;
  }
  
  /* Post reply to header */
  .topic-body .reply-to-tab {
    color: var(--darkgreen)!important;
  }
  
  /* ************************************************************************** */
  /*  Post Content                                                              */
  /* ************************************************************************** */
  .quote {
    border-left-color: #E34D32;
  }
  
  aside.quote .title {
    color: var(--darkgreen);
  }
  
  /* Code */
  /*
  pre code {
    color: #9D9D9D;
    background: #444444;
    border-color: #999999;
  }
  */
  
  /* ************************************************************************** */
  /*  Post separation                                                           */
  /* ************************************************************************** */
  .quote-controls, .quote-controls .back::before, .quote-controls .quote-other-topic::before {
    color: var(--darkgreen);
  }
  /* ************************************************************************** */
  /*  Post border and width                                                     */
  /* ************************************************************************** */
  .topic-body {
    border-color: var(--darkgreen); 
  }
          
  /* ************************************************************************** */
  /*  Reply box                                                                 */
  /* ************************************************************************** */
  #reply-control .d-editor-button-bar button {
    color: var(--darkgreen);
  }

result:


#5

Yes, you can’t help it. You like the phpBB forums!!..:stuck_out_tongue_winking_eye:


#6

@jonathon, have you just applied this wide screen setting?!
I need to get used to it. :dizzy_face:
Edit: The problem is the text column didn’t get wider, no gain in terms of screen real estate.


#7

It seems to be moving around a bit right now.


#8

ah, that’s what happened. i don’t have a wide screen and now i’m losing space on either side i can’t afford to lose.


#9

I’m having a bit of a play with the CSS, seeing if there are some minimal changes to make it work better with very wide screens.

So far the change is only this:

.wrap {
	max-width: inherit;
}

It’s both an upside and a downside of the Discourse model. :slight_smile:

I’m still testing, give it a bit to settle. :wink:


#10

We know, we do agile testing. :wink: (However, testing on a production system… What will St. Thecia and St. Isidore the patrons of IT say? :unamused: :wink: )


#11

Also I might get a bit distracted this evening.

“F it, we’ll do it live” ?