Hello, i am using Afresh Leaf, but i am working on a new theme, my problem is, about theme body and content..
I'm using a pattern just like myBB but i want to add it in contaigner too, i have 2 bg's (one in body/one in contaigner with 40%transparency), but the contaigner one don't show.
Need help, sorry my bad english
body {
background-image: url(http://i319.photobucket.com/albums/mm477/_Gohan_/BG_BY_ICY.png);
background-attachment: scroll;
background-repeat: repeat;
background-position: 0% 0%;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
background-color: #000000;
color: #000000;
text-align: center;
line-height: 1.4;
margin-top: 0px;
margin-bottom: 25px;
font-size: 13px;
font-family: "Tahoma", "Verdana", "Arial", sans-serif;
}
#container {
background: transparent url(http://i319.photobucket.com/albums/mm477/_Gohan_/bg1-1.png) top left repeat;
background-image: none;
background-attachment: scroll;
background-repeat: repeat;
background-position: 0% 0%;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
background-color: white;
width: 80%;
color: #000000;
border: 1px solid #000000;
border-top: none;
margin: auto;
text-align: left;
}
In the first line you are using shorthand CSS but afterwards you are overwriting every thing with full CSS declarations.
Try this:
#container {
background-image: url(http://i319.photobucket.com/albums/mm477/_Gohan_/bg1-1.png);
background-attachment: scroll;
background-repeat: repeat;
background-position: top left;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
background-color: transparent;
width: 80%;
color: #000000;
border: 1px solid #000000;
border-top: none;
margin: auto;
text-align: left;
}
I think you are trying to change the wrong element. Is it your goal to make it look like this?
[
attachment=22476]
Then change the "background: #fff;" to "background: transparent;" for the #content element
?> i can't see the page, equalt to the print xD
I want to make it with a 50% lower oposity (same image) but to see links etc.. xD
Sorry my bad english, i am trying
I want to use 2 images, one normal for the bg, and another to content with -50% opacity, to look nice, and see the links, without editing colours.
Current images;
http://i319.photobucket.com/albums/mm477...BY_ICY.png
http://i319.photobucket.com/albums/mm477.../bg1-1.png
I already edited and nothing happend, please help.
Any way to change the links colour to green, insted of black/silver?
body {
background-image: url(http://i319.photobucket.com/albums/mm477/_Gohan_/BG_BY_ICY.png);
background-attachment: scroll;
background-repeat: repeat;
background-position: 0% 0%;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
background-color: #000000;
color: #000000;
text-align: center;
line-height: 1.4;
margin-top: 0px;
margin-bottom: 25px;
font-size: 13px;
font-family: "Tahoma", "Verdana", "Arial", sans-serif;
}
a:link {
color: #454545;
text-decoration: none;
font-weight : semi-bold semi-bold;
}
a:visited {
color: #454545;
text-decoration: none;
}
a:hover, a:active {
color: #026CB1;
}
#container {
background-image: url(http://i319.photobucket.com/albums/mm477/_Gohan_/bg1-1.png);
background-attachment: scroll;
background-repeat: repeat;
background-position: top left;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
background-color: transparent;
width: 80%;
color: #000000;
border: 1px solid #000000;
border-top: none;
margin: auto;
text-align: left;
}
.wrapper {
width: 85%;
min-width: 970px;
max-width: 1500px;
margin: auto auto;
}
#logo {
background: #386e21 url(http://i319.photobucket.com/albums/mm477/_Gohan_/header.png) top left repeat-x;
border-bottom: 1px solid #234615;
}
#content {
background: transparent;
width: auto !important;
padding: 20px 10px;
overflow: hidden;
border-bottom: 1px solid #000;
}
>D
I think you can better create a transparent PNG with a white background but an opacity of 50% and then set that image as the background of the #content. Then it looks like this:
[
attachment=22477]
CSS3 can do this out of the box with the rgba() statement but that isn't supported in all browsers. Most browsers support the opacity attribute but that will apply to the whole element and not just the background.
;D Helpfull
How can i make a border just like myBB?
(2011-04-28, 12:18 AM)Legendary Wrote: [ -> ]How can i make a border just like myBB?
You mean the drop shadow?
Make an image that is, like 500px, wider than your content, center a white transparent box on it that is as wide as your content div and add a drop shadow to it. Adjust the Fill (not the Opacity) to 50% of the layer to make the background transparent but not the shadow.
I created a small example:
http://jsbin.com/icixa4/3
Look at the code and the image to see what I mean. Because your background is darker than the background of MyBB, it's harder to see the shadow drop though.
(2011-04-28, 08:45 AM)Aries-Belgium Wrote: [ -> ] (2011-04-28, 12:18 AM)Legendary Wrote: [ -> ]How can i make a border just like myBB?
You mean the drop shadow?
Make an image that is, like 500px, wider than your content, center a white transparent box on it that is as wide as your content div and add a drop shadow to it. Adjust the Fill (not the Opacity) to 50% of the layer to make the background transparent but not the shadow.
I created a small example: http://jsbin.com/icixa4/3
Look at the code and the image to see what I mean. Because your background is darker than the background of MyBB, it's harder to see the shadow drop though.
Thanks, i will give you reputation ;D
I can use the souce right? no templates and other css tags that i have to edit?
(2011-04-28, 06:46 PM)Legendary Wrote: [ -> ]Thanks, i will give you reputation ;D
I can use the souce right? no templates and other css tags that i have to edit?
Well, you need an extra div that wraps the #content div.