Archived

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

  • 0

Multi-layered Landing Pages

Question

Posted · Report post

So I'm learning CSS lately and I was just wondering, how feasible is it to pull of this sort of look on a Pagelines site?

 

Would it basically come down to just slapping different colored backgrounds and background images into each of the Pagelines Sections? It would be super awesome if anyone could provide one example piece of code that would help make this sort of effect on a Pagelines Section.

 

Bonus points if you know how to add on the triangle effects too! Thanks much for any help.

 

Sidian

Share this post


Link to post
Share on other sites

12 answers to this question

Posted · Report post

You mean....

.content .content-pad {
    padding: 0;
}

I'd recommend you prefix it with the page ID which prevents the code from being site-wide and adversely affecting other things.  Make sure you know the exact numeric value of the page and replace XX with the number.

.page-id-xx .content .content-pad {
    padding: 0;
}

Be careful, as it will affect other things, tightening up the space between elements.  You can then prefix other code with the same page-id-xx and add padding-top and/or padding-bottom to the section, as needed.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Actually, that's incorrect code:

 

.hero {background-color:#b0c4de;}
 
Sets it for the hero section.
 
In Dashboard > PageLines > Site Options > Color Control, you'll want to leave blank the color settings for body, page and content backgrounds.  By doing this, the sections are generally, transparent. However, since transparency is not an infinite thing, you'll eventually come upon a default color (or else you'd be looking inside your monitor ;))
 
I don't recommend using Adobe's CSS.  We use CSS3 and there may be conflicts.  Yes, divs are possible within anything.  If you view the source using Firebug for the site I linked you to, you'll see exactly how div's are used, applied and how corresponding CSS is crafted to create section-based backgrounds, change fonts and font colors, add images in specific places, etc. etc.  Everything you need is right there.
 
Yes, you can break up that background and use it on a section-by-section basis.
 
This site is a wonderful resource for learning CSS3:  http://www.w3schools.com/css/
 
 
 

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Sidian,

 

Long time no see.

 

Yes it can be done.

 

First, that site is using a single tiled background. Nothing particularly special there. You can do that within the Framework's settings.

 

The rest of it seems to be graphics, so you'll need to use plenty of images with transparencies.  That makes them look like they're hovering.  You'll also need to learn how to make transparencies within the CSS for non-graphic elements.  Check the bottom (footer) at www.epicurus.com.

 

The site you had me check seems to just have a very large branding image, then a form, heavily modified by CSS, then a grid layout with .png files with transparent backgrounds. Pretty easy to do, actually.  Shouldn't take more than an afternoon.

 

If you view the footer of epicurus.com with Firebug or Chrome's Inspection Tool, you can find the CSS used to implement backgrounds by settings.  You can also see what I mean by images with transparency in any of the 6 images there.

 

The triangle effect is strictly graphic in nature. It's not code. On your example site, in Firefox, right click and view background. You'll see the nature of the background used.

Share this post


Link to post
Share on other sites

Posted · Report post

Yup been using W3 a lot. Just learning the ropes so far.

 

So I set the hero to black using the code you provided and set all that stuff to transparent, and I believe the code is being accepted but it isn't showing up. I think there is a particular div I'm supposed to be hitting. I'd like to see a big black band that goes lengthwise across the screen. Checking with Firebug it looked like div class=content is maybe the one I need. So now I'm just trying to figure out how to target that div...then again it needs to be the specific one under .hero.

 

http://www.opensourcereligion.com/home/

Share this post


Link to post
Share on other sites

Posted · Report post

Ok now I pretty much got it! It's like this...

 

#hero div.texture {
  background-color:#000000;
 

I'm sure I'll run into some other issues but this is going pretty well.

Share this post


Link to post
Share on other sites

Posted · Report post

Try removing the word div (it's not necessary) from your code and leave .texture.

Share this post


Link to post
Share on other sites

Posted · Report post

All's well now?

Share this post


Link to post
Share on other sites

Posted · Report post

More or less. Can't figure out how to hide the darn margins around the .content-pad but I don't expect you guys to do all my CSS for me. :P I'll keep poking at it.

Share this post


Link to post
Share on other sites

Posted · Report post

Wonderful. Very useful advice there. Can't tell you how much I'm enjoying learning CSS right now.

Share this post


Link to post
Share on other sites

Posted · Report post

That's great.  I'll resolve this topic for now. If you have any other issues, feel free to open a new one at any time.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rob! Yes, it has been a while. :)

I'm happy to say that this time around, instead of simply asking for the codework, I'm making the journey of learning CSS myself.

 

Touche on the background. I had figured the sections were divs with interesting colors and BGs, but you are correct, one long repeating tile. So I suppose you could achieve the same effect by setting the background in pagelines similarly, and then telling all section backgrounds to be transparent? But then you have to fool with lining up the page BG with the section elements if my brain serves me correctly. That is one approach.

 

However I was kind of hoping I could use CSS to individually play with the BGs of each Pagelines Section. For instance I tried to do something like

.hero {
body {background-color:#b0c4de;}
}
 

My above code is probably all sorts of wrong, but I tried many permutations and couldn't get it going. I would just love to be able to use each section as a means of dividing up the page with different colors and patterns. This is another decent example: http://html.adobe.com/edge/code/ This one uses divs right? I want to do that. But also I need the effects I place on them to stretch across the screen...but perhaps my other questions are enough for now.

Share this post


Link to post
Share on other sites