1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.3 Fluid custom logo in 3 parts

Discussion in 'Styling and Customization Questions' started by Sunka, Mar 17, 2014.

  1. Sunka

    Sunka Well-Known Member

    Hi,
    need help to setup my logo.
    It contains 3 parts. Left and right parts of logo are fixed, and middle is streching (it depence of user width).
    In vBulletin I have to put this in Aditional CSS:


    Code:
    #headerFill{
    background-image: url(images/misc/middle.jpg);
    background-repeat: repeat-x;
    height: 140px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    }
    #headerL{
    background-image: url(images/misc/left.png);
    height: 140px;
    background-repeat: no-repeat;
    width: 185px;
    float: left;
    
    }
    #headerR {
    background-image: url(images/misc/right.png);
    background-repeat: no-repeat;
    height: 140px;
    width: 715px;
    float: right;
    
    }

    And in HEADER template, i have to put this:

    Code:
    <!-- logo -->
        <div id="headerFill"><div id="headerL"></div><div id="headerR"></div></div>
    <!-- /logo -->

    Can anybody help me to reproduce same on my XenForo forum?

    Thank you
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Sunka likes this.
  3. Sunka

    Sunka Well-Known Member

    I have tried, but have not results at all.
    Tried to put in EXTRA.css, and then tried to costumize div for logo block.

    Coul anybody help me, please
     
  4. Russ

    Russ Well-Known Member

    Can you post a picture of what your trying to achieve(or url)? There could be a different method.
     
  5. Sunka

    Sunka Well-Known Member

    desna.png

    lijeva.png

    sredina.jpg


    Those three pictures make fluid banner, right and left are fixed with, and middle one is streching depended wide of screen.
    Here is complete banner picture

    aaa.png
     
  6. Russ

    Russ Well-Known Member

    So just a thought use the left image as the normal logo, set the large image as the background of #logoBlock .pagewidth, then add a div In ad_header floating right using the right image as the background.

    On my phone but it may work easier for you, and would work a little better responsively assuming you hide the right at smaller resolutions.
     
    Sunka likes this.
  7. Sunka

    Sunka Well-Known Member

    Still no results, or simple I can not and not know how to do it.

    It should be some simple way to code it like I did in vBulletin template (see code in first post)
     
  8. Russ

    Russ Well-Known Member

    A link would help, but I don't think you'll need all those edits.
     
    Sunka likes this.
  9. Sunka

    Sunka Well-Known Member

    This is my forum, still on vBulletin - www.pijanitvor.com

    Look at banner on thop. It contains 3 pictures. Left is fixed with transparent background, middle is streching all the way, and right picture is fixed too.

    Point is that middle picture is streching/repeat x all the way (100% width), and left and right pictures are fixed and because they have transparent background on some parts, they are filled up with middle picture there.
     
  10. Sunka

    Sunka Well-Known Member

    Finnaly I did it ;)
     
  11. Sunka

    Sunka Well-Known Member

    If anyone want to know how i did it, here it is.

    You must have 3 part of banner (left, right, middle).
    Left and right will be fixed on sides and both .png, and middle will be with 100% width and .jpg.

    1. In template ad_header put:

    <xen:comment> My logo (right part) </xen:comment>
    <div id="rightpart"></div>
    <xen:comment> /My logo (right part) </xen:comment>

    2. In Style Properties: Header and Navigation pod Header Logo Image Path put:

    styles/default/xenforo/my logo/left.png

    In Height of Header Logo put (xxx= hight of banner image):

    XXXpx



    3. In EXTRA.css put:

    /* My logo */

    #logoBlock {
    background-image: url(styles/default/xenforo/my_logo/middle.jpg);
    background-repeat: repeat-x;
    height: XXXpx;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    }

    #rightlogo {
    background-image: url(styles/default/xenforo/my_logo/right.png);
    background-repeat: no-repeat;
    height: 140px;
    width: 715px;
    float: right;
    }

    /* END My logo */


    4. Put images in new folder (my_logo) => ../styles/default/xenforo/my_logo/
     

Share This Page