✔️ GREEN THEME/STYLE for Bitcointalk.org | 2019

[TreeC]

✔️  GREEN THEME/STYLE for Bitcointalk.org | 2019
Support browsers: Google Chrome, Mozilla Firefox, Brave...

✔️ IMAGES/PREVIEW:
https://i.imgur.com/yHlXSrd.png
https://i.imgur.com/ZJ8TgxZ.png
https://i.imgur.com/Hz4ZENf.png


✔️ Google Chrome instructions:
1] Install the Stylish Extension: https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe
2] Visit: https://userstyles.org/styles/169662/green-theme-style-bitcointalk-org-2019-new
3] Install Style https://i.imgur.com/zhSJF36.png

✔️ Mozilla Firefox instructions:
1] Install the Stylish Extension: https://addons.mozilla.org/en-US/firefox/addon/stylish/?src=search
2] Visit https://userstyles.org/styles/169662/green-theme-style-bitcointalk-org-2019-new
3] Install Style https://i.imgur.com/zhSJF36.png


✔️ CSS Code:

Code:

/* ✔️ GREEN THEME/STYLE | Bitcointalk.org | 2019  New */

  .newimg
  {
    background: #31a255;
    padding: 6px;
    background-repeat: no-repeat;
    width: 0px;
    /*or your image's width*/
    height: auto;
    /*or your image's height*/
    margin-left: 6px;
    border-radius: 16px;
    margin-right: 7px;
  }

  .mirrortab_back
  {
    font-size: 0px;
  }

  #toppages
  {
    color: #31a255;
    width: 98%;
    clear: right;
  }

  #toppages a
  {
    padding: 3px 5px;
    color: #a7a7a7;
  }

  .subject
  {
    display: none;
  }

  .navPages
  {
    padding: 3px;
  }

/* Normal, standard links. */

  a:link
  {
    color: #63b133;
    text-decoration: none;
  }

  a:visited
  {
    color: #7dbd56;
    text-decoration: none;
  }

  a:hover
  {
    text-decoration: underline;
  }

/* Style for ignored topics in the message view */

  .ignored_topic td a:link
  {
    color: #ACABAD;
    text-decoration: none;
    font-style: italic;
  }

  .ignored_topic td a:visited
  {
    color: #ACABAD;
    text-decoration: none;
    font-style: italic;
  }

  .ignored_topic td
  {
    color: #ACABAD;
    font-size: smaller;
    padding-top: 0;
    padding-bottom: 0;
  }

  .ignored_topic .leftimg img
  {
    display: none;
  }

/* Navigation links - for the link tree. */

  .nav, .nav:link, .nav:visited
  {
    color: #63b133;
    text-decoration: none;
    /* clear: both; */
    float: left;
    width: auto;
    padding-right: 26px;
    border-top: 0px solid #d1e4c5;
    padding-top: 0px;
    padding-bottom: 15px;
    padding-left: 21px;
  }

  a.nav:hover
  {
    color: #40920d;
    text-decoration: underline;
  }

  .poster_info
  {
    border-left: 3px solid #d1e4c5;
    padding-left: 16px;
  }

  .poster_info:hover
  {
    border-left: 3px solid #63b133;
  }

/* Tables should show empty cells. */

  table
  {
    empty-cells: show;
    margin-left: 0px;
    margin-bottom: 0px;
  }

  #upshrinkHeader2
  {
    margin-bottom: 7px;
    display: none;
  }

  #upshrinkHeader span
  {
    color: transparent;
  }

  #quickModForm tr:nth-child(4)
  {
    display: none;
  }

  td .nav
  {
    /* text-align:right; */
    background: transparent;
    border: none;
    padding-left: 27px;
    float: left;
  }

/* By default (td, body..) use verdana in black. */

  body, td, th , tr
  {
    color: #3a3a3a;
    font-size: 17px;
    font-family: 'Source Sans Pro', sans-serif;
  }

  tr:hover
  {
    background: #daebcf;
  }

  tr:hover > .poster_info
  {
    border-left: 3px solid #63b133;
  }

