Tag Archives: web development

Learning Thematic

At the moment i was designing a new themes for my wife, but it is still not finished yet because i’m not click with the final result, i want to change it again if i still felt awry with the design. So i wont give screen shot of the site in this post.

Awry
Pic by papadont

What i want to tell u in the process is, i was amaze this couple of week, i learn a lot. In the process of re-designing the site I use Thematic Theme Framework from Ian Stewart for the based framework, using child themes to create new themes, same as i did with my site. I was amaze how easy it is to create child themes with thematic, i use Thematic before on this site a couple of month a go but didn’t quite grasp yet the full feature of Thematic, i was really lazy back then :) boy do i miss a lot of things because of this laziness.

The first thing that help me the most in the process is Thematic provide me with 960 grid system background template (12 column 18px height) to help me change layout, using it as the background on the body (just un-comment it) i could easily move within the grid system. But the template that was provided is the 12 column, i prefer the 16 columns, so i create a new background template with 16 column with 18 pixel high based on the 960 Grid System, here’s the template if u want to use it.

Other things that help me also are guide on adding and customizing page template on child themes in Ian’s blog. The forum also filled with helpful people, just be sure to post there politely :)

Oh yeah in case u want to add Home link to the navigation bar, just add this code to your functions.php in your child themes folder, this is the first thing i look in the forum, the newbie code to add home in your nav bar :P

function nav_menu() {
	$menu = '<div id="menu"><ul>';
	$menu .= str_replace( array( "r", "n", "t" ), '', wp_list_pages('include=24,27,28&title_li=&sort_column=menu_order&echo=0') );
	$menu .= "</ul></div>n";
	echo $menu;
} 
 
add_filter( 'wp_page_menu', 'nav_menu' );

There are others beside home that i want to add in the navigational bar, one of them are rss icon, feed by email and search bar. The current code below is one of the way to add all of them and adding favicon before the head tag and also adding google analitycs code before the close of body tag

<?php
function childtheme_favicon() { ?>
    <link rel="shortcut icon" href="<?php echo bloginfo('stylesheet_directory') ?>/images/favicon.ico">
<?php }
add_action('wp_head', 'childtheme_favicon');
 
function home_menu() {
    $menu = '<div class="menu"><ul>';
    if ( is_home() ) {
        $menu .= '<li class="current_page_item"><a href="';
    }
    else {
         $menu .= '<li><a href="';
    }
    $menu .= get_option('home') . '/" title="Home">Home</li>';
    $menu .= str_replace( array( "r", "n", "t" ), '', wp_list_pages('title_li=&sort_column=menu_order&echo=0') );
    $menu .= 	'<li><div class="clear" id="rss-feed"> 
					<a href="http://feeds.feedburner.com/XXXX" class="rss">RSS</a>
					<a href="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=XXXX&amp;loc=en_US" class="email">Email Updates</a>
				</div></li>';
    $menu .= '<li><form action="'.get_option('home').'" method="get" id="searchform">
					<div class="">
						<input type="text" tabindex="1" size="20" value="" name="s" id="s"/>
						<input type="submit" tabindex="2" value="Search" name="searchsubmit" id="searchsubmit"/>
					</div>
				</form></li>';
	$menu .= "</ul></div>n";
    echo $menu;
}
add_filter('wp_page_menu', 'home_menu' );
 
function analitycs_footer() { ?>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("XXXXXXX");
pageTracker._trackPageview();
} catch(err) {}</script>
<?php }
add_filter('wp_footer', 'analitycs_footer' );
?>
</php>

Don’t forget to customize the css to make the rss button, rss feed by mail and the search bar more pretty :)

Website Re-design


by stocks photography

After last month setting-up new themes for my site, i notice a hollow point in the flow of the design, i see that there’s not much a room to move with the design, so decided to change it to new themes this January following the spirit of change this month :)

Rather than re-invent the wheel, i intend to create wordpress child themes with a couple tweak on the core themes. I was interested in Vigilance themes since last December last year because of the simplicity and typography, so i use this theme for the site. But because of the nature of child theme force u that u could not change the core file of the themes, i couldn’t make the themes the way i want it, till the end i had to change the themes core file.

Here’s a screen shoot of the new design

here’s a link to view the old design.

The child theme that i create is called vigilante. I use the background from Dinpattern plus Featured Content plugins for the sidebar, i tweak the featured content plugins from showing a certain category to the latest post and rather than putting it in the front like common magazine themes i decided to put it on the sidebar.

Actually the design was not finished yet, because i want to change the header to a certain font but don’t want to use image, sIFR (Scalable Inman Flash Replacement) was the the first thing in my mind and i found a great tutorial from Stefan Vervoort of divitodesign on how to implant sIFR3. For those who are new to sIFR, here’s a quote from divitodesign

