Jump to content


Photo
- - - - -

Page Banner/feature/title/ section


Best Answer James B , 27 June 2013 - 09:47 PM

Hi there,

 

You can apply padding to the element you applied the background to by adding something like the below to the additional css you added, just edit the figure to fit how far you want the text to move inwards.

 

{padding:20px;}

Go to the full post


  • Please log in to reply
7 replies to this topic

#1 clearpathnet

clearpathnet

    Member

  • Members
  • 28 posts
  • Country: Country Flag

Posted 11 June 2013 - 11:38 PM

Hey Guys,

I'm new and have a quick question. For most of my pages, I need some sort of title/banner/feature section that displaces the name of the page and have a background graphic. 

 

Examples of what I'm describing:

Please Login or Register to see this Hidden Content

  - the "Solutions" part

 

I will have a type of banner like this on basically every page. Is there a tool that I can use that allows me to place a section above the "Content" section. and simple add a standard background to that section. Then it will just auto-pull the page name and put it into this banner/title section?

 

Right now, I am using the "features" section with is a pain.. cause I have to customer make a photo in CS5.5 and then upload it as a feature. then I have to make a feature set for just that one image... then go to the page and select that feature set.

 

Anyway to do this better?

 

-Ian

 



#2 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 11 June 2013 - 11:59 PM

Hi Ian

 

Pagelines has the option to automatically include Page titles on all pages. This can be set in Pagelines>site options>website setup>automatically show page titles.

 

If you turn that on, it will place the titles in their own div automatically on each page. You could then use css to apply a background image to that title div and make the font bigger.

 

h1, .fpost .entry-title {
    background: url( the url to your background image goes here);
    font-size67px;
}

 

An example of how that would look is -

Please Login or Register to see this Hidden Content

(I just colored it blue to show you where the image would be)



#3 clearpathnet

clearpathnet

    Member

  • Members
  • 28 posts
  • Country: Country Flag

Posted 17 June 2013 - 07:39 PM

Hey James,

Okay.. I feel like I'm ALMOST there with this. I can get the background color to change (just adding a HEX code) but I seem to be having an issue with the image URL... gives me a:

PageLines Custom LESS/CSS error.

parse error: failed at `background: url (http:` line: 988

 

Here is what I am putting in:

 

h1, .fpost .entry-title {
    background: url (

Please Login or Register to see this Hidden Content

    font-size: 13px;
}
 
 
I've tried with the url where it says 'url' and with it in (). Still no idea?
 
-IH


#4 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 17 June 2013 - 09:23 PM

Hi there,

 

I've checked the link but it's saying the image url doesn't exist. Check any quotes you have inserted inside the ( ).

 

To try and clear the less error, go to Pagelines>advanced> and check the debug box. Then you'll see a FLUSH less option in the wp admin bar at the top of the site, click that to clear and recompile the code and then check the error message.



#5 clearpathnet

clearpathnet

    Member

  • Members
  • 28 posts
  • Country: Country Flag

Posted 27 June 2013 - 06:32 PM

Hey - alright, so I got this working! One question though:

 

As it is right now, the background color/graphic is hugging the text. How do I add padding or shrink/expand this area without changing the font size?

 

Thanks!



#6 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 27 June 2013 - 09:47 PM   Best Answer

Hi there,

 

You can apply padding to the element you applied the background to by adding something like the below to the additional css you added, just edit the figure to fit how far you want the text to move inwards.

 

{padding:20px;}



#7 clearpathnet

clearpathnet

    Member

  • Members
  • 28 posts
  • Country: Country Flag

Posted 28 June 2013 - 02:09 AM

Perfect - that is exactly what I needed. Thanks James!



#8 Rob

Rob

    One Smart Egg

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

Posted 28 June 2013 - 02:01 PM

I'll let James know!