design help / image CSS

[erich37]

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

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!





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

 

[Paul B]

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

 

[erich37]

many thanks Brogan!

how do I get to display the image underneath the logo ?

 

[Paul B]

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

 

[erich37]

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]

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!

 

[Jake Bunce]

You want it between the logo and the navbar? Or under the navbar?

 

[erich37]

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!

 

[Paul B]

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]

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;

 

[Paul B]

Add the border to the image.

 

[Jake Bunce]

Admin CP -> Appearance -> Templates -> header

Add the red 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:

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

 

[erich37]

Jake, you are the master. That's working nice!

 

[mrGTB]

Admin CP -> Appearance -> Templates -> header

Add the red 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:

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

 

[melbo]

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/

 

[Jake Bunce]

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



That image path is:

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

The result:

 

[melbo]

Thank You Jake.

 

[Shelley]

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.

 

[Jake Bunce]

Wouldn't that shadow still display for members who cannot see the moderator bar?

Yeah it should show for everyone.