Tag: web design

Categories
uncategorized

Custom Post Type + Custom Menu

Originally published at jeremyjarratt.com. You can comment here or there.

Screen Options tab

Here's where you find the damn thing already.

For those of you WordPress users wondering how to find your Custom Post Types in the Appearance >> Menus page (for your Custom Menus), look no further than your handy Screen Options dropdown panel, up at the top right of the page. No, your other right. Up further. Look – right there! See where my finger is pointing? Where it says “Howdy, [yourname] | Log Out”? Yeah, just below that. No, you’re looking at “Help.” I said it was Screen Options and i MEAN it was Screen Options, goddammit.

Menu options dropdown

Menu page options dropdown

I looked and looked and had a hard time finding these options (ok, actually i found it not long after i started looking, but i figured there’s got to be a whole slew of people out there having a hard time figuring this one out). So now you know, and knowing is half the battle.

(Also note that until we get a decent UI, plugins such as Custom Post Type UI will have to do, unless you just want to code away your evening. Additionally, your theme must support Custom Menus in order to use them.)

Incidentally, if you have no idea what the hell i’m on about, and for some reason refuse to mind your own damn bidness, here’s the deal: In the recent WordPress 3.0 release, users now have the ability to create not only custom navigation menus (those things you click on to get to other areas of the site you’re on), but can also create something called a Custom Post Type. (Oh god i wish i could explain this really well.) Basically, instead of only being able to create blog posts (which are generally chronologically ordered) or generic Pages (which are the same thing, without the emphasis on time), WordPress administrators can also create types of content specifically geared toward a given theme… say, a real estate listing, a movie review, or a section of used musical instruments for sale. This also lets you enable or disable certain options. You know what? You don’t get it, do you? Mind your own beezwax if you’re gonna give me that look. Hey – hey! Why don’t ya try running a WordPress site yourself? Seriously. Give me a breeeeeaaaaaak!

Categories
life local web design work

business as unusual

I have never been so busy in all my life – I’m currently writing code for (in no particular order) 1) myself, 2) a client, and 3) a prospective employer, and 4) may be starting with a new client soon. Of course, i’ve put everything else off this past week for projects i was doing for the prospective employer. So why am i completely, utterly broke? At least i know i’ll get a week’s pay for the two projects i did for the P.E. That won’t go far, since i have so much debt right now.

Unfortunately, one of the projects i did for the P.E. didn’t get finished on time, so i (more or less) owe them my time for free. It’s a Drupal theme. It’s terribly difficult to make a Drupal theme in one week, especially when that’s only one of two projects they assigned to me! So now i have to finish that – even though i will probably not be hired now because i wasn’t able to complete it on time.

The upshot of this is that i learned a lot about Drupal in a short time, and reacquainted myself with Flash (actually Swish) and actionscripting.

I have decided that, even though i am impressed by Drupal’s extreme versatility, extensibility, and scalability, and really like the Zen theme base, i do not like the theming system much (at least not in 5.x, which is what i had to use for this project – though maybe the problem is a Zen-theme thing). The problem is that the theme code does not appear to be separated by admin and frontend, at least not obviously. So when i change a page, i also change the admin section, too. Obviously, that’s not great, and has been my stumbling block, keeping me from delivering on time. Thankfully, you can easily separate the homepage from the inner pages, but it seems like you have to code for every single inner page if you want to separate it from the admin section. Maybe i’ll figure out a better way around this, as it just doesn’t seem right. Not by a longshot.

Oh, how i wish i could be working with WordPress instead! WordPress has such a better theming system, though perhaps not as robust as Drupal. (Holly actually found me a two-week-old job listing on Craigslist for a job working with WordPress and Joomla!, but i fear i am much too late for that omg perfect gig. I need to keep up with Craigslist more!) 

One thing’s for sure: i am pushing myself way beyond my physical limits. I’m apparently sick now, my throat feeling like phlegmy gravel and a nasty cough wracking my body every so often. In my over-the-counter coma induced earlier this evening i think i overheard Holly talking to someone about the bags under my eyes. I can almost feel my hair turning gray right now.

So, to sum up: i am putting myself through hell. I need less projects and more pay.

