B
bogus
Guest
Well, where to start.
I would like to post this because i was asking quit a lot of people on how this works and what to do and so on, that i think everybody should be able to use this
Please remember that i am not a Coder. All template changes are the result of my question, the responses of many Users here and the German Board xendach (hope its allowed) and a lots of hours using Google
If you have better solutions or any changes to the original Code, please dont hestitate to post them or drop me a PM. Thanks
I´ve done changes to the style itself to get a fixed width.
For a fixed width, use similar values as shown in the picture at Style Properties: General -> Page Width Controller
Play with the values until it fits your needs
Edit: There is apparently a problem with google´s chrome. If u have any solutions please post it here or via PM. Thanks
After saving the changes you should start with the EXTRA.css
To fit the Copyright Text and the Terms and Rules add the following to the EXTRA.css
(Special Thanks goes to Brogan for his help on this)
For the Copyright add
For Terms and Rules add
To get a white Background to the Copyright and to the Terms and Rules Field use
Now you have to add some extra css for the shadow images. At the End you can call this whatever you want. In this Example its shadowfooter and bgmid
Add also to EXTRA.css
For the Footer Image add
Probably you have to costumize the padding to your needs. These are numbers that fits to my Template changes.
For the shadow background add
Save and Exit this part
No open the footer.css Template
To change the blue color and the curves of the footer change
to
Save and Exit
Open now the PAGE_CONTAINER Template
add above
this Code
at the end it must look like this
after
add </div> to close it
It should look like this
For the footer Image add before
this
that it looks like
Then Save and Exit
And thats it. You should now have a nice looking shadow. Hopefully
And last but not least the Images i use
I would like to post this because i was asking quit a lot of people on how this works and what to do and so on, that i think everybody should be able to use this
Please remember that i am not a Coder. All template changes are the result of my question, the responses of many Users here and the German Board xendach (hope its allowed) and a lots of hours using Google
If you have better solutions or any changes to the original Code, please dont hestitate to post them or drop me a PM. Thanks
I´ve done changes to the style itself to get a fixed width.
For a fixed width, use similar values as shown in the picture at Style Properties: General -> Page Width Controller
Play with the values until it fits your needs
Edit: There is apparently a problem with google´s chrome. If u have any solutions please post it here or via PM. Thanks
After saving the changes you should start with the EXTRA.css
To fit the Copyright Text and the Terms and Rules add the following to the EXTRA.css
(Special Thanks goes to Brogan for his help on this)
For the Copyright add
Code:
#copyright {
float: left;
margin-left: 10px;
}
For Terms and Rules add
Code:
#legal li {
float: left;
margin-left: 10px;
margin-right: 10px;
}
To get a white Background to the Copyright and to the Terms and Rules Field use
Code:
.footerLegal .pageContent {
background-color: #FFFFFF;
font-size: 11px;
overflow: hidden;
padding: 5px 0;
text-align: center;
}
Now you have to add some extra css for the shadow images. At the End you can call this whatever you want. In this Example its shadowfooter and bgmid
Add also to EXTRA.css
For the Footer Image add
Code:
.shadowfooter {
background: url('path/to/your/images/shfooter.png') bottom no-repeat; padding: 30px;
}
For the shadow background add
Code:
.bgmid {
background: url('path/to/your/images/schadow_bg.png') center repeat-y;
}
No open the footer.css Template
To change the blue color and the curves of the footer change
Code:
.footer .pageContent
{
background: @primaryMedium;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden; zoom: 1;
font-size: 11px;
}
to
Code:
.footer .pageContent
{
background: @contentBackground;
overflow: hidden; zoom: 1;
font-size: 11px;
}
Open now the PAGE_CONTAINER Template
add above
Code:
<xen:if is="{$visitor.is_moderator} || {$visitor.is_admin}">
this Code
Code:
<div class="bgmid">
at the end it must look like this
Code:
<body>
<div class="bgmid">
<xen:if is="{$visitor.is_moderator} || {$visitor.is_admin}">
<xen:include template="moderator_bar" />
<xen:elseif is="!{$visitor.user_id} && !{$hideLoginBar}" />
<xen:include template="login_bar" />
</xen:if>
after
Code:
<footer>
<xen:include template="footer" />
</footer>
add </div> to close it
It should look like this
Code:
<footer>
<xen:include template="footer" />
</footer>
</div>
<xen:include template="page_container_js_body" />
For the footer Image add before
Code:
<xen:include template="page_container_js_body" />
this
Code:
<div class="shadowfooter"></div>
that it looks like
Code:
<footer>
<xen:include template="footer" />
</footer>
</div>
<div class="shadowfooter"></div>
<xen:include template="page_container_js_body" />
Then Save and Exit
And thats it. You should now have a nice looking shadow. Hopefully
And last but not least the Images i use