12 replies to this topic

[sidianmsjones]

So I'm learning CSS lately and I was just wondering, how feasible is it to pull of

Please Login or Register to see this Hidden Content

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

[Rob]

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

Please Login or Register to see this Hidden Content

.

 

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.

[sidianmsjones]

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

Please Login or Register to see this Hidden Content

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: 

Please Login or Register to see this Hidden Content

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.

[Rob]

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: 

Please Login or Register to see this Hidden Content

 

 

 

[sidianmsjones]

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.

 

Please Login or Register to see this Hidden Content

[sidianmsjones]

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

 

Please Login or Register to see this Hidden Content

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

[Rob]

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

[sidianmsjones]

ok

[Rob]

All's well now?

[sidianmsjones]

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. I'll keep poking at it.

[Rob]

You mean....

Please Login or Register to see this Hidden Content

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.

Please Login or Register to see this Hidden Content

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.

[sidianmsjones]

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

[Rob]

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.