This code is all CSS based and can be easily changed to fit your needs. From JSN Air.

CSS

.recent-projects .row {
	float: left;
	text-align: center;
	width: 100%;
	margin-bottom: 10px;
}

.recent-projects .row ul li {
	display: inline-block;
	list-style-type: none;
	margin-bottom: 30px;
	position: relative;
	border: 10px solid #f2f2f2;
}

.recent-projects .row ul li div {
	text-align: center;
	float: left;
}

.recent-projects .row ul li div a {
	float: left;
}

.recent-projects .row ul li span.cms {
	background: #ececec url(images/modules/779/icon-cms.png) 13px 13px no-repeat;
	width: 32px;
	height: 32px;
	padding: 12px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	position: absolute;
	bottom: -30px;
	z-index: 999;
	left: 50%;
	margin-left: -28px;
}

.recent-projects .row ul li span.cms.wordpress {
	background-position: 12px -139px;
}

.recent-projects .row ul li span.cms.drupal {
	background-position: 12px -296px;
}

.recent-projects .row ul li span.cms.html5 {
	background-position: 12px -451px;
}

.recent-projects span.mark {
	background: url(images/modules/779/view.png) center -40px no-repeat rgba(0,0,0,0.6);
	position: absolute;
	z-index: 99;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transition: all 0.3s;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	opacity: 0;
}

.recent-projects span.mark:hover {
	opacity: 1;
	background-position:center 60px;
}

.recent-projects .rp-separate {
	background: url(images/modules/779/bg-separate.png) center center no-repeat;
	height: 20px;
	width: 100%;
	display: inline-block;
}

@media only screen and (max-width: 480px), (max-device-width: 480px) {
	.recent-projects .row ul {
		width: 100%;
		text-align: center;
	}
	.recent-projects .row ul li {
		margin: 10px 0 30px 0;
	}
}

HTML

<div class="recent-projects">
	<div class="row">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
			ea commodo consequat.</p>
	</div>
	<div class="row">
		<ul>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project1.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project1.jpg" alt="Project1" /><span class="mark"></span></a>
				</div>
				<span class="cms joomla"></span></li>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project2.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project2.jpg" alt="Project2" /><span class="mark"></span></a>
				</div>
				<span class="cms wordpress"></span></li>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project3.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project3.jpg" alt="Project3" /><span class="mark"></span></a>
				</div>
				<span class="cms drupal"></span></li>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project4.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project4.jpg" alt="Project4" /><span class="mark"></span></a>
				</div>
				<span class="cms joomla"></span></li>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project5.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project5.jpg" alt="Project5" /><span class="mark"></span></a>
				</div>
				<span class="cms html5"></span></li>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project6.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project6.jpg" alt="Project6" /><span class="mark"></span></a>
				</div>
				<span class="cms joomla"></span></li>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project7.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project7.jpg" alt="Project7" /><span class="mark"></span></a>
				</div>
				<span class="cms wordpress"></span></li>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project8.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project8.jpg" alt="Project8" /><span class="mark"></span></a>
				</div>
				<span class="cms html5"></span></li>
		</ul>
	</div>
	<p style="text-align: center;"><a href="http://quantumwarp.com/" class="link-button button-green" style="margin: 0 0 30px;">View Product Tour</a></p>
	<div class="rp-separate">&nbsp;</div>
</div>

This grid is better when there is a left or right column. This utilises the inbuilt grid-layout feature of the joomlashine templates. From JSN Air.

Easy to start

JSN Airprovides unique mechanism of installing sample data on directly your current website. Just few clicks and the demo website is all setup.

Multiple Colors

6 major color variations for your taste. Each color variation covers not only the main background, but also color of drop-down menu, links, table's header and more.

Responsive Design

All JoomlaShine templates are equipped with responsive design feature making your website look beautiful in both smartphones and tablets..

Dedicated Support

In addition to comprehensive documentations in PDF format and online video, you also get support from friendly forum and dedicated support system.

Flexible Layouts

JSN Air layout system is very flexible and capable. JSN Air provides 36+ module positions allowing you to have multiple layouts configuration.

Popular extensions support

JSN Air works well with other Joomla popular extensions. JSN Air also has extended style that will automatically support for the display of K2 or Kunena component.

CSS

.template-feature-grid .grid-col .grid-col_inner { 
	padding: 15px;
	background: rgba(249, 249, 249, 0);
	border: 1px solid rgba(242, 242, 242, 0);
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	-ms-transition: all .3s;
	transition: all .3s;
	
}

.template-feature-grid .grid-col .grid-col_inner:hover {
	background: rgba(249, 249, 249, 1);
	border: 1px solid rgba(242, 242, 242, 1);
}

.template-feature-grid .template-feature-grid-icon {
	float: left;
	margin-right: 10px;
	height: 90px;
	padding-top: 10px;
}

