About This Theme & How The Did It

[nondualit 1]

Hi,

 

Im wondering how to make the square on the main site like the did on this one http://www.acconet.nl/

They made the header en the content differen than the footer. It looks really nice but have no idea how to make this

Any help?

[Danny+ 1,327]

Hi,

 

The site you have linked is not loading for me ?

 

You can use the web developer tools that are now bundled in modern browsers or use Firebug, inspect the website and you view the CSS used for both the header and footer.

[wonderwoman 0]

near as I can tell (using firebug), they're using images to create the effect.

You're right - nice looking site :-)

[James B 436]

It looks like this has been done with css, using the border-radius and box-shadow commands on the footer.

 

The page-canvas has shadow applied and i would imagine this is using the 'content-shadow' option in the color control tab (this only works if the site is set to fixed width sections'. In the color control tab you can also set the colors for the page/content areas to be different from the background.

 

Hope this helps :-)

[nondualit 1]

It looks like this has been done with css, using the border-radius and box-shadow commands on the footer.

 

The page-canvas has shadow applied and i would imagine this is using the 'content-shadow' option in the color control tab (this only works if the site is set to fixed width sections'. In the color control tab you can also set the colors for the page/content areas to be different from the background.

 

Hope this helps :-)

 

James thanks for your help! you guided me in the right direction.

 

I reproduced the footer on my website http://www.nondualit.nl and im happy with it. But sill have a minor issue, when looking at this website on the IPAD of mobiel the footer doesnt adapt the same way as on computer. The footer get a little bit bigger than the body, not that bigger but i would like it to adapt as it was on the computer screen.

 

the code im using for the footer

 

 

#footer .texture {

 background: #dddddd;

 margin: 0 4px 10px;

 display: block;

 border-radius: 0 0 15px 15px;

 -webkit-box-shadow: inset 0 12px 8px -8px rgba(0, 0, 0, 1),inset 0 0 20px rgba(0, 0, 0, 0.3),0 1px 5px rgba(0, 0, 0, 0.5);

  -moz-box-shadow: inset 0 12px 8px -8px rgba(0,0,0,1),inset 0 0 20px rgba(0,0,0,0.3),0 1px 5px rgba(0,0,0,0.5);

box-shadow: inset 0 12px 8px -8px rgba(0, 0, 0, 1),inset 0 0 20px rgba(0, 0, 0, 0.3),0 1px 5px rgba(0, 0, 0, 0.5);

}

[Danny+ 1,327]

Can you provide a screenshot of this issue please and also what are your layout settings ?

[nondualit 1]

 

setting are

- Responsive with Pixel Width

i tested Responsive with % Width but than the footer becomes really small (maybe an idea to use this an alter the footer size?) dont know is this is the right way to do it

- Fixed-Width Mode

[Rob 547]

The reason for this is simple.  You'll see it in the CSS copied above, which shows px dimensions applied to the curved corners and particularly, to margins.  Since responsive design needs either em or percentages to function properly, those variables will tend to throw-off the fully responsive nature of the section.  I suspect it was difficult to combine the curved corners with a percentage or em width margin, as this is a highly skilled designer.

 

Still, his design didn't break the mobile view, so in essence, it worked. The amount of margin effect that the footer indent would have shown on a mobile device would have either been quite miniscule or too grand for a good visual effect.  I think the key is, if you're trying to emulate or replicate, is to just make sure that the footer doesn't get so wide that it causes the mobile browser to require adjustment to see the full width (scrolling side-to-side).

 

Hope this helps!

Happy Holidays!

[nondualit 1]

The reason for this is simple.  You'll see it in the CSS copied above, which shows px dimensions applied to the curved corners and particularly, to margins.  Since responsive design needs either em or percentages to function properly, those variables will tend to throw-off the fully responsive nature of the section.  I suspect it was difficult to combine the curved corners with a percentage or em width margin, as this is a highly skilled designer.

 

Still, his design didn't break the mobile view, so in essence, it worked. The amount of margin effect that the footer indent would have shown on a mobile device would have either been quite miniscule or too grand for a good visual effect.  I think the key is, if you're trying to emulate or replicate, is to just make sure that the footer doesn't get so wide that it causes the mobile browser to require adjustment to see the full width (scrolling side-to-side).

 

Hope this helps!

Happy Holidays!

 

HI Rob,

 

how do i do this?  "make sure that the footer doesn't get so wide that it causes the mobile browser"

 

im sure there is a option i can give to make this happen, i cant find out how.

 

I tested with 1em & i get the same effect but still i little big.. is not a big problem. But i know there is a solution.

[Rob 547]

We are not permitted to provide CSS solutions, and since that designer is also one of our pro developers, my best recommendation would be to hire him as he's going to know exactly how he did that, and why the condition exists.  He'd be best suited to resolve it as well.

 

That said, he has this in his CSS for the section:

margin: 0 4px 10px;

Now, if I change it to:

margin: 0 10px 10px 4px ;

That would eliminate an extra bit of potentially erroneous space on the right side and could eliminate the gap causing the misalignment in mobile devices.

 

It falls under #sb_footcols .texture

 

That said,  I cannot test it on a mobile device, so I've no idea, which is another reason why you'd probably be best hiring the developer as a pro.  http://www.pagelines.com/pros

 

Again, px is usually not responsive, so I'm not sure if this is 'the' solution, and it's admittedly a huge guess on my part.