/* The main body of the entire forum. */

  body
  {
    background-color: #e8f2e2;
    margin: auto;
    padding: 0px 30px 4px 30px;
    width: 1200px;
  }

/* Input boxes - just a bit smaller than normal so they align well. */

  input, textarea, button
  {
    color: #383838;
    font-family: verdana, sans-serif;
  }

  input
  {
    font-size: 90%;
    padding: 6px 8px;
    border: 1px solid #63b133;
  }

  input[type=submit]
  {
    font-size: 90%;
    background: #63b133;
    color: white;
    border: none;
    cursor: pointer;
    padding: 7px 14px;
  }

  input[type=submit]:hover
  {
    box-shadow: 0px 0px 4px #63b133;
  }

  textarea
  {
    font-size: 100%;
    color: #000000;
    font-family: verdana, sans-serif;
  }

/* All input elements that are checkboxes or radio buttons. */

  input.check
  {
  }

/* Selects are a bit smaller, because it makes them look even better 8). */

  select
  {
    font-size: 90%;
    font-weight: normal;
    color: #000000;
    font-family: verdana, sans-serif;
  }

/* Standard horizontal rule.. ([hr], etc.) */

  hr, .hrcolor
  {
    height: 2px;
    border: 0;
    color: #666666;
    background-color: #d1e4c5;
  }

/* No image should have a border when linked */

  a img
  {
    border: 0;
  }

/* A quote, perhaps from another post. */

  .quote
  {
    color: #000000;
    padding: 6px 11px;
    margin: 1px 3px 8px 6px;
    font-size: 17px;
    line-height: 1.4em;
  }

/* A code block - maybe even PHP ;). */

  .code
  {
    color: #3b8c09;
    background-color: #f1fbeb;
    font-family: "courier new", "times new roman", monospace;
    font-size: 13px;
    line-height: 1.3em;
    /* Put a nice border around it. */
    border: 1px solid #63b133;
    padding: 10px;
    margin: 1px 3px 4px 6px;
    width: 93%;
    /* Don't wrap its contents, and show scrollbars. */
    white-space: nowrap;
    overflow: auto;
    /* Stop after about 24 lines, and just show a scrollbar. */
    max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */

.quoteheader, .codeheader {
    color: #63b133;
    text-decoration: none;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 29px;
    margin-left: 6px;
}

/* Generally, those [?] icons.  This makes your cursor a help icon. */

.help {
    cursor: help;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */

.meaction {
    color: red;
}

/* The main post box - this makes it as wide as possible. */

.editor {
    width: 96%;
    height: 350px;
}

/* Highlighted text - such as search results. */

.highlight {
    background-color: yellow;
    font-weight: bold;
    color: black;
}

/* Alternating backgrounds for posts, and several other sections of the forum. */

.windowbg, #preview_body {
    color: #a7a7a7;
    background-color: transparent;
    font-family: 'Hind Vadodara', sans-serif;
    padding: 16px 15px;
    width: 7%;
}

#frmLogin .tborder {
    color: #8a8a8a;
    background-color: transparent;
    font-family: 'Hind Vadodara', sans-serif;
    padding: 16px 15px;
}

#frmLogin td {
    color: #8a8a8a;
    background-color: transparent;
    font-family: 'Hind Vadodara', sans-serif;
    padding: 6px 23px;
    width: 63%;
}

.windowbg:first-letter {
    text-transform: uppercase;
}

#variousheadlinks a {
    float: left;
    clear: none;
    font-size: 15px;
    padding-right: 33px;
}

#variousheadlinks br {
    clear: both;
    float: left;
    display: none;
}

#variousheadlinks {
    padding: 3px 30px 5px 5px;
    opacity: 0.8;
    color: green;
}

.leftimg {
    display: none;
}

.windowbg2 {
    color: #505050;
    background-color: transparent;
    padding: 23px 30px 21px 30px;
    line-height: 25px;
}

.windowbg2 div {
}

td.windowbg2 {
    color: #505050;
    background-color: transparent;
    padding: 23px 30px 23px 16px;
    line-height: 25px;
}