.template-feature-grid .template-feature-grid-content h3,
.template-feature-grid .template-feature-grid-content p {
	margin: 0;
	margin-bottom: 5px;
	overflow: hidden; /* Prevents text wrapping */
}

HTML

<div class="grid-layout template-feature-grid">
    <div>
        <div class="template-feature-grid-icon"><img src="/images/kb/2016/778/icon-easy-start.png" alt="Easy to start" border="0" /></div>
        <div class="template-feature-grid-content">
            <h3><a href="http://quantumwarp.com/">Easy to start</a></h3>
            <p><strong>JSN Air</strong>provides unique mechanism of installing sample data on directly your current website. Just few clicks and the demo website is all setup.</p>
        </div>
    </div>
    <div>
        <div class="template-feature-grid-icon"><img src="/images/kb/2016/778/icon-star.png" alt="Multiple color" border="0" /></div>
        <div class="template-feature-grid-content">
            <h3><a href="http://quantumwarp.com/">Multiple Colors</a></h3>
            <p><strong>6 major color variations</strong> for your taste. Each color variation covers not only the main background, but also color of drop-down menu, links, table's header and more.</p>
        </div>
    </div>
</div>

<div class="grid-layout template-feature-grid">
    <div>
        <div class="template-feature-grid-icon"><img src="/images/kb/2016/778/icon-responsive.png" alt="Responsive Design" border="0" /></div>
        <div class="template-feature-grid-content">
            <h3><a href="http://quantumwarp.com/">Responsive Design</a></h3>
            <p>All JoomlaShine templates are equipped with <strong>responsive design</strong> feature making your website look beautiful in both smartphones and tablets..</p>
        </div>
    </div>
    <div>
        <div class="template-feature-grid-icon"><img src="/images/kb/2016/778/icon-support.png" alt="Dedicated Support" border="0" /></div>
        <div class="template-feature-grid-content">
            <h3><a href="http://quantumwarp.com/">Dedicated Support</a></h3>
            <p>In addition to <strong>comprehensive documentations</strong> in PDF format and online video, you also get support from <strong>friendly forum</strong> and <strong>dedicated support system</strong>.</p>
        </div>
    </div>
</div>

<div class="grid-layout template-feature-grid">
    <div>
        <div class="template-feature-grid-icon"><img src="/images/kb/2016/778/icon-layout.png" alt="Flexible Layout" border="0" /></div>
        <div class="template-feature-grid-content">
            <h3><a href="http://quantumwarp.com/">Flexible Layouts</a></h3>
            <p>JSN Air layout system is very flexible and capable. JSN Air provides <strong>36+ module positions</strong> allowing you to have multiple layouts configuration.</p>
        </div>
    </div>
    <div>
        <div class="template-feature-grid-icon"><img src="/images/kb/2016/778/icon-love.png" alt="Customer Love us" border="0" /></div>
        <div class="template-feature-grid-content">
            <h3>Popular extensions support</h3>
            <p>JSN Air works well with other <strong>Joomla popular extensions</strong>. JSN Air also has extended style that will automatically support for the display of <a href="/component/k2/?amp;view=itemlist&amp;layout=category&amp;task=&amp;id=&amp;Itemid=645">K2</a> or <a href="/component/kunena/?amp;view=home&amp;defaultmenu=499&amp;Itemid=800">Kunena component</a>.</p>
        </div>
    </div>	
</div>

When adding packages or code to my wiki it is sometimes need to show that code in context, which usually is a joomla module. So to that aim I have included some simple code below to emulate module positions and  can be used safely in wiki articles. As with Joomla module positions they can be sub divided into mulitple modules so I have included a range below.

Single Module

<div>

	<div style="width: 30%; min-width: 180px; padding: 5px; margin: auto auto; border: 1px solid black;">		
		<p>Fake Module Content</p>
	</div>
	
</div>

This might also be a good variant using min-width and max-width instead of percentage.

<div style="min-width: 180px; max-width: 300px; padding: 5px; margin: auto auto; border: 1px solid black;"> 

</div>

Double Module

<div style="float: left; width: 90%; border: 2px solid blue;">

	<div style="float: left; width: 45%; min-width: 180px; padding: 5px; margin: 5px; border: 1px solid black;">
		<p>Fake Module Content 1</p>		
	</div>
	
	<div style="float: left; width: 45%; min-width: 180px; padding: 5px; margin: 5px; border: 1px solid black;">
		<p>Fake Module Content 2</p>		
	</div>
	
</div>
<div style="clear: both;">&nbsp;</div>

Triple Module

<div style="float: left; width: 90%; border: 2px solid blue;">

	<div style="float: left; width: 30%; min-width: 180px; padding: 5px; margin: 5px; border: 1px solid black;">
		<p>Fake Module Content 1</p>		
	</div>
	
	<div style="float: left; width: 30%; min-width: 180px; padding: 5px; margin: 5px; border: 1px solid black;">
		<p>Fake Module Content 2</p>		
	</div>
	
	<div style="float: left; width: 30%; min-width: 180px; padding: 5px; margin: 5px; border: 1px solid black;">
		<p>Fake Module Content 3</p>		
	</div>
	
