Jump to content

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


tlman12

Recommended Posts

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 by tlman12 (see edit history)
Link to comment
Share on other sites

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 by tlman12 (see edit history)
Link to comment
Share on other sites

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 by tlman12 (see edit history)
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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 

Link to comment
Share on other sites

#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?

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...