Jump to content


Photo
- - - - -

How has @renderinnovations created full width elements?


  • Please log in to reply
13 replies to this topic

#1 johndb

johndb

    Advanced Member

  • Members

  • 54 posts

Posted 13 June 2012 - 12:34 PM

I was looking at the showcase and each site is clearly a PageLine site, except this one;

Please Login or Register to see this Hidden Content

I want to know how @renderinnovations has placed so many screen width elements (backgrounds, dividers, images etc) on the home page? Is there any tutorial on this method?

#2 Danny

Danny

    Is Awesome!

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

Posted 13 June 2012 - 12:43 PM

Hi John, Its basically all one page and the menu links have been set so that when you click on them they go to a specific section on the page. See here for more details.

Please Login or Register to see this Hidden Content



#3 johndb

johndb

    Advanced Member

  • Members

  • 54 posts

Posted 14 June 2012 - 02:13 PM

I understand how the menu is set, but I'm asking about how it has 4 different background colours/images. For example; the blue ribbon for "our services". These different colours really break up the site nicely but I've got no idea how it's done.

#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 14 June 2012 - 08:06 PM

The site designer should answer your replies as he's the one who created the site. You should contact him via his site. It is a busy page with lots of elements and I suspect several of them have been cloned on the page, though I cannot be sure of that. I can say that the PageLines Store has many sections that could be used like Highlights, Banners, SoapBoxes, Boxes, etc. Add enough to your front page and it too will be a rather busy place.

#5 johndb

johndb

    Advanced Member

  • Members

  • 54 posts

Posted 15 June 2012 - 11:01 AM

Let's be honest rangelone, you don't know how they've done it ;-) I'm not asking about sections, I'm asking about the background image(s). I found out that they simply used a full length background image and then placed all the site sections to fit the background image. I though they had found out how to add full width background images to each section. Which is what I want to do. Like I've done with solid colour in my header here

Please Login or Register to see this Hidden Content



#6 Danny

Danny

    Is Awesome!

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

Posted 15 June 2012 - 11:08 AM

Hi John,

Its simply an image, I have provided you with a link to the background image.

Please Login or Register to see this Hidden Content



However, if you wish to add a background color/image to different section, simply do what you have done with the Branding section:

Please Login or Register to see this Hidden Content


You can do the same with other sections, such as:

Please Login or Register to see this Hidden Content


Use Firebug or Chromes/Safari's web dev tool to find the other #ID's/Classes for the other selections.

Hope this helps.

#7 johndb

johndb

    Advanced Member

  • Members

  • 54 posts

Posted 15 June 2012 - 11:34 AM

Is there any way to add a full width background to a PageLines section such as boxes? My boxes are inside the content (#content) part of the template. My idea is to have different full width backgrounds for different PL sections within the content area of the template.

#8 Danny

Danny

    Is Awesome!

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

Posted 15 June 2012 - 11:37 AM

Hi John, If the section is part of the content area, then no its not possible I don't think unfortunately. However, if you provide a link to the page where the box is in the content area and I will take a closer look.

#9 johndb

johndb

    Advanced Member

  • Members

  • 54 posts

Posted 15 June 2012 - 12:40 PM

Hi Danny, Here -->

Please Login or Register to see this Hidden Content

The boxes are under the feature-slider. (ignore the side-bar as that is going to be removed)

#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 15 June 2012 - 03:58 PM

It's possible to add a background behind the boxes in the content area. Please add this CSS to Custom Code > Custom CSS:

Please Login or Register to see this Hidden Content


^ You can customize how the background image behaves by adding more CSS attributes:

Please Login or Register to see this Hidden Content

(Look at the left side menu underneath the category "background" for the other attributes. For example, if you want the background image to repeat, look at the "background-repeat" attribute.)

#11 johndb

johndb

    Advanced Member

  • Members

  • 54 posts

Posted 16 June 2012 - 11:22 PM

Hi Catrina, Will this method allow me to repeat the background image across the whole screen (width) or will it just fill the content area?

#12 Danny

Danny

    Is Awesome!

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

Posted 17 June 2012 - 08:59 AM

Hi, Read this article on W3Schools, it has information on all background CSS including repeat.

Please Login or Register to see this Hidden Content



#13 johndb

johndb

    Advanced Member

  • Members

  • 54 posts

Posted 18 June 2012 - 12:50 PM

Hi Danny, Can a background for a PL-section inside the PL-content area span the entire screen? By this I mean, overlay the content background AND extent beyond, to the edge of the screen, overlaying the theme background as well. My query is directly related to the PageLines theme and WP, and not just CSS.

#14 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 18 June 2012 - 03:35 PM

I might be able to be done, but again, would most likely be custom CSS code. You can try to play around with z-indexes and such.