[4791] [Curve] Issues when browsing with images disabled

[Sverre]

Due to widespread use of background-color: transparent;, Curve is rendered almost unreadable if images are disabled.



As long as the main_block.png isn't transparent, a different background colour can be applied to several of the problem areas without any negative side effects. It's not perfect, but a few minor changes definitely makes browsing with images disabled a much more pleasant experience:



The only conflict I've found so far is with

Code Select Expand

h3, h4 {
padding-bottom: 3px;
}

which makes a small strip of the background colour visible beneath the background image of certain titlebgs and catbgs. This seems to be easy to fix by removing the bottom padding from h3 and h4 and adding a top margin of 3px to .topslice, .description, .calendar_table and possibly a few other places I haven't found yet/don't have access to instead though.

As an added bonus, this also fixes the slight alignment issue currently seen when the Info Center is collapsed:



vs.



If .content_section is given a different background colour, like I've done in my screen shot, the colour of

Code Select Expand

.buttonlist ul li a.active:hover {
color: #ddddff;
}
.buttonlist ul li a.active {
color: #ffffff;

should also be reversed in order to make the "New Topic" and "Reply" buttons visible without hovering over them.

Another unfortunate issue with images disabled is overflow from Display's mini profiles into posts, as seen here:



An overflow value for .poster could fix this, but it may cause other problems or cross-browser issues which I'm unable to test until I get my hands on Curve.

[Antechinus]

I had already made a noise about the main background so that now has a hex code set for it. The other details are worth doing too so I'll make sure they happen. Hopefully for RC2 but certainly before the next release. We can't use hidden overflow for the poster div (or at least I don't think so as I can see problems with that) but we should be able to work out another solution.

[Sverre]

We can't use hidden overflow for the poster div (or at least I don't think so as I can see problems with that) but we should be able to work out another solution.

If overflow is used to fix this, I would definitely choose auto instead of hidden.

[Antechinus]

Hmm. Scrollbars though. They look damned nasty. Better if we can think of something else.

ETA: Well I suppose it wouldn't be that bad, since images are gone anyway and we aren't going for max eye candy. It would be better if it could be done with a <br /> or something though so that scrolling wasn't needed.

[Joshua Dickerson]

hmmm... it is kind of stupid that we have "Recent Posts" and then "Recent Posts". There should be a better solution for that (use a sprite is what I would probably say). No idea how to fix those IM issues.

[Antechinus]

The recent posts thingis cause by the tiny icon being linked to the recent posts page but the header title not being linked, which I frankly always thought was silly. An icon as background image for the anchor, with the header text linked, would be best I think. There are a couple of other examples too.

IM issues could be dealt with by changing the markup to call the basic text to start with (MSN Thingy) and with the actual address contained in the title tag so it shows on hover.

I'll track this to Mantis. http://dev.simplemachines.org/mantis/view.php?id=4791

[Antechinus]

Hey:

Antechinus says:
oh those silly icons in the header bars in the info centre
I never even realised they were linked to recent posts and who's online etc
until about six months or so after I started using SMF
when I wanted to hack BoardIndex.template
It was only when I saw the html for the anchors that I realised they did something
great interface design

Norv says:
which which?

Antechinus says:
info centre
recent post and who's online titlebg header bars
the tiny little grotty gif icons are linked for functionality
never realised until I started hacking the code

Norv says:
Ooh.
lol.
I didn't know.

Antechinus says:
ROFLMAO
see
great interface design

Norv says:
yup

Antechinus says:
quote this to bug reportz

Norv says:
(it's not like I should know )
go ahead 

[Sverre]

The recent posts thingis cause by the tiny icon being linked to the recent posts page but the header title not being linked, which I frankly always thought was silly. An icon as background image for the anchor, with the header text linked, would be best I think.

Personally, I've just removed those images and added the link to the text instead.

[Antechinus]

Yes that works too, but some people like icons as well. Easy enough to call them in the css. That way they're easy to remove too.

[emanuele]

With the new theme everything seems fine.
Moving this to fixed and closing the bug.