Home Forums Porto Template How To Use / Access Code?

This topic contains 3 replies, has 2 voices, and was last updated by  Support2 1 week, 4 days ago. This post has been viewed 67 times

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10029366

    jmarcello
    Participant

    I have purchased Porto to use as a base template for a web to print store front we are building. Our web to print software interface is also based on Porto.

    As we build the skin for store front there are Porto features I need to add to it. For instance, I might want to use a Porto element, feature, page or portfolio item.

    Right now I have Porto uploaded to a staging environment so that I can browse for elements and features I might want to use.

    http://smartagentsdev.com/porto

    How to go about getting the code for those elements that I want use and add them to our storefront?

    For instance, say I want use a carousel from here:
    http://smartagentsdev.com/porto/elements-carousels.html

    Specifically, the one called “Navigation Inside Arrows No Background”

    How do I generate the code to create that carousel so that I can place it in our dev or production site?

    Any help is greatly appreciated.


    #10029371

    Support2
    Keymaster

    Hello,

    Unfortunately as all HTML templates on Themeforest you need do that manually. For example to get the carousel “Navigation Inside Arrows No Background” code you should open the page elements-carousels.html in a text editor (notepad++, sublime text, etc..), search by “Navigation Inside Arrows No Background” (normally CRTL + F on sublime text and windows) and then you can copy the code. Like the image below:

    For carousels you don’t need add any extra CSS Stylesheet or JS Script on the page, since it’s included in all pages of Porto. But for some another elements you should include the necessary CSS and JS script on header and footer. For example to use the “Infinite Scroll” feature you should include on footer of page the script:

    <script src="js/examples/examples.portfolio.js"></script>

    Hope it helps.

    Let us know if you have more questions.

    Kind Regards,

    Rodrigo.


    #10029373

    jmarcello
    Participant

    I am comfortable coding, so this is not an issue. I just wanted to make sure I was looking at this right.

    As far as seeing examples of everything that is available in Porto, am I be able to do that by browsing on my the instance I have deployed on my staging environment front end?

    Also, is their a good way to determine if a certain element or feature has dependencies on other CSS or JS files?

    You’re help is greatly appreciated.


    #10029375

    Support2
    Keymaster

    Hello,

    Regarding “As far as seeing examples of everything that is available in Porto, am I be able to do that by browsing on my the instance I have deployed on my staging environment front end?”
    – Yes you can do that on this way. Just check the source code and copy/paste the code.

    Regarding “Also, is their a good way to determine if a certain element or feature has dependencies on other CSS or JS files?”
    – Unfortunately don’t exists an easy way for that. The only way is check the header and footer to see if the page has extra CSS and JS. Another alternative is check the browser console when the element don’t render as expected, looking for JS errors (the console will show an JS errors that means is missing some JS library)

    Hope it helps.

    Kind Regards,

    Rodrigo.


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