(It seems like right now in Dayton, nobody’s hiring, and everyone wants a massive discount on services, if not an outright free pass. What businesses remain here have that leverage, too, since damn near 8% of the city is now unemployed. An unemployed web designer has gotta do what an unemployed web designer’s gotta do.)

Categories
uncategorized

business as unusual

Originally published at jeremyjarratt.com. You can comment here or there.

I have never been so busy in all my life – I’m currently writing code for (in no particular order) 1) myself, 2) a client, and 3) a prospective employer, and 4) may be starting with a new client soon. Of course, i’ve put everything else off this past week for projects i was doing for the prospective employer. So why am i completely, utterly broke? At least i know i’ll get a week’s pay for the two projects i did for the P.E. That won’t go far, since i have so much debt right now.

Unfortunately, one of the projects i did for the P.E. didn’t get finished on time, so i (more or less) owe them my time for free. It’s a Drupal theme. It’s terribly difficult to make a Drupal theme in one week, especially when that’s only one of two projects they assigned to me! So now i have to finish that – even though i will probably not be hired now because i wasn’t able to complete it on time.

The upshot of this is that i learned a lot about Drupal in a short time, and reacquainted myself with Flash (actually Swish) and actionscripting.

I have decided that, even though i am impressed by Drupal’s extreme versatility, extensibility, and scalability, and really like the Zen theme base, i do not like the theming system much (at least not in 5.x, which is what i had to use for this project – though maybe the problem is a Zen-theme thing). The problem is that the theme code does not appear to be separated by admin and frontend, at least not obviously. So when i change a page, i also change the admin section, too. Obviously, that’s not great, and has been my stumbling block, keeping me from delivering on time. Thankfully, you can easily separate the homepage from the inner pages, but it seems like you have to code for every single inner page if you want to separate it from the admin section. Maybe i’ll figure out a better way around this, as it just doesn’t seem right. Not by a longshot.

Oh, how i wish i could be working with WordPress instead! WordPress has such a better theming system, though perhaps not as robust as Drupal. (Holly actually found me a two-week-old job listing on Craigslist for a job working with WordPress and Joomla!, but i fear i am much too late for that omg perfect gig. I need to keep up with Craigslist more!)

One thing’s for sure: i am pushing myself way beyond my physical limits. I’m apparently sick now, my throat feeling like phlegmy gravel and a nasty cough wracking my body every so often. In my over-the-counter coma induced earlier this evening i think i overheard Holly talking to someone about the bags under my eyes. I can almost feel my hair turning gray right now.

So, to sum up: i am putting myself through hell. I need less projects and more pay.

(It seems like right now in Dayton, nobody’s hiring, and everyone wants a massive discount on services, if not an outright free pass. What businesses remain here have that leverage, too, since damn near 8% of the city is now unemployed. An unemployed web designer has gotta do what an unemployed web designer’s gotta do.)

Categories
creative uncategorized web design

new wp-theme preview: “transitory”

I’ve been hard at work the past couple of weeks on a new WordPress theme i’m calling “transitory.” It’s not as cool of a name as Big Urgent Wish, but i tried it on and it stuck.

My goal with this theme was to have a much, much cleaner page, without too much extraneous information clogging up eyeballs. Here is how i’ve decided it will eventually be layed out:

"transitory" Layout
"transitory" layout (click to enlarge)

Note that the colors are arbitrary in the above layout and will change. 

And now here is a screenshot of it in action. Note the final layout has not yet been 100% applied. Also note the cool city background, which is blacked out underneath content boxes. Trust me, it looks much cooler than this. The menu to the side is being rewritten with jQuery, and will fold out when needed, and collapse when not needed.

transitory screenshot
"transitory" screenshot (click to enlarge)

At a guess, i’d have to say that it should be completed in about another week or two. So… a month, maybe? I dunno. You’ll see it soon enough.

All comments (good or bad) welcome!

Categories
uncategorized

new wp-theme preview: “transitory”

Originally published at jeremyjarratt.com. You can comment here or there.

I’ve been hard at work the past couple of weeks on a new WordPress theme i’m calling “transitory.” It’s not as cool of a name as Big Urgent Wish, but i tried it on and it stuck.