.lastpostcol {
    /* display: block; */
    text-align: center;
    font-size: 19px;
}

.windowbg3 {
    color: #a5a4a4;
    background-color: transparent;
    padding: 14px 14px;
    float: left;
    width: 103%;
    margin-left: 3%;
}

/* the today container in calendar */

.calendar_today {
    background-color: #FFFFFF;
}

#hellomember {
    font-size: 93%;
}

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */

.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td {
    color: #63b133;
    font-style: normal;
    /* background: #63b1331f repeat-x; */
    background: transparent;
    border-bottom: none;
    border-top: none;
    padding: 7px 20px;
}

.titlebg2 {
    display: none;
}

.titlebg, .titlebg a:link, .titlebg a:visited {
    font-weight: bold;
    padding: 9px 20px;
    font-style: normal;
}

.titlebg a:hover {
    color: #404040;
}

/* same as titlebg, but used where bold text is not needed */

.titlebg2 a:link, .titlebg2 a:visited {
    color: black;
    font-style: normal;
    text-decoration: underline;
}

.titlebg2 img {
    display: none;
}

.titlebg2 a:hover {
    text-decoration: underline;
}

/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/

.catbg , tr.catbg td , .catbg3 , tr.catbg3 td {
    background: #63b133;
    color: #ffffff;
    padding: 22px 25px;
}

.catbg2 , tr.catbg2 td {
    background: #63b133;
    color: #ffffff;
    padding-left: 10px;
    padding-right: 10px;
}

#smfheader .catbg {
    padding: 18px 25px;
    font-size: 15px;
    text-transform: uppercase;
}

.catbg, .catbg2, .catbg3 {
    border-bottom: solid 1px #63b133;
    padding: 14px 21px;
    font-size: 17px;
    text-transform: uppercase;
}

.tborder .catbg {
    padding: 12px 21px;
    font-size: 18px;
    text-transform: uppercase;
}

.catbg, .catbg2 {
    font-weight: bold;
    margin-top: 23px;
}

.catbg img {
    display: none;
    width: 0px;
}

.catbg2 img {
    display: none;
    width: 0px;
}

.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited {
    font-size: 95%;
    color: white;
    text-decoration: none;
    display: none;
}

.catbg a:link, .catbg a:visited , .catbg2 a:link, .catbg2 a:visited {
    color: white;
    text-decoration: none;
}

.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover {
    color: #e0e0ff;
}

/* This is used for tables that have a grid/border background color (such as the topic listing.) */

.bordercolor {
    background-color: transparent;
    padding: 0px;
}

.bordercolor img {
    display: none;
}

.post img {
    display: block;
}

#postmodify img {
    display: block;
    float: left;
    background: transparent;
}

img.userimg {
    max-width: 100%;
}

/* This is used on tables that should just have a border around them. */

.tborder {
    padding: 0px;
    border: 0px solid #696969;
    background-color: transparent;
    /* display: none; */
}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */

.smalltext {
    font-size: 13px;
    color: #31a255;
}

.middletext {
    font-size: 18px;
    width: 100%;
    float: left;
    clear: both;
    text-align: center;
    margin: 10px;
    text-transform: uppercase;
    color: #b1b1b1;
}

.normaltext {
    font-size: small;
}

.largetext {
    font-size: large;
}

/* Posts and personal messages displayed throughout the forum. */

.post, .personalmessage {
    width: 100%;
    overflow: auto;
    line-height: 1.3em;
}

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */

.signature {
    max-height: 4em;
    width: 100%;
    overflow: hidden;
    padding-bottom: 3px;
    line-height: 1.3em;
}

/* Sometimes there will be an error when you post */

.error {
    color: red;
}

/* The AJAX notifier */

#ajax_in_progress {
    background: #32CD32;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 18pt;
    padding: 3px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

/* Standard SMF tabs */

/* definitions for the main tab, active means the tab reflects which page is displayed */

.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last {
    color: white;
    text-transform: uppercase;
    vertical-align: top;
}

