get the grid view by default – Sight 1.0.1 Wpshower Theme
I have seen the question of howto have the grid view by default on the beautiful Sight 1.0.1 Theme by Wpshower on the web a couple of times now. And I liked the grid view better than the list view as well. Unfortunately I couldn’t find an answer on the web…
So I figured it out myself. Only took me a couple of hours and a lot of trial and error to get there.
I originally wrote the answer here @ ProWebmasters.
- You have to modify a line on each of the index.php, loop.php and archive.php.
- index.php Line 5:
<a href="javascript: void(0);" id="mode"<?php if ($_COOKIE['mode'] == 'list') echo ' class="flip"'; ?>></a> - loop.php line 3:
<div id="loop" class="<?php if ($_COOKIE['mode'] == 'list') echo 'list'; else echo 'grid'; ?> clear"> - archive.php line 22:
<a href="javascript: void(0);" id="mode"<?php if ($_COOKIE['mode'] == 'list') echo ' class="flip"'; ?>></a>
- index.php Line 5:
- Then you’ll also have to modify the js/script.js.
- script.js lines 45-63:
/*** View mode ***/ if ( $.cookie('mode') == 'grid' ) { grid_update(); } else if ( $.cookie('mode') == 'list' ) { list_update(); } $('#mode').toggle( function(){ if ( $.cookie('mode') == 'list' ) { $.cookie('mode','grid'); grid(); } else { $.cookie('mode','list'); list(); } }, function(){ if ( $.cookie('mode') == 'grid') { $.cookie('mode','list'); list(); } else { $.cookie('mode','grid'); grid(); } } ); function grid(){ $('#mode').removeClass('flip'); $('#loop') .fadeOut('fast', function(){ grid_update(); $(this).fadeIn('fast'); }) ; } function list(){ $('#mode').addClass('flip'); $('#loop') .fadeOut('fast', function(){ list_update(); $(this).fadeIn('fast'); }) ; } 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'); } function list_update(){ $('#loop').addClass('list').removeClass('grid'); $('#loop').find('.post').removeAttr('style').unbind('mouseenter').unbind('mouseleave'); $('#loop').find('.thumb img').attr({'width': '290', 'height': '290'}); $.cookie('mode', 'list'); }
- script.js lines 45-63:
- Finally you will have to rotate the images/mode.png by 180°
That should do it. As you can see it worked for me.
You might have to change the color in line 100. If you changed colors elsewhere…
If you don’t want to modify the files yourself, write me an email and I’ll send mine.
Cheers!
If you have something to say...
So I found a bug. I am working on it but haven’t figured it out… yet.
On the first load of your page you can’t hover the pictures in grid mode. If you reload your page or toggle the grid and the list view it works fine.
Seems to be some kind of problem with the cookie settings.
If you find more bugs, please submit them in the comment area!
[...] Sight 1.0.1 Wpshower Theme Part II May 5, 2011 • 7:48 pm No Comments This is the follow up to this article. Unfortunately I spent a lot of hours trying to get this to work and didn’t succeed. When I [...]
View the result here http://grid.alpipego.com/.
Yes, probably so it is
can you please tell me if you have sorted out the rollover bug? Thanks for your help! xxx
Hi lili.
As you can see I don’t use the sight theme anymore. Mostly due to the grid-bug.
So I haven’t put that much more thought in it.
You can head over to the wpshower forums and see if they have figured it out.
The last time I checked they hadn’t…
Hi, I’m currently testing this grid option and I was wondering how can I change the color when the mouse is over the posts.
Thanks!
Hi Elle.
Sorry for the late reply.
If you still want to change the color when the mouse is hovering over the post, go to:
js/script.js, somewhere around line 98 and change
to the color you like.
Hope that helps!
It’s a whole lot easier than this.
you simply need to add
grid();
before line 46 in script.js
eg
[code]
/*** View mode ***/
grid();
if ( $.cookie('mode') == 'grid' )
[/code]
Actually this might be better
if ( $.cookie(‘mode’) == ‘grid’ ) {
grid_update();
} else if ( $.cookie(‘mode’) == ‘list’ ) {
list_update();
}
else {
grid();
}
Hey, i was wondering if you know how to put an extra sidebar or maybe a division below the grid/list last entries. You have my email, just in case (:
greetings from Peru
I used it in malagateve.com, and fading out the link to the options (grid and list) I get a perfect grid default system.
¡Thanks! ^^
Thank you for this solution, it worked a treat on a site I’m trying to modify!
I know that you’ve taken a lot of time to help people with this although you’re not using the theme anymore, but may I ask a question?
I did everything that you suggested, including flipping the mode.png, but although the grid view is now my default, the png does not change colour when I click between the ‘list’ and ‘grid’ options. The grid stays black and the list stays grey, no matter what I do – can you help at all? I appreciate that you must be really sick of questions about this theme, but any help at all would be brilliant!
Thank you in advance!
annie
I hope I finally made it. Check it out in the demo and read up a litte more here.