My goal with this theme was to have a much, much cleaner page, without too much extraneous information clogging up eyeballs. Here is how i’ve decided it will eventually be layed out:

"transitory" Layout

"transitory" layout (click to enlarge)

Note that the colors are arbitrary in the above layout and will change.

And now here is a screenshot of it in action. Note the final layout has not yet been 100% applied. Also note the cool city background, which is blacked out underneath content boxes. Trust me, it looks much cooler than this. The menu to the side is being rewritten with jQuery, and will fold out when needed, and collapse when not needed.

transitory screenshot

"transitory" screenshot (click to enlarge)

At a guess, i’d have to say that it should be completed in about another week or two. So… a month, maybe? I dunno. You’ll see it soon enough.

All comments (good or bad) welcome!

Categories
creative internets uncategorized web design

CSS tricks: Styling parent elements with :hover

[EDIT: this site no longer supports the features described in this article. Sorry.]

You may have noticed in my sidebar that there are a few elements which are nested in an obvious hierarchical order. For example, at the time of this writing, i have a list of books which i am either reading, planning to read, or have already read, listed under the “now reading” heading.

You may also have noticed that the heading for each of these menu items is highlighted whenever you hover your cursor (pointer) over it.

What you may not have noticed is that the headings for these items’ parent elements is also highlighted when its descendant is hovered over. In other words, when you hover over the “planned books,” “current books,” or “recent books” list, the parent element, “now reading,” is highlighted as well.

(If you’re still not sure just what the hell i’m talking about, check out the demo first, and then come back.)

This is a cool trick that you rarely ever see on the internets, and it’s remarkably simple to do. You don’t need no fancy JavaScripting to do it, either! No server- or client-side scripts are used at all, just good old CSS, and a properly nested hierarchy of elements.

Continue reading “CSS tricks: Styling parent elements with :hover”
Categories
uncategorized

CSS tricks: Styling parent elements with :hover

Originally published at jeremyjarratt.com. You can comment here or there.

[EDIT: this site no longer supports the features described in this article. Sorry.]

You may have noticed in my sidebar that there are a few elements which are nested in an obvious hierarchical order. For example, at the time of this writing, i have a list of books which i am either reading, planning to read, or have already read, listed under the “now reading” heading.

You may also have noticed that the heading for each of these menu items is highlighted whenever you hover your cursor (pointer) over it.

What you may not have noticed is that the headings for these items’ parent elements is also highlighted when its descendant is hovered over. In other words, when you hover over the “planned books,” “current books,” or “recent books” list, the parent element, “now reading,” is highlighted as well.

(If you’re still not sure just what the hell i’m talking about, check out the demo first, and then come back.)

This is a cool trick that you rarely ever see on the internets, and it’s remarkably simple to do. You don’t need no fancy JavaScripting to do it, either! No server- or client-side scripts are used at all, just good old CSS, and a properly nested hierarchy of elements.

First, create a nested list, with headings. For example:

<ol>
 <li>
 <h1>text</h1>
 <h2>more text</h2>
 <ol>
 <li>
 <h3>subtext1</h3>
 </li>
 <li>
 <h3>subtext2</h3>
 <ol>
 <li>
 <h4>subtext2.1</h4>
 </li>
 <li>
 <h4>subtext2.2</h4>
 </li>
 </ol>
 </li>
 <li>
 <h3>subtext</h3>
 </li>
 </ol>
 </li>
 <li>
 <h2>text again</h2>
 </li>
 </ol>

Now create the following style rules:

li:hover>h2, /* matches the H2 element when its parent list-item is hovered over */ li:hover>h3, li:hover>h4, li:hover>h5
 {
 background: #000;
 color: #fed;
 }

(Note that the H1 element is not styled and thus does not actually participate in any fancy hover effects.)

Now save your page and test it out. You can adapt this technique to work with just about any set of nested elements. (Just make sure your nest validates!)

See the demo

Categories
creative internets web design

Cheaters, etc.

Here’s a list of cool resources for web design and development, including cheat sheets galore.

I’m sure there are more I have bookmarked somewhere. I’ll add them as i find ’em. Enjoy!

Categories
uncategorized

