qua theme: displaying portfolio items in categories, text block width, columns
-
Hey all,
I just recently switched themes from Exhibit to qua and I’m having some trouble customizing it. There is just *so* much information about CSS customization available. I’m just starting out with coding of any sort, and I’m having trouble parsing it all. I hope one of you can help point me in the right direction. I have three things that I’m trying to change:
1. I would like to make the welcome message a bit wider. This seems like a simple thing, but I can’t for the life of me figure out which selector to use for that particular piece of text. (And in general: is there a list of these somewhere, in case I want to change the font size on a widget or all my blog post titles or something?)
2. In the blog section (desktop view), the preview of the beginning of each article shows up as two columns. Is it possible to change this to one?
3. In Exhibit, on my portfolio page, there was a horizontal menu above the projects so that the reader could choose projects by category (in my case, “books” and “papers & articles”). I really liked this functionality and I’d like to add it to qua, so that I can show off my work by category, instead of just en masse. Ideally, I would have a left-justified, horizontal menu of available categories.
Thanks! M.
The blog I need help with is: (visible only to logged in users)
-
One more thing: is it possible to organize the portfolio projects by category, i.e. all of the books, then a dividing line, then, below that section, all of the papers & articles, then a dividing line, etc. I’m anticipating that I will have 4-5 categories at some point in the near future and it could get pretty messy (wall of projects!) pretty fast.
Thanks!
-
Hi there, I would suggest playing with the Portfolio Shortcode which gives you the ability to show only projects of a certain type, or even by project tags. You can put more than one shortcode into a page, so you could put one and then a horizontal rule and then another different group.
-
Thanks for this – that’s really helpful! I’ll play around with it and post again if I have any further questions.
Any idea if it’s possible to adjust the text width on the theme’s homepage template?
-
You are welcome, and please do let me know if you have any questions or problems with the shortcode.
On the home page, go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and see what you think. What I’ve done is increase the width of that text from 61% to 80% and centered that block of text. I’ve limited this to screens/windows 769px and wider and allowed the text to go full width at 768px and narrower (the original design).
@media screen and (min-width: 769px) { .home .site-welcome { width: 80%; margin-left: auto; margin-right: auto; } } -
Perfect! That’s exactly what I needed. It’s in and live! (This is kind of fun!)
I’ve solved the “wall of projects” issue through a drop-down menu for now – trying to display them all on one page was just too much, even organized by type using shortcode. I might forgo displaying the entire portfolio on one page entirely and instead use the project type slugs to only ever display individual project types. I can control that through the main menu. The only thing that is a bother there is that it displays the title “Project type: “project-type-slug””. I can’t seem to find a way to get rid of the words “project type”
-
Super, glad you have found a solution. The title on the project type pages is created by the software as a single string of text, so we can’t hide just part of it. There are some CSS tricks though that can be used, but it requires that you create CSS rules for each project type page. This would be the CSS for your Papers, articles… page.
.tax-jetpack-portfolio-type.term-587157644 .page-title { visibility: hidden; } .tax-jetpack-portfolio-type.term-587157644 .page-title:before { content: "Papers, Articles & Book Chapters"; visibility: visible; }The term-587157644 CSS class is the unique project type CSS class from the opening body html tag. You can find those using the Web Inspector built into your browser.
-
Awesome, thank you!
Ok, last question: the preview for each blog post is in two columns (home page). This is formatted this way, independent of whether it’s an excerpt or the beginning of the article. I’m pretty sure you have an idea how to make this only one column…
-
Are you talking about the two columns of text in each post? If so, add the following to your custom CSS.
@media screen and (min-width: 769px) { .entry-content,.excerpt-content { margin:0; width:100%; -webkit-column-count:1; -moz-column-count:1; column-count:1 } } -
Thank you so much! That’s super helpful!
I did a bit of CSS research on my own, because I feel bad just asking you for all the answers (I’m plundering http://www.w3schools.com). I adjusted what you sent me, as follows:
@media screen and (min-width: 769px) {
.entry-content,.excerpt-content {
position: relative;
bottom: 185px;
margin-left: 275px;
text-align: justify;
text-justify: distribute;
width: 64%;
-webkit-column-count:1;
-moz-column-count:1;
column-count:1
}
}I’m trying to get the text to be next to the date and tags, with the top of that text block to line up with the light gray line above the date (correctly displayed in post from 14 August & 24 July, for example, but not in the intervening posts – the text is either too high or too low). I assume there’s a more elegant and consistent way of doing this that doesn’t use relative position (which, as far as I can tell, is linked to the length of the text in question)?
-
Hi, I removed the position relative and the bottom declaration and it does what you are wanting, I think. Replace what you have with this and let me know.
@media screen and (min-width: 769px) { .home .site-welcome { width:80% } .entry-content.excerpt-content { text-align:justify; text-justify:distribute; width:64%; -webkit-column-count:1; -moz-column-count:1; column-count:1; } } -
-
- The topic ‘qua theme: displaying portfolio items in categories, text block width, columns’ is closed to new replies.
WordPress.com Forums 