Jump to content
Sign in to follow this  
johndb

How has @renderinnovations created full width elements?

Recommended Posts

johndb    1
johndb

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
Danny    1,327
Danny
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

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
johndb    1
johndb
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
Rob    547
Rob
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.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
johndb    1
johndb
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
Danny    1,327
Danny
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.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
johndb    1
johndb
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
Danny    1,327
Danny
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.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
johndb    1
johndb
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
catrina    103
catrina
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.)

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
johndb    1
johndb
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
Danny    1,327
Danny
Hi, Read this article on W3Schools, it has information on all background CSS including repeat. http://www.w3schools.com/cssref/pr_background-repeat.asp

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
johndb    1
johndb
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
Jenny    33
Jenny
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.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

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  

×