Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>Reference:</strong> <a href="http://boards.4chan.org/g/" rel="nofollow noreferrer"><strong>http://boards.4chan.org/g/</strong></a></p> <p>I've discovered an excellent feature that this website has for it's users, including built in customized viewing of their Thumbnail Images!</p> <p><strong>The 4Chan Homepage Settings Menu</strong></p> <p>That menu provides a whole lot of options to configure the webpage on how you see fit. I was astounded to see a <code>Custom CSS</code> feature that shows a <code>CSS Box</code> which will accept your own custom markup to tailor the site down to markup level! More on that in a bit.</p> <p>First, I want to mention that they do provide <strong>TWO</strong> ready to use options that should satisfy your Thumbnail viewing requirements.</p> <p><strong><em>Bounty EDIT:</strong> Users of the <a href="http://mayhemydg.github.com/4chan-x/" rel="nofollow noreferrer"><strong>4chan-x Greasemonkey script</strong></a> already have these 2 options in <strong>4chan Qt ≪Quality thumbnails≫ Settings</strong> menu. Skip to the next EDIT below if your using this script.</em></p> <p>Take a look at this screenshot that show 3 steps to perform, with step 2 being one or the other.</p> <p>Right-click the image below and <strong>view in full size</strong> if that helps: </p> <p><strong><code>Open Image in New Tab / View Image</code></strong> </p> <p><img src="https://i.stack.imgur.com/WGITz.jpg" alt="enter image description here"></p> <p>In <strong>Step 1</strong> above, notice that the <code>Settings</code> reflect the <code>4chan Homepage</code> and not the script.</p> <p>In <strong>Step 2a</strong> above, this will closely reproduce the double image size for average images, but if those images are super large, they will use the available browsers width.</p> <p>In <strong>Step 2b</strong> above, this choice instead will show a super large image if it exists up to the browsers width size.</p> <p>If neither of these two ready-to-use thumbnail options suits your taste, keep reading.</p> <p>Since your original goal is to see the thumbnails at twice the size, or <code>200%</code>, I analyzed the webpage to determine the most minimal settings required to show these Thumbnail Images at that size, but note many will be blurry at twice the size since the quality isn't increased. See Bounty EDIT below for solution for images that are not blurry at ANY size.</p> <p>Having said that, you can choose <code>150%</code> to minimize the blur while still enlarging it, or choose the value that is acceptable to you if you did not want to use Greasemonkey.</p> <hr> <p><strong>Bounty EDIT:</strong></p> <p>The blurry images are no longer an issue when using these CSS Settings with <a href="http://mayhemydg.github.com/4chan-x/" rel="nofollow noreferrer"><strong><em>4chan-x Greasemonkey Script</em></strong></a> to have <strong>thumbnails twice the size</strong>.</p> <p>Note you will need to remove a default checkmark that is automatically applied for <code>Disable 4chan's extension</code> in the Greasemonkey Script, accessible by clicking the <strong>4chan Qt ≪Quality thumbnails≫ Settings</strong> link at the top-right corner of the webpage.</p> <p>Once you exit that settings menu, enter the <strong>4chan <em>Homepage</em> Settings Menu</strong>. Remove <strong>all</strong> checkmarks, <strong>except</strong> for Custom CSS. To be sure, the image above did not remove all the checkmarks for which <strong>4chan-x</strong> recommends.</p> <hr> <p><strong>Caution:</strong> Using the <em>Custom CSS Settings</em> option can make the Settings Menu inaccessible! You'll need to use the browsers built in <code>inspect element</code> to make live changes on-the-fly to regain control.</p> <p>The box below is not an image. Select, copy, and then paste this CSS into the Settings Menu CSS Box:</p> <pre class="lang-css prettyprint-override"><code>div.file, a.fileThumb img { width: 200% !important; height: 200% !important; float: left; } .fileInfo { margin: 10px; } </code></pre> <p>To be clear, here's a screenshot of that box:<br /> <img src="https://i.stack.imgur.com/IVHi8.jpg" alt="enter image description here"></p> <p>After you paste the above code into the <code>CSS Box</code>, press the <code>Save CSS Button</code> and ensure you have a <code>Checkmark</code> for <code>Custom CSS</code> and then press the <code>SAVE Button</code> to exit.</p> <p>The page will then refresh itself with these new settings. Enjoy your 2x Thumbnails.</p> <p><strong>Bounty EDIT:</strong> Reminder that above image shows checkmarks in Essential section that should be removed. To be sure, the homepage top-right will have 4Chan's Original Settings Menu in middle:</p> <blockquote> <p>[4chan Qt ≪Quality thumbnails≫ Settings] <strong>[Settings]</strong> [Home]</p> </blockquote>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload