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

design help / image CSS

Discussion in 'XenForo Questions and Support' started by erich37, May 3, 2012.

  1. erich37

    erich37 Well-Known Member

    I would like to implement the XF-shadow-image and position it underneath my logo.

    This image is also shown in the ACP, but I would like to place it onto my homepage at domain.com/forums

    Code:
    url("styles/default/xenforo/gradients/acp-banner-shadow.png") no-repeat scroll center top transparent
    Could anyone please give me a hint of how to implement this image (CSS ) ?

    Appreciate your help!


    shadow_design.gif


    Disclaimer:
    of course I will alter the image, design, etc. in order to respect the Copyright of XF Ltd.
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Style Properties -> Header and Navigation -> Header -> Background
    Image: styles/default/xenforo/gradients/acp-banner-shadow.png.png
    Repeat: No-Repeat
    Position: center top
    erich37 likes this.
  3. erich37

    erich37 Well-Known Member

    many thanks Brogan!

    how do I get to display the image underneath the logo ?
  4. Brogan

    Brogan XenForo Moderator Staff Member

    The easiest way would be to make it part of the logo.
  5. erich37

    erich37 Well-Known Member

    hmmm, but I would like to also make that 1px border across the full width.
    I guess that might be difficult when making it part of the logo ?

    The trouble is that the navigation-bar is part of the "header", which makes styling of the header a bit difficult.....
  6. erich37

    erich37 Well-Known Member

    I need a CSS expert to help me with this.
    I guess defining a new CSS-class and putting the CSS-class somewhere into the header-template would be the right way to do it?

    $$ is waiting for anyone figuring out of how to do this.

    Thanks!
  7. Jake Bunce

    Jake Bunce Probably knows the answer Staff Member

    You want it between the logo and the navbar? Or under the navbar?
  8. erich37

    erich37 Well-Known Member

    Hi Jake,

    it should look exactly like this:

    http://xenforo.com/help/

    I am happy to pay if you can help me on this. Many thanks!
  9. Brogan

    Brogan XenForo Moderator Staff Member

    Edit the shadow image canvas size to add some space to the top and bottom to make it the same size as the header height with the shadow positioned where you want, then add it as a background image in: Style Properties -> Header and Navigation -> Header -> Background
  10. erich37

    erich37 Well-Known Member

    I also need the 2px border across the full width (1px border-bottom and 1px border-top)......and am not sure how that's gonna work with the idea you are suggesting?

    I have a fixed style:
    width: 990px;
  11. Brogan

    Brogan XenForo Moderator Staff Member

    Add the border to the image.
  12. Jake Bunce

    Jake Bunce Probably knows the answer Staff Member

    Admin CP -> Appearance -> Templates -> header

    Add the red code:

    Code:
    <xen:hook name="header">
    <div id="header">
    	<xen:include template="logo_block" />
    	<div class="headerShadow"></div>
    	<xen:include template="navigation" />
    	<xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>
    </div>
    </xen:hook>
    
    Admin CP -> Appearance -> Templates -> EXTRA.css

    Add this code:

    Code:
    .headerShadow
    {
    	background-image: url('styles/default/xenforo/gradients/acp-banner-shadow.png');
    	background-position: center;
    	background-repeat: no-repeat;
    	height: 30px;
    	border-top: black 1px solid;
    }
    
    #headerMover #headerProxy
    {
    	height: {xen:calc '@headerLogoHeight + @headerTabHeight * 2 + 2 + 30'}px;
    }
    
    The result:

    Screen shot 2012-05-04 at 1.22.44 PM.png
    smimosmile, Shelley, mrGTB and 2 others like this.
  13. erich37

    erich37 Well-Known Member

    Jake, you are the master. That's working nice! :)
  14. mrGTB

    mrGTB Well-Known Member

    Bruce "Ninja's everyone again", nice Dog by the way.
  15. melbo

    melbo Well-Known Member

  16. Jake Bunce

    Jake Bunce Probably knows the answer Staff Member

    It looks like he added the background image to the header:

    Admin CP -> Appearance -> Style Properties -> Header and Navigation -> Header

    Screen shot 2012-06-27 at 4.53.48 PM.png

    That image path is:

    styles/default/xenforo/gradients/acp-banner-shadow.png

    The result:

    Screen shot 2012-06-27 at 4.54.32 PM.png
    melbo likes this.
  17. melbo

    melbo Well-Known Member

    Thank You Jake.
  18. Shelley

    Shelley Well-Known Member

    I remember doing this year and a half ago. Wouldn't that shadow still display for members who cannot see the moderator bar? Perhaps I'm mistaking that it will show but if memory recalls I'm sure I made and added in an edit into the moderator (I think it;s called template) so only staff who are able to view the shadow can only view it as it would look odd to members without them seeing the mod bar. I'm sure I've read into that wrong though.

    edit: Just read your template edit further up the post so I think i did read into the sp edit incorrectly.
  19. Jake Bunce

    Jake Bunce Probably knows the answer Staff Member

    Yeah it should show for everyone.

Share This Page