Cheaters, etc.

Originally published at jeremyjarratt.com. You can comment here or there.

Here’s a list of cool resources for web design and development, including cheat sheets galore.

I’m sure there are more I have bookmarked somewhere. I’ll add them as i find ‘em. Enjoy!

Categories
web design

Coming up, a redesign

I’m gearing up for a redesign. Sometimes too many bells and whistles is a bad, bad thing. I’m going simple and clean next.

I expect to base it off of the current theme, just because i already hacked it up for the style switcher. This time, no extraneous code. This time, things will be clean. My plan is to AJAXify the sidebars so all the other crap is still there, just not there all the time. Go figure – JavaScript wound up becoming useful for something after all!

Suggestions welcome, as always.web

Categories
uncategorized

Coming up, a redesign

Originally published at jeremyjarratt.com. You can comment here or there.

I’m gearing up for a redesign. Sometimes too many bells and whistles is a bad, bad thing. I’m going simple and clean next.

I expect to base it off of the current theme, just because i already hacked it up for the style switcher. This time, no extraneous code. This time, things will be clean. My plan is to AJAXify the sidebars so all the other crap is still there, just not there all the time. Go figure – JavaScript wound up becoming useful for something after all!

Suggestions welcome, as always.web

Categories
creative web design

Fun & stupid things to do with PHP and CSS

Over on the recently-relaunched Technothrope: A better PHP random background-color generator.

Also in the garage: the latest version of the random bg generator, plus a weird little experiment with fixed backgrounds that i was considering using for something before i decided it was too noisy.

Coming up at some point: something Holly called me the other day has inspired me to make my next project, the Argument Machine.

Categories
uncategorized

Fun & stupid things to do with PHP and CSS

Originally published at jeremyjarratt.com. You can comment here or there.

Over on the recently-relaunched Technothrope: A better PHP random background-color generator.

Also in the garage: the latest version of the random bg generator, plus a weird little experiment with fixed backgrounds that i was considering using for something before i decided it was too noisy.

Coming up at some point: something Holly called me the other day has inspired me to make my next project, the Argument Machine.

Categories
internets uncategorized web design

Google Chrome obeys alternate CSS

NOTE: this post is ancient, but still gets a good bit of traffic, so i need to let readers know:

This issue was fixed long ago.

So Google Chrome is out. That’s great! It’s really a cool, fast, secure browser.

Unfortunately, it appears to break sites in one very important way: it obeys alternate stylesheets, just as if they were normal, active stylesheets. This breaks sites who print their alternate CSS links after active ones (like mine – for now).

I’ve sent this in as a bug to Google, and i’d recommend that others do the same (select “report bug or broken website” from the page icon to the upper right).

At the moment, the only thing to do is to list alternate stylesheets before active ones, or exclude alternate links altogether.

However, there are (naturally!) problems with each method…

Listing alternate CSS (which would still be obeyed) could still cause style conflicts, if there are any rules which are not contradicted (read: overwritten) by later stylesheets below the alternate ones.

On the other hand, not listing alternate stylesheets disables additional functionality in user agents such as Opera, which allows users to select from a menu what style they’d prefer to view a site in – which is arguably the best, most accessible method of switching stylesheets (if you’re using one of those user agents, that is).

For my money, i believe the former is the best option. This means i may have to do some code “cleaning,” which i should have done anyway. In fact, rather than removing extraneous CSS rules, i’ll be adding rules which do not exist in, say, X.css to Y.css, in order to counteract any style collisions by overwriting them with alternate rules.

Btw, for those who need it, here’s the User Agent string i captured:

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

[UPDATE] Matt Wilcox helpfully pointed out that this isn’t exactly a Chrome bug, but a leftover Safari one which has apparently been around for years, according to a decently shrewd Google search. Lesson: test in Safari, even if you think it’s a Practically Perfect Browser.

I have fixed it locally but am waiting for at least a few more hours in order to use this site as an example. Hey, it beats making a quick mock-up. Sort of. (My teachers always thought i was most useful as an example to warn others – well, i do what i can!)

And a big thanks to the great Jeffrey Zeldman for helping get the word out to designers about this. Of course, 99% of people making web sites won’t be affected, but for those of us using alternate styling, it’s a nasty thing to have happen.