sIFR is the “Healthy alternative to browser text”, regarding to the authors Mike Davidson and Mark Wubben. With sIFR it is possible to display fonts on the internet that doesn’t have to be installed on the computer of the user. sIFR creates more typography options for the web!

After a couple hours setting up and browse a hundred font in dafont, i made decision to postpone using sIFR :) i couldn’t find the right font for my name in the header. I dont know, i think i want to learn more about creating logo, i was intending to create business card for my wife anyway. oh yeah i forgot to tell, i also updated my about page and added contact me page :)

Toko Dephe Site Launch

huhuhu never had a time to post on my site since new year :) been a bit busy this month, i create a couple of sites for client and one of the most recent site i create is for my beloved wife website about selling her stuff online :D

Well it’s not online store website, but rather a showcase of her work on customize flannel knit on shirt. She focuses on creating product for children by request. The site provide recent item on customize flannel knit. but enough of her stuff, i’d like to tell u more about the technical stuff of her site.

At first i create her site using a free themes using simple blog design, but long after that i notice that if she continue to use her site, she will get less exposure on her work. I was thinking in upgrading her site to a magazine themes site where the first page will be filled with her product structured by categories. But after a couple of thought the final decision is i was going to use a gallery themes.

Here are the screen shot on the old design

and here are the new design

The explicit advantage of using the new design is the total volume of the index page. The old design with pictures has around 736 kb and it is relative with content of the post, is the post is heavy with pictures or not. While the new design have more fixed size around 384kb to 400kb with more exposure on the index page, it’s fixed because the picture is resized into a fixed size.

To crop the picture automatically i use Darren Hoyt script timbthumb, Thank god for this script, i can downsize the custom field from 3 into one custom field only and the size of the picture is free as long it is wider than 330px.

The themes that i use is an already made theme from snapshoot woothemes, i use it to cut time in developing. Of course i use WordPress as the site engine and the necessary plugin for snapshoot is WP-PostRatings and WP-PageNavi. i also add shadowbox plugin to pop-up the pictures nicely and sharethis button.

In the future i’d like to put more plugins on the site, like db backup and google sitemap, but in the mean time i want to promote this site to my friends. U can visit her site at http://toko.dephe.com but its using Indonesian language. The keyword that i want to associate with the site is kaos flanel. but i’m proposing to her to create new product because i notice that this kind of product is getting dense in here, so the keyword is still not fixed for the site.

WordPress Admin Management Xtended

building blog
Pic by scorpio_magic

