[JMorris112]

I want to make sure I understand this concept thoroughly… the way to “nest” portfolios is to create departments and put portfolios in it? In other words, you can’t nest portfolios themselves. (I read and re-read the documentation on nesting.)

Also, how can I change the number of columns on a department? If I have only 2 portfolios in a department, it looks bad. I’d like to change an individual department to 2 columns.

Thanks,
John

[serkan]

Hi John,
Yes, you are right.
You can check out this related topic;
http://www.pixelwars.org/forums/topic/portfolio-page-template-max-2-columns/
Thanks

[JMorris112]

Thanks, Serkan.

So the code in that link you attached…

1. If I go into Appearance –> Editor –> styles.css, I can see the code for TABLETS and DESKTOPS MEDIUM … is that where I add the custom code?
2. And if so, isn’t it going to change ALL of my layouts? I want to just change specific departments –> possible?
3. That post refers to PORTFOLIOS. I want to change DEPARTMENTS… does it apply to both?

Thanks again for your help!

[JMorris112]

Okay… so I added that code into styles.css, under both TABLETS and DESKTOPS MEDIUM, and it did what I wanted – to both Portfolios and Departments – BUT – what I really want is to do it for individual departments/portfolios – is it possible to customize individual portfolio and department “pages”?

[JMorris112]

Also, I notice that the departments/portfolios are always aligned left… if I have a very wide monitor/tv screen, the columns change to 4 and so even three columns are left-aligned and it looks bad.

Ultimately, I guess my question is, can I specify a number of columns for each department/portfolio AND have them center-aligned all the time?

Thanks for the help!

[serkan]

Hi,
http://www.pixelwars.org/forums/topic/how-to-use-custom-css-for-wordpress-themes/
First of all, you need to put the code on the link which I gave you. If you want to add it to a specific department, you need to have some coding knowledge. Because you need to select the class page of the relevant page and target it. It is not possible to do this without coding knowledge.
Thanks

[JMorris112]

Hi Serkan. Thanks! I got the code you gave me to work, the way I described earlier… it just applies globally.

I have some coding experience… I built a static site years ago using just a text editor. My problem is, I don’t know how to get to the code in WordPress to modify it. It’s the platform structure I don’t understand. If you could tell me how to get there, I think I can figure it out.

[JMorris112]

I mean, I can go to Appearance –> Editor and see the Templates available to edit, but the individual pages/departments aren’t among them.

I searched the support blogs here and found something about editing the javascript (main.js), and see this code a few times about number of columns…

var containerW = $containerBlog.width();
var items = $containerBlog.children(‘.hentry’);
var columns, columnWidth;
var viewports = [ {
width : 1900,
columns : 5
}, {
width : 1200,
columns : 4
}, {
width : 768,
columns : 3
}, {
width : 480,
columns : 2
}, {
width : 0,
columns : 1
} ];

for( var i = 0, len = viewports.length; i < len; ++i ) {

var viewport = viewports[i];

if( containerW > viewport.width ) {

columns = viewport.columns;
break;

}

It would be a nice feature to be able to specify how many columns you want on a department page.

[serkan]

Hi, As an example, if you give me a url, I can show you how to target it. I do not recommend editing your main theme files.

[JMorris112]

Hi Serkan. Site’s not live yet, so url won’t help. I may rethink my layout and not nest the portfolios in departments and just have them all on the work page. That would be easiest.

What would be great is, if the code checked how many portfolios there were on a department page, and, if it is less than the “default” number of columns specified for that “container” (which it looks like is based on width), to limit the number of columns to the number of portfolios.

For example, I have a department with only two portfolios. Viewed on a wide screen, the template makes 4 columns (and can make up to 5?), two of which are blank, and my two portfolios look left-justified while everything else on the page is centered. If you could code it to check the content and count the number of portfolios to be displayed, and if that is less than the number of columns based on container width, then reduce the number of columns to = the number of portfolios. Something like this (pseudo-code, I don’t know the correct syntax)…

var viewports = [ {
width : 1900,
columns : MIN(#of portfolios, 5)
}, {
width : 1200,
columns : MIN(#of portfolios, 4)
}…

Anyhow – thank you for your help!

[serkan]

I see you, but we don’t promise any customization work anywhere, but still we try to help you all on some simple css customizations that doesn’t take more than just a few minutes,
but what you are asking is not possible with just a few lines of code, it requires more time and effort for customization, if you are not familiar to coding you may consider hiring an expert at wpkraken.io to do the job for you.

[JMorris112]

Thanks, Serkan. It’s just a development idea for you guys.

I added this code in the style.css file to make all the portfolio pages 3 columns, which I’ll be able to make work for me…

@media screen and (min-width: 768px) {
.gallery-grid .masonry-item {
width: 33%;
}
}

Thanks for all your help!
John

[serkan]

Hi John,
The codes you add to style.css are deleted with the new update. I suggest you place the css codes as I write below.
http://www.pixelwars.org/forums/topic/how-to-use-custom-css-for-wordpress-themes/
Thanks

[JMorris112]

Thanks, Serkan. That worked.

[serkan]

You are welcome.