Bumping, since there haven’t been any answers
I was able to change the size, but still can’t change the color from the default ugly yellow (ffea97) to black when hovering over the boxes. I could’t find any place in the CSS code that effectively changed it.
That are direct changes injected by theme’s JS, it’s not in regular style.css file.
function grid_update(){
$('#loop').addClass('grid').removeClass('list');
$('#loop').find('.thumb img').attr({'width': '190', 'height': '190'});
$('#loop').find('.post')
.mouseenter(function(){
$(this)
.css('background-color','#FFEA97')
.find('.thumb').hide()
.css('z-index','-1');
})
.mouseleave(function(){
$(this)
.css('background-color','#f5f5f5')
.find('.thumb').show()
.css('z-index','1');
});
$('#loop').find('.post').click(function(){
location.href=$(this).find('h2 a').attr('href');
});
$.cookie('mode','grid');
}
I’m not a JS guy, so what I could think of is just dequeue that script and enqueue a duplicate one with modification on the color code along with new size. It depends on the theme too, some themes don’t use standard WP way to enqueue script.
You might be able to use a more specific selector to win out that inline CSS injection, but it’s not as good as taking care of the JS directly.
Also, your WP installation is outdate, you should immediately update it for security reason, and make sure you got backup of theme files and database.