• 0
Sign in to follow this  
Followers 0

How has @renderinnovations created full width elements?

Question

Posted · Report post

I was looking at the showcase and each site is clearly a PageLine site, except this one; http://www.pagelines.com/exhibit/render-innovations/ 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?

Share this post


Link to post
Share on other sites

13 answers to this question

  • 0

Posted · Report post

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. http://www.w3schools.com/tags/att_a_name.asp

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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 http://tinyurl.com/c3yws7r

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi John, Its simply an image, I have provided you with a link to the background image. http://www.renderinnovations.com/wp-content/uploads/2012/05/background91.png However, if you wish to add a background color/image to different section, simply do what you have done with the Branding section: [code]#branding .texture { background-color: #80CB00; }[/code] You can do the same with other sections, such as: [code]#nav .texture { CSS Here } #content .texture { CSS Here }[/code] Use Firebug or Chromes/Safari's web dev tool to find the other #ID's/Classes for the other selections. Hope this helps.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Danny, Here --> http://tinyurl.com/c3yws7r The boxes are under the feature-slider. (ignore the side-bar as that is going to be removed)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

It's possible to add a background behind the boxes in the content area. Please add this CSS to Custom Code > Custom CSS: [code]div.fboxes.fix {background-image: url('http://BACKGROUNDIMAGEURLHERE';}[/code] ^ You can customize how the background image behaves by adding more CSS attributes: http://www.w3schools.com/cssref/pr_background-image.asp (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.)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, Read this article on W3Schools, it has information on all background CSS including repeat. http://www.w3schools.com/cssref/pr_background-repeat.asp

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0