About the Design

Two grids have been used for the design: one of 12 columns (66px) and another one of 24 sub-columns (26px) with a glutter of 14px and a width of 946px (BBC – Visual Language Guidelines v1.0.6).

These parameters matched up perfectly with the dimensions of the golden ratio incorporated to the design. To respect the golden ratio and to better visualize the text, two líneas bases are used in some areas of the design, one of 14px and another one of 18px. Although it is not the most correct option, it is the one that best adapted to the idea.

About the Style – CSS

It has been divided into five files, which were imported in style.css, as shown in this code.

@import "style/css/reset.css";
@import "style/css/typography.css";
@import "style/css/layout.css";
@import "style/css/coda.css";
/*@import "style/css/diagnostic.css"; Just use for developing tests */

Reset.css

The one created by Eric Meyers, in its v1.0 | 20080212, has been used.

Typography.css

As mentioned above, the base line used for this text has 18px. The default font size has 12px.

The body will remain as follows:

body{font: 75%/1.5em Arial, Helvetica, sans-serif;}

James Whittaker has created an application under Adobe Aire that is quite useful when preparing base lines.

Colors used:

Darker: #000, Dark: #333, Midel-light: #666, Light: #999, Lighter: #FFF.
These colors have been used both for the fonts and the design.

Layout.css

As indicated by its name, the layout specifications can be found in this style.

Coda.css

The styled for the coda-slider.js script can be found in this style.

Diagnostic.css

It is a diagnosis tool created by Eric Meyers.

WordPress Codex WordPress Portfolio Concept

Top

12 Responses to “About the Design”

Carlos Cardoso said: 1
03-03-2009 at %I:%M %p
Víctor, en primer lugar, creo que esta plantilla es un excelente trabajo.
Dicho esto, quisiera pedir ayuda en los siguientes.
No tengo ninguna experiencia en wordpress, pero me encantaría tener una cartera similar a la demo, y pese a que ya han intentado muchas veces a aplicar la plantilla y hacer que se vea como la demo, no he logrado lo siguiente :(.
Por lo tanto, quisiera preguntarle si puede enviarme una copia de seguridad del contenido de la demo, por lo que puede importar a mi blog y, a continuación, personalizar con mis datos?
Quiero dar las gracias a la atención.
Gracias
Carlos Cardoso
Portugal
Victor, first of all, I think this template is an excellent job.
That said, I would ask for help in the following.
I have no experience in wordpress, but I would love to have a portfolio similar to the demo, and despite having already tried many times to apply the template and make it look like the demo, I haven’t achieved that :(.
I would therefore like to ask if you can send me a backup of the contents of the demo, so I can import it to my blog, and then customize with my data?
I would like to thank the attention.
Thanks
Carlos Cardoso
Portugal
arnold said: 2
17-03-2009 at %I:%M %p
Sir, I would like also to ask if you can send me a backup of the contents of the demo, so that I can import it customize with my data? i am having a hard time with theme..need it badly.
metacym said: 3
26-10-2009 at %I:%M %p
Hello, great theme. I would just like to know how to add pages to the nav bar php file?
Carl said: 4
27-11-2009 at %I:%M %p
Hi, love this theme. I have a problem that the css doesn’t get loaded. If I manually (ftp) overwrite the server-file with the original one, it works. Next refresh, it’s lost. The css is there, but it’s size has changed. I’ve no clue what it is, and I’ve never seen it before. HELP! (Please…)
Vale said: 5
18-12-2009 at %I:%M %p
hello!
yes, as metacym said, i’d like to know if there’s possible to add at least another page to the nav too.
waiting for your answer, bye!!
Faz said: 6
10-01-2010 at %I:%M %p
Hi Everyone.
First of all thanks to Victor for such a simple and elegant theme. It’s one of the few premium-like free portfolio WordPress themes I have found in a long time. The explanation and guides that come with it maybe be limited for fine tuning it, but is sufficient for the critical stuff.
If you are new to WP (like me) then you need to learn some more tweaks. Below is a list of the steps/things I did to adapt it. Maybe it works for your need too.
Setting the WORK Page & the Scrolling Showcase
—————————————–
To get this running you need to:
1) Activate this theme in WordPress
2) Have two categories of posts defined ( one called ‘Work’ and the second one called ‘Featured’)
3) Assign all posts that you want to appear in the WORK page with the ‘Work’ category
4) Once you do it, the Scrolling Showcase will appear
5) If there are multiple posts under the work category you can navigate back and forth.
6) To add pictures to your showcase : you need to first add them to the Media section in WP. Upload is quick and easy.
7) Copy the URL of the picture from its details page and paste it in the ‘Panel Image’ text box of the post. You can find it in the edit section of the post.
8) Remember, there are two different pictures needed with different sizes: One for the Showcase Panel and the second one for the images below the showcase (like an image list). They are different in sizes. If you use the same picture for both places, the system shrinks it to fit for the latter. If you leave it empty it will show you a text description provided that you gave one.
9) That should be sufficient to get you started :)
Adding a New Content to the Nav bar
——————————-
To add a new page to the Nav bar you need to:
1) Open the header.php
2) Find the tag that defines Navigation
3) You will see a list of the items available in the nav bar and the links to which they direct to
4) Copy one of them and modify the contents to match you needs. E.g the name and the page to which it should direct to. Sequence of the list defines where in the Nav they appear
5) Remember: adding or removing contents in the nav bar should be synced with the hyperlinks provided in the footer (since they are the same – but they should be done in different places). This is similar to the above changes but only on the footer.php in the foot navigation section.
Thats it !
If any of you have any more additions please post so that the rest of us can benefit.
Happy blogging !
Cheers,
Faz
Chris Tomalty said: 7
27-01-2010 at %I:%M %p
Thanks Faz!
The only other question is about a problem I’m having with when you click the icons to get to the posts (see pic below)
http://press.modelun.ca/wp-content/uploads/2010/01/Screenshot.png
This is a spectacular theme with this one caveat…
I’m doing this for my Model United Nations program at school, and it would be great if I could have it up in time for Feb2.
Magdalena said: 8
11-02-2010 at %I:%M %p
Victor, gracias! Me encanta lo que has hecho!
Quiero armar mi portfolio pero soy nueva en wp y tengo algunas dudas:
Cómo cambio la imagen en el header?
Cuando hago la página Contact, previsualiza bien la parte de direcciones pero no el formulario, y al aplicar los cambios, se va el formato o desaparece y me dice: The requested URL /pruebaWP/contact-us was not found on this server.
Algo similar sucede cuando hago la página About, me dice: Forbidden
You don’t have permission to access /pruebaWP/about/ on this server.
Cómo lo soluciono?
Estoy haciendo el portfolio en una subcarpeta de mi dominio, hasta tanto tenerlo listo y cambiarlo, esto puede estar afectando?
Desde ya muchas gracias por tu respuesta!
Saludos
Magdalena.
francesco said: 9
15-03-2010 at %I:%M %p
Hi i’m new to WP, i’m using this theme but i’m not able to navigate between sections: About, Contact.
The requested URL…was not found on this server
What can i do?
Coldie said: 10
30-03-2010 at %I:%M %p
I am also new and wondering how to get to ABOUT and CONTACT
claudia said: 11
17-04-2010 at %I:%M %p
hi victor,
muchas gracias for this wonderful theme. i try to apply it to my website as it is the first i found on the web that suits what i want my website to look like.
i’ve read the tutorial and figured some things out. but still i need a bit help. could we email? is that possible?
all the best,
claudia
JERRY said: 12
29-08-2010 at %I:%M %p
great theme!Thanks for theme.