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.
We will start with EXTRA.css
1. Join your ACP and point to Appearance - Search Templates.
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:
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
and change it to
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
At the end it looks like this example. I have choosen the Background only to show you the transparency.
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.
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*/
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