SDAC Inc. provided:
- Original web design
- XHTML/CSS programming
- WordPress theme
- Logo design
technologies used:
XHTML, CSS, WordPress, PHP
user interface:
I wanted to create something that was professional, simple, and easy to use. I went with a “french blue” that complimented the “RSS orange” since I knew this site would use RSS heavily. I am very happy with this design because of ease of use and it is very readable.
lessons learned:
Subtle background patterns can really dress up a design.
random thoughts:
It is never bad to create the theme and logo for the very site people are going to post jobs for work my company does.
SDAC Inc. provided:
- Original web design
- XHTML/CSS programming
- WordPress theme
- Logo design
- WordPress plugin configuration
- Custom PHP programming
technologies used:
XHTML, CSS, WordPress, PHP
user interface:
I wanted to create something that was bright and based on the client’s favorite baseball team’s colors – the Mets. The client wanted bits and pieces of his site to look like a few existing web sites that he really liked, so I used elements (some from SDAC) and put it all together.
lessons learned:
Do not be afraid of bright colors – not everyone likes my more usual calmer, softer colors.
random thoughts:
The client has a great idea and I look forward to reading his blog on a daily basis.
Ever wonder how to automatically highlight your tabs or navigation depending on the category, page, or post you are on? Wonder no more! To make this work, there are three bits of code you will need:
- The header code to control the body ID (and to tell us what page we are on)
- The navigation code
- The CSS to control the highlight
For this example, I will use this web site as an example.
The header code
PHP:
-
<?php
-
$current_page = $post->ID;
-
$parent = 1;
-
while($parent) {
-
$page_query = $wpdb->get_row("SELECT post_name, post_parent FROM $wpdb->posts WHERE ID = '$current_page'");
-
$parent = $current_page = $page_query->post_parent;
-
if(!$parent)
-
$parent_name = $page_query->post_name;
-
}
-
?>
-
-
<body id="<?php echo (is_page()) ? "$parent_name" : ((is_home()) ? "blog" : ((is_search()) ? "other" : ((is_single()) ? "blog" : "blog"))); ?>">
The XHTML code (navigation)
HTML:
-
-
-
<li id="nav-home"><a href="/index.php">Home
</a></li>
-
<li id="nav-blog"><a href="/blog/">SDAC Blog
</a></li>
-
<li id="nav-websolutions"><a href="/web_solutions/">Web Solutions
</a></li>
-
<li id="nav-networksolutions"><a href="/network_solutions/">Network Solutions
</a></li><li id="nav-userinterfacesolutions"><a href="/user_interface_solutions/">User Interface Solutions
</a></li>
-
<li id="nav-customsolutions"><a href="/custom_solutions/">Custom Solutions
</a></li>
-
<li id="nav-search"><a href="/search/">Search
</a></li>
-
</ul>
-
</div>
The CSS code
CSS:
-
#home #nav-home, #about_us #nav-home, #contactus #nav-home, #faqs #nav-home,
-
#disclaimer #nav-home, #search #nav-search,
-
#blog #nav-blog, #web_solutions #nav-websolutions, #network_solutions #nav-networksolutions,
-
#user_interface_solutions #nav-userinterfacesolutions,
-
#custom_solutions #nav-customsolutions, #tos #nav-home, #sitemap #nav-home {
-
background:url("images/tabs/active_tab_bg.gif") repeat-x;
-
border-right:1px solid #676e78;
-
}
-
-
#tabs li:hover, #tabs li:hover a {
-
background: url("images/tabs/active_tab_bg.gif") repeat-x;
-
color:#212933;
-
}
General information
When you view the code for a page, you will notice that the header code will find out if the page viewed is infact a page. If it is a page, it gets the page parent (I use parent and child pages in my web site organization). The tabs are created with unique li IDs. So that a combination of #home (the body ID) and the #nav-home (li ID) will show as a highlighted tab. With this example, this case will only occur when we are on the home page because #home is a page (the home page) so the home tab will be highlighted. When we click on "SDAC Blog", the body ID will then be #blog, so now the #blog #nav-blog combination will force the "SDAC Blog" tab to be highlighted. Take a look at the CSS to see where to define the "cases".
Hopefully this took some of the mystery out of working with WordPress, navigation, and how to put everything together.
SDAC Inc. provided:
- Original web design
- XHTML/CSS programming
- WordPress theme
- WordPress MU configuration
- WordPress plugin configuration
- Custom PHP programming
technologies used:
XHTML, CSS, WordPress MU, PHP
user interface:
I wanted to create something that was visually appealing and easy to use since the site is aimed to be a stopping place for potentially hundreds or thousands of bloggers.
lessons learned:
I had not done too much work with WordPress MU, so this was a great project for me.
random thoughts:
I look forward to working with WordPress MU more and more over the next months.
SDAC Inc. provided:
- XHTML/CSS programming
- CMS (WordPress) configuration
- WordPress theme
- WordPress Plugin customization
- Custom PHP programming
technologies used:
XHTML, CSS, WordPress, PHP
user interface:
The XTML and CSS was completed for the most part before I began working with it. I made minor changes and additions as I had to manipulate the code to fit into a WordPress theme. This theme was based on the T. Bubba WordPress CMS/theme.
lessons learned:
WordPress themes and configurations are very easy to duplicate.
random thoughts:
It is great working with clients who are excited to have a dynamic web presence and who know the importance of having a web site that they can manage without the constant need of a technical person. Empower the user!
SDAC Inc. provided:
- Original web design
- XHTML/CSS programming
- CMS (WordPress) configuration
- WordPress theme
- WordPress Plugin customization
technologies used:
XHTML, CSS, WordPress, PHP
user interface:
I created this user interface from scratch after talking to my client about his design likes/dislikes. I decided to go with a very minimal layout which would bring attention to the great photographs and content my client provided.
lessons learned:
The CSS for this site is very minimal and clean. I plan to use this as a starting point for a lot of my future layouts.
random thoughts:
I am excited to see the film!
SDAC Inc. provided:
- Original web design
- XHTML/CSS programming
- CMS (WordPress) configuration
- WordPress theme
- WordPress Plugin customization
technologies used:
XHTML, CSS, WordPress, PHP
user interface:
I created this user interface from scratch after seeing their new logo and taking to the client about some sites they liked and did not like. I actually first prepared something a bit different, but they wanted a very simple, easy to read design and layout.
lessons learned:
Red is hard to work with on the web because it is so bright, but if you find a nice complimentary color, it can work.
random thoughts:
I am always excited to work with clients who come are moving from a static web site to something dynamic and easy to update and am glad I could help them make the transition.
Growfire
SDAC Inc. provided:
- Original web design
- XHTML/CSS programming
- WordPress theme
technologies used:
XHTML, CSS, WordPress, PHP
user interface:
I created this user interface from scratch after talking to my client about his design likes/dislikes. After working in the WordPress admin for multiple hours a day, I thought it might be nice to use the WordPress colors to design a front end. This theme is simple, straightforward and is most importantly - easy to read.
lessons learned:
I had prepared two versions (different colors) of this for my client. I was really excited about the other color scheme and was sure my client would like it much better, but in the end he really liked this one and went with it. Sometimes we do not see eye to eye, but the client's happiness is always most important.
random thoughts:
I visit sourceforge.net and thinkgeek.com on a an almost daily basis and it was an honor working with my client who was recently Senior Vice President & General Manager of the Open Source Development Network.
SDAC Inc. provided:
- Original web design
- XHTML/CSS programming
technologies used:
XHTML, CSS
user interface:
I was asked to redesign the existing site using minimal CSS/XHTML so a non-designer could maintain it. I went with blues and yellows for a contrast. I created the main layout and graphics then turned it over to the programmer to implement.
lessons learned:
I needed to make something really easy to work with in a tight timeframe, so I kept everything very simple and clean. Regardless of the project, I realized that if you can keep the layout elements easy to replicate and use, the programmers will greatly appreciate it.
random thoughts:
This is a very helpful tool when traveling - I have used it several times now.
RSS Feed
