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

design help / image CSS

erich37

Well-known member
#1
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.
 

Brogan

XenForo moderator
Staff member
#2
Style Properties -> Header and Navigation -> Header -> Background
Image: styles/default/xenforo/gradients/acp-banner-shadow.png.png
Repeat: No-Repeat
Position: center top
 

erich37

Well-known member
#5
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

Well-known member
#6
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!
 

Brogan

XenForo moderator
Staff member
#9
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
 

erich37

Well-known member
#10
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
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;
 

Jake Bunce

XenForo moderator
Staff member
#12
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
 

mrGTB

Well-known member
#14
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:

View attachment 29154
Bruce "Ninja's everyone again", nice Dog by the way.
 

Jake Bunce

XenForo moderator
Staff member
#16
Where did Floris add this to create the acp shadow effect at the top of the page - right under the moderation notification bar?

It's pictured here and Floris comments on it in post #8
http://xenforo.com/community/threads/how-to-padding-between-moderaterbar-and-header.18353/
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
 

Shelley

Well-known member
#18
It looks like he added the background image to the header:

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

View attachment 31007

That image path is:

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

The result:

View attachment 31008
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.