Change the number of project columns?

Astrid
#1

Sorry if I’m asking a lot of questions, but I really like this theme and with a few tweaks I think it will work well for me.

Is it possible to change the number of project columns that show on a desktop screen? I’d like to show six projects/portfolios and it would look much better if the thumbs were displayed in three columns, rather than four as seen below.

#2

You can add this:


.project {
    width: 33.3333%;
}
.project:nth-of-type(4n+1){
    clear: none;
}

You’re probably also going to want to use a plugin to set a new image size since by default the width is limited to 500px. That works with 4 desktop columns but not so well with 3. Then regenerate your thumbs.

#3

This worked well until I reduced the browser window and then the thumb nail arrangement started looking weird. There were also problems with the hover effects on a full size screen if I removed the container. (see pics below)

I know this is a free theme, and I don’t want to take up too much of your time with this. I may just just use Services instead if I can make the images linkable. I think I might be able figure that out using the example you gave me for the Sydney theme.

#4

Add this too please, at that screen size there should be 2 projects per row but it gets overwritten by the code you previously added:


@media only screen and (max-width: 991px) {
   .project {
       width: 50% !important;
   }
}

The hover effect doesn’t really have a problem. If you want 3 projects per row you just need to increase the project image sizes with the plugin I’ve mentioned above, even more if you remove the container.

#5

I added the extra code, but it still acts the same. It never changes to 2 projects per row even with the browser window reduced to less than 400px.

#6

I just realized you were missing an opening bracket after the @media line. I changed it to this and now it works. Thanks!

@media only screen and (max-width: 991px) {
   .project {
       width: 50% !important;
   }
}
#7

Oh yeah, I’ve edited it now in case anybody else tries to use it.

#8

I messed around a bit and figured out how to add a link the service thumbs as well since I might use this section to link to my portfolio pages. I took the instructions from the Sydney theme and modified them for Astrid. The “if” statement from Step 4 of the Sydney instructions didn’t work for me here, but I found a way to make the links work without it.

I’m posting my solution in case anyone else wants to give it a try, but I’m a hack at this stuff and really don’t know what I’m doing. So if there’s a better way please let me know.

  1. create a child theme

  2. duplicate “/inc/framework/widgets/front-services.php” from parent theme to the child theme

  3. open front-services.php in your child theme

  4. change this line:
    <?php the_post_thumbnail('astrid-small-thumb'); ?>
    to:
    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('astrid-small-thumb'); ?></a>

  5. Activate your child theme

  6. open functions.php in your child theme and add this line:

if ( function_exists('siteorigin_panels_activate') ) {
  require_once get_template_directory() . "-child/inc/framework/widgets/front-services.php"; }
  1. open functions.php in your parent theme and change this line:
    require get_template_directory() . "/inc/framework/widgets/front-services.php";
    to:
    // require get_template_directory() . "/inc/framework/widgets/front-services.php";
    Please make sure you edit the file from the FTP not from wp editor.

The only problem with this method is if the parent theme is upgraded, you will need to edit the functions file again.

I also added this css to the child theme to add some simple hover effects to the thumbs:

/*set hover styles for images in Services section of Astrid homepage */
.service-thumb img {
/*image border /
border: 1px solid transparent;
padding: 1px;
transition: border-color .3s linear;
-moz-transition: border-color .3s linear; / FF3.7+ /
-o-transition: border-color .3s linear; / Opera 10.5 /
-webkit-transition: border-color .3s linear; / Saf3.2+, Chrome */
/*image opacity */
opacity: .8;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}

.service-thumb img:hover {
/*image border */
padding: 1px;
border-color: #fcd088;
/*image opacity on hover */
opacity: 1.0;
}

#9

Check this out to see how to load your own widget in an update-proof way. Note that you don’t need to check for function_exists(‘siteorigin_panels_activate’) since Astrid doesn’t rely on the Page Builder by SiteOrigin plugin.

I think I’ll make a child theme for Astrid with all the widgets preloaded in the child but inactive as I’m assuming people might need to modify them.

#10

I wondered about the SiteOrigin part. It didn’t seem necessary, but I wasn’t sure. I just removed this part from the functions file in my child.

if ( function_exists('siteorigin_panels_activate') )

I think a child theme with all the widgets preloaded would be very useful. I had a quick look at that other thread, but didn’t really understand it. I’ll have another look later.

Cheers.

#11

I just noticed one of the closing closing curly brackets was left out of the code box in step 6 of the instructions above, but I can’t edit the post to correct it. If anyone is trying this make sure you don’t miss that bracket and remove the siteorigin part.

#12

Hi

Sorry to hijack this, but I was wondering if i set a sectionID of projectside to a widget in the sidebar, how can I make this apply to only this and not the other occurrences of the widget :slight_smile: