5 columns portfolio « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Angular

5 columns portfolio

24 posts from 5 voices

Started 9 months ago by HEPA
Latest reply from Devin
This topic is not a support question

Tags:

HEPA
Member

I would like to have a 5 columns portfolio, but the options only give me a maximum of 4 columns.
Would it be possible to achieve that?

Thanks

Posted 9 months ago #
Ismael
Moderator
Hello,

I think a simple css solution could work. Try this on your custom.css
```
.ajax_portfolio.one_fourth {
width: 20%;
}
```
Regards,
Ismael
Posted 9 months ago #
HEPA
Member

Thanks Ismael,

I have tried to add the code provided, but nothing changes...

Posted 9 months ago #
Ismael
Moderator
Hi HEPA,

Try to change the above code with this code:
```
.ajax_portfolio.one_fourth {
width: 20%!important;
}
```
Hope this helps. :)

Regards,
Ismael
Posted 9 months ago #
dmc vi
Member

also looking for the possibility of a 5- and 6-column-portfolio.

the postet code show no change, ismael.

Posted 9 months ago #
Ismael
Moderator

Hello,

That's weird, in my end it works, please try to remove cache and reload the page.

Note: You need your portfolio setup with 4 columns.

Regards,
Ismael

Posted 9 months ago #
dmc vi
Member

thank you, ismael. the four-column-hint helped working it out :)

Posted 9 months ago #
dmc vi
Member

[edit] but this workaround not really responsive anymore. my portfolio items stay strictly arranged as 6 column grid, even within a smartphone breakpoint.

how can we get it responsive again?

Posted 9 months ago #
Ismael
Moderator

Hi DMC01Wien,

Can you post a link to your site? so we can check it further. :)

Regards,
Ismael

Posted 9 months ago #
dmc vi
Member

this will take 'til next week. it is now hostet via mamp on my local computer. (in the meanwhile i can provide some screenshots).

what we need too, is a 6 column-footer-area. how this can be done?

Posted 9 months ago #
Ismael
Moderator
Hi dmc vi,

I am assuming that instead of 5, you want to make it 6 columns. You still need to set up your portfolio to 4 columns and replace this code in your Quick CSS: (5 columns):
```
.ajax_portfolio.one_fourth {
   width: 20%!important;
}
```
Replace it with this code: (6 columns)
```
.ajax_portfolio.one_fourth {
   width: 16.66% !important;
}
```
we just divide 100% by 6. Hope this helps. :)

Regards,
Ismael
Posted 9 months ago #
dmc vi
Member

thanks, ismael, off course i did changed percentage down to 16.6 before. :)

Posted 9 months ago #
dmc vi
Member

what we need too, is a 6 column-footer-area. how this can be done?

Posted 9 months ago #

Dude
Dude

In angular\includes\admin\register-admin-options.php replace:

$avia_elements[] =	array(
					"slug"	=> "footer",
					"name" 	=> "Footer Columns",
					"desc" 	=> "How many colmns should be diplayed in your footer",
					"id" 	=> "footer_columns",
					"type" 	=> "select",
					"std" 	=> "4",
					"subtype" => array('1'=>'1','2'=>'2','3'=>'3','4'=>'4','5'=>'5'));

with:

$avia_elements[] =	array(
					"slug"	=> "footer",
					"name" 	=> "Footer Columns",
					"desc" 	=> "How many colmns should be diplayed in your footer",
					"id" 	=> "footer_columns",
					"type" 	=> "select",
					"std" 	=> "4",
					"subtype" => array('1'=>'1','2'=>'2','3'=>'3','4'=>'4','5'=>'5','6'=>'6'));

Afterwards select the 6 column option in the option panel and open up footer.php - replace:

case 5: $class = 'one_fifth'; break;

with:

case 5: $class = 'one_fifth'; break;
case 6: $class = 'one_sixth'; break;

Then add following code to css/custom.css custom.css:

div .one_sixth {
    float: left;
    margin-left: 4%;
    overflow: hidden;
    position: relative;
    width: 16.66%;
}

Posted 9 months ago #

dmc vi
Member

unfortunately tis does work out. instead of 6 columns side by side, i have one column left with all widgets, one below the other …

Posted 9 months ago #
Dude
Dude

Hi!

Can you post a link please?

Regards,
Peter

Posted 9 months ago #
dmc vi
Member

sorry for the delay. yes, i can provide a link. but the site is secured via htaccess. how can i submit a link and htaccess-login nonopenly?

we have managed to setup a 5-column-portfolio. though when loading, it starts as a 4-column, at least the fifth portfolio item jumps up in line. and it does not work as a responsive layout anymore.

Posted 8 months ago #
Devin
Moderator

Hi dmc vi,

You can send the information to my email at DevinVinson (at) gmail.com. Make sure to include a link to this topic so that my spam filter doesn't grab it :)

Regards,

Devin

Posted 8 months ago #
dmc vi
Member

hi, devin,

have you received my mail according to the angular 6-row portfolio, sent to you four days ago? maybe you can confirm the receipt.

regards.

Posted 8 months ago #

Devin
Moderator

Hi dmc vi,

When I viewed the site I didn't see any issues with the portfolio so I thought it was solved.

I see now that you asked for a different request for the footer. You can do basically the same thing for the footer that you did with the portfolio by adding the option for the admin in register-admin-options.php and changing:

$avia_elements[] =	array(
					"slug"	=> "footer",
					"name" 	=> "Footer Columns",
					"desc" 	=> "How many colmns should be diplayed in your footer",
					"id" 	=> "footer_columns",
					"type" 	=> "select",
					"std" 	=> "4",
					"subtype" => array('1'=>'1','2'=>'2','3'=>'3','4'=>'4','5'=>'5'));

$avia_elements[] =	array(
					"slug"	=> "footer",
					"name" 	=> "Footer Columns",
					"desc" 	=> "How many colmns should be diplayed in your footer",
					"id" 	=> "footer_columns",
					"type" 	=> "select",
					"std" 	=> "4",
					"subtype" => array('1'=>'1','2'=>'2','3'=>'3','4'=>'4','5'=>'5','6'=>'6'));

Then in your footer.php changing:
case 5: $class = 'one_fifth'; break;
to

case 5: $class = 'one_fifth'; break;
case 6: $class = 'one_sixth'; break;

Regards,

Devin

Posted 8 months ago #

dmc vi
Member

hi, devin

i don't see the portfolio problem solved.

the portfolio loads as a 4-column portfolio, at the end the 5th item jumps up. and it is not responsive.

Posted 8 months ago #
Devin
Moderator

What browser are you not seeing the responsive layout work? I've tested in Firefox, Chrome and IE9. If you are referring to the footer, once you get down to the mobile views it no longer spans multiple columns but instead will turn into a single column and each widget area goes one after the other.

As for the loading, I'm not aware of a way to fix that easily as I'm not familiar with the details of the isotope function.

Regards,

Devin

Posted 8 months ago #
dmc vi
Member

we've testet chrome, ff15, safari.

just compare the portfolio behaviour with the one of the original theme.

the theme normaly stacks the portfolio items, when reaching the phone media query.

but with the replaced code this stacking isn't working anymore.

if your not familiar with isotope funktion – maybe kriesi himsel can provide a fix.

Posted 8 months ago #
Devin
Moderator
That is the trade off for forcing the addition of another column. The css rule:
```
ajax_portfolio.one_fourth {
   width: 20% !important;
}
```
Says that the one_fourth item should always be 20% width no matter what. So when the media query gets to the mobile size it is still being told to stay at 20% width instead of growing to fill the entire column.

You could potentially apply the same thing that was done with the footer to the portfolio and add in a new case for it in includes>loop-portfolio.php but there would be some deeper css customization needed to then change the theme to be responsive as well.

At that point however we can't really provide all the needed changes since it starts to get pretty time consuming to add everything in completely. If you aren't comfortable going that route alone, it should only take a freelance web developer 2 hours or so to implement.

Regards,

Devin
Posted 8 months ago #