In response to the security issues a few things were updated here, including the site theme, which I was unable to update before because the site was using an older version of PHP. It does however appear that the new version of this theme looks nothing like the old version, and doesn’t really work properly with some things on the site. So far I haven’t actually found a single layout I like as much as the older one here, which was neat and unintrusive when it came to the style and layout of my pages (even if the new one is probably more technically correct from a CSS usage / enforcing CSS usage point of view)
As a result I’m going to end up having to do a bit of CSS hacking until I have something I’m happy with again, and also figure out a way to stop it only showing previews of posts (I’ve got WP set to display full text, but it seems to ignore that)
In other words, please be patient while I get everything looking like it should ;-)
Longtime lurker of your site. I just so happen to have css experience so if you need help or want me to give you a quick patch to make the current theme look like your old one i can do that for you.
Looks like the Gray&Square theme has gone responsive, but as you say, it looks nothing like the previous version. Take a look at http://themify.me/themes/itheme2 as it has similar layout to what you had previously.
yeah, if you can do something like that it would save me some time, this one makes my 2013 article look horrible, already had to disable the auto image sizing because I manually size images to get the aspect ratios correct, and had to hack it to be wider because these new look themes are all much narrower than the old ones, these comments are ridiculously big too, it seems almost like it’s optimized for phone reading which isn’t my target audience at all.
yeah the theme is now based off of bootstrap so there is quite a bit of responsive functionality in the backend. I haven’t looked over the entire theme. just ran it real quick and started crudely recoloring etc. I feel these changes would make a decent first test run on your site. I’m sure we will have to go back and tweak a few things as we go along. Its not 100% exactly like your original theme for obvious reasons but it should give some visual familiarity to longtime readers.
http://snipt.org/YlA3
original background image (use the theme customize feature to set the background color to white and add the image to the background)
http://s15.postimg.org/kw4g8me87/bodybg.png
I’d suggest reviewing your own internal your code changes before merging the two. Once we iron everything out, i can make a diff later on so that its easier to keep a log of changes made to the theme for future updates.
I don’t know if it is related, but http://www.mamedev.emulab.it/undumped/ has been empty for over 1 day now. I don’t know what happened, the site is not down, but the pages are all blank except error text at the top.
still looking at this btw, bit short on time at the moment, thought i’d already replied.
testing…
I can see you are tinkering. The CSS i linked to on snipt should be a drop in replacement for the default style.css located at /wp-content/themes/gray-and-square/style.css
I tried pasting it in directly first and it seemed to break a few things, like the page numbers at the bottom (which appeared as a long bullet list)
so in the end I did a diff against the current one and started manually adding some of the changes, and set some of the fonts closer to what they were before etc.
Seems like the comments area has a limit to how many nested responses you can make.
Perhaps the css went wonky because i used linebreaks. I will post some of the changes i made during my lunch break (in about an hour) so you can add them manually much easier.
Here are a few changes
find and delete:
background-size:cover
add this entire line
.more-link.btn.btn-default {margin-bottom:15px;}
find header.document-header and change the background color to transparent
background-color: transparent;
find body.single-post .post header.meta and add
background-color: #f2f2f2;padding-left:10px;
find header.document-header a.home-link
Change text-align to left
header.document-header div.description
change the text-align to left
find .panel,.commentlist .comment .content,.commentlist .trackback .content,.commentlist .pingback .content,aside{
remove border-radius:4px;
find body.archive .loop article header.meta
add padding-left:10px;
thanks, I’ll get these applied shortly.
looks like we’re getting there, I’ve also modified the php to show the full posts instead of the previews.
I notice some of the change I made to give padding inside the red outline / border on the ‘full’ pages (which now look good) inadvertently also added extra padding to the front page which now seems to have too much tho.
where exactly? Do you mean the padding on the left and right side of each entry?
yeah, it’s inconsistent between front page and individual pages.
you can also notice if if you narrow the view to the point of the side-bars vanishing, on an article page there’s still a bit of background visible before the borders, on the front page the borders touch.
Hi Haze
This is a complete off topic question.
Are you sure of the resolution for games in the simple_st0016.c driver ?
All games have the 384×384 resolution.
I remember in the past, for Neratte Chu for example, it has a classical 4:3 resolution, not a square one.
May be it’s a copy/paste error ?
Could you please check.
it’s not ideal, but the resolution gets set by the driver after startup anyway, so the displayed value is meaningless.
The padding issue has me legit stumped. Perhaps i haven’t had enough coffee to sort this one out completely. It’s very likely that this bug was introduced when we expanded the width of the pages.
The code for the entries and single blog entry pages nearly identical with the exception of the “.loop” attribute used on the main page to begin the articles loop. I tinkered with adding a new rule for .loop and giving it a padding of 15px. That worked however, i noticed that by simply adding a margin rule of just 1px to the left and right of “body.archive .loop article” seems to mysteriously solve the issue across all browsers I tested.
also, i would do a mass find and replace in your favorite text editor for all instances of #428bca and replace them with #a00 just to get the rest of the blue colored objects out of the way.
I see on windows that the header font is Impact but on other platforms it varies. Maybe either pick a standard font or get a woff file for Impact for platforms without it.
Interesting, it was Impact before and nobody mentioned that
You can alternatively tinker with the CSS font-weight and line-height properties to reach very similar effect from nearly any run of the mill sans-serif font.
did you have a chance to test the margin fix? I just tested it again on body.archive .loop article and it worked fine. I simply looked up body.archive .loop article and added margin-left:1px;margin-right:1px;
worked fine.
Also, there are still a few instances where blue shades are showing. Mostly hover-over colors. 3276B1 should be changed to a darker shade of red. #950000 should do the trick. #357EBD should be replaced by #AD0000 or similar. One shade or blue is used in an outer glow effect and uses RGBA values. rgba(102,175,233,0.6) should be changed to something like rgba(160,0,0,0.6)
been away for a day and a bit, going to try and look at this a bit more later today.
No worries. If you run into any problems while applying the css changes, I’ll be around
I’ve applied the palette fixes , and margin fix (i used 0px instead of 1px in the body.archive.loop.article)
remaining issues seem to be (in my opinion) the size the comments section takes up (icons are too big, too much space between everything) and also images, previously if you could see a very thin border around images, so if a screenshot was entirely white you could still see a border, there was also a tiny amount of vertical space between them. This is very obvious in the ‘microvision’ section of
http://mamedev.emulab.it/haze/2013-mame/
which now looks like one big image because there are no visible borders at all..
I guess I need to add / change a few lines on the image styles.
Also I quickly used a table in the “Sangoku Senki Super Heroes” section of the same page, which again now has completely invisible borders.
yeah, the avatar size kills it. It even makes my already douchebag avatar look 100x more douchey. It also vastly stretches nested responses when using mobile.Changing the size of the avatars requires a simple change in /wp-content/themes/gray-and-square/comments-single.php
Open it up. Find
Change the 165 to whatever size you want. Vanilla wordpress themes use 48. Most people that change the size tend to use something around ~60.
As for the images, I will have to look into that a little more. I don’t particularly remember how the images were back then. Will refer to the web archive to see how that was and I will work something out on my end.
Looks like wordpress scrubbed some of the php i posted in my last response. Any way, you can just search for “165” in that php file mentioned above as it only comes up once. Change that value to whatever you want and it will resize the avatars automatically.
Also, the color of some of the non-url headlines look off They should be red as well. you can change that by looking for
h1,header.document-header a.home-link,h2,h3,.commentlist .comment .author-date .author,.commentlist .trackback .author-date .author,.commentlist .pingback .author-date .author,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
Change the color attribute from inherit to #a00000
Last but not least, we forgot the little pac man logo on the top right hand side of the header. Do you still want to add that?
Here is your image margin and border fix
find img{
Add the following
border:1px solid #ddd;margin: 5px;
Missed the text input area border color which is still blue.
find 66afe9
replace with E85C5C
Yes, please fix the giant avatars!
I’ve applied most of these, but the
h1,header.document-header a.home-link,h2,h3,.commentlist .comment .author-date .author,.commentlist .trackback .author-date .author,.commentlist .pingback .author-date .author,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
already has color:#ee00, not inherit
would be nice to have the pacman logo back yes, gave the blog a bit of a retro-look
Strange, the avatars did not have this long spacing when i debugged previously. Then again, i’ve been testing changes using the latest FF developer aurora channel build while I’m at work.
Here is a quick fix for the avatar and comment spacing.
find .col-xs-2{
remove all attributes from it. It seems this column is only used to space out the avatars so it should be fine. nested comments also use a separate padding attribute to give the offset they have.
Here is a quick attempt to get the logo back without having to add more html. This should help ease the headache if you have to update the theme again. If there is ever an update, you can simply compare the two css files and adjust accordingly.
Here is a copy of the logo in case you don’t already have it. I have set it to http://mamedev.emulab.it/haze/logo.png in the background-image attribute below. Adjust according to your preference.
http://s29.postimg.org/woidf22pf/logo.png
header.document-header{
padding must be changed to padding-top
add min-height:140px
div.body{
padding must be changed to 30px
add all of the attribute rules below to header.document-header div.description{
color:#555555;font-size:25px;margin-top:-90px;
replace all attributes in header.document-header a.home-link{ with the following
background-image: url(“http://mamedev.emulab.it/haze/logo.png”);background-position: right center;background-repeat: no-repeat;display: block;letter-spacing: -1px;margin: 0;min-height: 140px;text-align: left;
Pretty much every browser debugger shows there is a parsing error on the color code for
h1,header.document-header a.home-link,h2,h3,.commentlist .comment .author-date .author,.commentlist .trackback .author-date .author,.commentlist .pingback .author-date .author,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
The attribute rule is dropped in every browser i have tried. FF, IE and Chrome. I would go back and remove the color rule entirely and just paste this color:#a00000; for good measure just to see if that works out fine.
ok, done those things image doesn’t seem to be showing?
You added the attributes to the wrong rule. undo the modifications to h1,header.document-header a.home-link{
find header.document-header a.home-link{ near the bottom of the css
I should have warned you about that.
Also, the background does not appear because you have two sets of quoation marks. Proper image rule should be url(“http://mamedev.emulab.it/haze/wp-content/uploads/2014/11/logo1.png”)
ah yeah, the quotes got changed somehow
added the new code to the right place, don’t have the old code handy to restore it tho
The original h1,header.document-header a.home-link{ was just the following:
h1,header.document-header a.home-link{font-size:2em;margin:0.67em 0}
the image and logo ride dangerously close to the top clip of the page. I’d suggest moving it down some. 12 or more pixels down
header.document-header {
simply add
padding-top:12px; (or more to suit your needs)
We are nearing the finish line as far as i can tell.
There are still a few instances of #2A6496 used as hover-over colors that should be replaced with #A00000 or something slightly darker. There are a few other instances of #285E8E which are darker shades of blue. They should be replaced with #870000 or darker.
The only other visual anomaly i see involves the theme in mobile, the avatars seem to wrap up above the comments on small resolutions. I have a gut feeling this may actually be a bug in the original theme. I’d have to look into this some more to be sure.
can the
‘David Haywood’s homepage
Mame work…’
block be centered vertically relative to the image? that might look better?
I guess enabling 10 levels of comments was a bit much too ;-)
I would limit the amount of nested comments for now. The issue is, the original developer used percentages to determine the distance and they are quite a ways off. This is something he may have to address.
As for aligning the block vertically, i tried doing that earlier and it didn’t work. The only way i was able to get a little bit of clearance at the top was adding some padding to the top just like i mentioned above. I suspect the reason for this was because I simply added the image to the header text attribute in order to avoid adding more unnecessary html directly to the templates. There is no doubt that you will eventually need to update this theme again in the future. This makes it as simple as possible to do so.
I just tested adding a padding-top attribute and modifying the min-height to 160 on header.document-header a.home-link {
It looks a bit better that way as well. min-height:160px;padding-top:30px;
This doesn’t center the text perfectly but it sure looks lots better and it also gives some needed space above the image.
wow, nested comments look insane! Here is my last post without it being nested in with the other responses for the sake of clear reading
I would limit the amount of nested comments for now. The issue is, the original developer used percentages to determine the distance and they are quite a ways off. This is something he may have to address.
As for aligning the block vertically, i tried doing that earlier and it didn’t work. The only way i was able to get a little bit of clearance at the top was adding some padding to the top just like i mentioned above. I suspect the reason for this was because I simply added the image to the header text attribute in order to avoid adding more unnecessary html directly to the templates. There is no doubt that you will eventually need to update this theme again in the future. This makes it as simple as possible to do so.
I just tested adding a padding-top attribute and modifying the min-height to 160 on header.document-header a.home-link {
It looks a bit better that way as well. min-height:160px;padding-top:30px;
This doesn’t center the text perfectly but it sure looks lots better and it also gives some needed space above the image.
I’ll look into that then, thanks, easier to maintain is definitely preferable to a few visual changes.
I’ve turned off nested comments, WP really doesn’t handle them well, it’s like an ugly hybrid between a threaded and flat mode forum, pure threaded might work better, but I don’t want to resort to plugins, especially not on something as potentially vulnerable as comments systems, so I’ll just keep it off.
Wow, thanks CPZ! Your advice would be expensive if someone had to pay for it, you really know your stuff.
@Haze: I only encourage you to keep things as simple as possible because i know from experience just how much wordpress is being targeted lately. As the easiest, most versatile and widely used blogging software; wordpress is attacked constantly. Its not a matter of if but when the site is attacked if you don’t keep up with updates. I do agree with you on the other comment systems as well. Most of them are in shambles right now. Disqus has a number of insanely stupid bugs that so far, the disqus team has yet to address.
just tested the modifications of header.document-header a.home-link that i mentioned above. seems to work on all browsers. I simply did this
find header.document-header a.home-link{ (don’t forget, second one near the bottom)
modify the min-height to 160px
add padding-top:30px;
@Huggybaby thanks dude. I’ve been a huge fan of Haze’s blog updates. There’s no way that I’d sit here and not lend a helping hand when Haze has done so much.
You’re most welcome. I wish you could do a theme for the crappy layout at Slightlymagic.net I asked a long time ago and had a few nibbles, but no bites.
I like this new layout. Going through the old posts that have lots of pictures, it seems the pictures have more room to breathe now which is cool since I always thought things looked crowded.
I think everything is looking good now, if you feel anything else could be tweaked, or that I’ve missed something then let me know. I think it’s about time to write a little update about the recent ‘Alien Invaders’ addition, it’s unique in the world of Space Invaders type games as it’s an original codebase and an unusual cabinet setup.
@Haze
I have done a quick pass through on the site, checking to see if everything visually looks okay. Also did a quick run-through via mobile. Things look great with the exception of the image sizes in your blog post (the race drivin’ panorama images throw things out of whack) and some bad word wrap bug in the header text, description and image.
Below are links to how the header looks on an average MDPI Android device in two orientations
Portrait
http://s10.postimg.org/8901dzf09/Screenshot_2014_11_18_09_00_19.jpg
Landscape
http://s10.postimg.org/lefjk38vt/Screenshot_2014_11_18_09_03_18.jpg
I have come up with a better, much cleaner solution that wraps your header texts much more cleanly and also helps center the text a little more. The problem is, the pac image cannot be clicked on to get back to the main page. I originally did this as a cheap work-around for you not having to add more unnecessary html to the templates so this is never going to be a perfect solution but at least it will make things more mobile friendly. So it is entirely up to you if you want to make the appropriate changes.
If you want to do it, here is the method
add this entire line to the css
.col-md-10.col-md-offset-1 { background-image: url(“http://mamedev.emulab.it/haze/wp-content/uploads/2014/11/logo1.png”); background-position: right center;background-repeat: no-repeat;margin-top: 10px;min-height: 140px;}
find header.document-header a.home-link{ and replace everything in it with the following rules (Remember, this is the one near the bottom of the css)
display: block;letter-spacing: -1px;margin-top: 30px;text-align: left;
Find header.document-header div.description and remove
margin-top: -90px;
Last but not least, this is very important. Make sure your site is running a site title. Right now it seems it does not or there is a bug in the theme. You previously had “David Haywood’s Homepage” as the site title. Go into your wordpress dashboard and click settings and then select general. It should be the very first option at the top.
The site title is already set, maybe a bug?
I’ll have a play with other things shortly. Large images are always likely to throw things a bit out, hard to avoid, I often need to specify the sizes of the images exactly (because many arcade games don’t use square pixels, and so if I want to use the original snapshot files, which I do, I have to manually specify sizes that give a 4:3 ratio (horizontal) or 3:4 ratio (vertical) in many cases – the theme originally had the max width at 100% of the column width for all images, but then things didn’t scale properly when I manually specified sizes)
no worries about the images. The only one causing any issues is the panorama pics and nothing can be done about that really. All of your remaining images are small enough to be viewed in mobile just fine and multiple images across a single line span seem to wrap over to the next line regardless of screen size just fine.
Site title is definitely a bug. It does give the blog entry title but it refuses to output the blog name and description on the blog’s index page. I snipped some code from a default wordpress theme and tested it locally. It seems to work.
Go to your dashboard > appearance > editor > header-html.php
Find the title tag. Replace it with the following:
<?php
// Print the tag based on what is being viewed.
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( ( $paged >= 2 || $page >= 2 ) && ! is_404() )
echo ' | ' . sprintf( __( 'Page %s' ), max( $paged, $page ) );
?>
I did some research myself and found
http://stackoverflow.com/questions/9055009/wordpress-wp-title-blank-on-index-page
seems to describe the issue, the fix recommended there also works
yup, that works too. didn’t bother to look into it that much really.
As well, the favicon that used to be a kanji is now something generic.
wasn’t ever really that keen on that favicon anyway, something a bit more retro would be good :-)
btw thanks for the help CPZ, it’s really been appreciated, was worried I’d never get it looking like it did before!
I had trouble getting a favicon to work properly some years ago until I found this site:
http://tools.dynamicdrive.com/favicon/
Not that you need help, just sayin’.
@Haze
No problem. I’ve had to do much more extensive CSS work than this. This site was child’s play compared to some of the crazy stuff I’ve done. I would have done it a lot faster had i had access to the site live and had more spare time. I did all of this in between work. I will be around if you ever need me. You should have my email address in the comments db as well. If you need to update and get stuck on something, have a security issue etc, just let me know.
I’m slowly starting to get more into MESS and UME so I’ve been reading your blog on a regular basis. I’m quite comfortable using UME for some of the more common stuff like NES, Genesis, ColecoVision etc. Still wish there was native ISO support for CD based consoles like TG-CD and Sega-CD. There is still some sound work needed to be done on turbo grafx cd stuff and it becomes a real pain relying on CHDMan to convert a handful of games just to test this out. Last time i tried CHDMan, it was still pretty buggy.
for both Haze and Huggybaby, favicon.cc has tons of icons. Including some retro ones
http://www.favicon.cc/?action=icon_list&tag_id=161
http://www.favicon.cc/?action=icon_list&tag_id=70
http://www.favicon.cc/?action=search&keywords=retro