dslreports logo
site
 
    All Forums Hot Topics Gallery
spc

spacer




how-to block ads


Search Topic:
uniqs
652
share rss forum feed


NotTheMama
What Would Earl Do?

join:2012-12-06

DSLR stocking stuffer...

I like the topic preview popups, but their default styling can make them a little hard to pick out from the topic list sometimes. So, for those of you who want something a little easier to see, here's some CSS for you (written to work with Firefox and Stylish):
@namespace
        url("http://www.w3.org/1999/xhtml");
@-moz-document
        domain("dslreports.com")  /* */{
.nicetitle  {
  /* set colors for text (black) and background (yellow) *+/
    color: #000 !important;
    background-color: #ff7 !important;
  /* set the border width (thicker?) and color (black, matches text) *+/
    border: solid 1px #000 !important;
  /* make text larger (as large as you want) +*/
    font-size: 115% !important;
  /* make the box wider for more text per line, but shrink to fit less text +*/
    max-width: 550px !important;
    width: -moz-fit-content !important;
  /* set a minimum margin with the right side of the page: 5+15=20 +*/
    right: 5px !important;
    margin-right: 15px !important;
  /* round the corners more/less than the default *+/
    border-radius: 5px !important;
  /* */
    }
}/* */
/*
DSLR - nicetitle nicer (make the topic preview popup easier to see/read)
set your preferred colors etc. above; by default the box is just larger with larger text,
but you can comment out what you don't want to use, uncomment what you do want:
    '*+' = code is commented out
    '+*' = code is not commented out
*/
 
This is what it does: on top, the site's default; below that, this CSS w/o setting any colors; at the bottom, this CSS with the default color codes uncommented:

Topic previews

You can set the colors to be anything else that works better for your chosen theme, make the box wider (or not so wide), make the text larger still, or whatever else.

HO Ho ho... Happy Styling!

--
"...but ya doesn't hasta call me Johnson!"


Weirdal
Premium
join:2003-06-28
Grand Island, NE
kudos:21

Normally the box should have a drop shadow, making it stand out more.
--
»[Info] The DSLR Orangeface extension 2.0!


NotTheMama
What Would Earl Do?

join:2012-12-06

3 edits

Yeah, I remember that it used to, but they seem to have removed it (at least for the themes that I looked at). There also used to be a background gradient which I haven't seen in awhile (which is fine since it tended to be rather dark and made dark text somewhat less easy to read).

[Edit:] Ahhh, wait... I think I know what happened (without bothering to actually check)--the site's style sheet still has -moz- on the box-shadow and linear-gradient declarations and the newer versions of Firefox ignore the old syntax. Meh. [Edit#2: they use the old image gradient method]

[Edit#3: for those using a newer release of Firefox and aren't seeing a box shadow now and want to...] The site's box shadow varies with the theme you're using, but if you're using a light theme then it would either be the following or something close to it:

box-shadow: 5px 5px 5px rgba(0,0,0,0.6) !important;
 
(which you can add somewhere in the .nicetitle ruleset)
--
"...but ya doesn't hasta call me Johnson!"


NotTheMama
What Would Earl Do?

join:2012-12-06
reply to NotTheMama

The other thing I find to be rather annoying is for the Hot Topics list at the bottom of a topic page, when you hover the bottom topic and the pop-up is below the bottom of the page (where you can't see it or can see only part of it). This code fixes that by putting more space below the list so you can scroll down [first] as needed:

@namespace
        url("http://www.w3.org/1999/xhtml");
@-moz-document
        domain("dslreports.com")  {
/* more space below Hot Topics list at the bottom of a page */
table[width="72%"] td[width="50%"]+td[width="50%"] ul.niceList.niceList_small  {
    margin-bottom: 70px !important; }
}
/*
    70px works OK with the CSS code above, but the site's default takes up more
    vertical space, so you have to increase the 70 to whatever works for you. I'd
    suggest starting at 150px and reducing it as you find the opportunity for testing
    (as enough Hot Topics display to allow testing) to see what value you need.
*/
 

--
"...but ya doesn't hasta call me Johnson!"


drew
Automatic
Premium
join:2002-07-10
Port Orchard, WA
kudos:6
reply to NotTheMama

Love the topic preview feature. Had to turn it off due to it causing issues browsing topics on iOS & Android 2.1