[UPDATE 2] To clarify, Safari and Chrome both use the Webkit rendering engine, as well as parts of the Mozilla FIrefox codebase. Not to point fingers or anything. I’m just sayin’ is all.

[UPDATE 3] I couldn’t take it anymore. I fixed things here so there shouldn’t be any issues. I use a browser sniffer to detect the user agent and deliver either modern CSS or a crappy facsimile thereof for older, less standards-compliant user agents. As long as i keep up to date, no problem… of course, the drawback is obvious. I must keep up to date. Anyway, i’ve completely eliminated the alternate styles for both Chrome & Safari, at least until this bug is fixed in the Webkit renderer. In the meantime, i’ll put together a tester page and link it here.

Categories
uncategorized

Google Chrome obeys alternate CSS

Originally published at jeremyjarratt.com. You can comment here or there.

So Google Chrome is out. That’s great! It’s really a cool, fast, secure browser.

Unfortunately, it appears to break sites in one very important way: it obeys alternate stylesheets, just as if they were normal, active stylesheets. This breaks sites who print their alternate CSS links after active ones (like mine – for now).

I’ve sent this in as a bug to Google, and i’d recommend that others do the same (select “report bug or broken website” from the page icon to the upper right).

At the moment, the only thing to do is to list alternate stylesheets before active ones, or exclude alternate links altogether.

However, there are (naturally!) problems with each method…

Listing alternate CSS (which would still be obeyed) could still cause style conflicts, if there are any rules which are not contradicted (read: overwritten) by later stylesheets below the alternate ones.

On the other hand, not listing alternate stylesheets disables additional functionality in user agents such as Opera, which allows users to select from a menu what style they’d prefer to view a site in – which is arguably the best, most accessible method of switching stylesheets (if you’re using one of those user agents, that is).

For my money, i believe the former is the best option. This means i may have to do some code “cleaning,” which i should have done anyway. In fact, rather than removing extraneous CSS rules, i’ll be adding rules which do not exist in, say, X.css to Y.css, in order to counteract any style collisions by overwriting them with alternate rules.

Btw, for those who need it, here’s the User Agent string i captured:

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

[UPDATE] Matt Wilcox helpfully pointed out that this isn’t exactly a Chrome bug, but a leftover Safari one which has apparently been around for years, according to a decently shrewd Google search. Lesson: test in Safari, even if you think it’s a Practically Perfect Browser.

I have fixed it locally but am waiting for at least a few more hours in order to use this site as an example. Hey, it beats making a quick mock-up. Sort of. (My teachers always thought i was most useful as an example to warn others – well, i do what i can!)

And a big thanks to the great Jeffrey Zeldman for helping get the word out to designers about this. Of course, 99% of people making web sites won’t be affected, but for those of us using alternate styling, it’s a nasty thing to have happen.

[UPDATE 2] To clarify, Safari and Chrome both use the Webkit rendering engine, as well as parts of the Mozilla FIrefox codebase. Not to point fingers or anything. I’m just sayin’ is all.

[UPDATE 3] I couldn’t take it anymore. I fixed things here so there shouldn’t be any issues. I use a browser sniffer to detect the user agent and deliver either modern CSS or a crappy facsimile thereof for older, less standards-compliant user agents. As long as i keep up to date, no problem… of course, the drawback is obvious. I must keep up to date. Anyway, i’ve completely eliminated the alternate styles for both Chrome & Safari, at least until this bug is fixed in the Webkit renderer. In the meantime, i’ll put together a tester page and link it here.

Categories
uncategorized

web design rant

OK, so i’ll admit two things.

1) that i have not updated my WordPress installation, nor fixed the PHP in my totally custom theme to work with PHP5. This is a major headache for so many reasons, not least of which involves time. That’s why it looks super ugly right now.

2) that i have not created a web site in many moons. This means there are a lot of things which i have not yet had to deal with extensively. I’m talking to you, IE7, and your diabolical hasLayout bullshit.

Right now i’m working on a web site for an old friend who has a desktop publishing business. It’s a WordPress site, because that means she can update it herself and not have to pay a schmuck (hello!) to do it for her. So i’m making a theme that matches her design, and it’s not been easy.