.maintab_back, .maintab_active_back {
    float: left;
    color: white;
    text-decoration: none;
    font-size: 14px;
    vertical-align: top;
    font-family: tahoma, sans-serif;
    padding: 2px 0px 6px 0px;
}

.maintab_active_back {
    background: #63b133;
    /* margin-top: 10px; */
    /* position: relative; */
    /* top: -32px; */
}

.maintab_active_back a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    vertical-align: top;
    font-family: tahoma, sans-serif;
}

.maintab_active_back a:visited {
    color: white;
    text-decoration: none;
    font-size: 14px;
    vertical-align: top;
    font-family: tahoma, sans-serif;
}

.maintab_first {
    background: #63b133;
    width: 0px;
    float: left;
}

.maintab_back {
    background: #e8f2e2;
    /* margin-top: 10px; */
    float: left;
}

.maintab_last {
    background: #e8f2e2;
    width: 0px;
}

.maintab_active_first {
    background: #63b133;
    width: 0px;
    float: left;
}

.maintab_active_last {
    background: #63b133;
    width: 0px;
    float: left;
}

/* how links behave in main tab. */

.maintab_back a:link , .maintab_back a:visited, .maintab_active_back a:link , .maintab_active_back a:visited {
    color: #63b133;
    text-decoration: none;
    font-weight: bold;
    padding: 15px 43px;
    float: left;
}

.maintab_active_back a:link , .maintab_active_back a:visited {
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 15px 43px;
    float: left;
}

.maintab_back a:hover, .maintab_active_back a:hover {
    color: #ffffff;
    box-shadow: 0px 0px 3px #63b133;
    background: #63b133;
}

/* Custom tabs for message area */

/* definitions for the main and mirror tabs, active means the tab reflects which page is displayed */

div#bodyarea .maintab_first, div#bodyarea .maintab_back, div#bodyarea .maintab_last, div#bodyarea .maintab_active_first, div#bodyarea .maintab_active_back, div#bodyarea .maintab_active_last, div#bodyarea .mirrortab_first, div#bodyarea .mirrortab_back, div#bodyarea .mirrortab_last, div#bodyarea .mirrortab_active_first, div#bodyarea .mirrortab_active_back, div#bodyarea .mirrortab_active_last {
    color: #a1a1a1;
    text-transform: lowercase;
    vertical-align: top;
}

div#bodyarea .maintab_back, div#bodyarea .maintab_active_back, div#bodyarea .mirrortab_back, div#bodyarea .mirrortab_active_back {
    color: #a1a1a1;
    text-decoration: none;
    font-size: 11px;
    vertical-align: top;
    padding: 6px;
    padding-top: 4px;
    font-family: verdana, sans-serif;
    font-weight: bold;
}

div#bodyarea .maintab_first, div#bodyarea .mirrortab_first {
    display: none;
}

div#bodyarea .maintab_back, div#bodyarea .mirrortab_back {
    background: none;
    float: left;
    width: 100%;
    /* display: none; */
}

div#bodyarea .maintab_last, div#bodyarea .mirrortab_last {
    display: none;
}

div#bodyarea .maintab_active_first, div#bodyarea .mirrortab_active_first {
    display: none;
}

div#bodyarea .maintab_active_back, div#bodyarea .mirrortab_active_back {
    background: #63b133 repeat-x;
}

div#bodyarea .maintab_active_last, div#bodyarea .mirrortab_active_last {
    display: none;
}

/* how links behave in main tab. */

div#bodyarea .maintab_back a:link, div#bodyarea .maintab_back a:visited, div#bodyarea .mirrortab_back a:link, div#bodyarea .mirrortab_back a:visited {
    color: #63b133;
    text-decoration: none;
    background: #daebcf;
    padding: 10px 17px;
    font-size: 12px;
    float: right;
    text-transform: none;
    margin-right: 0;
    margin-bottom: 7px;
}

div#bodyarea .maintab_active_back a:link, div#bodyarea .maintab_active_back a:visited, div#bodyarea .mirrortab_active_back a:link, div#bodyarea .mirrortab_active_back a:visited {
    color: #ffffff;
    text-decoration: none;
}