I have a confession, I suck making category for my writing at this site :( that’s why i always confuse what category supposed for my posts and after that i put it in the same category over and over again, after a while i realize what should be the category of the writing and edit the post and save again. it’s a tedious task.

My biggest problem with it right now, i want to change all category of my post in the past with the appropriate ones so it became readable if i want to search it. but editing one by one is hideous, but i considered myself lucky because my writing is still not much (around 170 post), what if my writing like Mr. Roy at downloadmunkey.net? if i’m not mistaken he once had 150 post in a month?! that a great deal of works if he want to change all category of the posts. Before i had a lot of post like him i’d like to change it quick and that’s when i think there’s should be a WordPress plugin for mass changing category and tags.

Looking at the WordPress Extend Plugins Resources found this fantastic plugins, WordPress Admin Management Xtended. It not going to let you mass category change, but it will let u change it via the manage admin view.

Under the action text u could see those blue button which function as changing the date, allow comment or not etc. It’s a superb plugin imho, btw there’s a video explaining the function of Admin Management Xtended

While I add plugin for category i also add

All of this plugin i read it at Top 10 must install plugins for WordPress users!

A little redesign on the site

Could not sleep
pic by Andromeda Honds

Got some spare time last night cause i couldn’t sleep until 5 AM and i want to change the look of my site for a couple of month now. I want to make it more sleek with a lot new graphic logo and changing the typography so it becomes more readable.

I is Lazy
pic by xpd259

but it the end, i was too lazy :D i only use plain Thematic standard structure with mock-up in colour and typography (Bigger is better right :D).

Here are the screenshot taken from browsershots.org before the changes

here are the old font type and size

and here are the new changes

here are the new font type and size

Add plugins too, Google Site Map xml. All in all, the site use Thematic framework from Ian Stewart and Fasticon rss icon from Smashing Magazine.

Site Soft Launch: readingbugs.org


Site at http://readingbugs.org/

It’s been three weeks since I’ve launch my wife’s site at dephe.com, now i’d like to soft launch a new site that i’ve help set-up, ReadingBugs.org. In Indonesian The site is about “Komunitas Read Aloud Indonesia” or Read Aloud Indonesian community. It’s a non Profit movement about encouraging people to read aloud books to children (cmiiw).

Here are the Vision and Mission of Reading Bugs i quote

Vision

  • Encourage people to help improve children literacy skill, especially reading by reading~aloud to them
  • Become partner of government and other organization to improve children literacy skill through ‘reading~aloud’

Mission

  • Promoting healthy successful children through Reading~Aloud.

The site design are based on the user request, at first i was intending to use Gluttony themes from small potato, but after a request in changing the color scheme, gluttony doesn’t fit it anymore so i had to change themes. One of the biggest stumble in designing is that i don’t have a designer at the moment to help me, so my feedback in modifying is from the user feedback. it had 2 major revision on the road and a couple of minor adjustment. On hosting i didn’t manage it at all, because they already bought a domain and a hosting package.

Why is it soft launch? because i’m still accepting feedback from the community of read aloud Indonesia and the user to improve the site, so far there are no adjustment except an input to make more pictures about Read Aloud Parent and their children.

This site is build upon custom modified Tremor themes from Quake Media. A couple of color editing, banner and change the typography. I also add two WordPress pluggins at the site upon request, DMS Guest book and Contact Form 7. Add statcounter and pick up a couple of pictures from shutterstock.

Actually i created another site last saturday for personal intention, it’s my Bahasa language site. i’ve just done one post, maybe after another i’ll tell about it.

guess i’m wrong


Pic by mcmrbt

Huhuhu been procrastinating in writing lately :P well after finishing my wife’s site, i’ve got an offer to create a site for Read A Loud for children movement. My friend’s mother was the co-founder of the movement here in Indonesia, she ask me via sms could i make her a site. I thought i could make it in just couple of days, but i’m wrong. Last weekend i got to finish the draft of the site but at monday, i couldn’t finish the asked revision :( the nine to 5 really bothers me. but i hope next week is going to be more smooth.

nb:
Been using twitter this week, i got the account last year but never tried it more than a couple days. i still couldn’t get comfortable with it now. I’ll try it another weeks to find it uses

Site Launch dephe.com

I have created a site for my wife, she told me that she want a site like me but with more custom graphic. (her old blog site is in dephe.wordpress.com).

After i got an offer of free hosting at Stephen Web, i got a chance to make it for her. She want a very cute site like Gisele Jaquenod(a very very beautiful well craft design site) and i said okay, but it’s goin to take about a month to create it, since i’m still working 9 to 5 and my friend (a designer) couldn’t help me anymore. But noo, she want it in three days :D i laugh at her and said okay, i’ll try my best.

Well my best at short time designing is a crop-kind-a-guy :P so rather than busy trying to create nifty graphic like Gisele, i search in my pictures collection and the cropping away :D

After 8hours, The site is ready. She look disappointed seeing how it goes :D of course, she is! i couldn’t create a site like Gisele in just a day :) to sums up, the design of the site is temporary, but the site is up & go.


Pictures taken with browsershots.org

The site is created with K2 custom css style made by me, Pattern background from photostock and the icon animal icon from Fast Icon. The site use Indonesian language, the feed is in http://feeds.feedburner.com/dewi

Visit: http://www.dephe.com

Finished Project one :D

ahh, finished my first project, not really finished but at least it’s good to go, just a little tweak here and there..

te-amy jewelry
Green it is and lots of gemstone too

now next to my new project, my own website :P i’m so lazy when designing my own website, i don’t know why. because it’s already white, who need a tweak anyway when it’s perfect in my eye. But i have to do it, i have to practice a lot if i want to go into designing. Right now i’m a back-end php programmer, i’ve got nothing to show beside the system work smooth :D .

I design this site with a little help from my friend, it’s mainly design for firefox, not IE or Opera but it’s not fundamental as long the client is happy, any critics are welcome.

btw this is my friends website too, it’s about Gemstone Jewelry, with main focus in selling Necklaces, Bracelets and Others type of jewelry like prayer beads.

te-amy jewelry
Canon A530 from marisa

Don’t u think the Jewelry pictures are good too?? :D Half of them are my creation, I use my Digicam Canon A530 to shoot it, when I’m taking pictures of the jewelry i just use plain white desk in my office and adjust the speed in to 1/15 or 1/5. For resolution i use 1600×1200, who need big resolution when i’m going to resize it anyway. I use Acdsee 8 and Adobe Photoshop CS2 in editing, I don’t mainly use CS2, it’s too lenghty and heavy, the editing that i’m using is leveling to adjust the light composition in my pictures, auto contrast and sometimes reduce noise. even when i’m resizing i still use Acdsee. Of course i use Dreamweaver 8 in coding, i tried many editor like notepad++ and vi, but still dreamweaver is very addicting to use.

The theme in te-amy’s site is k2 custom theme, later on i want to create my own theme for my own website :D, wish me luck!