Jump to content
Sign in to follow this  
jasonlioh

What do I have to do if I want my header to appear likes this?

Recommended Posts

jasonlioh

What do I have to do if I want my header (The Rotary logo, text and the other logo)? (I am using PlatformPro. Assuming the header is of transparent background, I need to get the image to display half on top and half within the content. Do click on the link as the image is a little too big for the forum. Image Link

Share this post


Link to post
Share on other sites
Rob

Your background image could be a frame with a white core that contains the hashed lines. Whatever the width is that you set for your layout add at least 10 pixels and evenly space it. That's what I did with Epicurus Institute The transparent PNG file layers over the background and is positioned with CSS to ensure its placement where needed. Note that the height of the transparent image may affect the placement of your navigation. On the link above, the height of that graphic is specific, keeping the navigation exactly where I want it. You can also create the entire thing as a background and use a transparent GIF file to create a link to your homepage.That would allow visitors to see only the background. The choice is yours.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
jasonlioh

Okay, I managed to create the header in such way that it appears to be seamless with the background. However, I think there's a padding area the header image and it won't blend in. Here's a print screen of my "problem". The red box is my header image. screenshot

Share this post


Link to post
Share on other sites
timlinson

I guess I'm missing something.. I don't see any red box or anything red actually.

Share this post


Link to post
Share on other sites
jasonlioh

Tim: I added the wrong screenshot, let me fix it. Here's the correct screenshot.

Share this post


Link to post
Share on other sites
Kate

Hey Jason, Are you able to give a link to the site itself?

Share this post


Link to post
Share on other sites
jasonlioh

Kate: rotarytampin.org I want my header to be seamless and blend with the background entirely. Currently, because there's padding on the top, left and right, there's a blank space in between the header image and background.

Share this post


Link to post
Share on other sites
cmunns

Well there is no image there right now, but you'd remove some of the padding with this css addition ` .fixed_width #branding .content-pad { padding: 0px; } `

Share this post


Link to post
Share on other sites
jasonlioh

Adam: I have inserted the custom code as you have given and it sorta doesn't work. Do visit rotarytampin.org and take a look. There's some gap on the left side of the header image.

Share this post


Link to post
Share on other sites
catrina

That gap is there by default, but it can be eliminated by using this CSS code, which can be added to the custom code section in Settings:

img.mainlogo-img {margin-left: -9px;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jasonlioh

Yes, managed to tweak my header imagine size and now everything blends in beautifully. Thank you!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×