Jump to content
Sign in to follow this  
clearpathnet

Page Banner/feature/title/ section

Recommended Posts

clearpathnet    0
clearpathnet

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
James B    436
James B

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)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
clearpathnet    0
clearpathnet

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
clearpathnet    0
clearpathnet

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
clearpathnet    0
clearpathnet

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

Share this post


Link to post
Share on other sites
Rob    547
Rob

I'll let James know!


Former PageLines Moderator, Food Expert and Raconteur

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  

×