Background color minimal content « Support Forum | Kriesi.at

Support Forum » Flashlight

Background color minimal content

11 posts from 7 voices

Started 1 year ago by ykblue
Latest reply from Pete
This topic is not a support question

Tags:

ykblue
Member

Hi, I did not notice you prefer posts here; so there is a double one on TF, sorry for that.

I’m working with the minimal content only on the whole page and would like to set the background-color white to opacity 60%
I was not able to; if I set the .box to .6 then ALL boxes, including sidebar are transparent including the written content. I would prefer to set a transparent .png as background-img to the minimal content area only; whatever div I touched, it never worked out. Any solution for that? Thanks in advance
-katharina

just one more: is the a chance to enlarge font-size in the quick-css admin area; its all greyish and tiny small: very hard to read/edit; there are silver-surfers around these days, you know? ;)

Posted 1 year ago #
Dude
Dude
Hey,
I think in your case you can use following css code to add a semi transparent png image:
```
.entry-mini .box{
    background: url("images/my-transparent.png");
}
```
Posted 1 year ago #
ykblue
Member

Wow - such a support. On a sunday! Thanks, your suggestion works out perfect.

-katharina

Posted 1 year ago #
Dude
Dude

Glad that I could help you :)

Posted 1 year ago #
schnmart
Member

Hi, does the .PNG needs to have a special size, what is the best size?

Is there any other way to get a semi transparent background for the mini content box?

Posted 1 year ago #
Chris Beard
Hi,
it is suggested you don't use a very large image, usually designers make the transparant image 1px wide and as high as their content will be. Of course you have to make your .PNG image a little transparant to achieve your transparency effect, unless you plan on using opacity through CSS. This way you can repeat-x, like this:
```
.entry-mini .box{
    background: url("images/my-transparent.png") repeat-x;
}
```
These are the only ways to add a transparent background through CSS.
Posted 1 year ago #
jorisvh
Member

Hello,

When I use the mini content layout it works fine but I am using default layout big and I can't make it correct. When I am using

.content {
background-image: url("/wp-content/themes/flashlight/images/skin-minimal/bg-trans.png") !important ;
}

I see a transparent image but it is behind a white box with my content. How can I solve this?

Thanks a lot!

Posted 1 year ago #

larssonk22
Member

You don't have to use png, take a look at my site

This is the code I'm using for the sidebar

.box {background:none repeat scroll 0 0 rgba(0, 0, 0, 0.3) !important; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000,endColorstr=#30000000); zoom: 1;}

the part with "filter" is for internet explorer

Posted 1 year ago #

Dude
Dude

Yes - that's a good solution too however it's not supported by all browsers (css3 code).

Posted 1 year ago #
larssonk22
Member

True, I've only tested it in chrome, ie7,8,9, firefox, safari, iphone and ipad (should work on android).

Posted 1 year ago #
Pete
Member

Hi, I am capable of making a .png in photoshop, but dont really know how the rest of this works.

What size do i need to make a .png to make the flexible width gallery background transparent? I have not altered any of the original themes scaling.

Also, I use the dark skin and i have found the .css file, what would i need to add to the file to have it see the new background please?

thanks in advance.

Posted 1 year ago #