1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. In order to post messages and view attached files in this forum, you must be a licensed XenForo customer.
    If you can't post, enter your forum username in the Associated Forum Users form in your customer area.
Cookies Customer Forum

design help / image CSS

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

  1. 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.
    erich37, May 3, 2012
    #1

  2. Brogan XenForo Moderator

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

  3. erich37 Well-Known Member

    many thanks Brogan!

    how do I get to display the image underneath the logo ?
    erich37, May 3, 2012
    #3

  4. Brogan XenForo Moderator

    The easiest way would be to make it part of the logo.
    Brogan, May 3, 2012
    #4

  5. 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.....
    erich37, May 3, 2012
    #5

  6. 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!
    erich37, May 3, 2012
    #6

  7. Jake Bunce Probably knows the answer

    You want it between the logo and the navbar? Or under the navbar?
    Jake Bunce, May 4, 2012
    #7

  8. 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!
    erich37, May 4, 2012
    #8

  9. Brogan XenForo Moderator

    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
    Brogan, May 4, 2012
    #9

  10. 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;
    erich37, May 4, 2012
    #10

  11. Brogan XenForo Moderator

    Add the border to the image.
    Brogan, May 4, 2012
    #11

  12. Jake Bunce Probably knows the answer

    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
    Jake Bunce, May 4, 2012
    #12
    smimosmile, Shelley, mrGTB and 2 others like this.

  13. erich37 Well-Known Member

    Jake, you are the master. That's working nice! :)
    erich37, May 5, 2012
    #13

  14. mrGTB Well-Known Member

    Bruce "Ninja's everyone again", nice Dog by the way.
    mrGTB, May 5, 2012
    #14

  15. melbo Well-Known Member

    melbo, Jun 27, 2012
    #15

  16. Jake Bunce Probably knows the answer

    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
    Jake Bunce, Jun 28, 2012
    #16
    melbo likes this.

  17. melbo Well-Known Member

    Thank You Jake.
    melbo, Jun 28, 2012
    #17

  18. 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.
    Shelley, Oct 16, 2012
    #18

  19. Jake Bunce Probably knows the answer

    Yeah it should show for everyone.
    Jake Bunce, Oct 16, 2012
    #19

Share This Page

Pre-Sales Questions Buy XenForo Now! Customer Area
License Validation
XenForo Ltd. is registered in England and Wales with company number 07294282.