Jump to content


Photo
- - - - -

Full Width Header Image


  • Please log in to reply
8 replies to this topic

#1 miracle959

miracle959

    Member

  • Members
  • 15 posts

Posted 02 April 2012 - 01:07 AM

I am trying to get my header to stretch across the entire screen like

Please Login or Register to see this Hidden Content

. Regardless of how wide my header image is, it shrinks/resizes it to the content area. I've tried following advice of other forum posts, but without luck (adjusted padding, tried all of the layout choices, created wider header images, etc). Any suggestions to get the same effect? www.supportromania.org

#2 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 02 April 2012 - 10:24 AM

try adding this code to your PL > custom code > Custom CSS, Save, and then report back what happened. Hope it works.

Please Login or Register to see this Hidden Content



#3 Danny

Danny

    Is Awesome!

  • Moderators
  • 15818 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 02 April 2012 - 12:08 PM

Hi miracle959, First you would need to use this layout -

Please Login or Register to see this Hidden Content

Once you have done, this can you provide a link to your header image please. I will then be able to assist you further! :D As the one currently on your website is MASSIVE! Its 2500x885, this is far to big for your header image and

#4 miracle959

miracle959

    Member

  • Members
  • 15 posts

Posted 28 April 2012 - 10:35 PM

Apologies for returning to you so late - I have not been receiving emails when new comments are made.

Gyoery - I tried the code snippet. Although it did stretch the header across my screen nicely, it still had white padding on both sides and the navigation bar stretched with it. It also caused the header image to be off-center.

Danny - I've set my content to Full Width Sections, but I much prefer the look of Content width page (with drop shadow). This is what I prefer:

Please Login or Register to see this Hidden Content


This is what happens when I use full width sections:

Please Login or Register to see this Hidden Content



Here is a link to my header image

Please Login or Register to see this Hidden Content



Thanks for the help - let me know what else I can do from my end (edit the image size, etc.).

#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 28 April 2012 - 11:39 PM

Hi,

First, you'll need to select the correct layout. Go to Dashboard > PageLines > Settings > Layout Editor. Select the first of the three layouts (Responsive with Pixel Width) - Save. You don't need any of the CSS provided by others above.
Go to Dashboard > PageLines > Settings > Color Control and choose "Full Width Sections". Then, scroll down and where your image is uploaded, set the background to Not Repeat. Vertical position should be "0" and Horizontal should be "50" - Save.
In Custom Code > CSS Rules, replace body {} with

Please Login or Register to see this Hidden Content


Let us know how this turns out.

#6 miracle959

miracle959

    Member

  • Members
  • 15 posts

Posted 29 April 2012 - 12:02 AM

Rangelone - I think your solution is for the background image? I'm trying to get my header image to stretch all the way across the screen like this example

Please Login or Register to see this Hidden Content

(or at the least, beyond the content/page area so that the white borders on either side are gone). I need my layout to be static, as I found problems with the feature slider images being cropped and cut off on larger monitors if I use a responsive layout (maybe there is a fix for this besides using the static layout?). Either way, the method you proposed didn't change anything, so I reset it back to how I had it for now.

#7 Danny

Danny

    Is Awesome!

  • Moderators
  • 15818 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 29 April 2012 - 09:46 AM

Hi,

The only way you can get your Header image stretched all the way across the screen is to set the Full Width Sections layout option like I mentioned above. If you do not want to use this option, you will then be forced to use your header image, as a background image.

These are your only two options, as far as I know. So doing option one with the Full Width Sections, please add the CSS below to either your child themes style.css, if you're using the PageLines Customisation plug-in add the code to the plug-ins style.css.

Please Login or Register to see this Hidden Content


However, like I mentioned in my previous reply, your header image is far to big, you have now actually made this even larger 3000x400 pixels? The dimensions need to lowered, you can do this in programs like GIMP or Photoshop. I recommend a maximum size of 1920x256 pixels.

Please do the following, see how this looks and if you like it, we can then try and add some content shadow to your content area.

#8 miracle959

miracle959

    Member

  • Members
  • 15 posts

Posted 30 April 2012 - 12:38 AM

Thanks Danny. This will work. I've played around with the sizes and gotten it to a point I'm happy with, but I've got a big "Support Romania" text floating on top of the header image (presumably this is the link that was attached to the header image). I'll see what I can find on that topic. I would like to add a drop shadow to the content area (and bottom of header image if it isn't difficult). Thanks again!

#9 Danny

Danny

    Is Awesome!

  • Moderators
  • 15818 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 30 April 2012 - 07:46 AM

Hi,

The Text/link Suport Romania is there because you have no logo uploaded, to resolve this. I recommend you remove the "Support Romania" text from your header image and create a logo using this text on a transparent background. The upload the new logo image using the upload option in Website Setup and upload and replace your header image without the Support Romania red text on. Once you have completed, this inform us and we can assist you with positioning the image in the center.

Adding a shadow to the content area is going to be extremely tricky because you wanted a full width header image, you had to change settings to Full Width Sections. In doing so this also effects the content area.

Therefore, you will need to add custom CSS for the box shadow to every section you use, this is going to be very tricky, I have started you off below. However, you will need to use either Firebug or Google Chrome's web dev tool, to insect the elements and work out where you need to add the box shadow.

Please Login or Register to see this Hidden Content


The above CSS will add the box shadow to the main content area, however this will not add any shadow to the navigation or footer.

A good resource for Box shadow can be found here -

Please Login or Register to see this Hidden Content