Un poco sobre el diseño

En el diseño se han utilizado dos retículas (grids), una de 12 columnas (66px) y otra de 24 subcolumas (26px) con un glutter de 14px, siendo el ancho de 946px (BBC – Visual Language Guidelines v1.0.6).

Estos parámetros casaban perfectamente con las dimensiones de la proporción áurea que se quería incorporar al diseño. Para respetar la proporción áurea y para tener una mejor visualización del texto se utilizan dos líneas bases en algunas áreas del diseño, una de 14px y otra de 18px, no es lo más correcto pero es la opción que mejor se adecuaba a la idea.

Un poco sobre el estilo – CSS

Se ha dividido en cinco archivos, importándolos en style.css, según se muestra en este código.

@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

Se ha utilizado el creado por Eric Meyers, en su versión v1.0 | 20080212.

Typography.css

Como se mencionaba al principio de este artículo la línea base utilizada para el texto es de 18px y el tamaño de la fuente por defecto es de 12px.

El body quedará de la siguiente manera:

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

James Whittaker ha creado una aplicación bajo Adobe Aire que resulta de ayuda a la hora de crear líneas base.

Colores utilizados:

Darker: #000, Dark: #333, Midel-light: #666, Light: #999, Lighter: #FFF.
Estos colores han sido utilizados tanto para las fuentes como para el diseño.

Layout.css

En este estilo, como indica su nombre, se encuentran las especificaciones del layout.

Coda.css

Los estilos del script coda-slider.js los localizamos en este estilo.

Diagnostic.css

Es una herramienta de diagnostico creada por Eric Meyers, podéis ver la demo aquí.

WordPress Codex WordPress Portfolio Concept

Top

12 Responses to “Un poco sobre el diseño”

Carlos Cardoso said: 1
03-03-2009 at %H:%M 12Tue, 03 Mar 2009 12:27:24 +000024.
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 %H:%M 08Tue, 17 Mar 2009 08:18:02 +000002.
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 %H:%M 12Mon, 26 Oct 2009 12:13:00 +000000.
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 %H:%M 04Fri, 27 Nov 2009 16:27:51 +000051.
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 %H:%M 04Fri, 18 Dec 2009 16:52:03 +000003.
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 %H:%M 05Sun, 10 Jan 2010 17:02:22 +000022.
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 %H:%M 02Wed, 27 Jan 2010 02:32:15 +000015.
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 %H:%M 03Thu, 11 Feb 2010 15:41:39 +000039.
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 %H:%M 03Mon, 15 Mar 2010 15:38:41 +000041.
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 %H:%M 06Tue, 30 Mar 2010 18:57:35 +000035.
I am also new and wondering how to get to ABOUT and CONTACT
claudia said: 11
17-04-2010 at %H:%M 10Sat, 17 Apr 2010 10:21:39 +000039.
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 %H:%M 11Sun, 29 Aug 2010 11:35:19 +000019.
great theme!Thanks for theme.