scriptygoddess RSS Feed
 
 
 
 

How margins work in CSS

This is a great article/tutorial on how margins work in css (why/when then collapse, and why/when they don't).

Inspiration

If you're looking for inspiration, here is a nice long list of web design galleries.

Everything color

Just found this really incredible list of color utilities via Digg.com:

colorschemes.org: Color Schemes, Color Palettes, Color Theory

WOW! I have a lot playing to do!!

Insert text/image block in the middle of a WordPress category page

For a long time I resisted the urge to put ads on the site. I'm sure you've noticed I finally caved in this past year. I've tried to keep it relatively unobtrusive. In one case I was contacted directly to put an ad up on one of my category pages in the content area. I didn't want to put it at the top above the content. Ideally - I wanted it put in the middle in a separate div block, maybe after 3 or so posts, but only on the first category page. Here is the code I used to get that to work…

First, above the loop I added this:
<?php
$count = 0;
?>

This is to count the number of posts we're on.

Then just after the end of the loop call (<?php while (have_posts()) : the_post(); ?>) but before you start the code for the posts, I added this:
<?php
if ($wp_query->get("page") || $wp_query->get("paged")) {
$onFirstPage = false;
} else {
$onFirstPage = true;
}
?>

That bit of code I got basically from this post on the support boards.

Then to determine if we should call the text for the ad (in this case I wanted it displayed only on category id #29), and to then display the ad…
<?php
if (is_category('29') && $count == 2 && $onFirstPage) {
?>
...ADVERTISEMENT TEXT OR IMAGE GOES HERE...
<?
}
$count++;
?>

No dotted line around linked images

Learn something new everday! I just added the following to the css for this site:
a {
outline: none;
}

Which will remove that little dotted line you get when you click on a linked image. I just learned that from Deziner Folio.

I got to that site because I recently installed the Sphere plugin for Wordpress - (which I found out from reading Matt's blog) and Deziner Folio was one of the links that popped up from one of my css-related posts.

Incidentally, poking around there I also found a bunch of pre-made for-photoshop gradients and cool "badges" (starbursts, etc.) he was offering up free for the taking. As well as a really neat way to center a single div in the middle of the page using CSS.

New Design

I'm in the process of putting up a new design for this site. If you're hitting the site right now - things may look a little funny while I get all everything worked out. Sorry for any inconvenience. Everything should be fine in the next hour or so.

So I think it's all set up now. Feel free to leave a comment here if you notice anything really wonky.

Some notes about the new design -specifically the logo: I finally settled on a "real" logo. A butterfly of course. It's been a theme that's been consistent in almost all the designs for this site. Not sure how to explain why, but I wanted something to represent "goddess" - beauty, perfection, etc. without resorting to a pin up shot. In my mind, that's how I see butterflies. To connect it to the code, the butterfly in the logo is made up of programming "pieces" - numbers for the antenna, curly brackets } { for the wings, a pipe | for the body. So that's where that came from. I'm pretty happy with it. (hopefully, I'll still be happy with it in a few months, I can be pretty fickle about my own designs) So much so that I even made a Cafepress Store with the logo. Not that I think anyone but me would really buy anything there - but you never know!

Fresh Photography

Almost done with a custom wordpress theme design for Christine and Elaine for their joint venture: Fresh Photography. Still putting a few finishing touches on it - but I'd say it's 99% done. (There may also be a few pages still with placeholder text. Heh) :) Christine's also working on finishing up the portfolio section. She's using Slide Show Pro for those flash slideshow animations (she'll be putting up one for each section in the portfolio). I really like those.

Fresh Photography is the site I'm using that script snippet from ClioWeb for, and that trick I had to do with multiple "home pages" (What Wordpress thinks is the "home" page is actually the "artwork" page. There's actually two wordpress installs for it. I'm sure there was probably a way to use a separate categories for the "blog" posts - and another category for her "photo" posts - but this seemed simpler and gave her more flexibility.

You'll also notice many of the photos in the artwork section are available for purchase. For that I used a trick I had previously posted to get an order form to work using Wordpress' custom fields.

Listing subpages in Wordpress

I was looking for a way to list sub pages in a navigation bar if you were either on the "parent" page or one of it's sub pages. I found this page on Clioweb that was perfect.

What's also nice is that it gives you the variable $parent_id to play with if you need to. Copied from his site:

<?php
$page = $wp_query->post;
$parent_id = $wpdb->get_var("SELECT ID FROM $wpdb->posts WHERE ID ='$page->post_parent;'");
if(!$parent_id) $parent_id = $post->ID;
?>

Then, to actually generate the HTML for the page list, I use the following code in the body of my page template:

<?php if(wp_list_pages("child_of=".$parent_id."&echo=0")): ?>
<ul id="subnav">
<?php wp_list_pages("title_li=&child_of=".$parent_id."&sort_column=menu_order&depth=1");?>
</ul>
<?php endif; ?>

Live CSS editing in IE

I know there was some install you could do so you could do "live" css editing of a webpage within IE (much like the web developer extension for Firefox) I've since lost the link (feel free to post it in the comments if you have any idea what I'm talking about! LOL) but for some reason I could never get it to work. I gave up for a time, but last night I was working on something that, of course, worked just fine in Firefox, but IE was doing something completely different and I couldn't figure out why. So I went looking again. What I found: CSS Vista. Lets you edit the css of webpages and see your changes live on the screen… AND what I really like about it is that it has two preview panes - one for firefox and one for IE - so you can see if what you're doing is going to be changing something in one browser and not the other.

CSS Vista Screenshot

This isn't terribly new - I guess the program has been out for awhile. I wish I had known about it sooner. Would have saved me a bunch of headaches!

Wordpress: Make home page show latest post (in the "single post" format)

In a custom wordpress theme design I was working on tonight, I was trying to do as the title describes - make the home page show only one post (yes I know there's already a built in way to do this) but I wanted it to show up the same way the single view shows it - with the comments expanded and the comments form visible, etc. If you know of another/better way to do this, please say so in the comments. But this DID do the trick. I found this page in the support archives. The idea was to create your index.php to look like you wanted (ie. exactly like the "single.php" page) but add this before you start the loop:

<?php
$i=0; // Initialize to Zero;
if (have_posts()) :
while (have_posts()) : the_post();
if ($i==0) {$recentpostid = $post->ID; $i=$i+1;}
endwhile;
endif;
//get only the latest post
$posts = query_posts( 'p='.$recentpostid."'");
?>

and then you start your loop like you normally would…

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Worked for me!

Update As Danny pointed out in the comments - there's a simpler way to do this. Put the following code on the page (I put it before the loop and it worked)
<?php $wp_query->is_single = true; ?>
Much simpler :)

Bookmarks

WordPress Resources

Meta

Random Stuff