Width wrapping

[qlonik]

Could you add an option to be able to wrap the text on the page based on some width value (900px or something like this)?

[Mottie]

Hi @qlonik!

How about I let you test this usercss style for me. Hopefully you're using Stylus. If so:

• Open the manager and check the "as Usercss" checkbox
• Then click the "Write new style" button next to it.
• Select all content (Ctrl + a) in the editor.
• And finally paste (Ctrl + v) in the following css:

/* ==UserStyle==
@name           Wikipedia width
@namespace      StylishThemes
@version        1.0.0
@description    Fix the width of wikipedia body
@author         StylishThemes
@var number width "Width" [900, "px"]
==/UserStyle== */
@-moz-document domain("wikipedia.org") {
  body {
    max-width: var(--width);
    margin: 0 auto;
  }
  #mw-panel {
    left: calc(50% - var(--width) / 2);
  }
  #left-navigation {
    margin-left: calc(50% - var(--width) * .305);
  }
  #right-navigation {
    margin-left: 100px;
    float: left;
  }
}

Now in the popup, use the usercss config to modify the default setting of 900px to any value you want.

If this works well for you, you can either keep it as a separate style or I'll integrate it into the main dark style once it's been tested and refined.

[qlonik]

Hello, sorry it took me some time to get back.

It works pretty well. I've taken couple screenshots.
It resizes everything well and moves all the content into the center.

The only weird thing is that top buttons (main page/talk/read/source) and search bar are behaving funny. Also, some nitpicking details is that after resizing like this, I can pretty clearly see outline of the main page box on the left and right of the text - they are very faint light gray and black vertical lines. These lines also disappear after I scroll past the first page, which is weird.
Ahh, this line is because background of main text and the rest of page is not aligning completely, so two gray boxes are touching each other on one side, and on another side there is a gap that is too wide.

[Mottie]

I updated the css in my first post to include the #right-navigation.

[qlonik]

Sorry, I forgot about it.
I tried playing around with css a little bit and came up with the following, which seems to be working very well. I also enabled text to be justified, so it is easier to read.

/* ==UserStyle==
@name           Wikipedia width
@namespace      StylishThemes
@version        1.0.0
@description    Fix the width of wikipedia body
@author         StylishThemes
@var number width "Width" [900, "px"]
==/UserStyle== */

@-moz-document domain("wikipedia.org") {
  body {
    max-width: var(--width);
    margin: 0 auto;
  }
  #mw-head {
    max-width: var(--width);
    right: inherit;
  }
  #mw-panel {
    left: inherit;
  }
  #mw-content-text p {
    text-align: justify;
  }
}

EDIT:
Just noticed that the popup with search suggestions is not properly positioned. I'm not sure what is the problem, but when I remove margin: 0 auto; in body, it seems to be positioned properly

[ght]

This is a nice feature and after testing @qlonik's version from the above comment for some minutes, it seems to work with no problems.

It would be nice if this was included in the style, or at least properly published as a separate style if it is deemed out of scope for the dark theme.

[the-j0k3r]

It would be nice if this was included in the style, or at least properly published as a separate style if it is deemed out of scope for the dark theme.

The best we can do for now is add the above style to https://github.com/StylishThemes/Feature-Override-Styles.

That is if the popup margin issues are solved. @qionik if you add an exclusion or fix that Ill add it to the repo mentioned above.

[the-j0k3r]

ping

[qlonik]

I tested out the css from my previous comment (unchanged) and it seems that search pop up doesn't have the same issue anymore. My guess is wikipedia changed something and it seems to work now.

[the-j0k3r]

Is this #51 (comment) the correct and final CSS? if so I will publish it in the Feature override repo and ping you when its done.

Let me know whcih final CSS it is, thx

[qlonik]

Sorry, forgot to reply. Yes this one : #51 (comment)