Help with portfolio, Header and Contact elements « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Angular

closed

resolved

Help with portfolio, Header and Contact elements

11 posts from 4 voices

Started 1 year ago by TeaP
Latest reply from iequezada
This topic is closed
This topic is resolved

Tags:

No tags yet.

TeaP
Member

Hi, great theme, however I have a few questions:

1. Portfolio thumbnail images - how can I add padding between thumbnails and reduce the height (padding) of the project title box?

2. How can I change crop area of portfolio thumbnail? I came across a tread that was dealing with this issue but it hasn't been resolved.

3. Thumbnail Roll over effect - can it be set to any other colour other than default gray? i.e. slightly lighter like the effect on the project detail page slideshow for example?

4. Can product detail page have images placed below each other rather than having them put in a slideshow?

5. When clicking on a thumbnail on a Portfolio page and proceeding to the project specific page, the page 'Portfolio' isn't underlined anymore as the current page the visitor is on. How can I keep it underlined?

6. How can I add 'Back to Portfolio' link on the product specific page, say in the top right corner above the project title?

7. How can I reduce top header height?

8. How can I change the font size of the Welcome message below the header?

9. How can I change text above the contact form? I saw a tread with regards to changing text in the template-contact.php, but I don't have this file, I only have template-archive.php , -blog.php, -dynamic.php and -portfolio.php

10. How can I use another font that is not on your list of fonts in the admin area? I'd like to apply it to Titles and Headers.

Sorry for such a long list but I couldn't find answers elsewhere.

Many thanks in advance!

Posted 1 year ago #
Devin
Moderator
Hi TeaP,

Long list so I'll just go through each and try and answer as best I can.

1. This is a multi step question. You need to adding the padding to:
```
.isotope .post-entry.flex_column {
padding: 5px;
}
```
Then remove the padding on the first:
```
.post-entry.flex_column.first {
clear: both;
padding-left: 0px !important;
}
```
Here, you may have an issue with the first css change taking effect, in which case you'll need to edit the actual css rule instead of adding it on top. In that case, you'll open layout.css and search for .isotop .post-entry.flex_column and add the padding. Its at ~line 1184.

Now change the column width to a smaller % to allow for the change in padding. This depends on the portfolio layout you are using. So for the 4 column it would be:
```
.portfolio-sort-container .no_margin.one_fourth {
width: 23%;
}
```
Adjust the values as needed and add all of this to your custom.css file in the css folder or the Quick CSS in your Styles tab of the theme admin.
```
.no_margin.one_fourth {
width: 23%;
}
```
For the title:
```
#top .portfolio-title {
padding: 20px 30px;
}
```
2. You can choose for the thumbnails to be cropped or not cropped, but you can't change where they are cropped. To add no crop, open functions.php and located the dynamic columns thumbnail rules. Add:
, 'crop'=>false
Ex:
$avia_config['imgSize']['dynamic_3'] = array('width'=>688, 'height'=>151, 'crop'=>false);

3. Not without doing some heavy modification to the javascript files.

4. I don't know what you mean here. If you can provide an example or link to the page you are talking about that would help.

5. Unfortunately there isn't a way for wordpress to detect that a single portfolio item is activated as its a post type and not a page type item so it doesn't behave in a hierarchical manner.

6. You can modify the layout/add additional items to the template in includes>loop-portfolio-single.php

7. You can add the following to your Quick CSS or custom.css and change the values:
```
#header .container {
min-height: 50px;
padding: 25px 0;
}
```
8. You can add the following to your Quick CSS or custom.css and change the values:
```
#top .callout {
font-size: 26px;
line-height: 1.4em;
}
```
9. This is located in the includes folder. Its called contact-form.php

10. You can add the font to be imported to the header.php and then change the css for the header to use that font. See: http://www.w3schools.com/css/css_font.asp

Regards,

Devin
Posted 1 year ago #
ismasans
Member

