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

Surrounding Shadow with images

  • Thread starter Thread starter bogus
  • Start date Start date
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

Unbenannt.webp

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;
}
Probably you have to costumize the padding to your needs. These are numbers that fits to my Template changes.

For the shadow background add
Code:
.bgmid {
background: url('path/to/your/images/schadow_bg.png') center repeat-y;
}
Save and Exit this part

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;
}
Save and Exit

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
 

Attachments

  • schadow_bg.webp
    schadow_bg.webp
    266 bytes · Views: 77
  • shfooter.webp
    shfooter.webp
    1.4 KB · Views: 74
Nice work. You got there in the end, and no doubt learned a few things on the way.

How about a link or a screenshot so we can see it in action :)
 
Yes i did it. But without the Help from a lot of Person it wouldnt be realized ;)
Well. I leave the URL of my Test Board if that is ok?!
Live ;)

I am not finished yet. There are quit a few color changes i have to do. But to see the shadow it should be enough ;)
Thanks

And... Yes. I did learn a lot. And the more i learn and try around, the more i love xenForo
 
I had to change the Footer Setting because of a display Error. Please check the first Post to correct this. Thanks
 
Love the mod but Chrome seems to be having trouble agreeing as to where the center of the page is. I have a 1px line between the page content and the shadow along the rightside where the background peaks through.

Is anyone else getting this? The other browsers seem fine... god what I would give for someone to enslave the world and force everyone to use the same browser.
 
Unfortunately it's the way the math functions differ between browsers.

In the past I have used gradient images to achieve a similar effect and I had to overlap them by a few px just to make sure to avoid that problem.
 
From what i can see is that the footer image does not fit the rest exactly. I will try to work on a version with left and right images.
 
Top Bottom