</div>
<div style="clear: both;">&nbsp;</div>

Header

I am not sure what the specific are of this one, but note the overflow statement

<div style="overflow: hidden; padding: 5px; border: 1px solid black;">
	<p>Fake Header Content</p>
</div>

Single Position

<div style="float: left; width: 90%; border: 2px solid blue;">
	<p>Fake Position Content</p>
</div>
<div style="clear: both;">&nbsp;</div>

More Styled Fake Module

HTML

<div class="demo-module-container" style="display: table; margin: auto;">
	<div style="float: left; margin: 5px; height: 425px; width: 300px; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: transparent -moz-linear-gradient(center top , #fafafa, #dddddd) repeat scroll 0 0; border-color: #c9cbcd; border-radius: 0; border-style: solid; border-width: 1px 1px 2px; box-shadow: 0 8px 6px -6px black; outline: medium none; padding: 4px; transition: all 300ms ease-out 0s;">
		<h3 style="padding-top: 5px;"><span style="display: block; line-height: 25px; text-transform: uppercase; padding: 5px 14px; color: #fff; text-shadow: none; background: #2D5E95 none repeat scroll 0% 0%; margin: none;">Fake Module Title 1<br /></span></h3>
		<div style="height: 360px; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: transparent -moz-linear-gradient(center top , #fafafa, #dddddd) repeat scroll 0 0; border-color: #c9cbcd; border-radius: 0; border-style: solid; border-width: 1px 1px 2px; box-shadow: 0 8px 6px -6px black; outline: medium none; padding: 4px; transition: all 300ms ease-out 0s;">
			<p>Fake Module Content 1</p>
		</div>
	</div>
	<div style="float: left; margin: 5px; height: 425px; width: 300px; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: transparent -moz-linear-gradient(center top , #fafafa, #dddddd) repeat scroll 0 0; border-color: #c9cbcd; border-radius: 0; border-style: solid; border-width: 1px 1px 2px; box-shadow: 0 8px 6px -6px black; outline: medium none; padding: 4px; transition: all 300ms ease-out 0s;">
		<h3 style="padding-top: 5px;"><span style="display: block; line-height: 25px; text-transform: uppercase; padding: 5px 14px; color: #fff; text-shadow: none; background: #2D5E95 none repeat scroll 0% 0%; margin: none;">Fake Module Title 2<br /></span></h3>
		<div style="height: 360px; -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: transparent -moz-linear-gradient(center top , #fafafa, #dddddd) repeat scroll 0 0; border-color: #c9cbcd; border-radius: 0; border-style: solid; border-width: 1px 1px 2px; box-shadow: 0 8px 6px -6px black; outline: medium none; padding: 4px; transition: all 300ms ease-out 0s;">
			<p>Fake Module Content 2</p>
		</div>
	</div>
</div>

These are the widths and device responsive statements that Joomlashine uses throughout their temapltes.

/* These are the responsive code barriers as defined in Page builder and possibly normal Joomlashine Templates */

@media only screen and (max-width: 1024px), (max-device-width: 1024px) {
}

@media only screen and (max-width: 768px), (max-device-width: 768px) {
}

@media only screen and (max-width: 480px), (max-device-width: 480px) {
}

@media only screen and (max-width: 960px), (max-device-width: 960px){
}



@media screen and (max-width: 1400px) {
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
}

@media screen and (max-width: 1280px){
}

@media screen and (max-width: 1024px){
}

@media screen and (max-width: 799px) {
}

@media screen and (max-width: 768px) {
}

@media screen and (max-width: 719px) {
}

@media screen and (max-width: 640px) {
}

@media screen and (max-width: 480px) {
}

@media screen and (max-width: 360px) {
}

Joomla has fixed non-SEF URLs for a lot of things so I have started to put together a list of them here

These links might get parsed out by joomla so I will check back

• User Login:
  index.php?option=com_users&view=login

This is the how to use advanced portfolio

General

• you can have nested categories
• there is an inbuilt media mamanger

Projects

• Projects are the individual Items
• a project has a list view and a details view (like mosets)
• you must create category before you can create a project
• you can select images or videos for the project type
• Either have a video gallery or an image gallery for the project
• you can upload mutiple images at once
• you can make 1 project featured

** From official project notes

https://extstore.com/support/documentation/components/advanced-portfolio-pro#usage

• Project URL: Enter a valid url in this field. This url will be used for Permalink button on the project's overlay (list view) and Launch Project in the project view (details view).
• Short Description: Give the project some short introduction lines that will be displayed on the list view.
• Description: Description has got the same role as a brief document of a project that provides specified information in the detailed page. (details view)

Categories

• This is just your basic container for the projects
• A category cand be used to group a load of projects together ie groups

Menu

• In the menu item it is possible to select which categories you want to display

Image Settings and their description