div#bodyarea .maintab_back a:hover, div#bodyarea .maintab_active_back a:hover, div#bodyarea .mirrortab_back a:hover, div#bodyarea .mirrortab_active_back a:hover {
    text-decoration: underline;
    color: green;
    box-shadow: none;
}

.nav {
    font-size: 17px;
    font-weight: normal;
    text-align: left;
    text-transform: uppercase;
    border-top: 3px solid #d1e4c5;
    padding-top: 21px;
    padding-bottom: 17px;
    padding-left: 7px;
    margin-bottom: 0px;
    background: #daebcf;
    float: left;
    width: 100%;
    /* clear: both; */
}

div.nav b:last-child a {
    font-weight: bold;
    text-decoration: none;
    cursor: default;
    clear: both;
    float: left;
    border-top: 0px solid #d1e4c5;
    font-size: 26px;
    padding-top: 5px;
    padding-bottom: 11px;
}

.post {
    font-size: 17px;
}

/* valign the first column icons on main page */

div div.tborder table.bordercolor td.windowbg {
    vertical-align: middle;
    width: 0%;
}

/* valign the reply, modify etc icons with their button text */

table.bordercolor td.windowbg td a img, table.bordercolor td.windowbg2 td a img {
    vertical-align: middle;
    margin-left: 4px;
}

/* hide the ip logged icon */

table.bordercolor td.windowbg td.smalltext td.smalltext img, table.bordercolor td.windowbg2 td.smalltext td.smalltext img {
    display: none;
}

/* prevent gap between post icon and subject */

div#bodyarea table.bordercolor td td td.td_headerandpost td:first-child {
    width: 26px;
}

/* offline indicator: hide it, only show when online */

div#bodyarea table.bordercolor td td td.poster_info div.smalltext img[src*="useroff.gif"] {
    vertical-align: middle;
    display: none;
}

div#bodyarea table.bordercolor td td td.poster_info div.smalltext img[src*="useroff.gif"] + span.smalltext, div#bodyarea div.smalltext > a[title*="(Offline)"] + span.smalltext {
    vertical-align: middle;
    display: none;
}

/* online indicator: get icon aligned with text and bold it */

div#bodyarea table.bordercolor td td td.poster_info div.smalltext img[src*="useron.gif"] {
    vertical-align: middle;
    margin-top: 2px;
    margin-bottom: 2px;
}

div#bodyarea table.bordercolor td td td.poster_info div.smalltext img[src*="useron.gif"] + span.smalltext, div#bodyarea div.smalltext > a[title*="(Online)"] + span.smalltext {
    vertical-align: middle;
    font-weight: bold;
    line-height: 28px;
}

/* widen the details column on the forums directory */

div.tborder table.bordercolor td.windowbg[width="6%"] + td + td + td.windowbg2[width="22%"] {
    min-width: 230px;
}

/* widen the details column on the topics list */

div.tborder table.bordercolor td.windowbg[width="4%"] + td.windowbg2[width="22%"] {
    min-width: 178px;
    text-align: center;
    line-height: 20px;
    margin-top: 6px;
}

/* hide the "logged" text/image -- CSS by ryepdx */

td.smalltext[id^="modified_"] + td.smalltext[align="right"][valign="bottom"] {
    display: block ;
}

td.smalltext[id^="modified_"] + td.smalltext[align="right"][valign="bottom"] img, td.smalltext[id^="modified_"] + td.smalltext[align="right"][valign="bottom"] .help {
    display: none ;
}

/* get rid of some of the spacing left over from the empty table */

table[cellpadding="3"] table[cellpadding="5"] td.smalltext[valign="bottom"][width="85%"] {
    padding: 0px;
}

/* check the checkbox to hide email address on the registration form */

input#hideEmail {
    checked: checked;
}

.hiddenlink:link {
    color: lightgray;
}

.hiddenlink:visited {
    color: lightgray;
}

.hiddenlink:hover {
    color: lightgray;
}

.hiddenlink:active {
    color: lightgray;
}




#smfheader {
    display: none;
}



.BTC {
    font-family: "BTC";
}

.edited {
    border-bottom: 1px dotted black;
    cursor: help;
}

