Edit theme defaults settings using CSS?

kevinbryanarchitect · Member · Jan 18, 2017 at 7:23 pm
Copy link

Add topic to favorites
Hi there.

Currently working on customization of my site and I was wondering if I could achieve a few things using the built in CSS editors (there are no options for the following within the theme).

Currently, the theme displays a photo grid that scales the number of columns by the page width (ie on a computer browser, its likely 4, on a tablet its 2-3, etc). By default, it displays 10 preview panes which link to portfolio entries. Would it be possible to change this number to 12, so that it is evenly divisible across all devices? (2,3,4). 10 always leaves one or two blocks hanging!

I am also hoping I can figure out a way to have my portfolio entries displayed more like my blog entries, with a tile mosaic photo gallery at the bottom of the page, that opens a full screen slideshow upon selection. There’s no option to disable the themes’ portfolio style, and it displays as a series of photos that are all slammed to the right of the page, which looks odd once you scroll past the text, for entries with more than a few images.

I’m also curious if would it be possible to use the themes style, but have the tile’s link to locations other than portfolio entries? Or be selective of which entries it pulls from? Maybe with the use of categories or tags?

How about a way to widen the body area in a page so that shortcoded portfolio tiles display with larger photos? You can get an idea of my meaning by looking at one of the subcategories under “projects” (industrial has the most entries, currently). There are large open areas on both sides of the page. I would like larger images, maybe with less border/padding between each image, if possible… I wasn’t able to achieve any of these options using the “attributes” discussed here: https://en.support.wordpress.com/portfolios/portfolio-shortcode/

Theme: Bindery
page: kevinbryanarchitect.wordpress.com

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 19, 2017 at 10:43 pm
Copy link
Hi there, I see you have switched to the Qua theme. Are you going to stay with this theme, or are you wanting to switch to Bindery?
kevinbryanarchitect · Member · Jan 19, 2017 at 10:48 pm
Copy link
Hi, I switched from Bindery to Aua and am having a lot more success.
I do have a few questions relating to Qua, though.

I’m really interested in applying a gray filter to images that disappears with mouse hover… I’ve managed to achieve the gray filter, but can’t seem to get the mouse hover (to remove the filter) to work.

this is the code I’ve used for gray filter on the featured images section, though I really want to apply it to the portfolio images.
```
img.attachment-qua-xl.size-qua-xl.wp-post-image {
	-webkit-filter: grayscale(80%);
	-moz-filter: grayscale(80%);
	filter: grayscale(80%);
}
```
I’m also interested in using CSS to crop the images in the portfolio shortcode display… you can view this in my page under a project category, such as “commercial” or “Industrial”.

I’ve applied some CSS already to change the mouse hover features based on another thread here.
thesacredpath · Member · Jan 20, 2017 at 4:19 am
Copy link
Hi, what you would do is to use the same CSS selector with :hover after it and then set all the filter declarations in that rule to “none” like this.
```
img.attachment-qua-xl.size-qua-xl.wp-post-image:hover {
	-webkit-filter: none;
	-moz-filter: none;
	filter: none;
}
```
thesacredpath · Member · Jan 20, 2017 at 4:23 am
Copy link
Also, I don’t see any portfolio section or page on your site. Looking at the Portfolio page on the Qua demo site, this should be the CSS selector for the main portfolio page.
.portfolio-content .entry-image img
kevinbryanarchitect · Member · Jan 20, 2017 at 2:42 pm
Copy link
Thanks, I was able to make that work!

Strange you can’t see the portfolio, maybe because its listed as “projects”? Its also linked on my homepage beneath the featured slider.

I’m interested in using CSS to organize the items within my portfolio shortcode list – I’ve gotten them to have a small colored strip along the bottom, and a “filter” applied on hover, but they’re all different sizes based on the images I uploaded.

Can I use a bit of CSS code to align them and crop the images to all be a square thumbnail, approx 200 px both directions? I tried a series of code but wasn’t able to make anything work.

Also – is it possible to have my title and category not display beneath the image, but have them show OVER the image when hovered? Similar to the feature in the Bindery theme.

If I could get a code for that function generically, I’m sure I could apply it to different pages (embedded portfolio w/ shortcode, and homescreen portflio display using theme defaults).
thesacredpath · Member · Jan 21, 2017 at 2:38 am
Copy link
Hi there, when I go to your Projects page, and into the projects themselves, such as into Commercial, I’m seeing square images in a neat grid with captions below them. Looking at that page in the page editor, I see you have chosen to go with inserted images with captions instead of the portfolio shortcode.

Is this working for you, or do you wish to make changes to that?
kevinbryanarchitect · Member · Jan 26, 2017 at 7:50 pm
Copy link
I think at the time I posted that last comment, I hand’t yet published this page: https://kevinbryanarchitect.wordpress.com/various/

I’m using shortcode here and I’m hoping to use CSS to reduce the spacing (padding? Border?) around each image… I’d also like be able to control each images size with a crop instead of by stretching.

Lastly, on the Qua Portfolio display (as on homepage), can I filter that list in any way? Right now its sorted by date added, but I’d really like it to be a select featured proejcts list.
thesacredpath · Member · Jan 26, 2017 at 10:10 pm
Copy link
What is causing the huge image height on the main page is empty paragraph, h2 and h1 elements below the content in your main page. Open that in the editor, switch to the Text tab and remove everything up to the last actual line of content.

I checked your site and don’t see any portfolio projects. Under Settings > Writing > Custom Content Types I don’t see that you have the Portfolio Custom Content Type activated.

If you are talking about something else on the main page, can you point me to that?
kevinbryanarchitect · Member · Jan 26, 2017 at 11:18 pm
Copy link
Okay, how about this one:

On the HOME page

Can I edit the height of the “featured images” sliding banner?

This bit of CSS let me adjust the height but didn’t “crop” the image, only compressed/stretched it… I’d like to maintain the original photo’s aspect ratio.
kevinbryanarchitect · Member · Jan 26, 2017 at 11:19 pm
Copy link
This bit of code adjusts the height, but not in the desired way…

‘img.attachment-qua-xl.size-qua-xl.wp-post-image {
height: 600px;
}’
thesacredpath · Member · Jan 27, 2017 at 7:57 pm
Copy link
Hi, you can give the following a try. With this change, the bottom of the image is “cropped” off.
```
.home #featured-section .flexslider {
	max-height: 600px;
}
.home .flexslider .slides .slide .slide-text {
	bottom: 30%;
}
```

No items found.