Help with portfolios and categories pages

Home Forums WordPress Theme Monolit – Responsive Architecture WordPress Theme Help with portfolios and categories pages

This topic contains 6 replies, has 2 voices, and was last updated by  jorgerc85 5 days, 17 hours ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #17770

    jorgerc85
    Participant

    Supported

    Hi,

    I’m trying to build a page where I can showcase my portfolio categories in a grid like in the Our Services page of the demo http://demowp.cththemes.net/monolit/services/. Each one of those elements would link to a page that shows a portfolios parallax of that categories portfolios.

    I tried using services but the layout of the a service is not useful in my case.

    I also tried using portfolios as categories to group other portfolios inside them. This works well when using a portfolio masonry and using a filter to show only the fake categories. But the problem is that those same fake categories show up when going to the main portfolios view.

    Based on this scenario, I want to know if either of these options is possible and how to achieve them.
    1. Is there a way to show categories inside a grid like in that demo I linked and have those items link to portfolio pages?
    2. Is there a way to hide portfolios from the main portfolios page?
    3. Is it possible to change the page that gets shown when I go to website.com/portfolio/?

    Thanks in advance!

    #17787

    CTHthemes
    Keymaster

    1, it’s not possible. You have to use RAW HTML element with the content bellow to create category item:

    
    <div>
    <a class="serv-item" href="#serid5a2780d427da4">
                <div class="serv-item-inner">
                    <img width="1240" height="800" src="http://demowp.cththemes.net/monolit/wp-content/uploads/2016/02/3-2.jpg" class="respimg services-thumb wp-post-image" alt="Image Title">                                    <div class="ser-title">
                        <h3>Interior</h3>                    </div>
                                </div>
            </a>
    </div>
    

    2, 3 – it’s not possible. But portfolio category page has link like this: http://demowp.cththemes.net/monolit/portfolio_cat/design/

    website.com/portfolio_cat/portfolio_cat_slug

    #17870

    jorgerc85
    Participant

    Supported

    Hi,
    Thanks for your answer. Option 1 seems to be what I’m looking for but I’m having an issue with it. The link doesn’t open when left clicking over the image or the text. They work fine when right clicking and selecting open link in new tab. Do you know what the issue might be? Thanks!

    #17882

    CTHthemes
    Keymaster

    Hi, please try this instead:

    
    <div class="serv-item">
    <a  href="your_page_link">
                <div class="serv-item-inner">
                    <img width="1240" height="800" src="http://demowp.cththemes.net/monolit/wp-content/uploads/2016/02/3-2.jpg" class="respimg services-thumb wp-post-image" alt="Image Title">                                    <div class="ser-title">
                        <h3>Interior</h3>                    </div>
                                </div>
            </a>
    </div>
    
    #17901

    jorgerc85
    Participant

    Supported

    Hi,
    Same result. Checking the console I see the error shown in the image attached.

    Attachments:
    You must be logged in to view attached files.
    #17911

    CTHthemes
    Keymaster

    Ok, try this:

    
    <div class="serv-item-new">
    <a  href="your_page_link">
                <div class="serv-item-inner">
                    <img width="1240" height="800" src="http://demowp.cththemes.net/monolit/wp-content/uploads/2016/02/3-2.jpg" class="respimg services-thumb wp-post-image" alt="Image Title">                                    <div class="ser-title">
                        <h3>Interior</h3>                    </div>
                                </div>
            </a>
    </div>
    

    Then add this style to Monolit Options -> Custom Code tab -> CSS Code – Large DEsktop View:

    
    .serv-item-new img{
    	position:relative;
    	z-index:1;
    	-webkit-transition: all 4000ms cubic-bezier(.19,1,.22,1) 0ms;
      	-moz-transition: all 4000ms cubic-bezier(.19,1,.22,1) 0ms;
      	transition: all 4000ms cubic-bezier(.19,1,.22,1) 0ms;
    }
    .serv-item-new {
    	float:left;
    	width:50%;
    	position:relative;
    	padding:10px 20px 10px 0;
    	overflow:hidden;
    	text-align: center;
    }
    .serv-item-new img {
    	position:relative;
    	max-width: 100%;
    	width:100%;
    	height:auto;
    }
    .serv-item-new:hover img {
    	-webkit-transform: scale(1.05);
    	-moz-transform:scale(1.05);
    	transform: scale(1.05);
    }
    
    #17914

    jorgerc85
    Participant

    Supported

    That worked! Thanks so much!

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Help with portfolios and categories pages’ is closed to new replies.