Folio Nº1 - One page creative portfolio HTML Template
Themeforest Folio Nº1 - One page creative portfolio HTML Template
Folio Nº1 is a simple, practical and usable template designed with HTML5 + CSS3, Microfomats to increase the semantic content and its relevance to the major search engines and also uses jQuery to enhance user experience.
It also includes a variety of scheme colors (more than 100 possibilities) so you can customize as you like. All in a very easy way through its “theme switcher” that lets you see changes in “real time”.
Do not waste the potential of microformats and be seen!
Log
- Update v1.3:
- Improved slider
- Improved initial works preload
- Improved iOS5 support (Safari was updated)
New lightbox system more powerful and easier to customize- Fixed GMaps bug
- Update v1.2:
- New slide system instead of static pagination
- Improved filtering method
- Controlled and smooth item loading
- New info box for works
- Now is FULL iPad Friendly
- And some other minor improvements
- Update v1.1:
- New filtering method
- Fixed cookies storage for Chrome
Features
- One page Template
- Complete resume section
Microformats. Google like this so much.- Cool hover effect for each portfolio item
Style Switcher – View style changes in “real time”- Filtering method
- Print ready and friendly stylesheet
- Cool lightbox for zooming your works
- Font-Face with customs fonts. You can use any font you want. In Help PDF is all explained
- 13 fabulous backgrounds specially designed for this template
- Documented in code and PDF with “HOW TO…”
- FULL PSD INCLUDED
- VALID HTML5 & Degrades Gracefully
- iPad FULL Friendly
Hi Van,
ReplyDeleteYour documentation is a little confusing with respect to choosing a theme, and then only using that theme in production going forwards.
All browsers revert back to their their original theme. I think I followed your documentation by copying my preferred theme.css and color.css to the default folder, but no luck, either cache overrides or that process does not work. And I cannot find anything that describes how to remove the Themes button from the bottom right
Could you please provide more specific detail in your documentation concerning the Choosing of a theme and the setting it in place for the rest of time.
Kindest Regards. Jamie
Hi Jamie,
ReplyDeleteplease, open a support ticket and I will try to help closer with your site. Just open a private one with a URL to your site and I will try to guide you in order to achieve the color scheme you would like to use.
Best, Van.
Sorry, I am not looking to log into another site, I purchased here.
ReplyDeleteWhat I am trying to achieve:
A site that does not use the theme changer but has my preferred
My Issue:
I tried to follow your instructions but they are not clear.
I added my preferred Theme and Color CSS to the DEFAULT folder, but this did not prevent the cookies from changing the settings I wanted. And as you alluded to chrome does some strange stuff.
What I would prefer is if you could have a look at your wording of your documentation on page 4 quoted here, and please improve the wording so it is more understandable. I have provided below my interpretation. Also if there were arrows on your diagram I think it would be clearer what is being copied where.
Your Text:
“But if you just want to make it your own
site just copy the style sheet for the main
color scheme and style sheet for the theme
and background in CSS default folder.”
My Interpretation:
“But if you just want to make it your own
site just copy the style sheet for your preferred
color scheme and style sheet for your preferred theme
and background from their numbered folders (e.g.Color3 & Theme3) into the DEFAULT folder (Or do you mean CSS Folder?).”
But my interpretation does not work, so not sure what is required, is there some code changes required to make this work.
Do I need to remove the Switcher-low and Switcher.JS from the index.html and reference the theme directly?
I hope this makes sense.:)
Hi Jamie,
ReplyDeletefirst of all, my apologizes about the documentation. I will review it and in case it is not clear it will be updated in order to achieve its goal that it is not other that help and not to confuse to any of you.
Well, removing the theme switcher is really easy. For this, just get rid of this div from the main html file (index.html):
<div id="theme-wrapper">[...]</div>
Now, you won´t need the javascript dependent of this element, for this reason, you can remove from the header these scripts:
<script src="js/switcher-low.js"></script>
<script src="js/jquery.infinite-carousel.js"></script>
<script src="js/jquery.cookie.js"></script>
These scripts are only needed for the theme switcher.
OK, if you take a look to the code, you will see (in the head too) these references to the theme/colors css files:
<!-- Theme styles-->
<link rel="stylesheet" id="active-theme" type="text/css" href="themes/default/theme.css" />
<link rel="stylesheet" id="active-theme-color" type="text/css" href="../themes/default/color.css" />
As you can see here, you are referring to each of this stylesheets. Just add the correct path here or just open the theme.css & color.css files you would like to use and copy/paste the code at the end of the main css file, this is styles.css.
All this info is inside the main file (index.html). So please, take a look to it and try to manage this in order to achieve the color scheme you like more. In case you could have any other doubt, I really recommend you opening a support ticket. This is because there we can assist you closer/better, share code easier and attend you faster.
Hope it will help!
Best, Van.
Awesome, You are a legend, Perfect Answer.
ReplyDeleteThank you.
If I have any further queries I will ask by opening a Ticket.
Thank you so much for a prompt response.
*
Hi,
ReplyDeleteThank you for this really nice template!
I have a question quite similar to the person from the previous message, and for the same reason I don’t want to log in yet to another website (ticksy).
I wanted to achieve the same as he:
-no theme switcher
-choose 1 theme and 1 color from your selection
-modify a bit the colors by myself changing a bit the codes
Thanks to your response I succesfully remove the theme switcher. Then I put in the DEFAULT folder the theme.css and color.css I wanted (+ the bg.jpg).
My problem is that I do have the right background, but I don’t understand how the colors works. I tried all the different colors.css but it doesn’t changes anything, it seems that only the theme.css change something.
I hope my problem is clear enough, and that you can help me with it.
Best,
coudi
I have a 2nd question :
ReplyDeleteCan I simply remove the “filter by” function?
I just want to have a limited selection of work without any categories.
Thank you for yout time and help.
3rd question… really sorry, if there is an easier way to contact you without using ticksy just let me know:
ReplyDelete-is there a way to add a small logo before my name in the header?
Thanks !
Hi coudi,
ReplyDeletelet´s see:
1. In order to change the color scheme of your portfolio, just follow the guidelines provided to @nthdegree. If you can´t manage it, just copy and paste all the color.css content of the scheme you like at the bottom of the main style.css
2. You can disable the filters with a single css rule:
#nav-works { display:none; }
3. About the logo issue. You can add any element before the main title, it just need adding a new HTML element, for example, this is the header current markup:
<div id="head-content">
<h1 id="main-title"><a href="#" title="WORK OF JOHN DOE">THE WORK OF <strong>John Doe</strong></a></h1>
<ul>
[...]
</ul>
<div class="clear">[...]</div>
</div>
You could make something like this to add a logo before the title (notice the second line):
<div id="head-content">
<figure class="logo"><img src="images/path-to-your-logo-image.jpg" /></figure>
<h1 id="main-title"><a href="#" title="WORK OF JOHN DOE">THE WORK OF <strong>John Doe</strong></a></h1>
<ul>
[...]
</ul>
[...]
</div>
I really encourage you to use our official support place in order to share and try to help better and faster. Notice that this support area is very limited about sharing code or private data. Anyway, hope it will be helpful for you!
Best, Van.
hello, how can I make the filter by to be visible at all times and not only when I hover over it?
ReplyDeleteI have changed the #portfolio nav ul#nav-works li{width:auto;height:auto;margin:4px 15px 0 0;font-size:1.7em;#font-size:1.5em;visibility:hidden;} to visible but it remains visible until I hover over it
Hi sk8buc,
ReplyDeletethe easiest way to achieve this is adding this custom rule to your styles:
#portfolio nav ul#nav-works li.fade-option {
opacity: 1 !important;
left: 25px !important;
}
With this method, your filters will remain in view always.
Hope it will be helpful for you!
Cheers!
Hi,
ReplyDeleteI’m working with Folio No1 for my client who owns the template. He want’s me to duplicate cv section (with fade in effects) but I’m always missing something. What should I do to have a second CV “effect” with diffrent ID (Let’s say #cv2) without destoroying the first one?
Hi omadaha,
ReplyDeleteyou can add a different overlay element following the same behaviors than the one you have now.
For this, you will need to create a different overlay elements, now is section#cv, you will need to create something like section#cv2.
Then, the link that fires the event to show the element must to have this look:
<small id="view-resume-2">
<a href="#" title="Resume of John Doe">view resume</a></small>
And then, into custom.js or custom-low.js (depends the one you use), add a similar code that fires this element. For example:
$('small#view-resume a').click(function(){
$('section#cv').fadeTo("slow",0.85);
$('body').addClass('fixed');
$('#wrapper-content').addClass('all-fixed');
});
This is the code you can find now to show the current CV area. Just update the anchor firer and the element to show, something like this:
$('small#view-resume-2 a').click(function(){
$('section#cv2').fadeTo("slow",0.85);
$('body').addClass('fixed');
$('#wrapper-content').addClass('all-fixed');
});
You will need to use the same styles in case of you would like to use the same look in the new element than in the current CV area.
Hope it will help!
Greetings!
(for next questions I recommend you opening a support ticket. You can ask your client for the purchase code, this will be needed for a next query)
“Unable to resolve the server’s DNS address. “
ReplyDeleteThis happens for all your themes. Help
Hey fadi!
ReplyDeletethis is not an item issue. It´s about a server/hosting problem, so I suggest you to contact with your provider.
And please, do not say that this happens with all our themes. This does not happen with this one or any other developed by us.
And remember, we only provide support to certified users.
Cheers!
Hi,
ReplyDeleteMy service provider is not the problem, you have a problem with your server. I’ve checked other themeforest themes, everything is ok. But in your case, Follio 1 & 2, as well asn the other theme are not loading the preview.
Before I purchase I would like to test the demo. That’s what I’m talking about, the demo is not working.
The demo page is down.
ReplyDeleteOuch! Apologize about this, I thought you were talking about installing the themes or something related. I will review this ASAP, thanks for let me know : )
ReplyDeleteNo problem, please send me an email ASAP because I’m working with a client and your themes are very suitable for our customisation.
ReplyDelete