There is no direct control of gallery/slider image sizes. I have added it to the forum

These are where you can control the images, it can be a bit awkward at first but when you have read the list below it all makes sense.

General/Default Settings

• Configuration settings (General layout tab)
  • Image quality
  • File Locations
  • Watermark
• Configuration settings (list layout tab) (thumbnails)
  • Image width
  • Image height – fixed height or auto to keep ratio with width
• Configuration settings (details layout tab)
  • You can set the description box width (1 – 11, bootstrap?) which alters the image size by proxy
  • There are no direct settings to control the sliding image sizes
• Configuration settings (transform tab) (thumbnails)
  • These control animation effects when you hover over a thumbnail
  • Scale – animate bigger or smaller
  • Rotate – rotate the image
  • Skew – like ringing a cloth or trapezium shape

Category Settings

• Category (Options Tab)
  • Image – set an image for the category

Project Settings

• Project (Project Options Tab) per project setting which will override the defaults
  • Description Width (on details page)
  • Image width (project thumbnail)
  • Image height (project thumbnail) – fixed height or auto to keep ratio with width

Menu Item Settings

• Menu Item (list layout tab) - will override the defaults
  • Scale (project thumbnail)
  • Rotate (project thumbnail)
  • Skew (project thumbnail)

My Prefered Settings

Apply these settings or as required

• Project details description width = 6

My Fixes

These fixes should all be applied as needed

List styling is turned off / Enable bullet list icons

This prevents me adding any custom icons for my list items or just using the themes.

In media/com_advportfoliopro/css/style.css line 749, I disabled the following block of code

.portfolio-module ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
}

'Go Back and 'Launch Project' Buttons are not in the middle

/* Launch Project Button to the middle */
.project-wrapper .project-link {
	margin: 18px 0;
	padding: 10px 0 0;
	border-top: 1px solid #E5E5E5;
}

style.css:691
+ text-align: center;

/* Go Back Button to the middle */
.btn-go-back {
	border: medium none;
	color: #ffffff;
	font-size: 16px;
	margin: 15px 0;
	padding: 15px 30px;
	text-align: center;
	text-decoration: none;
	transition-duration: 0.4s;
	background: #008cba;
	border-radius: 4px;
}

style.css:654
+ display: block;
+ margin: auto auto;

Does not work well because it is in a 100% width div spanning both columns

Change Launch Project Name

It is controlled by

COM_ADVPORTFOLIOPRO_LAUNCH_PROJECT="Launch Project"

Override / Change in language translation thing via Joomla

• Make sure you select site and English before creating a new override
• Call it ‘Launch Website’

Make list items same height

• jsn-time changes it to uses class 'jsn-com-advportfoliopro' and not 'com_advportfoliopro'
• .com_advportfoliopro is not 100% required

This is my first attempt to keep all of the list ietms the same height. It is better than nothign but there seems a bit of difference between how Firefox and Chrome handles this.

/*-- Advanced Portfolio - unify list item height --*/

/* - This is not 100% - */

.com_advportfoliopro .project-item-meta {
    min-height: 300px;
}

@media only screen and (max-width: 975px) {
    .com_advportfoliopro .project-item-meta {
        min-height: 400px;
    }
}

@media only screen and (max-width: 783px) {
    .com_advportfoliopro .project-item-meta {
        min-height: 650px;
    }
}

@media only screen and (max-width: 631px) {
    .com_advportfoliopro .project-item-meta {
        min-height: 700px;
    }
}

/* (this is where 3 columns goto 2 columns) */
@media only screen and (max-width: 615px) {
    .com_advportfoliopro .project-item-meta {
        min-height: 400px;
    }
}

Building a Portfolio

Image Names and Sizes

You need images for your protfolio item so these are some pointers on their sizes and names. I use Firefox addon called Fireshot

suggested sizes

• Thumbnails - 100x100, 300x300, 600x600 (all square)
• Project Details - 1280x720, 640 x 320 (all widescreen). You can use other sizes if they keep the same ratio.

Suggested Names

All pages have these areas so do not need a page name in. The header will either have the slider or not, you do not need 2 images, one  with and one without.

• Header
• Content
• Footer
• Special images (gallery.jpg, testimonals.jpg...)

Special features, they do not need page references

• gallery
• testimonials
• thumbsgallery
• contact-form

Aquire an image with FireShot

This is quite straight forward when you have got things configured. Using Firefox:

• install FireShot addon
• install webdeveloper toolbar addon
• create a custom  'Resize Dimension' in the webdeveloper toolbar
  • Goto Resize menu --> Edit Resize Dimension
  • add a new dimension called 'Advanced Portfolio' with the dimensions 1313 x 720. (The weired dimensions account for the scroll bars and once an image is taken the dimensions end up correct)
• Under the 'Resize' menu select 'Advanced Portfolio' to resize the browser windows
• take an image with FireShot by clicking the 'S' icon in your toolbar at the top (or wherever)
• verify the image's dimensions

