Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Topic started by: Antechinus on February 11, 2020, 06:55:19 PM

Title: Make "Go up" and "Go down" links more useful.
Post by: Antechinus on February 11, 2020, 06:55:19 PM
This is a tweak I'm running myself in Pale Moon with Stylem (Stylish or Stylus are the equivalent add-ons for other browsers).

It works on the default 2.0.x markup, and can be applied to any 2.0.x site, or to the index.css of any theme that uses default markup for these links.

Code for use in a browser add-on looks like this:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.simplemachines.org") {
  /* I'm using a 2560 monitor, and prefer a max-width restriction on the theme. */
  /* Note: it does need important here. */
  #wrapper {
    max-width: 108em !important;
  }
  #upper_section {
    margin-bottom: 0;
  }
  /* This is me hiding some stuff I never use myself. */
  /* Play around with it if you want to see what it does. */
  .social_networks,
  #upper_section + br,
  #upshrinkHeaderIC > * {
    display: none;
  }
  #upshrinkHeaderIC > .inline {
    display: block;
  }
  /* This puts the top anchor at the actual top of the screen,
  /* so you don't get stranded just below the bits you want. */
  #top {
    position: absolute;
    top: 0;
  }
  /* The rest of the code is for the go up/go down links. */
  /* Note that these are not available on all pages. */
  /* Can be styled however you prefer. */
  a[href="#lastPost"], a[href="#top"] {
    position: fixed;
    top: 50%;
    left: -1px;
    width: 38px;
    height: 20vh;
    overflow: hidden;
    padding-bottom: 10vh;
    background: #fcfcfc;
    color: #999;
    font-size: 2em;
    font-weight: 700;
    line-height: 20vh;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #ccc;
    border-radius: 0 0 70% 0;
    opacity: .7;
  }
  a[href="#top"] {
    top: auto;
    bottom: 50%;
    padding-top: 10vh;
    padding-bottom: 0;
    border-radius: 0 70% 0 0;
  }
  a[href="#lastPost"]:hover, a[href="#top"]:hover {
    opacity: 1;
    box-shadow: 1px 2px 1px #0003;
  }
  a[href="#lastPost"]::before {
    display: inline-block;
    width: 38px;
    content: "\2193";
  } 
  a[href="#top"]::before {
    display: inline-block;
    width: 38px;
    content: "\2191";   
  }
}


You can use any or all of this. Taking the chunks in sequence:

1/ I have a widescreen monitor, and don't like chasing sentences for miles, so I set a max-width on the theme wrapper.

2/ Yes, I hide some bits I don't want. For example, I never use the recent posts in the info center, but I find the "Who's online" can be handy.

3/ The default "Go up" link always leaves you below the menu, and below the "Unread" and "New replies" links in the header, which is usually what you want to go up for. Setting the target anchor to the top of the screen fixes this. :)

4/ The visible linky bits. I gave them a basic Curvish styling that looks good to me this week, but you can do wotcha like with the looks and positioning.