Archived

This topic is now archived and is closed to further replies.

  • 0

Page Banner/feature/title/ section

Question

Posted · Report post

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:

http://www.fortinet.com/solutions/distributed_enterprise.html  - 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

 

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

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;}

Share this post


Link to post
Share on other sites

Posted · Report post

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 {
    font-size: 13px;
}
 
 
I've tried with the url where it says 'url' and with it in (). Still no idea?
 
-IH

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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!

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

I'll let James know!

Share this post


Link to post
Share on other sites

Posted · Report post

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 - http://screencast.com/t/fsZp7aJgLY

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

Share this post


Link to post
Share on other sites