CSS | Drafie's Design

New site launched – AtelierIF

Mar 042016

Posted by Ciprian on 04/03/2016 Just Talk's Tagged with: architects, CSS, jQuery, qTip2, Suffusion, WPPA+ 4 Responses »

Last days I finished my sister’s site – AtelierIF. Usually I’m not bragging when I finish a website, but this time worth. My sister and her husband are architects, so I had a hard mission – to respect at the level of pixel each detail from design.

But I feel like I accomplish this task – the site is looking exactly as in images sent to me. Of course is based on Suffusion, but with everything customized at maximum and beyond… Not talking only about CSS changes which are visible from top to bottom, but also I’ve implemented qTip² jQuery plugin, the portfolio is also showed by javascript. The images are showed with WPPA+, a great gallery plugin which was perfectly aligned with the graphical desires of my sister, but also let me to upload hundreds of pictures in an easy way.

Finally resulted a great looking site, which works in all modern browsers, including IE. Even on mobiles is scaled decently, at least in landscape position. As speed, is moving very neat, at least if you are in Romania and not in US (#BernieSanders).

Equal Columns in Suffusion

04/05/2014
Posted by Ciprian on 04/05/2014
No Responses
How-To's
Tagged with: CSS, Equal Columns, javascript, One True Layout, Suffusion

Usually the sidebars don’t have the same height as the content. Sidebars and main column are div’s and the height of a div is the sum of heights of its content.

3 & 1/2 Easy Steps for creating a child theme of Suffusion

01/11/2013
Posted by Ciprian on 01/11/2013
13 Responses
How-To's
Tagged with: child theme, credit link, CSS, functions, javascript, JigoShop, Meteor Slides, sitemap, stylesheet, Suffusion, Superfish, template, translation

3 steps and a half for making a child theme of Suffusion in 3 minutes. Then will have enough time to read more about child themes and to see a lot of useful examples.

Horizontal Dropline Menu in Suffusion

29/10/2013
Posted by Ciprian on 29/10/2013
2 Responses
How-To's
Tagged with: CSS, jQuery, Suffusion, Superfish

The steps for adding an horizontal dropline menu in Suffusion. The first level of submenus need to drop horizontal at hover on their parents, but the next level need to drop down as usual. This can be done with the help of Superfish jQuery plugin.

Change header as scrolling the page

06/10/2013
Posted by Ciprian on 06/10/2013
19 Responses
How-To's
Tagged with: CSS, fixed header, fixed navigation bar, javascript, jQuery, scrolling, Suffusion

An easy to understand article about how to use jQuery and CSS for obtaining a header which change it’s look when the visitor scroll down on the page. The header shrink to make room for only the navigation bar, which bar will contain a smaller version of logo. Pretty much as you seen on Facebook, and now on Drafie’s Design too.

Full Background Image in Suffusion

03/07/2013
Posted by Ciprian on 03/07/2013
4 Responses
How-To's
Tagged with: CSS, CSS3, Full Background Image, HTML, Suffusion

Sometimes we need to use an image as background of site, but the image have some dimensions and it can’t fill the entire browser window, and it won’t be adjusted at any screen

How to have a fixed header in Suffusion Theme

27/02/2013
Posted by Ciprian on 27/02/2013
10 Responses
How-To's
Tagged with: CSS, fixed header, Suffusion

If you wish to fix only the Navigation Bar Below Header and change the header AFTER the user scroll down the page, check also this post: https://drafie-design.nl/change-header-as-scrolling-the-page/. I changed the header