Workflow to create 1 list item

Here I will outline the rules I used for makinga single project item. These are obviously forcused on websitres but can easily be applied to other variations.

• Create a Category called ‘Website Portfolio’
• Pick a website
• Get the images
  • Screen grab the pages of the website (1280 x 720 – use FF FireShot window resize)
  • Keep originals and always use ‘save as’
  • Currently all images need to be the same height otherwise the gallery/slider goes up and down to show each slide.
  • Take images of specific areas (1280 x 720 or possible 640 x 360) using the Fixed Size select tool in Paint.Net (use pixels)
    • When using selection tool be very careful you have got all of the area selected. It is very precise
    • Zooming in helps
    • Images should be W x H – alter in paint.net as needed (all need to be same size details = 620x400 thumbnails = 300x300, image width 8, detail width 4)
    • Use 1280 x 720 and 90% quality jpg (set FireShot to 1313 to get 1280 images this is because of the scroll bars width)
  • Create thumbnail (home-page or other image) – using paint.net
    • get full home page image
    • set the secondary colour to e6e6e6 / ececec
    • expand canvas width to match height giving a square (note the secondary colour will fill the gap
    • resize to whatever (300x300)
    • save as jpg 90% quality
• Create a project - Use the JSN Template name for the Project
• Short Description - Write a 1 line describing the template
• Long description – bullet point the aspects of the theme (maybe add things like the slider)
• Create a folder for the template – should be the same as the project name
• Upload the altered images to the CORRECT folder
• Give the images titles in advanced portfolio (as per rules)
• Set the thumbnail
• (optional) add each entry to the demo toolbar. The short description and thumbnail (resize to 100 x 100, the extstore demo resizes 600 x 600 to 100x100 lol)
• Order of images
  
  • Header
  • Content
  • Footer
  • Special images (gallery.jpg, testimonals.jpg...)
• Advance Pro image names/titles – Just capitalize the image name ie 'content' --> 'Content'

Examples

Short Description (HTML)

<p>A light and versatile modern theme ideal for small companies who want to be presented as professional but accessible.</p>

Long Description (HTML)

<p>&nbsp;</p>
<ul style="display: table; margin: 0 auto; list-style-image: url('/images/common/tick.png');">
    <li>Responsive / Mobile Friendly</li>
    <li>Light</li>
    <li>Modern</li>
    <li>Versatile</li>
    <li>Animated Slider</li>
</ul>

Keywords

• Responsive / Mobile Friendly
• Clean
• Simple
• Dark
• Versatile
• Modern
• Fresh
• Adaptable
• Animated Slider
• Professional
• Slider
• Funky
• Light
• Eye Catching
• Visually Attractive
• Corporate
• Impressive
• Unique
• Informative
• Popular
• Accessible
• SEO Friendly
• Expandable
• Inspired Design
• Warm
• Easy to look at
• Refreshing
• Straight Forward
• Multi Purpose
• Family
• Homely
• CTA
• Call To Action
• Increased Conversion
• Elegant
• Colourful
• Functional
• Interesting
• Memorable
• Personal

Notes

• The thumbnail are not cropped but ‘strectch by X-axis’.
• Having images in the gallery of different heights can cause the cycling of images to be a bit crap. As it goes up and down
• All images use the cached reduced quality version
• Gallery is in a responsive modal box so there are no settings for this but does use the cached version
• don’t forget it has a search plugin, smart search plugin and carousel module
• contains the actuall script
  • C:\Desktop\com_advportfoliopro_v3.8.1_j3\media\js\script.js
  • C:\Desktop\com_advportfoliopro_v3.8.1_j3\site\views\project\tmpl\default_images.php
  • /public_html/components/com_advportfoliopro/views/project/tmpl/default_images.php
• transform tab description should make a note that it is the thumbnail animation
• When you make all images have the same heigh (720px), some are thinner than others because they are stretched along the width and then then grow taller because of this to maintain ratio.
• Autoheight – changes the physical size of the container, id does NOT resize the image
• Owl carousel is the library used and is not good at image resizing

In Firefox (using Dona)

• 1211  /  from wide to narrow
• 976 / 976 is the firefox change over from desktop to mobile

Max-Width

The following code snippets will allow you to set the maximum width (max width, max-width) of your joomlashine template in various guises.

NB: You can also get this code from you joomlashine template by setting the template to a fixed width and look at the source code. Usually at the top you will see the code fixing the width. Just copy this and alter it as needed, i.e. set max-width only to stop templates going mental.

I also need to see which ones actually work and how specific to a particular template they are.

/* Reta - Max Width */
#jsn-pos-topbar,
	#jsn-topheader-inner,
	#jsn-header-inner,
	#jsn-promo-inner,
	#jsn-pos-content-top-over,
	#jsn-pos-content-top,
	#jsn-pos-content-top-below,
	#jsn-content_inner,
	#jsn-content-bottom-over-inner,
	#jsn-content-bottom-inner,
	#jsn-content-bottom-below-inner,
	#jsn-usermodules3-inner,
	#jsn-footer-inner,
	#jsn-menu.jsn-menu-sticky,
	#jsn-nav-inner {
		max-width: 960px;
}

