dream genie
 
CMS and Website Builder
contact us
 
+44 (0)1392 202078
 
 
You are here: Home > Blog > Create turned page corners   Go Back

Create turned page corners

Posted: Friday, 10th December, 2010 at 7:47 AM | By: Administrator
Dec
10
 

Overview

Dreamgenie has some useful built in placeholders for enhancing your page layout. One set of layouts exists just inside the top and bottom of each page.

The placeholders are DIVS and one use for them is to add an image top and bottom of your page.

To create a page turned page corner positioned top-right of your page content heres one possible solution.

Two Columns version (controls right)

Add the following CSS to your Theme under Section 5 - Two Column Controls right.

/*******************************************/  
/* Setup the page corner                   */  
/*******************************************/  
 
.divPageBorderTopOuter2  
{  
display:block !important;  
background-image:url("/_images/page-corners.png") !important;  
margin-right:5px !important;  
background-color:transparent !important;  
}  
 
.column-inmiddle {  
border-top:none;  
border-left:none;  
border-right-color:gray;  
border-bottom-color:gray;  
 
/* adjust you are here upwards */  
padding-top:0px !important;  
}  
 
.divPageBorderTopInner2  
{  
width:584px !important;  
}  
 
/*******************************************/  
/* end page corner                         */  
/*******************************************/ 

One colum template version

The CSS required is slightly different as the page structure is different.

/*******************************************/  
/* Setup the page corner overrides         */  
/*******************************************/  
 
.divPageBorderTopOuter  
{  
display:block !important;  
background-image:url("/_images/page-corners.png") !important;  
margin-right:3px !important;  
background-color:transparent !important;  
background-position:top right;  
}  
 
.divContainer {  
border-top:none;  
border-left:none;  
border-right-color:gray;  
border-bottom-color:gray;  
 
/* adjust you are here upwards */  
padding-top:0px !important;  
}  
 
.divPageBorderTopInner  
{  
width:784px !important;  
height:28px;  
background-color:white;  
}  
 
.divBody  
{  
padding-top:0px !important  
}  
/*******************************************/  
/* end page corner                         */  
/*******************************************/ 


Ok, lets look at this... to be continued
 
Print Print


Visit the blog archive »

You are welcome to post a comment


To Verify You are Human!
Please enter the code above:
Post

Previous Comments

nick wrote:
25 October 2011 11:45

wow