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

Background Opacity

Discussion in 'Styling and Customization Questions' started by Brendon Meynell, Nov 6, 2011.

  1. Brendon Meynell

    Brendon Meynell Active Member

    Hey All,
    So I am new to xenforo so please forgive me if this has already been asked and answered (I did attempt to search but it came up with not many relevent threads).

    So I am working on my first style and so far have found everything relatively easy. However have come to a sticking point that I was hoping someone may be able to help with.

    I am wanting to give my content-background an opacity of 0.4 - however it makes everything (including forum rows etc the opacity) I am attempting to just get the white stuff around everything to have the opacity.

    Here is a screenshot of what I am talking about.

    So I have the black background (#000000) and would like to keep the white etc where it is and how it is. The only stuff I want to change to have the opacity is the stuff in the grey/black (#333333) rectangles that I have drawn on there.

    Is there some sort of code I can put in the additional html sections, or in extra.css that can help me achieve this?

    Hopefully I have gone into enough description. Your assistance will be greatly appreciated.
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I encountered the same problem when I was messing with opacity. My solution was to use a PNG image for the background, where the image itself has alpha transparency. For example, here is a blank image with 50% opacity that you can use for a repeating background.

    Attached Files:

    iXanon likes this.
  3. Brendon Meynell

    Brendon Meynell Active Member

    Just to confirm (sorry only brought this software a couple hours ago and don't want to break it) that is for the content background - when i get to that setting I put that as the background?

    Sorry - only thing I hate about new software - looking like a complete newbie!
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    For example:

    Admin CP -> Appearance -> Style Properties -> General -> Content

    Screen shot 2011-11-06 at 2.04.42 AM.png

    Point it to the location of the image on your server.

    And you will likely want to set the background color to be transparent, otherwise it will merely be an opacity layer on top of @content's own solid background color. Some extra CSS may also be required to completely remove the solid background color:

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

    #content .pageWidth
    	background-color: transparent !important;
    Here is the result (using a background image in Body to really show the opacity effect):

    Screen shot 2011-11-06 at 2.22.18 AM.png
    Brendon Meynell likes this.
  5. Brendon Meynell

    Brendon Meynell Active Member

    wow your a legend. That worked thank you so much!

Share This Page