/* Force max width - Untested */
#header-inner,
#jsn-header-inner,
#jsn-topheader-inner,
#jsn-promo-inner,
#jsn-content,
#jsn-footer-inner {
	max-width: 1000px;
}

/* Fixed width website */
NB: there is dynamic css in the html and this is where i have got this.
	#jsn-page,
	#jsn-menu.jsn-menu-sticky,
	#jsn-pos-topbar {
		width: 1200px;
		min-width: 1200px;
}

/* set max page width */
#jsn-pos-topbar,
#jsn-headerright-inner,
#jsn-header_inner2,
#jsn-content-top_inner,
#jsn-content,
#jsn-promo_inner,
#jsn-pos-content-top_inner,
#jsn-footer_inner,
#jsn-content-bottom_inner {
	max-width: 1024px;
}

Responsive Triggers

/* Prevent template going responsive for devices with screen size 1024px or above */ 
/* All devices with screen size 1024px and above will be forced to 1200px wide layout */
@media only screen and (min-device-width: 1024px) {
	#jsn-page,
	#jsn-menu.jsn-menu-sticky,
	#jsn-pos-topbar {
		width: 1200px;
		min-width: 1200px;
	}
}

/* Force Desktop Version for screens 1024 and above */

/*@media only screen and (min-width: 1024px), (min-device-width: 1024px) {*/
/*@media only screen and (min-device-width: 1024px) {*/

@media only screen and (min-width: 961px), (min-device-width: 1024px) {
	#jsn-page,
	#jsn-menu.jsn-menu-sticky,
	#jsn-pos-topbar {
		width: 1200px;
		min-width: 1200px;
	}
}

Why Convert from MBR to GPT hard drive type?

The reason for these instructions is that at some point if you might need to change your windows system disk from a legacy MBR hard disk type to the new style GPT format without loosing data to take advantage of the following features.

• Hard drives larger than 2.2TiB
• UEFI
• Secure Boot (allows only signed drivers to be loaded by the OS)

MBR and GPT default partition layouts

It might be helpful to see what the default layout on a Windows 10 installation for both disk types so I installed Windows 10 on the same Corsair 120GB SSD under both disk types and took images of their various partition settings in both the Windows Disk Management and the Paragon Disk Manager.

MBR

Windows Disk Management

Paragon Hard Disk Manager

GPT

Partition Names

1. Recovery
2. System (EFI)
3. Reserved (MSR)
4. Primary (Windows System)

Windows Disk Management

Paragon Hard Disk Manager

The Instructions

Before continuing
BACKUP your whole drive !!!!

These instructions preserve the recovery partition and the default partition layout exactly like they would be on a fresh default installation of windows 10 on a GPT/UEFI installations. There is a reason for windows having a default layout so without knowing I prefer mine to be the same.

Your files and settings will be preserved.

Absolute Minimum steps required (To convert from MBR to GPT)

These 4 steps are only to remind the advanced user or those messing about.

1. Convert drive to GPT
2. Create an EFI partition
3. Run bcdboot command to repair the boot config
4. A 64-bit UEFI PC with it enabled in the BIOS

Notes

• When I refer to the Paragon Boot Disk I am using the WinPe version and I always goto the full manager
• If paragon asks about processing a RAW partition just click ok.
• All of these instructions referrer to Windows 10 x64

Prerequsites

• Your live PC with its data and HDD
• A spare HDD
• An external USB HDD
• Paragon Disk Manager 15 Premium
• Windows 10 boot disk
• Reprofiler - for correcting broken Windows User Profiles
• Windows Repair v3.8.4 Released - To repair permissions

Stage 1 – Make GPT/UEFI Windows Image

We need to make an image file for a fresh installation of Windows 10 using the UEFI /GPT system.

• Install the spare hard drive in to your computer as the sole hard drive (removing your current live HDD)
• Make sure the computer is configured to boot via UEFI
• Boot from the Paragon boot disk
• Make sure that the new hard drive is configured as a GPT hard drive, if not, delete everything on the HDD and make it in to a GPT hard drive (right click on the drive etc…) but do not create any partitions
• Save the changes and power down the PC
• Boot of your Windows 10 boot disk and install windows 10 64bit
• Once windows 10 is installed power down the PC
• Attach your USB hard drive and boot of your Paragon boot disk
• Image the whole hard disk holding the windows 10 installation to an image file located on your external USB HDD
• You now have a suitable windows 10 image file for the next stage. You could also have used the hard drive directly but it can make things a bit messy. My way has fewer issues as you always know which drive is which.

Stage 2 – Configure New Partitions and Disk Type on your Live Drive