To point 2, I have used a simple and rudimentary idea:

When you upload an image, the theme generates several files, cropped in different sizes.
You can find it in your wp-content/uploads/2012/04 folder. The files that ends in -465x346 is used as the thumbnails of portfolio.

For example, if you upload an image called "name_of_the_image.jpg" you will find the file "name_of_the_image-465x346.jpg".

Replace this file with other one of the same size and name but cropped by you in Photoshop or other app.

I don't know if this is best method to get it, but for me has worked well.

I hope you'll find this useful to you.

Ismael

Posted 1 year ago #
ismasans
Member

To the staff members:
How a about publish a list with the most common CSS modifications, that we can add easily?

I think you will save a lot of support questions. ;)

This is a great theme, but i've found it a bit strict creating pages without touching the code.
Maybe the best idea will be implement this modifications in the control panels.
Other themes lets change, for example, the size of slideshows, the style of transitions, more flexible use of typography.... etc.

Maybe in next versions...?

Regards,

Ismael

Posted 1 year ago #
TeaP
Member

Hi, thank you for your response.

Answer 1 - could you just point out which .css file do I add a code to?

Answer 4 - for example: http://www.teapesic.com/wp/?portfolio=a-nice-portfolio-entry
Here i have 3 images that load within the slideshow, but could i have each image placed below each other and not have the slideshow?

Thanks!

@ismasans - thanks for the tip, I'll look into it :)

Posted 1 year ago #
TeaP
Member

With regards to Answer 1 - i found css elements you are referring to in layout.css, but here some of the elements do not exist. For example

.portfolio-sort-container .no_margin.one_fourth {
width: 23%;
}

I can only find .portfolio-sort-container {

Answer 2 - could you be more specific about where i should place the code in the functions.php file?

Many thanks

Posted 1 year ago #
TeaP
Member

I found where to place , 'crop'=>false function, but when i add it i create an error in the code.

I've added
, 'crop'=>false);

to this line
$avia_config['imgSize']['dynamic_3'] = array('width'=>688, 'height'=>151, 'crop'=>false);

and i get the error:
<?php
global $avia_config;
if(isset($avia_config['use_child_theme_functions_only'])) return;

Posted 1 year ago #
TeaP
Member

One more update - applying padding to

.isotope .post-entry.flex_column{
margin-left:0;
padding: 5px;
}

only works on first thumbnail in the portfolio, other items remain intact, even after changing the % in custom.css

.portfolio-sort-container .no_margin.one_third {
width: 30%;
}

.no_margin.one_third {
width: 30%;
}

Posted 1 year ago #
TeaP
Member

Could anyone look into this please? Many thanks

Posted 1 year ago #
Devin
Moderator

Hi TeaP,

Sorry for the delay, each time you responded it pushed the post a little further back in our Queue.

You can add that code into your custom.css file in the css folder or into the Quick CSS field at the bottom of the Styling tab of the theme options. The items that require you to open the specific css files I noted for those specifically.

The styles will need to be adjusted for your specific style and will probably require tweaking.

The final line in your code will be:
$avia_config['imgSize']['portfolio'] = array('width'=>465, 'height'=>346, 'crop'=>false);

If you have a link to your site I can take a look and see if there is an issue. If you aren't comfortable with modify so much css, I would suggest looking into a Freelance Developer to make the modifications exactly how you want.

Regards,

Devin

Posted 1 year ago #
iequezada
Member

Number 4 is exactly what I'm looking for in this thread: http://www.kriesi.at/support/topic/how-to-disable-the-gallerys-slideshow-in-portfolio-items as well as this other user http://www.kriesi.at/support/topic/portfolio-light-box-and-slideshow-help in a thread dating back to 2 months ago, "Dude" stated he would tagg the post for Kriesi's attention, So I'm guessing there's no quick way around this one, except posting the images in the text area as media elements.

Posted 1 year ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top