Jump to content
Sign in to follow this  
nondualit

About This Theme & How The Did It

Recommended Posts

nondualit    1
nondualit

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?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
wonderwoman    0
wonderwoman

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

You're right - nice looking site :-)

Share this post


Link to post
Share on other sites
James B    436
James B

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 :-)

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
nondualit    1
nondualit
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);
}

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nondualit    1
nondualit

Capture.png

 

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

Share this post


Link to post
Share on other sites
Rob    547
Rob

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!

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


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

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

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  

×