• Re-install you original disk back into your PC removing the spare HDD
• Keep your external USD HDD attached
• Configure the PC BIOS to boot legacy/MBR mode
• Boot of the Paragon boot disk.
• Working on the PCs internal HDD.
  NB: all disk operations can be queued and applied in 1 go but if you find gaps in-between your partitions consider doing each step separately:
  • convert to GPT (Right click on the internal/live HDD)
  • Delete the ‘Recovery’ partition
  • Resize the C: partition 120mb smaller and have the free space appear before it
  • In to the free space I want you to restore the following partitions, in order, from the image file we made earlier. Do not add drive letters
    • Recovery (450mb)
    • NO NAME /EFI (100mb)
    • MSR (16mb)
  • If there is space between the C: partition and the MSR partition (the last one just added), resize the C: partition again to remove the gap.
• Apply all changes.
• Turn the PC off
• Disconnect the USB hard drive

Stage 3 – Correct the Boot Record on your Live Drive

The disk is now converted and all the partitions are in place but Windows will still not boot. You now need to correct booting information in a process similar to repairing a MBR or BCD.

• Configure the Bios to boot from UEFI
• Boot off the Windows 10 boot disk.
• Load the command prompt (shortcut = Alt + F10)
• Run diskpart
• Type: select disk 0
• Type: list volume
• The volume list is now shown

  DISKPART> list volume
  
    Volume ###  Ltr  Label        Fs     Type        Size     Status     Info
    ----------  ---  -----------  -----  ----------  -------  ---------  --------
    Volume 0     D   ESD-ISO      UDF    DVD-ROM     5605 MB  Healthy
    Volume 1     C                NTFS   Partition    111 GB  Healthy
    Volume 2         Recovery     NTFS   Partition    450 MB  Healthy    Hidden
    Volume 3                      FAT32  Partition    100 MB  Healthy    Hidden

• Your windows system disk should have the drive letter C:, if not set it to C:
  • Type: select volume 1
  • Type: assign letter=c
• We need to give the EFI partition a drive letter S:. The EFI partition is 100mb and in this example volume 3 so:
  • Type: select volume 3
  • Type: assign letter=s
• We have now finished with diskpart
  • Type: exit
• Type: bcdboot c:\windows /s s: /f UEFI
• Type: exit
• Turn your PC off.
• Make sure your bios is set to boot UEFI Secure Boot
• Reboot the computer making sure you have removed the windows 10 boot disk
• Your windows installation should now load

Full diskpart command routine

Microsoft Windows [Version 10.0.10586]


X:\Sources>diskpart

Microsoft DiskPart version 10.0.10586

Copyright (C) 1999-2013 Microsoft Corporation.
On computer: MININT-5HVULE8

DISKPART> list disk

  Disk ###  Status         Size     Free     Dyn  Gpt
  --------  -------------  -------  -------  ---  ---
  Disk 0    Online          111 GB  6144 KB        *

DISKPART> select disk 0

Disk 0 is now the selected disk.

DISKPART> list partition

  Partition ###  Type              Size     Offset
  -------------  ----------------  -------  -------
  Partition 1    Recovery           450 MB  1024 KB
  Partition 2    System             100 MB   452 MB
  Partition 3    Reserved            16 MB   552 MB
  Partition 4    Primary            111 GB   572 MB

DISKPART> list volume

  Volume ###  Ltr  Label        Fs     Type        Size     Status     Info
  ----------  ---  -----------  -----  ----------  -------  ---------  --------
  Volume 0     D   ESD-ISO      UDF    DVD-ROM     5605 MB  Healthy
  Volume 1     C                NTFS   Partition    111 GB  Healthy
  Volume 2         Recovery     NTFS   Partition    450 MB  Healthy    Hidden
  Volume 3                      FAT32  Partition    100 MB  Healthy    Hidden

DISKPART> select volume 3

Volume 3 is the selected volume.

DISKPART> assign letter=s

DiskPart successfully assigned the drive letter or mount point.

DISKPART> exit

Leaving DiskPart...

X:\Sources>bcdboot c:\windows /s s: /f UEFI
Boot files successfully created.

X:\Sources> exit

Stage 4 – Correct User Profile Issues (optional)

If when your windows 10 for the 1^st time it is asking you to create a profile before continuing, this is because there as some permission issues with the user profiles so to continue:

• At the user creation form/prompt, create a profile called uefi and don’t give it a password
• You have now logged on using the new account.

You need to do the following to fix it to re-establish the link between the user accounts and their profiles and correct the relevant permissions:

This fix might be useful to run even if you don’t appear to have problems (I have not verified this).

• Enable the administrator account via an administrator level command prompt

  net user administrator /active:yes

• Log off the uefi user and login in to the administrator account
• Download the reprofiler program
• Run reprofiler and reattach the user accounts to their correct profile location as per the instructions on the reprofiler website
• Reboot your computer and make sure your old accounts work as they should
• Now disable the administrator account via an administrator level command prompt

  net user administrator /active:no

