• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Transparent Style

Jake Bunce

XenForo moderator
Staff member
#2
I played with this for a while and achieved the general effect you are looking for:

Screen shot 2010-12-10 at 1.25.12 AM.png

CSS changes are listed below. You will need to play with it to get it exactly the way you want. But this code should help you.

Note that the free-floating background image (when you scroll) isn't working. For some reason the background-attachment attribute (which is provided in the code below) is lost in the compiled output. I have posted a bug report about this.

__________

Admin CP -> Appearance -> Templates -> xenforo.css

Find this code:

Code:
body
{
	@property "body";
	font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
	color: @contentText;
	word-wrap: break-word;
	line-height: 1.27;
	@property "/body";
}
Add the background attributes as shown below:

Code:
body
{
	@property "body";
	background-color: #222222;
	background-image: url(http://anim.tv/public/style_images/bubblesteel/bg.png);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
	color: @contentText;
	word-wrap: break-word;
	line-height: 1.27;
	@property "/body";
}
_____

Admin CP -> Appearance -> Templates -> public.css

Find this code:

Code:
#content .pageWidth
{
	background-color: @contentBackground;
	/*border-left: 1px solid @primaryLighterStill;
	border-right: 1px solid @primaryLighterStill;*/
}

#content .pageContent
{
	@property "content";
	background-color: @contentBackground;
	padding: 10px 20px;
	@property "/content";
}
Remove the background attributes like so:

Code:
#content .pageWidth
{
	/*border-left: 1px solid @primaryLighterStill;
	border-right: 1px solid @primaryLighterStill;*/
}

#content .pageContent
{
	@property "content";
	padding: 10px 20px;
	@property "/content";
}
_____

Admin CP -> Appearance -> Templates -> xenforo_sections.css

Find this code:

Code:
.sectionMain
{
	@property "sectionMain";
	background-color: @contentBackground;
	padding: 10px;
	margin: 10px auto;
	border: 1px solid @primaryLighter;
	border-radius: 10px;
	@property "/sectionMain";
}
Add the opacity attribute as shown below:

Code:
.sectionMain
{
	@property "sectionMain";
	opacity: 0.5;
	background-color: @contentBackground;
	padding: 10px;
	margin: 10px auto;
	border: 1px solid @primaryLighter;
	border-radius: 10px;
	@property "/sectionMain";
}
In the same template, find this code:

Code:
.secondaryContent
{
	@property "secondaryContent";
	background: @primaryLightest url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
	padding: 10px;
	border-bottom: 1px solid @primaryLighterStill;
	@property "/secondaryContent";
}
Add the opacity attribute as shown below:

Code:
.secondaryContent
{
	@property "secondaryContent";
	opacity: 0.5;
	background: @primaryLightest url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
	padding: 10px;
	border-bottom: 1px solid @primaryLighterStill;
	@property "/secondaryContent";
}
 

Jake Bunce

XenForo moderator
Staff member
#3
Actually, nix those opacity additions to xenforo_sections.css. It looks better if you use png images for this purpose. I am using the png image from that site for this code. You should use your own images.

Admin CP -> Appearance -> Templates -> xenforo_sections.css

Use this for .sectionMain. I replaced the background-color with background-image and removed the border:

Code:
.sectionMain
{
	@property "sectionMain";
	background-image: url(http://anim.tv/public/style_images/bubblesteel/row.png);
	padding: 10px;
	margin: 10px auto;
	border-radius: 10px;
	@property "/sectionMain";
}
And for .secondaryContent I replaced the background attribute with background-image shown below:

Code:
.secondaryContent
{
	@property "secondaryContent";
	background-image: url(http://anim.tv/public/style_images/bubblesteel/row.png);
	padding: 10px;
	border-bottom: 1px solid @primaryLighterStill;
	@property "/secondaryContent";
}
_____

And a little amendment to the xenforo.css changes:

Admin CP -> Appearance -> Templates -> xenforo.css

That site is using #67747a for the background:

Code:
body
{
	@property "body";
	background-color: #67747a;
	background-image: url(http://anim.tv/public/style_images/bubblesteel/bg.png);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
	color: @contentText;
	word-wrap: break-word;
	line-height: 1.27;
	@property "/body";
}
Now we look more like that site:

Screen shot 2010-12-10 at 2.05.55 AM.png

And again, you will need to tweak this code and make additional changes to get everything the way you want.
 

Kaiser

Well-known member
#7
I played with this for a while and achieved the general effect you are looking for:

View attachment 7369

CSS changes are listed below. You will need to play with it to get it exactly the way you want. But this code should help you.

Note that the free-floating background image (when you scroll) isn't working. For some reason the background-attachment attribute (which is provided in the code below) is lost in the compiled output. I have posted a bug report about this.

__________

Admin CP -> Appearance -> Templates -> xenforo.css

Find this code:

Code:
body
{
	@property "body";
	font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
	color: @contentText;
	word-wrap: break-word;
	line-height: 1.27;
	@property "/body";
}
Add the background attributes as shown below:

Code:
body
{
	@property "body";
	background-color: #222222;
	background-image: url(http://anim.tv/public/style_images/bubblesteel/bg.png);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
	color: @contentText;
	word-wrap: break-word;
	line-height: 1.27;
	@property "/body";
}
_____

Admin CP -> Appearance -> Templates -> public.css

Find this code:

Code:
#content .pageWidth
{
	background-color: @contentBackground;
	/*border-left: 1px solid @primaryLighterStill;
	border-right: 1px solid @primaryLighterStill;*/
}

#content .pageContent
{
	@property "content";
	background-color: @contentBackground;
	padding: 10px 20px;
	@property "/content";
}
Remove the background attributes like so:

Code:
#content .pageWidth
{
	/*border-left: 1px solid @primaryLighterStill;
	border-right: 1px solid @primaryLighterStill;*/
}

#content .pageContent
{
	@property "content";
	padding: 10px 20px;
	@property "/content";
}
_____

Admin CP -> Appearance -> Templates -> xenforo_sections.css

Find this code:

Code:
.sectionMain
{
	@property "sectionMain";
	background-color: @contentBackground;
	padding: 10px;
	margin: 10px auto;
	border: 1px solid @primaryLighter;
	border-radius: 10px;
	@property "/sectionMain";
}
Add the opacity attribute as shown below:

Code:
.sectionMain
{
	@property "sectionMain";
	opacity: 0.5;
	background-color: @contentBackground;
	padding: 10px;
	margin: 10px auto;
	border: 1px solid @primaryLighter;
	border-radius: 10px;
	@property "/sectionMain";
}
In the same template, find this code:

Code:
.secondaryContent
{
	@property "secondaryContent";
	background: @primaryLightest url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
	padding: 10px;
	border-bottom: 1px solid @primaryLighterStill;
	@property "/secondaryContent";
}
Add the opacity attribute as shown below:

Code:
.secondaryContent
{
	@property "secondaryContent";
	opacity: 0.5;
	background: @primaryLightest url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
	padding: 10px;
	border-bottom: 1px solid @primaryLighterStill;
	@property "/secondaryContent";
}
Thats cool. I might use it f0r a theme in the future.
 

Jake Bunce

XenForo moderator
Staff member
#13
Jake how would you get the transparency to show in the posts page?
If any content areas are not transparent then you need to find the relevant class and change the background color to a background image like in my previous post.

The post area uses .primaryContent:

Admin CP -> Appearance -> Templates -> xenforo_sections.css

Change the background-color of this class to a background-image using an appropriate png image, like so:

Code:
.primaryContent
{
	@property "primaryContent";
	background-image: url(http://anim.tv/public/style_images/bubblesteel/row.png);
	padding: 10px;
	border-bottom: 1px solid @primaryLighterStill;
	@property "/primaryContent";
}
Again, I am lifting anim.tv's png image for example purposes. You should use your own image.