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

Transparent Style

Discussion in 'Styling and Customization Questions' started by SnG, Dec 10, 2010.

  1. SnG

    SnG Member

    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?
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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";
    }
    
     
    Azofan, Nasr, Kaiser and 4 others like this.
  3. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     
    Azofan, Nasr, Peggy and 4 others like this.
  4. SnG

    SnG Member

    Thanks a lot! Just what I am looking for.
     
  5. Peggy

    Peggy Well-Known Member

    And I like that alot!
     
  6. Kaiser

    Kaiser Well-Known Member

    Its IPB now?
     
  7. Kaiser

    Kaiser Well-Known Member

    Thats cool. I might use it f0r a theme in the future.
     
  8. Peggy

    Peggy Well-Known Member

    IPB?
     
  9. Kaiser

    Kaiser Well-Known Member

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

    Peggy Well-Known Member

    oohh I didn't see a link to his site. sorry
     
    Terrorz likes this.
  11. Kaiser

    Kaiser Well-Known Member

    LoL No worries :)
     
  12. Itworx4me

    Itworx4me Well-Known Member

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

    Jake Bunce XenForo Moderator Staff Member

    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.
     
  14. Robert F Schmitz

    Robert F Schmitz Well-Known Member

    Thank you Jake.
     

Share This Page