1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
    Dismiss Notice
  3. This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

CSS Shadow surrounding Content with transparent PageWidth bg

Discussion in 'Template Modifications [Archive]' started by bogus, Jan 20, 2011.

Thread Status:
Not open for further replies.
  1. bogus

    bogus Guest

    A new shadow, I would like to share with you, inspired by xenfans ;)
    At the end it looks like this example. I have choosen the Background only to show you the transparency.
    Unbenannt.jpg

    We will start with EXTRA.css
    1. Join your ACP and point to Appearance - Search Templates.
    • Enter behind Title Contains: EXTRA.css
    • Open the EXTRA.css Template with a click on it.
    Now Copy and Paste the following into EXTRA.css

    Code:
    /* Transparency Shadow start */
    #content .pageWidth {
        background: rgba(255, 255, 255, 0.4);
        border-left: 1px solid rgba(255, 255, 255, 0.5);
        border-right: 1px solid rgba(255, 255, 255, 0.5);
        padding: 0 15px;
        width: 948px;
    }
    .footer .pageContent {
        background-image: url("styles/default/xenforo/gradients/tab-unselected-25px-light.png") repeat-x;
        -webkit-box-shadow: 0px 4px 10px #5e5e5e;
        -moz-box-shadow: 0px 4px 10px #5e5e5e;
        box-shadow: 0px 4px 10px #5e5e5e;
        width: 942px;
        margin: auto;
    }
    .footerLegal .pageContent {
        background: rgba(255, 255, 255, 0.4);
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        border-left: 1px solid rgba(255, 255, 255, 0.5);
        border-right: 1px solid rgba(255, 255, 255, 0.5);
        padding: 0px 15px 15px;
        width: 948px;
    }
    #BGfooter {
        background: rgba(255, 255, 255, 0.4);
        border-left: 1px solid rgba(255, 255, 255, 0.5);
        border-right: 1px solid rgba(255, 255, 255, 0.5);
        padding: 0 15px 15px;
        width: 948px;
    }
    /* Transparency Shadow stop*/
    
    Save and Exit

    2.Open now:
    Appearance - Styles - Default Style - Style Property Groups - Content

    under Border - Margin All: enter auto

    Enter under Miscellaneous: Width: 900px

    In the empty field, next to it copy, where you can add your own CSS:
    Code:
    -webkit-box-shadow: 0px 2px 10px #5e5e5e;
    -moz-box-shadow: 0px 2px 10px #5e5e5e;
    box-shadow: 0px 2px 10px #5e5e5e;
    Page Width Controller:

    Margin All: auto
    Miscellaneous: 980px

    If you want to use a Picture as background open Body:

    under Background - Image add, eg.: url('http://www.pixelperfectdigital.com/free_stock_photos/data/552/medium/3D_Background_062.jpg') - (remember, this is just an example)
    Repeat: no-repeat
    Position: center

    Add under Padding - Bottom: 30px (Try to play with the number)

    In the Field where you can add your own CSS (Description underneath "Use this box to enter any additional CSS you would like to include.")
    add background-size: 100%; (play with the number till it fits your needs ;) )

    Click on Update Style Properties. We are finished here.

    4. Click again to Search Templates and enter behind Title Contains: footer - Hit return or click on Search Templates.

    Open the footer Template with a mouse click on it.

    On the very Top search for this
    Code:
    
    <div class="footer">
        <div class="pageWidth">
            <div class="pageContent">
    and change it to

    Code:
    <div class="footer">
        <div class="pageWidth" id="BGfooter">
            <div class="pageContent">
    Save and exit

    If i did not miss anything and you followed all the steps correctly your Forum should look like the example in the Picture above.
    Please remember that i am no Coder. If you find Errors or if you have any Issues don´t hesitate to contact me or post your Ideas here.
    If you have Questions is the same. Here or private ;) Thanks

    For changing and fitting the footer Text take a look here please
     
    erich37, Lenin and Allan like this.
  2. Lenin

    Lenin Active Member

    cool thanks
     
  3. Grover

    Grover Well-Known Member

    Thanks for these extensive and clear instructions. I already loved the glass-effect on XenFans: it looks very special.
     
  4. Floris

    Floris Guest

    That looks familiar, but explains why you signed up on the site and spend 45 minutes on the frontpage looking at the source code :)
     
  5. nice feature thanks floris ... i mean bogus :)
     
  6. bogus

    bogus Guest

    Nope. Not true. I primary joined your page because i was curious what you do....
    After i saw your Style i was impressed about the clean Style, that i first just wanted to know how you´ve done it. Well...My ambition has grabbed me ;)
    Thats why i,ve done a portation of it.
    Ok i should have first asked you if its ok, but I was so engrossed into the work that i just forgot everything. I apologize

    But hey.. This is childish
    True. That is why I apologized

    btw its not your Code. I have used yours just as an inspiration. There are many different ways to release it. That some color Codes are same.... Hmm maybe it has to do how css works?!
    Many Painters used other paintings as an inspiration, what made the originals even more famous...

    Anyway :confused:
     
    zaiger and erich37 like this.
  7. Floris

    Floris Guest

    Thanks for the apology :) Ban has been lifted.
     
    bogus likes this.
Thread Status:
Not open for further replies.

Share This Page