Jump to content


Photo

Semi Content Areas- Full Transparant Page Canvas


Best Answer James B , 07 December 2012 - 05:57 AM

Hi there

 

Have you tried

 

 

#primary-nav {margin-bottom:20px;} 

You can move the sidebars out with negative margins.

 

Something like

 

 

 
#sidebar1 {margin-left:-50px;}
Go to the full post


  • Please log in to reply
5 replies to this topic

#1 maxquinn

maxquinn

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts
  • Framework Version:Pagelines Pro
  • Country: Country Flag

Posted 06 December 2012 - 01:04 PM

Hi,

 

I'm trying to create the design layed out in the image below:

http://www.broken-cu.../DesignTest.jpg

 

As you can see, I need main content areas to be semi transparant (which is fine), but then I need the spaces between them to be fully transparant.

 

What I've got so far is here: www.thirdside.co.uk/site/

 

I'm fairly confident with Platform Pro and can usually do most things, but I can't for the life of me work out how to define these sections separately in CSS. Is it possible?

 

I've seen people mention building the boxes into the background, but then they either won't scroll with the content, or the background won't be fixed in place (full screen).

 

Thanks! Max.



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 15626 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 06 December 2012 - 01:20 PM

Hi,

 

First things first please do not create duplicate topics, it only leads to confusion.

 

http://www.pagelines...nt-page-canvas/

 

The duplicate topic has been locked.

 

To make areas of your site separated but have a transparent background, will require quite a lot of custom CSS, I have given you an example below.

 

 

Now usually I would say to use the .content class for Branding but you have made some changes to the padding so when using the .content for branding it doesn't look quite right.

 

Branding:

 
#branding .texture {
background: rgba(600, 600, 600, 0.6);
}

Sidebar1 (on the left)

 

 

 
#sidebar1 {
background: rgba(600, 600, 600, 0.6);
}

 

 

 

SIdebar2 (on the right)

 
#sidebar2 {
background: rgba(600, 600, 600, 0.6);
}

So use these as examples for the other areas on your site. However, the menu and content area may be tricky due to your padding changes, you may also need to use margins on some areas.

 

Something like this would be much easier on PageLines Framework, have you not thought about upgrading ?



#3 maxquinn

maxquinn

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts
  • Framework Version:Pagelines Pro
  • Country: Country Flag

Posted 06 December 2012 - 02:38 PM

That's great, thanks Danny! I have thought about upgrading, but December's such a tight month I'm trying to wait untill new year when I have the funds.

 

Sorry about the duplicate topic too, completely unintentional I think it must have been lag in my internet somewhere.

 

As you can see it's well on it's way: http://www.thirdside.co.uk/site/

 

The only things I'm struggling with are:

 

1) Creating the space between the nav and the actual content area. I essentially need to move the whole page-main down 10px, but any CSS margins I apply to the top of page-main, maincontent etc etc seem to have no effect, and if I do it individually by sidebar, loop, sidebar then it doesn't actually create a gap but just increases the semi transparent area at the top of the sidebars, pushing their content down.

 

2) Is it possible to move the sidebars out left and right respectively so I can line it all up with the sides of the branding section? And likewise for the nav.

 

Thanks again!



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 07 December 2012 - 05:57 AM   Best Answer

Hi there

 

Have you tried

 

 

#primary-nav {margin-bottom:20px;} 

You can move the sidebars out with negative margins.

 

Something like

 

 

 
#sidebar1 {margin-left:-50px;}


#5 maxquinn

maxquinn

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts
  • Framework Version:Pagelines Pro
  • Country: Country Flag

Posted 10 December 2012 - 01:21 AM

Perfect thanks, not sure why I didn't think of putting the spacing under the nav rather than above the content!

 

As for the sidebars, neg margins wouldn't work but I've resolved it by actually removing the backing from the header image and include it within it itself graphically.

 

Final results here:

http://www.thirdside.co.uk/site

 

Thanks again.



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15626 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 December 2012 - 10:08 AM

Look great, nice job!