[Solved] change the background of textarea in product creation/editing

[tlman12]

I can't seem to figure this out. My theme is black so my font color has to be white but the problem with that is when its in the text area in the admin area the background is also white so i can't see anything in the box.

 

i've tried changing multiple CSS files and none of them see to have any affect on those text areas.

 

how would i change them?

Edited September 9, 2013 by tlman12 (see edit history)

[Paulito]

Good morning

 

I had the same problem, the only way I found to resolve it was to use a shade of grey. It's not a bug but when you change the text

 

colour in global.css to #fff it also affects tinymce

 

Paul

[vekia]

i think that this is what you're looking for:

change tinymce background

 

[Paulito]

Ah, thanks vekia, now I know

 

Paul

[tlman12]

i think that this is what you're looking for:

change tinymce background

 

 

 

that's almost what i want. when i add that to my global.css the background of the textareas in the admin area do change to black with white text but so do the the text areas of the frontend. i want to have the text descriptions in the frontend to have a transparent background. 

 

is that possible?

Edited September 8, 2013 by tlman12 (see edit history)

[vekia]

can you share url to your store? im asking about that because ... descriptions should have "transparent" background by default...

[tlman12]

when you open an item you'll see that there is a background of black behind the descriptions. 

 

this may be my fault because i did change some stuff but if i take out the code from the url above it goes back to transparent and i put it back and the background turns black again.

 

it's not the end of the world cause it doesn't look bad but it looks much better transparent. 

Edited September 9, 2013 by tlman12 (see edit history)

[PascalVG]

tlman,

I'd love to help out, but being in thailand doesn't allow me inside. (Even tor-browser (proxy-browser) relaying to another IP address didn't help. Can you open up for us a little?

 

thanks,

pascal

[tlman12]

tlman,

I'd love to help out, but being in thailand doesn't allow me inside. (Even tor-browser (proxy-browser) relaying to another IP address didn't help. Can you open up for us a little?

 

thanks,

pascal

 

didn't even think about that. Geolocation is open. 

 

Thank you for your help

[PascalVG]

Hi Tlman,

does it work if you take away the !important in global.css, line 8:

 

div.rte, .mceContentBody {

background: none repeat scroll 0 0 #000; <-- take away !important

color: #FFF!important;

text-align: left;

}

 

Not sure what effects on Back Office. Give it a try...

 

pascal

[PascalVG]

Oh, and maybe this one:

modules/blockuserinfo/blockuserinfo.css (line 21):

 

#shopping_cart a {

height: 15px;

padding: 15px 27px 10px 43px;

background: url('img/icon/cart.gif') no-repeat 10px 9px; <-- take out #000

min-width: 130px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

display: block;

}

 

(for your shopping cart background top right)

[tlman12]

Oh, and maybe this one:

modules/blockuserinfo/blockuserinfo.css (line 21):

 

#shopping_cart a {

height: 15px;

padding: 15px 27px 10px 43px;

background: url('img/icon/cart.gif') no-repeat 10px 9px; <-- take out #000

min-width: 130px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

display: block;

}

 

(for your shopping cart background top right)

 

if i remove the !important the text does go back to transparent but so does the backoffice. removing the #000 from the other file had no affect 

[PascalVG]

#000 has effect, as the shopping cart background isn't black anymore (top right of your shop page)

Let me check if there's another way for the other ones...

[tlman12]

#000 has effect, as the shopping cart background isn't black anymore (top right of your shop page)

Let me check if there's another way for the other ones...

 

it just seems weird to me that the 2 items are so attached. you'd think the admin style sheet would over power the global style sheet especially in the admin area?

[PascalVG]

hmmm, let's try this:

 

Let's try to SEPARATE the css of the first try we did:

 

So instead of:

div.rte, .mceContentBody {

background: none repeat scroll 0 0 #000!important;

color: #FFF!important;

text-align: left;

}

 

We split it up in:

.mceContentBody {

background: none repeat scroll 0 0 #000!important;

color: #FFF!important;

text-align: left;

}

 

and:

 

div.rte {

background: none repeat scroll 0 0 #000; ,take away !Important (Probably can even change #000 here in transparent, give it a try)

color: #FFF!important;

text-align: left;

}

 

So what we did we made SEPARATE css code for div.rte and for .mceContentBody

 

Maybe this does the trick...

 

 

If that doesn't work or has strange side effects, we can try this:

global, line 525:

 

#page .rte {

background: transparent none repeat scroll 0 0 !important; <-- add !important here...

}

 

Hope this helps,

 

pascal

[tlman12]

