Dupa cum se poate observa, toate link-urile (aproape toate) sunt cu animatie la mouse-ul peste, se schimba culoarea gradat, meniu de navigare se lasa cativa pixeli in jos, in sidebar am facut cu taburi la categorii, arhiva si link-uri utile, link-urile se misca 20 de pixeli spre dreapta cand mergeti cu mouse-ul peste, la fel si in footer, unde am decis sa las structura de la vechea tema, doar am modificat aranjarea.

Tagurile nu le-am mai lasat jos, le gasiti in sidebar. Am pus si Top commentatori, asa ca cei mai vorbareti de aici vor avea link dofolow, toate link-urile din comentarii vor avea si ele dofolow.

Am sa incep in a posta din ce in ce mai multe articole, insa schimb un pic nisha, am sa postez foarte mult despre wordpress, coding, noutatii, si personale(dar mai rar), sper sa va placa noua tema, eu unul sunt foarte incantat, mai am de modificat la ea, dar o voi face pe parcurs.

Am pus foarte mult CSS3, de aceea nu se va devea calumea in multe browsere, la IE6 am renuntat, asa ca acolo este dezastru, dar daca il folositi va meritati soarta , in celelalte browsere ca IE7,8 am sa rezolv din probleme zilele ce urmeaza.

Astazi sa lansat/se lanseaza Abode Creative Suite 5, sunt foarte nerabdator sa obtin un pachet CS5, sper cat mai curand sa se faca un upgrade de la CS4 la CS5 unde lucrez, noile facilitati in Photoshop sunt … Wow.

Cateva din inbunatatiri la photshop sunt:

• Content Aware scale – cel mai bun feature CS5
• Pupet Warp
• Mini bridge
• Inbunatatire la Refine edge, cu brush pentru anumite zone.
• Un 3D inbunatatit
• Setari default manuale dupa preferintele fiecaruia in panoul de Layer Styles
• Randare pe 64 bits mult mai buna, mai rapida.
• Multe altele

Cel mai bine urmariti si filmuletul de mai jos pentru o parte dintre ele.

Atentie !, are cam 45 de minute.

Links:
Creative Suite 5 Design Premium
Lansarea

Pacat totusi că scrie așa rar (eu vorbesc ) ) .

Dacă folosiți wordpress 2.9, pentru a activa Post thumbnail, în tema voastră, căutați functions.php, adăugați codul următor înainte de tagul de închidere php “>” :

if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' );

Pentru a obține prima imagine (cod necesar pentru a treia metodă) din articol și a o afișa este necesar următorul cod tot in funcțions.php din temă:

function prima_imagine() {
  global $post, $posts;
  $bloginfo = get_bloginfo('template_url');
  $prima_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $prima_img = $matches [1] [0];

  if(empty($prima_img)){ //Adaugă o imagine default pentru articole care nu au nici un fel de imagine.
    $prima_img = $bloginfo.'/images/default-image.jpg'; //calea către imagine, folderul images din tema
  }
  return $prima_img;
}

În cazul în care aveți un alt nume la custom field, redenumiți ‘thumb’ peste tot din codul urmatorul cu numele custom filed-ului care îl aveți. De ținut minte că TimThumb nu merge decât cu imagini găzduite la voi pe server, imagini locale, nu merge cu imagini găzduite pe alte situri sau hosturi de imagini.

Codul cu TimThumb:

<?php $thumb = get_post_meta($post->ID, 'thumb', true); ?> <!--// Încărcăm custom field-ul, trebuie încarcat primul pentru verificarea ulterioară -->

