Argus. One Page Responsive Template. themelock.com. <a class="read-more" id="news-1" href="popup/news_1.html"></a>

Transcription

1 Argus One Page Responsive Template Thanks for purchasing the template and for supporting our work. Argus is our new fancy template. Responsive, clean and professional look with sleek design will satisfy all your needs. Argus have a width fixed layout. All parts are nested in divs which representing each menu item section. Considering that "Argus" is a single page template, html is rather robust, but it is divided into logical segments in order to make changes and maintenance easier. We will try to help you out with this documentation. If we fail here, you can always go to our support forum and "Start a New Discussion" in appropriate template category. Our developers will try to solve your issue. Popup Box Linking Our theme is a single page template, but we separated popup content into external files. These are following things that you should know: Link that point to external file which content do you want to display into popup need to have a class of "read- more", and also it's required to have an ID attribute added to that link. Here's the example of HTML code which you can use to display content from news_1.html file. <a class="read-more" id="news-1" href="popup/news_1.html"></a> Actually, you can display popup in one more way, by clicking on the title of the post. <h2 class="m-bottom-25 read-more">development of new lorem ipsum dolor</h2>

2 Popup HTML Structure All the content that you want to display into popup needs to be into the article tag with classes "hidden" and "modal". Here is the code that we have used in our demo: <article class="hidden modal"> <img class="top-round" src="images/news/news_post_image_01.jpg" alt="" /> <div class="article-content"> <h1>mauris iacilus blandit metus, a varius nisi fringilla sit amet.</h1> <p> Mauris pellentesque, elit at interdum adipiscing, sapien urna sagitis nisi, in placerat orci quam varius sapien. Suspendisse auctor nulla id augue mollis tempor. Morbi auctor, sem ac tristique mollis, enim sapien molestie velit, in dignissim diam tellus ac turpis. Sed sollicitudin aliquam scelerisque. Phasellus elit diam, scelerisque at lobortis vitae, commodo et neque. Sed lobortis porta metus nec bibendum. Nunc tristique placerat elementum. </p> <p> Maecenas est lorem, imperdiet sed adipiscing et, fringilla eget justo. Etiam accumsan, elit ac tempus tincidunt, neque diam egestas nibh, a laoreet libero ante sed magna. Sed dictum, dui sed ultricies sollicitudin, arcu dui gravida velit, eu egestas nunc eros sed massa. </p> <h2> Mauris pellentesque, elit at interdum adipiscing, sapien urna sagittis nisi, in placerat orci quam varius sapien. Suspendisse auctor nulla id augue mollis tempor. </h2> <p> Mauris pellentesque, elit at interdum adipiscing, sapien urna sagittis nisi, in placerat orci quam varius sapien. Suspendisse auctor nulla id augue mollis tempor. Morbi auctor, sem ac tristique mollis, enim sapien molestie velit, in dignissim diam tellus ac turpis. </p> </article>

3 Slider Configuration Here's the example of slider of your template. Basically you have "ul" element with list of slides that you want to display, for example: <div class="list_carousel left"> <ul id="home-slides"> <li> We love to explore, design and develop your needs <span>in awesome digital way.</span> <li> We love to explore, design and develop your needs <span>in awesome digital way.</span> <li> We love to explore, design and develop your needs <span>in awesome digital way.</span> </ul> <a id="home-next" href="#"></a> After you create appropriate HTML structure you will have to add this part of code in our main.js file: $('#home-slides').caroufredsel({ responsive: true, auto: false, align: 'center', height: 'variable', scroll: 1, next: '#home-next', mousewheel: true, swipe: { onmouse: true, ontouch: true }, items: { height: 'variable' } }); All sliders that are used in Argus template have similar settings.

4 You can notice that we used here ID of our UL tag as selector which represent slides holder, you will have to modify it to your own needs (replace it), and note that each html element need to have unique ID. Another thing that is important here is the div with class carousel- nav (sliders from services and about section), which contains hyperlinks that are used in purpose of slider navigation. More about available slider options and effects, you can find here: Portfolio gallery Gallery of this section is driven by jquery.prettyphoto.js plug- in. Thumbnails of the gallery are organized like list items of the unordered list with class gallery. You can embed images, text and video files. Thumbnail images are located in "Argus/images/portfolio/thumbs/" folder and full sized images are located in "Argus/images/portfolio/originals" folder. Here is the example of embedding image: <li class="item photography"> <img src="images/portfolio/thumbs/small_image_01.jpg" alt="portfolio_image_01" /> <div class="item-overlay"> <div> <a href="images/portfolio/originals/large_image_01.jpg" class="preview" data-rel="prettyphoto[web]">preview</a> Example of embedding text: <li class="item portfolio-text"> <div class="portfolio-wrapper"> <div>everything is designed. Few things are designed well. <div class="signature-wrapper"> <div class="portfolio-quote"> <div class="portfolio-signature"> Brian Reed <div class="item-overlay"> <div> <a href="#inline-text1" class="preview" datarel="prettyphoto[web]">preview</a> Example of embedding video file:

5 <li class="item video"> <img src="images/portfolio/thumbs/small_image_02.jpg" alt="portfolio_image_02" /> <div class="item-overlay"> <div> <a href=" data-rel="prettyphoto[web]" class="preview_video"></a> All list items are with class item. List item that you want to be in a specific category should have class of that category. Please, check examples above. You can determine specific categories(red marked classes) in unordered list with class filteroption. Unordered list with class filteroption : <ul id="filteroptions"> <li class="all active"><a href="#">all</a> <li class="photography"><a href="#">photography</a> <li class="art"><a href="#">art</a> <li class="web"><a href="#">web</a> <li class="logos"><a href="#">logos</a> <li class="whatever last"><a href="#">video</a> </ul> Javascript settings regarding to this section can be found in Argus/js/portfolio.js. There is an important thing you should be aware of. You will see prettyphoto settings two times. If you make changes, do it in both settings. More about available gallery options, you can find here: Contact Configuration Note: Do not remove any quote or double quote signs while doing this. One notice: this will be functional only on your server, php file can not be executed on your local computer. Just add your own address here in your CONFIG.php file. //SITE GLOBAL CONFIGURATION $ = "#"; //<-- Your address $subscribe_ = "#"; //<<-- address for sending you subscribe notification $subscribe_notification_subject = "New site subscriber!"; //<<-- subscribe notification subject

6 Google Map You can change location and position of the marker by changing appropriate values. var loc = new google.maps.latlng( , ); var markerpos = new google.maps.latlng( , ); Sources & Credits Anita Hart Helga Weber Katerina Sokova Polina Brzhezinskaya Special thanks for awesome video to Blender Foundation jquery Responsive jquery Carousel Plugin respond.src.js by Scott Jehl, Paul Irish, Nicholas Zakas HTML5 Fallback Support TouchSwipe jquery Plugin Jquery- Plugin Mousewheel jquery Plugin

7 OmniWindow jquery Plugin Sticky jquery Plugin Easing jquery Plugin PrettyPhoto jquery Plugin margin- for- errors.com Loader Thanks Thanks for purchasing template and for supporting our work. If we fail here in this documentation, please go to our support forum and "Start a New Discussion" in appropriate template category. Our developers will try to solve your issue. If you have a spare time, please go and rate our template. We will appreciate that. Thanks