Topic: Background color blending

[Itchigo]

For a while I've been putting up with this. My background is black, and the text is black when editing Simpleportal blocks with custom html.

I've been getting by by pasting from notepad, but enough is enough.. All I want to do is change the background color to white when editing a block. I'm not super skilled when it comes to editing css, but if I know where to look I can alter it with no problem.

Thanks, and I do like Simpleportal.

[AngelinaBelle]

This is really about customizing your theme.  And it is easy.
Here is what I did:

I used the F12 developers tools in my browser (IE, Chrome, Safari, and Firefox all have these) to figure out what that box is  -- I used the select tool.
I found out it has the class sp_text_editor

So here is what you do:
In your theme's main CSS file (probably index.css) add something like.

Code: [Select]

.sp_text_editor {
background-color: white;
}and remember you will have to do this again the next time you update the theme.

An alternative would be to change the text color rather than the background color.
I leave that up to you.  Have fun!

[Itchigo]

No luck. I take it what you gave me is an override to the code in place?

I copied and pasted in the index.css I edited with notepad and added it.

I don't know how to use the "find" feature within the site so I downloaded the index.css from ftp, modified it, and re added it. I also did  a search for .sp figuring I'd find it if it was there. Not finding it, I manually added it.

[AngelinaBelle]

Hmm.  My mistake.  I did not look closely enough.  perhaps the selector needs to be
.sp_text_editor textarea

This should, perhaps, override the setting for background-color for textarea.

Have you tried using the "computed" styles to see what is getting set where, and which settings override other settings?  It is very useful.  As I don't have a link to your website, I am still just guessing, and I might still be getting things wrong.

But if you keep using the developers tools to figure out which CSS "rule" to create, you will eventually succeed.

Good Luck, and Welcome to SimplePortal!

[Itchigo]

I think I may not have communicated things right. The only board that's like this is when I edit the custom html in the Simpleportal block Admin area.

Replying to threads and PM's in unaffected by this. They all have a white background and black text. The pic I showed was of the Admin area editing a block.

I don't know about the Developer's tools. I've never used them before. Here's a link to the site.
http://roguepinball.com/

[AngelinaBelle]

While using IE or Chrome, hit the "F12" key to start these developer tools.  You can also find the developer tools from your browser's menu.  I highly recommend these of tools.  They will really help you as you customize your website.

While I can see your website, of course I cannot see your block editor, so I cannot test this out for you.

I am not familiar with your theme, so I am only guessing.  You may have to do some sleuthing on your own.
However, I imagine that changing the background color or else the text color will work.

Code: [Select]

.sp_text_editor textarea {
background-color: white;
}or

Code: [Select]

.sp_text_editor textarea{
color: white;
}
Looking at the page source, I can see the CSS files that are loaded from your custom theme directory.
Either one of these MIGHT BE a good place to add your new little bits of CSS to. You may have to do a little trial and error before you get it just right.
http://roguepinball.com/Themes/darkclassic/css/index.css
http://roguepinball.com/Themes/darkclassic/css/style.css

Have fun!  good luck!

[Itchigo]

I know this is a really simple thing in terms of what has to be done, but with my knowledge it's like looking for a needle in a haystack.

I tried adding that code(s) to both index and style .css with no effect. Does it matter where the code is added? What I mean by that is do I need to add it in a special section? I'm guessing as long as I don't cut into a "Subroutine" I'll be ok.  (Since I do VB for the games I create I'm imagining that the { } function as Sub and End Sub. I'm trying to liken it to what I know. )

I could get you a temporary login if you were interested. I have a "test member" I use that I could promote to Admin.

Edit: By the way the developer's tools look interesting. I never knew they were there.

[AngelinaBelle]

Itchigo,

I would suggest putting any new CSS at the very end of one file or the other.
Then, I would use that "developer tool" to see how it gets applied to the textarea within the sp_text_editor.

Here is some information on using Chrome's developers tools to check this kind of thing out.
https://developers.google.com/chrome-developer-tools/docs/elements-styles?csw=1

And, also, you will benefit from learning just a little bit about working with CSS stylesheets.
http://www.w3schools.com/css/css_syntax.asp

You have the general idea about {}, only they aren't functions in CSS. You have a selector (which is to search for the part of HTML you want to style) and a block surrounded by {} that contains style declarations that should be applied when the selector is found in your HTML.

The thing is -- yes, it is straightforward in terms of what has to be done but no, it isn't as simple as we might like. So it might take a couple of tries to get it right, because maybe some style gets loaded later that will over-ride the style you put in index.css or style.css, and the "computed style pane" will show you all the selectors that are trying to style that one piece of CSS and which one "wins".  Or maybe I've made a bad choice of selector.


If you want me to look, please make a special admin account just for me to use, and PM me the details. Afterwards, demote  and change the password, or else delete the whole thing.  Be very careful about giving away the keys to your kingdom

[AngelinaBelle]

Hi Itchigo,

I did look at the blocks editor, and I see what you are talking about.

I started to create a new custom HTML block (but I did not save it)
Then I looked at the block editor page using the F12 developers tool, in the "Computed" tab, I see that you have set the color for textarea to white in index.css.  But then style.css loads AFTER index.css, and #content has a very dark background color.  Since that textarea has an id of #content, this overrides the setting in style.css.

To fix the problem, you could remove your custom CSS from index.css and put it in the end of style.css or else in portal.css instead.  That should work.

[Itchigo]

Well I tried. I tried doing that and no luck. I copied from the previous post. I even looked to see if it was using an image I could just "replace". It looks like there's a color gradient thing going on there, so I looked for code that pertained to that too.

[AngelinaBelle]

background image -- good point.
How about, at the bottom of style.css,

Code: [Select]

.sp_text_editor textarea { background: white; }If that doesn't do it for every browser:

Code: [Select]

.sp_text_editor textarea {background-image: none; background: white; }
I suggest style.css because it loads AFTER index.css.

[Itchigo]

I tried both (individually) with both Style and Index.css. Do you think the selector's wrong?

[AngelinaBelle]

It is possible.  Did you check with the developers tools?  The last time I looked, the selector was correct, but it was overridden by the other CSS file.  Next, I saw that the background-image was covering up the background-color.

Try again.  Each time, look to see if the selector catches anything.

[Itchigo]

I did look, but it all looked like gobblygook to me, so I went back and tried the files again, then I posted above.

I changed the credentials, I noticed you tried to check things out. I'll leave it up as an admin for the night. I go back to work tomorrow (I work weekends)  so I will have limited time to work on this. But thank you for trying to help.

[AngelinaBelle]

OK.  My apologies.  Of course that should be
#sp_text_editor
(because it is id="sp_text_editor", not class="sp_text_editor")

I really do like http://www.w3schools.com/css/css_intro.asp for an intro to basic old-fashioned CSS.  It is incredibly useful if you want to customize your site.

[Itchigo]

I spent a while looking this over and fixed it!

While in the Developer's Tools I found a checkbox, telling it to use this image for a background. I unchecked it, it crossed itself out, I saved the changes and reimported it to the site via ftp.

Thank You AngelinaBelle!!

(I'd mark it as solved, but I don't see that anywhere).

[AngelinaBelle]

Congratulations! You are well on your way to understanding how to customize the appearance of your forum!

I have no idea what happened to the solved button.  I'll ask