Hi there, Welcome to version 3 of this site. As you may have noticed, Flia has gone through a re-design.
The site is still built on the same grid system I had built for it before but with a couple of more tweaks. I’ve also added individual case study pages for each client to extend the portfolio page.
Javascript
As far as scripting goes, I mainly use Jquery for the general interaction and I use sIFR for the top headings.
Coming up
I will be switching the entire site to ExpressionEngine in the coming months.
I’m also working on two other ExpressionEngine powered site which will most probably be up before the new Flia site is.
Once again thanks for dropping by. Have a good day and let me know what you think of the new digs.
Toodles
pab
6 Comments »
I recently finished a new wordpress theme that uses the jquery s3slider plugin . Like all of the Jquery plugins this was super easy to implement on a static site, but my goal was to use this in wordpress to display the post from a featured category at the top of the page with out any plugins.
here’s what the theme looks like
You can see the featured post being called at the top of the page.
To see how to set this up on a static site, just check the s3slider homepage for a very clear explanation on how the plugin works and the various styling options available to you.
How to display featured Post in Wordpress
I had previously used this technique on Nurse stories dot org to display the latest stories submitted by users and the latest book reviews in the footer section of the site.
The Code
This is how I set up wordpress to display featured post on the top of the page using s3slider and no plugin.
First thing I did was create a Featured category in the control panel of Wordpress.
Then when writing a post in the featured category, I created a custom field called featured_image. and uploaded the image .
You can see it below
Here is the code I used to call the latest post in the Featured category
I’m using WP_query to call the post from the featured category the rest is really up to you on how you want to style your s3slider. The loops calls the image we set in out custom field with a key of featured_image
<div class="featured ">
<div id="s3slider">
<ul id="s3sliderContent">
<?php
$containter = 1;
$display = 1;
?>
<?php $my_query = new WP_Query(’category_name=featured’);
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<?php
if (($containter == 1) and ($display >= 6)) {
echo "<ul id=’s3sliderContent’ >";
}
?>
<li class="s3sliderImage">
<a href="<?php the_permalink() ?>"><img width="600" height="165" src="<?php $values = get_post_custom_values(’featured_image’); echo $values[0]; ?>" alt=’<?php the_title(); ?> featured_image’ /></a><span ><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></span>
</li>
<?php
$containter++;
$display++;
?>
<?php
if ($containter >= 6) {
echo "</ul>"; $containter = 1;} else {}
?>
<?php endwhile; ?>
<ul>
<li class="clear s3sliderImage"></li>
</ul>
</div>
</div> <!– end featured div–>
Why no plugin
Well the main reason was that all the plugins I tried out didn’t work the way I wanted them too, and some of them even broke the theme, so to make my life simple I decided to write my own to do exactly what I wanted to do.
I have gotten several emails regarding how to set this up I hope this helps out, sorry for the delay in putting this up, been dealing with other health issues and new server, let me know if you need more infos on how to set this up in the comments.
The theme should be available in the coming weeks, Just a question of finding out where I’m going to host it, if you have any suggestions leave them in the comments
Other great links you might want to check out
Some other interesting ways of displaying your featured post in Wordpress
Cheers
Pab
pab
10 Comments »
Hey there, I just wanted to write a quick post and talk about my new favorite PNG fix for Internet Explorer 6 .
I recently worked on a site that used a bunch of PNG images with transparent shadows, One of my criteria for this project was to make the site look exactly the same in IE6 …
The DD_belatedPNG to the rescue
I discovered this PNG fix during a morning break while catching up on some blog reading and came across an article on css tricks where Chris mentioned it briefly in his links of interest.
Being that this was exactly what I was working on just minutes prior and that all my usual PNG solutions failed to some degree ( positioning issues, dead links). All simple stuff that can be worked out. But after reading the documentation I decided to put down the coffee and see what I can do with it; and let me say one thing here, let me be very clear. This is by far the very best PNG fix I have ever used. POINT FINAL!
Before applying the PNG fix
So here is a capture before applying the fix. You can see what the page looked like in all it’s blueish/grayish glory …
The after state
And here it is after adding one single javascript file to my JS folder and adding a few lines of code we get this …
As you can see by the example above a;; the transparent images render properly and all that was done in less then a minute to fix the entire site. Just a simple question of writing a couple of simple of lines of code and I was set. So take a second and head on over to The DD_belatedPNG official page and download the needed files.
How to use DD_belatedPNG
Simply download the files from the website. Then upload it to your JavaScript folder. Since I only needed it for IE6, the script is wrapped in IE6 conditional tags assuring me that only El grand Crapola AKA IE6 will see this and none of the other browsers.
Here’s the code I used for the site, the string arguments could be any CSS selector you want which makes this really easy to use for designers or people that are not that comfortable with writing JS.
The code used
<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('#masthead');
DD_belatedPNG.fix('#logo');
DD_belatedPNG.fix('#ulnav li a');
DD_belatedPNG.fix('#float_support');
DD_belatedPNG.fix('#footer');
DD_belatedPNG.fix('#col_secondary');
DD_belatedPNG.fix('#main_content h2');
</script>
<![endif]-->
More Tutorials on PNG fixes
You can go over at Nettuts Jeffrey Way goes through a bunch of available fixes for your PNG related nightmares. I haven’t watched the screen cast, but like always I’m sure it’s top notch.
24 ways one of of my favorite sites has a great article on PNG fixes and tons of other very useful articles and tutorials written by some of the leading expert in the field of web development and design.
pab
No Comments »