<?php if ((function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) { ?>
 <!--// Verifică dacă există funcția has_post_thumbnail, și dacă are atașat un thumbnail, valabil pentru WordPress 2.9 + -->

	<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
	<?php the_post_thumbnail('thumbnail'); ?><!--// Dacă are imagine, o afișează -->
	</a>

<?php } elseif ($thumb != '') { ?> <!--// Dacă nu are imagine, caută dacă este încărcat custom field-ul thumb -->

	<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
	<img src="<?php bloginfo('template_url'); ?>/timthumb.php?src=<?php echo($thumb); ?>&amp;h=150&amp;w=150&amp;zc=1&amp;q=80" alt="<?php the_title_attribute(); ?>" />
	</a><!--// Dacă există custom field thumb îl afișează -->

<?php } else { ?> <!--// și dacă nu este nici una de mai sus, caută prima imagine din articol, si o afișează -->

	<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
	<img src="<?php bloginfo('template_url'); ?>/timthumb.php?src=<?php echo prima_imagine() ?>&amp;h=150&amp;w=150&amp;zc=1&amp;q=80" alt="<?php the_title_attribute(); ?>" />
	</a><!--// afișează prima imagine din articol, dacă nu are una, afișează o imagine default. -->

<?php } ?>

Codul fără TimThumb:

<?php $thumb = get_post_meta($post->ID, 'thumb', true); ?> <!--// Încărcăm custom field-ul, trebuie încarcat primul pentru verificarea ulterioară -->

<?php if ((function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) { ?>
 <!--// Verifică dacă există funcția has_post_thumbnail, și dacă are atașat un thumbnail, valabil pentru WordPress 2.9 + -->

	<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
	<?php the_post_thumbnail('thumbnail'); ?><!--// Dacă are imagine, o afișează -->
	</a>

<?php } elseif ($thumb != '') { ?> <!--// Dacă nu are imagine, caută dacă este încărcat custom field-ul thumb -->

	<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
	<img src="<?php echo($thumb); ?>" alt="<?php the_title_attribute(); ?>" />
	</a><!--// Dacă există custom field thumb îl afișează -->

<?php } else { ?> <!--// și dacă nu este nici una de mai sus, caută prima imagine din articol, si o afișează -->

	<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
	<img src="<?php echo prima_imagine() ?>" alt="<?php the_title_attribute(); ?>" />
	</a><!--// afișează prima imagine din articol, dacă nu are una, afișează o imagine default. -->

<?php } ?>

Codul este compatibil cu versiunile mai vechi de wordpress, pentru cei care folosesc custom fields, și iată cum puteți rămâne cu tema pe care o aveți acum pe versiuni de wordpress mai vechi, si in cazul unui update, puteți folosi noua metodă de thumbnails din wordpress 2.9 fară să fiți nevoiți a modifica vechiile articole.
Baftă …

Am pregatit o mică listă de site-uri pentru webdesign și design pentru wordpress, site-uri cu tutoriale și resurse de design teme wordpress plus codarea lor, sunt 12 site-uri pe care le urmăresc de o perioadă și care mi-au fost de enorm ajutor în crearea temelor de până acum.

Am câteva teme nelansate, dar până nu sunt 100% sigur că sunt ok nici nu am să o fac, în plus, am încercat să aduc ceva unic la ele, nu prea am ce însă, mai tot este facut deja, ce rost mai are să ‘reinventez roata’, le voi lansa în curând cu o pagină de opțiuni.

WPShout.com

WPShout i-am descoperit de puțin timp, dar deja am folosit din trucurile lor, au mai multe tutoriale de wordpress, cât și articole cu resurse(inspirații).

www.wpshout.com

Noupe.com

Site-ul acesta îl am în bookmarks de peste un an, însă nu i-am dat importanța care trebuia, aici găsiți o cantitate foarte mare de resurse si tutoriale mai de toate felurile, pot spune că de la ei am găsit mai multe hack-uri de css pe când eram la început.

www.noupe.com

Web Designer Wall.com

Cu un design excelent WebDesignerWall are și cele mai explicative tutoriale pentru wordpress, css și Illustrator, resursele sunt excelente ca și majoritatea articolelor, vă recomand acest site dacă vreți să învățați câte ceva despre webdesign ce sigur veți reține.

www.webdesignerwall.com

Six Revisions.com

Câteva tutoriale bune pentru crearea layout-urilor plus codarea lor pentru wordpress, mai conține si articole de resurse, stiri pentru web developers.

www.sixrevisions.com

Net.Tutsplus.com

Cred că majoritatea știți siturile tuts, rețeaua lor se întinde de la photoshop la after effects, illustrator, flash, și mai noul photo.tuts, sunt cunoscuți pentru tutorialele explicative atât text cât și video, un ‘Must Have’ pentru bookmark-urile voastre.

www.net.tutsplus.com

Rețeaua Envato

Web Design Ledger.com

Mai multe tutoriale, freebies, inspirații, unele le găsiți și prin alte parți dar aici sunt explicate un pic altfel, neapărat să vizitați categoria de tutoriale, sunt câteva superbe, multe retro, astea sunt la modă acum.

www.webdesignledger.com

Blog Themeforest.net

Dacă vreți să creați teme wordpress, trebuie neapărat să vizitați categoria wordpress de pe blogul Themeforest.net, tutoriale video despre codare cât și tutoriale php plus multe altele, a ‘Must Have’ , și acest site face parte din reteaua Envato menționată mai sus.

In The Woods

Smashing Magazine.com

Cel mai cunoscut site despre webdesign, freebies, inspirații, tutoriale și trucuri wordpress și/sau css/php/html/Photoshop/Fotografie, showcase design-uri, recunosc că sunt abonat la RSS lor, primesc în google reader fiecare articol adăugat de ei.

www.Smashing Magazine.com

Cats Who Code.com

Un alt side despre codare/webdesign wordpress și nu numai, chiar îmi place numele domeniului, din câte am citit pe acolo au și un român care mai scrie articole, articole excelente chiar, îl am în bookmarks de maxim o săptămână, o să îmi fac timp pentru o vizită prelungită la ei.

www.Catswhocode.com

Social Cms Buzz.com

Aici sunt o gramadă de teme wordpress, anunțuri despre lansări de diferite situri, foarte bune pentru inspirații, pagina se încarcă cam greu la ei, asteptați un pic (max 5 sec), pe lângă wordpress mai gasiți și pentru alte CMS-uri.

www.Socialcmsbuzz.com

Wphacks.com

Totul despre și pentru WordPress, recunosc că accesez site-ul de fiecare dată când am nevoie de un cod, am o problemă, sau am nevoie de un hack, sau pur și simplu pentru a mai memora câte ceva, pe lângă codex.wordpress.org cred ca este cel mai valoros site de resurse codare/teme/plugin-uri wordpress.

www.WPhacks.com

CSS-Tricks.com

Și cel la care sunt abonat la RSS/Twitter, am cont la el pentru a ușura comentarile, și am urmarit TOATE video-urile, nu este nimeni altul ca Chris Coyer și cu al lui CSS tricks, tutoriale pentru codarea temelor wordpress, trucuri css, si multe altele, personal de la el am învațat enorm de mult, Thanks Chris.

www.CSS-tricks.com

Astea sunt doar cele mai bune care mi se par mie, din lista lungă de site-uri pe care o am, un bookmark de câteva sute, probabil mai sunt multe altele, dar eu zic că este arhisuficient, cel putin pentru mine.

Dar țin să vă întreb, voi cam ce iconițe ați pune la voi pe site ?, înafară de twitter și facebook, astea sunt deja la ordinea zilei, mă refer la digg, delicius, technorati, stumbleupon, etc….

Honda Insight – Let It Shine from Honda on Vimeo .

Pentru incepatori in css si html, am sa scriu o mica modalitate de image replacement buna pentru SEO si in acelasi timp si cu link, este arhi cunoscuta dar vad ca tot apar situri fara, nu trebuie sa puneti tag de img cu html, doar un link si h1.

codul html ar trebui sa arate cam asa, dar cu mici modificari ale voastre, cum ar fi clasa:

<h1>
<a class="logo-tema" title="grafiko.ro" href="/">Grafiko.ro</a>
</h1>

Binenteles cu link-urile voastre, titlurile si text, doar am pus demostrativ, defapt cam asa am si eu la logo, un a href cu o clasa de logo infasurat intrun h1, asta doar pentru logo, puteti folosi si la butoane s-au ce mai doriti, dar nu infasurat in h1, probabil va fi in

<li>

sau div, acum urmeaza css-ul, il puteti pune inainte de intre tagurile

<style type="text/css" media="screen"> codul css </style>

sau direct in fisierul css.

Pentru css aveti codul cam asa:

h1 a.logo-tema {
     background:url(./logo.png) no-repeat left top;
     /*Calea catre imaginea voastra*/
     width:218px;/*lungimea in pixeli*/
     height:71px;/*inaltimea in pixeli*/
     display:block;/*pentru a face toata imaginea click-abila*/
     text-indent:-9999px;/*mutarea textului de
      pe imagine in afara spatiului vizual*/
     overflow:hidden;/*sa arate outline-ul cat imaginea,
     se vede dupa ce ati dat click.*/
}

Ar trebui sa va arate ceva de genul acesta
Grafiko.ro
foarte usor si accesibil SEO in acelasi timp.