Page Banner/feature/title/ section
Posted 11 June 2013 - 11:38 PM
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:- 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?
Posted 11 June 2013 - 11:59 PM
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.
An example of how that would look is -
(I just colored it blue to show you where the image would be)
Posted 17 June 2013 - 07:39 PM
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:
Posted 17 June 2013 - 09:23 PM
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.
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?
Posted 27 June 2013 - 09:47 PM Best Answer
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.