hmmm, let's try this:

 

Let's try to SEPARATE the css of the first try we did:

 

So instead of:

div.rte, .mceContentBody {

background: none repeat scroll 0 0 #000!important;

color: #FFF!important;

text-align: left;

}

 

We split it up in:

.mceContentBody {

background: none repeat scroll 0 0 #000!important;

color: #FFF!important;

text-align: left;

}

 

and:

 

div.rte {

background: none repeat scroll 0 0 #000; ,take away !Important (Probably can even change #000 here in transparent, give it a try)

color: #FFF!important;

text-align: left;

}

 

So what we did we made SEPARATE css code for div.rte and for .mceContentBody

 

Maybe this does the trick...

 

 

If that doesn't work or has strange side effects, we can try this:

global, line 525:

 

#page .rte {

background: transparent none repeat scroll 0 0 !important; <-- add !important here...

}

 

Hope this helps,

 

pascal

 

separating them and doing the transparent on the second one was the ticket. exactly what i wanted. 

 

i'll have to look for any other side effects tomorrow it's midnight here and i'm sleepy.

 

thank you so much for your help i really appreciate it. 

[PascalVG]

Just some unsolicited Idea, but your theme looks like it likes curved lines.

Maybe you like it to make your titles of modules left and right a little curved at the corners too:

 

.block .title_block, .block h4 {

padding: 6px 11px;

font-size: 12px;

color: #fff;

text-shadow: 0 1px 0 #000;

text-transform: uppercase;

background: #383838;

font-weight: bold;

border-radius: 5px; <-- add this

-webkit-border-radius: 5px; <-- and this.

}

 

 

Another thing I saw was that on the front page, in featured products, the price is a little overlapped by the next row:

To fix this:

edit file: /modules/homefeatured/homefeatured.css (line 1)

 

#featured-products_block_center li {

margin-right: 10px;

padding: 10px 0;

width: 126px;

height: 248px; <-- change to this

}

 

to move the next row down a little

Maybe you like it :-)

 

pascal

 

P.S. I see that the pictures and the border of your featured products on the right hand side are cut off/cropped. I'll have a look to see if we can fix that easily...

[tlman12]

Thank you for the suggestions and help, it's much appreciated. i've been messing and modifying for a couple days now just trying to get it "just right" but this particular problem was really causing an issue cause it made me unable to add or modify products. 

 

thanks again

[PascalVG]

Hi Tlman,

was everything fixed after applying the suggestions to fix the black backgrounds, or are there still open ends??

 

pascal

[tlman12]

I only looked very briefly last night but it appears to be good.

 

Thank you

[PascalVG]

A few more unsolicited ones: :-) (Tell me when it's enough... ;-) )

 

 

/modules/blocknewsletter/blocknewsletter.css (line 2)

 

#newsletter_block_left {

padding: 7px;

border: 1px solid #ccc;

background: transparent;

border-radius: 10px; <-- add this

-webkit-border-radius: 10px; <-- and this.

}

 

for NewsLetter - ask for Email box (Left column) curved corners

 

 

/modules/blockreinsurance/style.css (line 2)

#reinsurance_block {

background: url(../blockreinsurance/img/bg_reinsurance_block.gif) repeat-x 0 0 #c3c7cb;

border-radius: 10px 10px 0px 0px; < add this

-webkit-border-radius: 10px 10px 0px 0px; <-- and this.

}

 

Together with:

Global.css (line 600)

 

#footer {

color: #fff;

background: #333;

border-radius: 10px 10px 0px 0px; <add this

-webkit-border-radius: 10px 10px 0px 0px; <-- and this.

}

 

to make the top corners of your reassurance box curved.

 

 

 

To make the product-list images (the lists of products when you click on a category) the same as your featured products, do this:

Edit file: /themes/default/css/product_list.css:

#product_list a.product_img_link {

overflow: hidden;

position: relative;

float: left;

display: block;

margin-right: 14px;

border: 4px solid #5c5c5c; <-- change thickness of border to 4, change colour

border-radius: 10px; <-- curve the corners

-webkit-border-radius: 10px; <-- and this.

}

 

 

Hope you like the suggestions,

pascal

[tlman12]

any suggestion is a good suggestion. 

 

i've put all those in, modified a couple other things and i figured out how to change the clipping on those images. I just set the default size in the back office from 124x124 to 119x119

 

thanks again for all your help. 

[tlman12]

Found one of those bugs. now in the admin area the drop down boxes have black background and black text but only when dropped down. so the currently selected option looks fine but when dropped down it's all black. 

 

thats why it took me so long to notice.