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.

Surrounding Shadow with images

Discussion in 'Template Modifications [Archive]' started by bogus, Dec 20, 2010.

  1. bogus

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

    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
     

    Attached Files:

    arabic and EQnoble like this.
  2. Brogan

    Brogan XenForo Moderator Staff Member

    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 :)
     
  3. bogus

    bogus Guest

    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
     
  4. EQnoble

    EQnoble Well-Known Member

    I will try this out...thanks for the documentation.
     
  5. bogus

    bogus Guest

    I had to change the Footer Setting because of a display Error. Please check the first Post to correct this. Thanks
     
  6. Weston

    Weston Member

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

    Brogan XenForo Moderator Staff Member

    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.
     
  8. bogus

    bogus Guest

    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.
     

Share This Page