Don't use custom text boxes

[Granitehead]

I've got a theme with a dark background and white font.


When you use custom text boxes (like for the topic title or description) then I can't see what I'm writing, as the background is white and the font too.


At least the box for posting isn't a custom text box, but it would be way better if there were no custom text boxes.


It shouldn't be hard to change this in the theme of the forum.


Screenshot


In this screnshot all text boxes are contain text. But you can read only the text the textbox which contains the post itself.


Edit: Oh and hi to the forum, my first Post.


gp32x.de is too big to read it if you are interested mostly into the Pandora (as I only ordered a Pandora and don't have got other OpenSource handhelds), let's see if it's better here.

 

[Ravngr]

Looking at the forums CSS the problem is that text boxes (the bottom text field) have no background set at all so it inherits the system default. Text fields, however, have an image set for the background, so the background colour is being changed but then the white image is placed over the top.


There are a few Firefox addons out there that let override the style for a site, you'd just need to have something like...

.input_text {

	background-image: none !important;

}

That should force the text field to ignore the image and just display the default colour, totally untested of course

 

[Granitehead]

As I don't know much about CSS I don't know what's wrong, but inserting

.input_text {

        background-image: none !important;

}

into the forums CSS doesn't work.

 

[Ravngr]

Hm, probably should have actually tested it. What if you change it to...

.input_text {

        background: none !important;

}

 

[urjaman]

I second this. Hate it when I need to change theme just to use a website properly. I know it can be hacked around, but still its quite awful (the same goes for the gp32x.de boards).

 

[dflemstr]

Err guys another alternative would be to simply make the text inside of the text fields black...


Aka:

.input_text {

    color: black;

}

I think that two kinds of web design are acceptable:

1. You use the browser theme and don't do any theming on your own, à la Craigslist or something.
   
2. You use a CSS reset (!!!!) and construct a completely custom theme.
   

Something that isn't acceptable is to do custom theming and to not use a CSS reset. So adding a CSS reset to the forum would be a Good Thingtm.


(In a hurry, from phone, have mercy)

 

[Christoph.Krn]

I think that two kinds of web design are acceptable:

1. You use the browser theme and don't do any theming on your own, à la Craigslist or something.
   
2. You use a CSS reset (!!!!) and construct a completely custom theme.
   

I double that.


I often use dark themes to reduce the stress on my eyes while reading. For me, the solution dflemstr wrote about has worked so far. However, I'd put "!important" behind the "color" line to give the property a general importance above other settings. Also, I generally prefer using hexadecimal color values since they're less abstracted. For boards.openpandora.org, this would look as follows:

.input_rte {

    color: #000000 !important;

}

 

[dflemstr]

However, I'd put "!important" behind the "color" line to give the property a general importance above other settings. Also, I generally prefer using hexadecimal color values since they're less abstracted.

We're not overriding anything (as indicated by the fact that the browser style sheet is allowed to bleed through) so !important isn't needed.


And the use of hexadecimal colors is actually discouraged, now that CSS 3 has alpha color components which makes #000 or #000000 ambiguous. I always use either rgb(), rgba(), hsv() (which all have implicit opaque alpha arguments) or color names.

 

[Christoph.Krn]

We're not overriding anything (as indicated by the fact that the browser style sheet is allowed to bleed through) so !important isn't needed.

I did this "just in case". Since it's set by the user it should always override, no matter what might happen.

And the use of hexadecimal colors is actually discouraged, now that CSS 3 has alpha color components which makes #000 or #000000 ambiguous. I always use either rgb(), rgba(), hsv() (which all have implicit opaque alpha arguments) or color names.

Thank you for correcting, it's been some years since I've been working with ccs (or anything else www, for that matter).

 

[Granitehead]

This doesn't work for me. It's still the font-color in my theme and the bg of the forum.


I tried it using the "Stylish" FF Addon.

 

[Christoph.Krn]

Here is my proposed workaround for unreadable text on boards.openpandora.org using Firefox with a dark desktop theme:

1. Go to the "chrome" directory within your Firefox profile. On Linux, this would usually be:
   
   
   

   ~/.mozilla/firefox/[profile_name]/chrome

   
   
2. If it doesn't exist yet, create a file called "userContent.css" with the following content (if it does exist, append).
   
   
   

   @-moz-document url-prefix(http://boards.openpandora.org/)
   
   {
   
   	#main_search,
   
   	.input_rte,
   
   	.input_text {
   
   		background-color: #505050 !important;
   
   		color: #FFFFFF !important;
   
   	}
   
   }

3. Insert your desired color values (I'm using example color values derived from the screenshot provided by T4b).
   
   
4. Restart Firefox
   

For now, I'm using hex values for compatibility reasons. Also, I'm using "!important", so it will always have preference over any author stylesheets. No Firefox addons are needed for this workaround.


I have, however, not really tested this. "I have only proved it correct". So please report any problems.

 

[Granitehead]

Doesn't work. :-(


Edit: Meaning I did what you wrote and I still can't see what I'm writing.

 

[Christoph.Krn]

You're right - I just tested this, and while it does work for me on the upper right hand corner search box, it doesn't work on any other textareas and inputs. At first glance, it seems that for some reason the backgroud-color is being overridden, though I have not yet looked at this thoroughly.


However, the "color" property does work for me. So, could you tell me wheter or not the above works for you after changing it to:

@-moz-document url-prefix(http://boards.openpandora.org/)

{

	.text_input,

	.input_text {

		color: #000000 !important;

	}

}

This should give all inputs on your system that currently have bright text on a bright background a black text.

 

[Granitehead]

It strange - look at this and this


Looks like the background is there in the right color and a picture above it.

@-moz-document url-prefix(http://boards.openpandora.org/)

{

        .text_input,

        .input_text {

                color: #000000 !important;

        }

}

This works.


And now as you say it, the other worked for the search box too. When I tested it I looked only at the form for starting anew topic.

 

[Christoph.Krn]

It strange - look at this and this


Looks like the background is there in the right color and a picture above it.

This information is certainly helpful for further investigating the problem. I'll probably have another look at it, but it might take some time since there's quite a lot for me to do currently.

 

[Ravngr]

Just had a thought, if you've got AdBlock installed, try blocking the background image (http://boards.openpandora.org/public/style_images/master/input_text.png). It won't work on its own since the CSS sets the background colour to #FFF but it might work in combination with some of the hacks you've already tried.

 

[Granitehead]

Thanks, that works.


Good Idea.