Transparent Style

SnG · Dec 10, 2010

Not sure if this is in the right section, but is it possible to make transparent background / tables?

Take a look at this forum http://anim.tv/index.php?

I would like to make a style like that, is that possible?

Jake Bunce · Dec 10, 2010

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

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 · Dec 10, 2010

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

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

SnG · Dec 11, 2010

Thanks a lot! Just what I am looking for.

Peggy · Dec 11, 2010

And I like that alot!

Kaiser · Dec 11, 2010

SnG said:
Thanks a lot! Just what I am looking for.

Its IPB now?

Kaiser · Dec 11, 2010

Jake Bunce said:
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.

Peggy · Dec 11, 2010

Terrorz said:
Its IPB now?

IPB?

Kaiser · Dec 11, 2010

Peggy said:
IPB?

Go to his site, its not xF anymore so im just asking him if he switched.

Peggy · Dec 11, 2010

Terrorz said:
Go to his site, its not xF anymore so im just asking him if he switched.

oohh I didn't see a link to his site. sorry

Kaiser · Dec 11, 2010

Peggy said:
oohh I didn't see a link to his site. sorry

LoL No worries

Itworx4me · Dec 12, 2010

Jake how would you get the transparency to show in the posts page?

Jake Bunce · Dec 12, 2010

Itworx4me said:
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.

Robert F Schmitz · May 5, 2011

Thank you Jake.

Transparent Style

SnG

Member

Jake Bunce

Well-known member

Jake Bunce

Well-known member

SnG

Member

Peggy

Well-known member

Kaiser

Well-known member

Kaiser

Well-known member

Peggy

Well-known member

Kaiser

Well-known member

Peggy

Well-known member

Kaiser

Well-known member

Itworx4me

Well-known member

Jake Bunce

Well-known member

Robert F Schmitz

Well-known member

Similar threads

We value your privacy