• 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

  • Thread starter Thread starter bogus
  • Start date Start date
Status
Not open for further replies.
B

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

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
 
Thanks for these extensive and clear instructions. I already loved the glass-effect on XenFans: it looks very special.
 
That looks familiar, but explains why you signed up on the site and spend 45 minutes on the frontpage looking at the source code :)
 
That looks familiar, but explains why you signed up on the site and spend 45 minutes on the frontpage looking at the source code :)
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
XenFans Forums - Error

You have been banned for the following reason: Could have asked for release notes as I have the .txt file here, rather than just copy/paste source code and release as your own under "inspired"..
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:
 
Status
Not open for further replies.
Top Bottom