.trustscore {
    white-space: nowrap;
}

.nohover:hover {
    text-decoration: none;
}

a.ul[href^="https://bitcointalk.org/"]:hover {
    color: green ;
}

a.ul[href^="http://bitcointalk.org/"]:hover {
    color: green ;
}

#upshrinkHeaderIC .middletext {
    text-align: left;
}

fieldset {
    border: 1px solid #63b133;
}

----------------------------------------------------------------

✔️ (Alternative way) Google Chrome instructions:
1] Install the Stylebot Extension: https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha
2] Visit https://bitcointalk.org
3] CSS:
Open Stylebot...
https://i.imgur.com/c7qsxKx.png
4] Edit CSS:
https://i.imgur.com/QJSlZUP.png
https://i.imgur.com/7EDWex1.png
5] Insert the ✔️ CSS Code.
https://i.imgur.com/Jh5kYlR.png
6] Save.
https://i.imgur.com/MRYP2pZ.png[/color]

[1715471395]

1715471395

[1715471395]

1715471395

[1715471395]

1715471395

[mk4]

Man, you've picked probably one of the worst colors to use. Only a madman would use colors like neon-green and yellow for a website background color. I'm pretty sure people are going to appreciate this more if it was some sort of night/dark mode as the default theme can be straining on the eyes after long times of viewing.

But well done anyway.

[UserU]

Please no, it looks nauseating.

Why not opt fot dark mode that would fare better with the community?

[Silent26]

<snip>

I agree. I thought it would be nice but after looking at the image from the link above, it doesn't look good and seems so unpleasant in the eyes.

Why not opt fot dark mode that would fare better with the community?

There are already lot of dark themes/modes of Bitcointalk that has been created long time ago (try to search it in the search bar of the forum), so it’s no need for another one but it's still up to OP.

[fronti]

even if i also did not like the colors, you do an interesting job for these who like such themes.

[tranthidung]

Appreciated the OP's works.
However, I don't think that your theme is good, or at least user-friendly.
Personally, the current interface of the forum is good. I like its simplicity.
Simplicity of the forum interface should be maintained.
I have only one suggestion:
- If theymos care about that, he should allow forum users two options for global font styles:
(1) Time News Roman, as we currently have.
(2) Fonts without serifs or san-serifs.
I would prefer to vote for the second option.
At the moment, threads/ posts composers can choose font styles for their works, but I want to see option for the whole forum.

[TryNinja]

Do a true black one like this and you will have my merit.

[tranthidung]

Do a true black one like this and you will have my merit.

It does not make sense for that guy when you send merit and he can not see the merit due to totally black. 

[YOSHIE]

For me it's not right in Green, Bitcointalk 2019.
Reasons and Negative Effects on green:
Can cause a feeling of being trapped / lost, boring, stagnation, superiority, ambition and greed.

Color can be explained to have an impact on psychology, meaning: emotional to human behavior. The color is very big influence on someone's psychology,
Each color can form energy waves that have very different reflective effects.

The great influence of positive and negative green color technology

[......]

Yes, if this: ( https://bitcointalk.org/index.php?action=profile;threads;u=2556436;sa=showPosts ) happened at the Bitcointalk Forum in 2019 all members of the forum must provide green anti-glasses.

[mk4]

*snip*

Uh. Alright. A little bit of over-analysis there. Man, we don't like green especially the shade of green that OP used simply because it's too extreme for the eyes and that's it. LOL.

[theyoungmillionaire]

looking at the image from the link above, it doesn't look good and seems so unpleasant in the eyes.

Instead of using links to view images, you can just View the profile of TreeC


Click Show the last posts of this person. or
Show the last topics started by this person.


Result

[lobcmt2]

snip

Hi,

Firstly, I thank you for your comprehensive post, that is meaningful for me.
Secondly, I would like to let you know that I created a topic with more details on this issue.
[Guide] to view images without quoting posts/ OPs
Feel free to visit the topic, and made comments if you have anything to contribute.

Thank you.
Another topic added for Newbies. 

another knowledge has been added thanks mate