• Delete the uefi user if it is no longer needed
• Your profiles are now fixed

Stage 5 – Things are not quite right (optional)

Are there services that are not running or things seem to be missing, then it is likely to be permissions across the windows install that is wrong. This however is easily fixed

• Download windows AIO repair from tweaking.com
• Boot into safe mode
• Run the software and repair
  • Service Permissions
  • File Permissions
  • Registry Permissions

Stage 6 – Multiple boot options appear

When you load windows you keep getting prompted which install your want to use. To remove this you need to delete the unwanted OS reference.

• From the run menu load MSCONFIG
• Goto the Boot tab
• Delete the rogue entry and save the changes

Links

MBR --> GPT Conversion

• Converting Windows BIOS installation to UEFI - TechNet Articles - United States (English) - TechNet Wiki  - Nehal J Wani based his work on this original solution and I have also taken the boot correction aspect from here.
• How to Convert Windows 7/8/8.1/10 Installation from Legacy to UEFI Without Data Loss! - YouTube -  A video on how to convert MBR to GPT without data loss - Nehal J Wani
• Convert Windows 7/8/10 Installation from Legacy to UEFI Without Data Loss (Simpler Method) - YouTube - A video on how to convert MBR to GPT without data loss - Nehal J Wani
• Convert MBR to GPT using Macrium Reflect. See description for the steps. - YouTube - How to move you windows installation to a GPT Hard disk and boot it, no conversion method
• How to Convert MBR to GPT Disk in Windows 10 / 8 / 7
• Convert Disk between MBR and GPT in Windows 10 without Data Loss
• Converting MBR to GPT for EFI boot? - Windows 10 Forums
• Installing Windows 7 on UEFI based computer | Ask the Core Team - This shows different sizez for the EFI and MSR partitions for Windows 7. You should use the sizez for Windows 10.

Diskpart

• How to Use the Diskpart Utility to Assign and Remove Drive Letters | How To Geek
• Assign, change, or remove a drive letter with Diskpart | TechNet

Other

• Enable the (Hidden) Administrator Account on Windows 7, 8, or 10
• How to setup UEFI - BIOS for native UEFI bootloader - YouTube

These instructions show you how to setup Picture messaging/MMS and internet on your mobile phone.

Automatic SMS Based setup instructions from Virgin Rep

Instead of manually configuring the APN you can use the links from virgin to automatically configure you phone (just like ringing virgin and getting them to do it)

1. goto http://www.virginmedia.com/
2. click mobile
3. click help (on top row)
4. click mobile (in that weired shape)
5. look under device supprt and click 'Phone Support' (Click Here)
   
   1. click search for my phone samsung note 3 (or select from the list), this gives manual settings. For some reason the 'internet' option is not in the fact thus not giving you a link, this is why you have to go via another phone to ge to the page wherte you can send the text messages your self.
      or
   2. 1. seach for samsung s6 / click on samsung s6
      2. expand the internat faq option
      3. click on 'How do I manually enter the Mobile internet & Picture Messaging settings?'
      4. at the top of the new faq section there is a link 'click here in the sentence:
      5. To download the right ones, just click here

To manually set up follow these instructions:

• click the 'click here' link
• this displays the options to set up the samsung s6 by sending a text message, this is not the phone i want, so click "Not your phone? Choose another"
• now search for the 'Samsung SM-N9005 Galaxy Note 3' and click it

You are now able to send the SMS message to configure you samsung note 3.

Direct Page Links

• Phone Settings - Choose your manufacturer
• Phone Settings - Choose your manufacturer (Samsung selected)
• Phone Settings - Samsung SM-N9005 Galaxy Note 3

Notes

• The PIN is usually the last 4 digits of your phone, if required
• Setting up the APN settings from the virgin site (as per that link for that other samsung phone i used) gets you on the internet on striaght away (possibly because i was alreay on though)  and configures the MMS.
• MMS does not work straight away, you have to:
  1. reboot your phone so it registers the new functionality on the network (educated guess)
  2. possibly send a MMS message to activate the server. (this seems stupid and I am not 100% this is require anymore). You can send this message to your own.

I need to figure out how to discover the URL for a specific camera.

• Br401/801 is compatible with our cameras
• The ip cam viewer software worked with our cameras selecting KGurad BR401/801
• Only port 9000 is needed as this supplied the rtsp feed and authentication
• Other software
  • Blue iris
  • Ispay
  • Webcamxp
• Ip cam viewer has a camera scanner to autodetct what sort of camera you have
• How did livesey aquire the url
• Most cheap shitty cameras are probably rtsp
• Ip camera also has a webserver (which I have not got to work yet)
• The camera stream 9000 needs to be TCP, this is also refered to as the media port
• Port 80 is only for the web interface and does not work outside internet explorer on windows XP. This is not required for viewing cameras remotely
• The stream is probably RSTP and is instigated by a get request using a particular string.
• 18004 seems to be exposed aswell