Sympathique - Responsive HTML Template

Hi,

The slider I used for the homepage is called Revolution Slider and is available at http://goo.gl/lHTOC .I too noticed that the slider is behaving a little strange when it contains captions, but I tried to combine the slide and captions effects in order to minimize the issue. If you need more help, you can leave a comment to the official slider page: http://goo.gl/58g6j

Thank you!

Hi,

WordPress is under development and it will be released at the beginning of next month You can follow me as an author or I can notify you, so you know when the theme will be ready!

Thank you!

Yeah I just opted to buy this version anyhow. Will still get the WP but wanted to have a play and get some design ideas working beforehand Good luck with development. Following you!

Hi,

Thank you for purchasing my theme. The index-2.html file from the download package should have the same structure as the http://ourtuts.com/demo/sympathique/index-2.html except for the images.

I`m suggesting you download again the package from ThemeForest and check again if index-2.html meets your preferences.

Thank you!

One more question. I am kinda new to this stuff and trying to learn. In the portfolio-four_columns.html file I would like to change the data-option-values, which are set to .marketing, .photography, .branding, .print and .webdesign. How/where can I change these values?

Also when you scroll down in the code you see class values such as branding print, photography print, marketing branding etc…How/where can I change these class values? Thanks in advance

• All
• Marketing
• Photography
• Branding
• Print
• Web Design

The idea with portfolio customization is to change all keywords related to a category. For example, if in the page you want to change “Print” to “Fashion”, replace all the words which says “Print” with “Fashion”. The page should be updated with the new changes and everything should work smoothly!

Thank you!

Thanks. One more question: I have a lot of products to display on the website and each product has multiple pictures taken from different angles such as this one http://nuansdesign.com/main/inventory/Astoria_Chair/244fe6cb357dba5

and also their own description. Is there an easy way to achieve something similar in your template without having to create a separate portfolio-single.html page for each product? If I do this I end up creating couple hundred copies of portfolio-single.html.

Many thanks in advance.

Hi,

You can use the “Project Photos” area to showcase the other photos of the project. You can add them on a 6-cells grid, not 3, like now. This way, you can achieve the project page you shown me.

To transform the 3-cells grid to a 6 cells grid, by editing style.css. Locate:

.portfolio-gallery img {
    width:300px;
    height:auto;
    display:block;
}

and change width:300px; to width:140px;.

Then edit “css/responsive.css” to make some changes to responsive layout too. Locate:

.portfolio-gallery img {
        width:360px;
    }

and change width:360px; to width:170px;.

Thank you!

Thank you. But if I use Project Photos section I will still have to create multiple copies of portfolio-single.html page. In other words if I have 200 unique product pictures and want to display additional photos of each product and text I will have to create 200 copies of portfolio-single.html page. Instead is it possible to create only one portfolio-single.html and load product images and text of the product that was selected by the user into this single html page upon clicking? For example, if user clicks on Product 1 to see its descriptive text and additional photos, all photos and text would be loaded to portfolio-single.html. After that if s/he wants to see details of Product 2 then all related photos and text would be loaded to portfolio-single.html again. Is there a widget that can do this and be integrated to your code?

Many thanks

Hi,

The page portfolio-single.html was created to showcase the way a product can be presented. For each product, there should exist a portfolio-single.html page, named after that product. If the product is called “Bauhaus Chairs”, the portfolio single page should be called “bauhaus-chairs.html”. Therefore, for every individual project you need an individual html file. The problem is solved within a CMS though. I`m currently developing Sympathique for WordPress and plan to launch it on ThemeForest(if you browse my portfolio, you notice that for each big item, I have both HTML and WordPress versions). Within WordPress, you`ll don`t have to touch a line of code or any files, all the content being added from a cozy admin panel. I don`t have a launching date yet, but I plan to make it live asap.

Thank you!

Thanks again. One more question: I want to use this page to display my products: http://ourtuts.com/demo/sympathique/portfolio-four-columns.html

When you click on each image on this page this window opens: http://ourtuts.com/demo/sympathique/portfolio-four-columns.html#prettyPhoto[pp_gal]/0/

On this window, all of the pictures on the Portfolio page are listed as thumbnails on the bottom for the slide show.

What do I need to do to show the related product images ONLY as thumbnails on the popup window? For example: If the main image for Product1 is displayed on http://ourtuts.com/demo/sympathique/portfolio-four-columns.html

when you click on the Product1 image on this page I want to display all images related to Product1 ONLY as thumbnails, not all other Products’ pictures. What is the best way to achieve this?

Many thanks in advance.

Hi,

You can implement more galleries into a single page. The process is simple and involves a little bit of jQuery. The page “portfolio-single.html” can be split into 2 galleries: for the slider and for related pictures. To do this, open “js/custom/js” and locate:

$("a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: false});

Now add just after that line, this code:

$("#slides a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: false});
$("#portfolio-gallery a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: false});

Now, you should have 2 galleries inside “portfolio-single.html”, one for the slider and second for the other pictures.

Thank you!

Thanks!! One more question: I would like to have a 8 column portfolio with smaller pictures. What is the best way to do it?

Many thanks in advance!!!

Hi,

Well, you can adapt the suggestion I gave you a few days ago from 6 columns to 8 columns:

.portfolio-gallery img {
    width:300px;
    height:auto;
    display:block;
}

and change width:300px; to width:100px;.

Then edit “css/responsive.css” to make some changes to responsive layout too. Locate:

.portfolio-gallery img {
        width:360px;
    }

Thank you!

Thank you. I made these changes but nothing happened. Four column layout still remained unchanged. Is there anything else that needs to be done?

Best,

Please send me a link to your website so I can take a look at the portfolio inner pages.

Thank you!

Here it is: http://www.euroformfurniture.com/products.html

I would like to have a 6 or 8 column layout on this page so that pictures may fit better. They look a little stretched out right now. I just updated first 2 products.

Many thanks in advance !!

Oh, so you want the main portfolio page: http://www.euroformfurniture.com/products.html to be on 6 or 8 column, not the inner portfolio page: http://www.euroformfurniture.com/angel-arm-chair.html

I`m suggesting you a 5 columns grid, because on 6 they will look way too small and you`ll not have enough room for the titles.

For this add to style.css:

#portfolio-wrapper .four-columns li {
    width:172px !important;
    height:224px !important;
}

#portfolio-wrapper .four-columns img {
    width:100% !important;
}

Then open responsive.css, locate the code between lines 2958-2961 and change it with this new one:

    #portfolio-wrapper .four-columns li {
        width: 212px;
        height: 256px;
    }

Then locate the code between lines 2943-2946 and change it with this new one:

    #portfolio-wrapper .four-columns img {
        width: 100%;
        height:auto;
    }

You should have now a 5 columns grid layout.

Thank you!

Thanks so much!! It worked. On the same page again, how do I make the red section between the top menu and the main page smaller? I tried to change the height of pattern1 from 180px but that did not do it completely. Basically I want the pull Products section up on the page a little bit by decreasing the size of that section with red banner.

Many thanks!