Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Staggered grid for category page in autofocus+ pro v1.6 WordPress

  • SOLVED

I am trying to make my category pages in AutoFocus+ Pro v1.6 have that staggered grid effect. Reference http://www.benjacobsenphoto.com/category/gear/ for an example of how I want my categories to look like. Please help... If you need more info let me know and I'll try and explain as best as I can.

Answers (2)

2011-10-14

Abdessamad Idrissi answers:

What is the URL of your website?


Mike Fleurimond comments:

http://www.project1804.com is my website! and the category page I want to switch is... http://project1804.com/category/the-duchess/


Abdessamad Idrissi comments:

Check [[LINK href="http://vimeo.com/26429421"]]this video[[/LINK]]


Abdessamad Idrissi comments:

by the way; try to add more posts to "the-duchess" category.. ther's only one there.


Mike Fleurimond comments:

The video is helpful but, I do not have Autofocus 2.0, I have v1.6... So it is not the same. Also I have added more posts to The-Duchess Category


Abdessamad Idrissi comments:

Strange :(

Normally Autofocus theme should do that grid.. Backup your theme and delete it the install it from scratch.


Mike Fleurimond comments:

Well I just purchased the AutoFocus2.0... Now am having all new problem! I can't change the grid color, it has the white color on it that I want to change to something else see http://fthrwght.com/autofocus/prodemo/ for example... I'm sure the designer had the sense to put the ability to switch the color!


Abdessamad Idrissi comments:

Normally you can change the background color in the options.
if not, then open the theme style.css and in the bottom add:

div.af-grid{
background-color: black;
}


Mike Fleurimond comments:

Is it really that simple... and how does he have the words on top of the text before he even puts the mouse over the picture


Mike Fleurimond comments:

You gave me a great suggestion... but please look at my page and see the result... http://project1804.com/news/ the mouse over the picture is perfect now but the layout has a black background... please we almost have solution... AutoFocus 2.0 has a css editor right in the appearance/theme options


Abdessamad Idrissi comments:

It is black because of css editor:
div.af-grid{

background-color: black;

}

You can change the black color to the color you would like the borders of your grid to appear.
was that what you want?


Mike Fleurimond comments:

The color is fine but Look at the grid area it is black also, makes the page look very sloopy. Compare the look of this http://fthrwght.com/autofocus/prodemo/ very neat and clean look, as opposed to this http://project1804.com/news/ very sloppy and unprofessional


Abdessamad Idrissi comments:

If I understand what you mean; the page http://fthrwght.com/autofocus/prodemo/ looks pro because the images there are pro! and with vivid colors.. the ones you have in http://project1804.com/news/ are dark, some with uncut borders and with different sizes (like the one with a 16:9 letterbox)


Mike Fleurimond comments:

On the http://fthrwght.com/autofocus/prodemo/ site Look at the picture grid... the background is the same as the rest of the theme, when the mouse goes over a picture it turns red. On my site the grid has a black background and I don't want the grid black, I just want when the mouse is over a picture, for the picture to turn black exactly how you see it on the Autofocus Site


Abdessamad Idrissi comments:

All right, as I said before such settings should be available on the theme admin panel, but since I don't have that theme I can't confirm :(

So to change the background color of the grid to back to white and apply the black when you mouseover the grid pictures, change the previous code:
div.af-grid{
background-color: black;
}

to
.af-layout #content .hentry, .post {
background-color: black;
}

If there's it doesn't work, then create a temporary admin account and send me by private message the login details ;)


Mike Fleurimond comments:

Thank you... Thank you.... Thank you... I am so greatful!! Please see the result of your genius http://www.project1804.com... Now if you could tell me how to make the text appear on the photo before I put the mouse over it


Abdessamad Idrissi comments:

You are welcome!
I think there's something wrong on the way you have installed/configured your theme; normally all the changes/bugs we have discussed here are already integrated inside the theme -no need for hacks. I think you have a corrupt Autofocus theme.

So to make the text appear, you should edit the jQuery script

// Hover animations for front page
jQuery(".af-layout .post").hover(function(){
jQuery(this).find(".entry-title").stop(true).fadeTo("fast", 1.0).css({'display' : 'block'});
jQuery(this).children(".entry-image").stop(true).fadeTo("fast", 0.25);
}, function(){
jQuery(this).find(".entry-title").stop(true).fadeTo("fast", 0).css({'display' : 'none'});
jQuery(this).children(".entry-image").stop(true).fadeTo("fast", 1.0);
});

and replace it with

// Hover animations for front page
jQuery(".af-layout .hentry").hover(function(){
jQuery(this).find(".entry-date").stop(true).fadeTo("fast", 1.0).css({'display' : 'block'});
jQuery(this).find(".entry-title").stop(true).fadeTo("fast", 0).css({'display' : 'none'});
jQuery(this).children(".entry-image").stop(true).fadeTo("fast", 0.25);
}, function(){
jQuery(this).find(".entry-date").stop(true).fadeTo("fast", 0).css({'display' : 'none'});
jQuery(this).find(".entry-title").stop(true).fadeTo("fast", 1.0).css({'display' : 'block'});
jQuery(this).children(".entry-image").stop(true).fadeTo("fast", 1.0);
});

I can fix all this if I have direct access to the website's dashboard.


Mike Fleurimond comments:

email me at [email protected]

2011-10-14

Luis Cordova answers:

hi Mike,

this should be easy either on the settings or just grabbing the template where the grid is formed and adapting the category template to show this

please provide with url

thanks!


Mike Fleurimond comments:

http://www.project1804.com is my website! and the category page I want to switch is... http://project1804.com/category/the-duchess/


Luis Cordova comments:

Mike can you private message me with your login so I can go in and check for the option/switch the template? if that is possible good if not then I will find another way.


Mike Fleurimond comments:

how do I private message you?


Luis Cordova comments:

just sent you a PM check your inbox


Mike Fleurimond comments:

Man Where is the inbox on this site??


Luis Cordova comments:

i got an email with a link to send you a private message it is all, perhaps you can try on my profile to send a message


Luis Cordova comments:

if all fails send message through this form http://www.craftitonline.com/contact-me-for-support-with-a-donation-of-any-amount/

that will send me a straight message


Mike Fleurimond comments:

I did that!