Thanks to every single goddamn iteration of Internet Exploder rendering pages completely differently than the others, because of wildly varying degrees of standards compliance, there are now so many bugs to work around that it’s actually no longer fun to make a web site.

To wit:

I have a floating element, followed by a fixed element, on the page. Unless i take out the float, the fixed element completely disappears in IE7. WTF. But when i remove the float, the layout goes all wonky because IE7 measures things differently. Which means i’ll have to bugfix that, which will no doubt screw things up in IE6. Did i mention that IE8 will probably make all of these endeavors even more stupefyingly, insanely complex?

All because Microsoft has got to buck the convention and do their own thing… which i would normally applaud, if it wasn’t so idiotic a thing to do when we’re dealing with a medium which exists on so many different platforms that standards are an absolute necessity.

So fuck you to Microsoft, yet again.

And seriously, to all of you cavepeople who are STILL using Internet Exploder… why? Why, why, why???

Categories
family internets life uncategorized web design work

absent? i have been absent?

I have been absent for a few months, due to a huge variety of reasons. I’ve been having system issues. Some of these issues are ongoing and may eventually require me to reinstall my OS. Some have been resolved with new hardware and some vigorous kicking.

I’ve also quit my job and have been taking time to myself, to play and think and forget about the increasingly troubling world outside my immediate environment and all the long hours of often emotionally demanding work*. You could call it a complete mental breakdown if you want. I would not stop you. I was having a hard time getting anything done and was feeling very overwhelmed. I still have a hard time and am feeling overwhelmed, but i’m also learning to live forwardly, if that makes any sense, and to commit to fewer obligations so that i can focus more and not spread myself so thin. Another thing was that, after my grandfather’s death, i almost immediately jumped back into the mandatory 50-hour work weeks. I do not think that was the healthy thing to do. I should have argued for a leave of absence, or just quit then. I recently found myself re-grieving, and it was not fun.

Anyhow, all this boils down to the announcement that i will soon be overhauling this site yet again. This time, it will not be a radical overhaul, just an update of the back-end, and some cleaning up of the bloated CSS.

In other news, i have also recently begun to quit smoking. It is going surprisingly well, and i am down to just a few hand-rolled cigarettes a day.

On a completely separate note:
XBox 360 gamertag: transmothra

Lastly, my car is making weird klonking noises, so if i die tomorrow, please make sure my funeral and headstone are hilarious and completely lacking in both taste and respect.

*The next time you curse out or yell at a customer service person, remember that they are not paid particularly well to listen to people like you for eight to ten very long hours every workday of their miserable lives. Be calm, speak clearly, and don’t expect more than is fair to all parties, and things will get worked out.

Categories
internets uncategorized web design

IE6 users

I am aware of a problem with viewing this site through the narrow and unrefined lens of IE6. I have a fix for it in mind and will implement it as soon as we are done moving and settled in.

For now, why not get the juicy taste of the Twenty First Century in your mouth with a shiny new web browser? They’re Box Modelicious!

Firefox | Opera | IE7 | Safari

Categories
creative internets uncategorized web design

You can quote me on that

For those designers who want to do the fancy-pants block-quotes thing, here is the CSS. Note that you have to put a DIV element in there to give it padding and close the quotes. That’s because the current specification for CSS do not allow for more than one background image for any single element. This may change in the future, but for now, we must write fairly non-semantic markup in order to achieve the cool effect.

blockquote {
background: transparent url(path/to/quote-left.img) left top no-repeat;
}
blockquote div {
background: transparent url(path/to/quote-right.img) right bottom no-repeat;
padding: 0 50px;
}

… And this is what it looks like:

I used to be really, really humble.

It just made me big-headed.
x jeremy jarratt

I added a :hover behavior to mine. What will you do?

Categories
creative internets uncategorized web design

Big Urgent Tweak Test

Look out for my B.U.T.T.! I’ve just finished uploading some tweaks to make the Big Urgent Wish theme a little nicer. Please, as always, wear your helmets, and let me know if anything falls on your head. I could always use a good laugh.

I hope to have a sanitized version available soon.