I recently made a console theme for my website. Photos left unmodified looked too clean and fancy to fit in with the theme. I played with the saturation and contrast functions of the CSS filter property, which gave okay results, but not enough. I thought a pixelated look fit in, and decided to see if it would be possible with pure CSS, something like pixel art or perhaps sixel on a low resolution terminal. This Stack Overflow answer led me to the solution of using an SVG filter through a url() value of the filter property.
theme posts
CSS: Repeating character borders
Since adding a theme switcher to my site, I’ve created several new simple themes, including a console theme. It is meant to look somewhat like a command line console / terminal. For this theme, regular borders didn’t fit in. I wanted something with repeated characters, looking more like some terminal application output or Markdown would have. Looking for doing this with pure CSS, a Stack Overflow answer helped me come up with a solution.
There is no way with the CSS content or the like to just have a character repeat to fill a given width or height. So the solution has us manually repeat the character in the content of a pseudo element enough times to handle our largest likely container. We position absolutely and use overflow: hidden to prevent our content from expanding our container and to cut it off at the appropriate length. With alignment and padding, we can then have repeating characters that line up properly in a monospace font grid.
Project: Website theme switcher
I finally made a theme switcher for my website. Ever since I saw the CSS Zen Garden, I loved the idea of using the same markup with completely different appearances. This led to a desire to have multiple themes and an ability to switch them on my own site. Early on I didn’t have the ability, and later I didn’t have the energy or time, or decide on the way I wanted to do it. There are performance and complexity considerations, as well as needing to make decent themes other than the default one. My eventual desire to have a static-friendly site complicated the performance aspect as well.
Some browsers have a built in way to change to alternate stylesheets, but they stupidly download all of them even when they’re not being used. I’m not doing that. So JS or a server-side cookie solution are needed, and the latter won’t work for static sites. I try to minimize the JS on my site and didn’t want something heavy or complex, especially if it were loading before page render.
Recently, I had the energy and decided on a simple, lightweight JS way to do it. I decided to start it even without real alternative themes.
Continue reading post "Project: Website theme switcher"Dark theme for my site
This weekend, I implemented a dark theme for my site.
Continue reading post "Dark theme for my site"The Happs
These happs blogs don’t always allow me to go into as much depth as I would like, but they are definitely a lot easier to write. I have been writing much more frequently now that I’ve started them. “Remember, a writer writes, always.”
WordPress Starter Theme
After much time and effort, I’ve finally released my WordPress base theme, TJMBase. It is the very bare parent theme for what my website has been running on for several months now. These days, I don’t use WordPress for very much, but I have done several projects with it, especially earlier in my web development life, and to some extent still like it.
Years ago, I had made a theme starter that was basically bare of any styles and extra fluff, the kind of thing you might want to start with if you wanted a good starting point for doing a theme basically from scratch. I never released it (didn’t release anything open source at that point), though I did use it for some projects and let at least one interested party use it. I had stopped doing much with WordPress once I got my current job, but I did want my theme starter to be useful to the community. WordPress 3 came out and brought some important changes that made my old theme behind the times, missing some important features.
Continue reading post "The Happs"WPThemeHelper, my helper for WordPress themes
In remaking my website using WordPress, I’ve been working on a base theme that I can use for other sites. I decided to take some of my experience from the Symfony world, such as organizing functionality into namespaced classes, grouped into “bundles” of functionality that can be (somewhat) independently installed as needed depending on the project. I already mentioned the PHP-BufferManager I’m using in a previous post. I’ve also created a more specific to WordPress project with more varied functionality, a theme helper called WPThemeHelper.
The theme helper has several classes to help make theme development cleaner and perhaps a bit easier. The readme on github has more details, but some of the more important ones are:
- SettingHelper: Allows setting of WordPress settings with a map (associative array). It calls the appropriate WordPress function at the appropriate time in WordPress’s initialization cycle. Helps clean up the ‘functions.php’ file and makes remembering what functions to call for various theme settings easier.
Working on a new WordPress bare theme
I haven’t been doing much with WordPress, since at Cogneato we have our own CMS. But a customer request for a WordPress site a while back and the upcoming GiveCamp which I will be participating in this weekend have rejuvenated my interest in working with it. Back when I was using WordPress more often, I had built a bare theme I used as a starting point, including for the Stearns Homestead site I was working on when I first started this blog. That was the WordPress 2.x era though, and the theme is now outdated. I decided to begin work on a new theme, making use of the new 3.x features.
I have learned a lot since building that theme, and wanted to bring in some of my new knowledge and coding practices to the new theme. I also wanted to put this one on GitHub, since I now have an account and others might find it useful. I still haven’t decided for sure what I’ll call it (for now it is TJMBare) and have more work to do, so it isn’t on there yet, but hopefully will be by this weekend. Anyway, I wanted to mention some of the things I have done or will be doing with it.
Class helpers
I am putting all of my functionality and data into classes that in most themes is put into the global namespace. The classes will help group functionality and data together, making it easier to develop and to avoid collisions. Since WordPress doesn’t yet require PHP 5.3+, I am avoiding using PHP namespaces, but am compensating by putting the equivalent on the front of the class names. Functions.php will just include the class files and instantiate what is needed. Child themes will be able to extend parent theme classes to change functionality.
Continue reading post "Working on a new WordPress bare theme"New Theme Again
It wasn’t long with that last theme. It had some undesirable issues, such as the cut off code blocks, no page tabs, and a few general appearance things. I had looked at this Monochrome theme before and skipped over it because it lacked differentiation for “code” blocks. However, I’ve discovered that it does put any “pre” blocks into boxes, and they have overflow set so that any cut off width can be scrolled to. So now I’ll just have to go back and put everything in “pre” blocks, and it should be much more readable.
The theme is very clean and simple and almost monochromatic, fitting better with the current theme on my own site. I like how post meta information is set to the side in such a way that makes it more readable as well as the post. I don’t like the dates on pages, but I’ll live with that. There is a fair amount of “white” space, making things more readable, comfortable, airy.
I would like it to have a flexible width, so that my code blocks don’t have to be so scrunched if they don’t need to be. It lacks header differentiation, but it doesn’t seem to matter as much since the headers stand out less in general and the break in meta information differentiates posts. It uses a fair amount of medium-gray on semi-dark gray, which does not pass WCAG luminosity ratio requirements and thus can be hard to read: I’ll live with that for the other benefits I’m getting.
New WordPress.com Theme
I searched through every 2-column theme with widget support in WordPress.com’s repository (there were 58) in an attempt to improve the appearance of my blog. The main problems with the old one were that levels of headers weren’t differentiated well enough (the second level ones looked like first level) and the code blocks weren’t separated from other content well enough. I couldn’t find one template that I was fully happy with. Every one had something I didn’t like, and very few even had both good code block separation and good header differentiation.
This theme (Neat!) is one of the few that did well enough with those issues and overall for me to choose. It has nice distinct code blocks and I can easily tell the difference between headers. I’m not big on the colors or the header (though that’s configurable). It removed my tabs for pages, but that was no biggie. A few other minor issues. I may stick with it for my tenure at WordPress.com.
Continue reading post "New WordPress.com Theme"WordPress: Multiple Dynamic Sidebars
I’m making a “blank” type template for WordPress that I’ll be able to modify for sites as I develop them. I wanted to make sure my template was compliant with the dynamic sidebars feature of WordPress and have multiple sidebars already there for quick creation with new sites. I wanted the first to have some default content, while the others would not be displayed unless they have dynamic content. I suppose that might not end up being useful for the fixedness of the one-off designs I’ve been doing, but we’ll see…
The tutorials I found didn’t discuss how to make the container for each of multiple sidebars display only if the sidebar had dynamic widgets. The is_dynamic_sidebar() function is what was needed. So I register my sidebars like normal, in “functions.php”:
if(function_exists('register_sidebar')){
register_sidebars(2, array(
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
}