ComputerSurvive uses cookies to make sure our websites work effectively and to improve your user experience.

If you continue to use this site we will assume that you are happy with this.

CONTACT US

Use this form to send us a message:

Get in touch with us

Address: Via Camillo Alliaudi, 36 10064 Pinerolo (Torino) Italia

Phone: (39) 39 36 74 1512
from Monday to Friday : 09–12, 15–18

Email       : info@computersurvive.eu

Facebookhttps://goo.gl/RNqyk4

Linkedin  : https://lnkd.in/dAbgUZW

Skype      : computersurvive?chat

 

Our goal is to help integrate all aspects of the systems of our customers in a reliable, responsive, fast and secure. We are reliable dealer and consultants who are committed to forging lasting partnerships with customers and provide a high quality service

Consulenza Computer

ll nostro obiettivo è quello di aiutare a integrare tutti gli aspetti dei sistemi dei nostri clienti (professionisti, aziende e uffici) in un sistema affidabile, reattivo, veloce e sicuro. Siamo rivenditore affidabile e consulenti che si impegnano a forgiare partnership durature con i clienti e fornire un servizio di alta qualità.

 

Grids

The grid is based on Skeleton framework by Dave Gamache . 

Skeleton's base grid is a variation of the 960 grid system with 16 columns. Each column has 40px. The syntax is simple and it's effective cross browser.

It would be very wise to use Firebug (in Firefox) or Developer Tools (in Chrome), it will surely make your life easier.

One + Fifteen:

one
fifteen

 

[grid1 first] one [/grid1] [grid15 last] fifteen [/grid15]

 

Two + Foureen:

two
fourteen

 

Three + Thirteen:

three
thirteen

 

Four + Twelve:

four
twelve

 

...

...

 

Six + Three + Three + Four:

six
three
three
four

 

[grid6 first] six [/grid6] [grid3] three [/grid3] [grid3] three [/grid3] [grid4 last] four [/grid4]

 

One-third + Two Thrids:

twothirds

 

Please look at this article in the Article manager to see how the shortcodes are added.

BUTTON DESIGNS

NORMAL BUTTONS

This is a big button This is a big yellow button This is a big red button This is a big green button This is a big blue button 

Shortcode:

[big-button color="yellow" link="http://www.website.com/"]This is a big yellow button[/big-button] [big-button link="http://www.website.com/"]This is a big button[/big-button]

You can also use straight css class like .big-button (for making it big) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="large button yellow radius">This is a big yellow button</a>
Medium blue button Green medium rounded button Default medium button

Shortcode:

[medium-button color="blue" link="http://www.website.com/"]This is a medium&nbsp;<strong>blue</strong>&nbsp;button[/medium-button] [medium-button color="green" link="http://www.website.com/" rounded="yes"]This is a medium&nbsp;<strong>green</strong>&nbsp;button[/medium-button] [medium-button link="http://www.website.com/"]This is a default medium button[/medium-button]

You can also use straight css class like .medium.button (for making it medium) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="medium button yellow radius">This is a medium yellow button</a>
Small blue button Green small button Small red button Default small button Small orange button Small lightblue button Small purple button Small turqoise button Small darkred button Small green-lemon button Small white button Small black button

Shortcode:

[small-button color="blue" link="http://www.website.com/"]This is a small blue button[/small-button] [small-button color="green" link="http://www.website.com/"]This is a small green button[/small-button] [small-button color="red" link="http://www.website.com/"]This is a small red button[/small-button] [small-button link="http://www.website.com/"]This is a default small button[/small-button]

You can also use straight css class like .small.button (for making it big) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="small button yellow radius">This is a small yellow button</a>

 

NICE BUTTONS

This is a big button This is a big yellow button This is a big red button This is a big green button This is a big blue button 

Shortcode:

[big-button color="yellow" link="http://www.website.com/" type="nice"]This is a big yellow button[/big-button][big-button link="http://www.website.com/" type="nice"]This is a big button[/big-button]

You can also use straight css class like .large.button (for making it big) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="large button yellow nice radius">This is a big yellow button</a>
Medium blue button Green medium button Default medium button

Shortcode:

[medium-button color="blue" link="http://www.website.com/" type="nice"]This is a medium&nbsp;<strong>blue</strong>&nbsp;button[/medium-button] [medium-button color="green" link="http://www.website.com/" type="nice"]This is a medium&nbsp;<strong>green</strong>&nbsp;button[/medium-button] [medium-button link="http://www.website.com/" type="nice"]This is a default medium button[/medium-button]

You can also use straight css class like .medium.button (for making it big) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="medium button yellow nice radius">This is a medium yellow button</a>
Small blue button Green small button Small red button Default small button Small orange button Small lightblue button Small purple button Small turqoise button Small darkred button Small green-lemon button Small white button Small black button

Shortcode:

[small-button color="blue" link="http://www.website.com/" type="nice"]This is a small blue button[/small-button] [small-button color="green" link="http://www.website.com/" type="nice"]This is a small green button[/small-button] [small-button color="red" link="http://www.website.com/" type="nice" rounded="yes"]This is a small red rounded button[/small-button] [small-button link="http://www.website.com/" type="nice"]This is a default small button[/small-button]

You can also use straight css class like .small.button (for making it big) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="small button yellow nice radius">This is a small yellow button</a>

 

ROUND CORNERS

This is a big yellow button This is a big red button

Shortcode:

[big-button color="red" link="http://www.website.com/" corners="round"]This is a big red button[/big-button][big-button color="red" link="http://www.website.com/" type="nice" corners="round"]This is a big red button[/big-button]

You can also use straight css class like .large.button.round (for making it big) and also .yellow, .green, .blue etc (for adding color). The html of this example is:

<a href="http://www.website.com/" class="large button yellow nice round">This is a big yellow button</a>

FAQ PAGE

 

Select one of the above questions to find out it's answer.

GENERAL QUESTIONS

Lorem ipsum dolor sit amet

Mauris laoreet arcu tortor. Fusce neque felis, bibendum vel lacinia et, eleifend ut tortor. Sed imperdiet, purus porttitor vestibulum lobortis, lorem nunc adipiscing ipsum, at ullamcorper sem odio a tellus. Mauris a luctus nunc.

Maecenas at nisl leo. Sed sed nisl a ligula eleifend posuere ut nec sapien. Proin tempor neque mi. Duis pretium dignissim elit nec feugiat. Morbi non orci felis. Nam vitae metus a orci iaculis facilisis.

Ligula eleifend posuere

Mauris laoreet arcu tortor. Fusce neque felis, bibendum vel lacinia et, eleifend ut tortor. Sed imperdiet, purus porttitor vestibulum lobortis, lorem nunc adipiscing ipsum, at ullamcorper sem odio a tellus. Mauris a luctus nunc.

Maecenas at nisl leo. Sed sed nisl a ligula eleifend posuere ut nec sapien. Proin tempor neque mi. Duis pretium dignissim elit nec feugiat. Morbi non orci felis. Nam vitae metus a orci iaculis facilisis.

Pretium dignissim elit nec feugiat

Mauris laoreet arcu tortor. Fusce neque felis, bibendum vel lacinia et, eleifend ut tortor. Sed imperdiet, purus porttitor vestibulum lobortis, lorem nunc adipiscing ipsum, at ullamcorper sem odio a tellus. Mauris a luctus nunc.

Maecenas at nisl leo. Sed sed nisl a ligula eleifend posuere ut nec sapien. Proin tempor neque mi. Duis pretium dignissim elit nec feugiat. Morbi non orci felis. Nam vitae metus a orci iaculis facilisis.

Maecenas pellentesque laoreet diam et dapibus

Phasellus sagittis, justo at sollicitudin gravida, nisl augue fringilla augue, dapibus condimentum ipsum justo a odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum non vehicula lectus. Donec tempus odio et eros pharetra consectetur lobortis nisi egestas. Aliquam felis nisl, adipiscing vel tristique a, rutrum gravida diam. Duis pretium tincidunt tempor. Donec sit amet felis quis velit suscipit laoreet ut sed justo. Integer a sapien in elit gravida pharetra. Mauris dictum massa vel magna aliquam dapibus. Nam ornare arcu vel eros laoreet quis tempus massa laoreet. Sed vel justo mauris. Donec congue posuere vulputate. Etiam pellentesque volutpat est. Pellentesque vitae neque mi, quis tincidunt sem. Sed quis neque arcu, sed pharetra purus.

Quisque id scelerisque ante. Ut ac metus orci.

Aliquam sit amet arcu id nunc pretium facilisis. Praesent ut orci vitae arcu dignissim iaculis eget vitae dolor. Sed magna nisl, pharetra id malesuada in, sagittis in lectus. Duis at vulputate nulla. Vestibulum consequat dictum purus, at tempor augue iaculis non. Suspendisse tempus gravida blandit. Sed placerat pharetra nulla et ultrices. Suspendisse dignissim bibendum venenatis. Aenean in nisi lacus. Etiam libero mauris, rhoncus non auctor eu, sagittis et enim. Fusce adipiscing tempor varius. Proin dictum dignissim luctus. Cras dapibus rutrum lobortis. Curabitur augue libero, tempor in aliquet nec, dapibus quis odio. Fusce condimentum, urna et bibendum ullamcorper, eros mi vestibulum tellus, at accumsan risus dui sed lectus. Nullam vel orci sit amet est ultrices pharetra. In a diam luctus elit tincidunt lobortis quis non massa.

In hac habitasse platea dictumst

Vivamus consequat risus vitae turpis lobortis ultrices. Donec sed quam metus, rutrum semper ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis at sem magna. Maecenas viverra, felis vitae hendrerit luctus, quam ligula viverra libero, non feugiat ligula enim volutpat elit. Praesent orci tortor, pretium euismod ultrices quis, faucibus nec augue. In rutrum, neque nec pharetra placerat, lorem nisi ultricies elit, non accumsan orci turpis a dolor. Vivamus pellentesque commodo tellus, id placerat nisi venenatis fringilla. Aenean dapibus, leo eu vestibulum venenatis, augue mi euismod nunc, quis aliquet purus ante hendrerit odio. Nam augue sapien, interdum vitae dictum nec, facilisis id lorem. Sed tincidunt tincidunt dapibus. Donec lobortis orci id lectus porta dapibus. Nullam tincidunt mollis mauris, vitae ullamcorper turpis congue quis. Mauris cursus nisl ut velit ultrices suscipit. Aliquam viverra aliquam purus, quis rhoncus augue pulvinar ac. Nam eu lorem eros.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices

Sed malesuada, tellus pharetra porta malesuada, massa est laoreet dolor, eu viverra dolor ipsum ut mauris. Donec non neque a elit viverra rhoncus ac et odio. Proin viverra scelerisque adipiscing. Ut eu sem mi. Duis tempor posuere urna, ac elementum metus cursus a. Vivamus convallis bibendum dui, vel scelerisque ipsum laoreet eu. Maecenas porttitor, felis et varius faucibus, elit purus vestibulum nibh, et ornare leo nunc ut magna. Nullam iaculis turpis vitae quam posuere luctus vehicula nunc ultrices. Sed ac ligula in urna ultricies ornare. Sed feugiat nibh vel nunc commodo vulputate. Aliquam erat volutpat. Phasellus lacinia cursus blandit. Pellentesque rutrum laoreet commodo. Nullam placerat mattis erat eget dictum. Nunc laoreet sollicitudin arcu posuere ullamcorper. Duis pretium dolor volutpat enim vulputate tincidunt venenatis ipsum tincidunt.

SOME OTHER QUESTIONS

Lorem ipsum dolor sit amet

Mauris laoreet arcu tortor. Fusce neque felis, bibendum vel lacinia et, eleifend ut tortor. Sed imperdiet, purus porttitor vestibulum lobortis, lorem nunc adipiscing ipsum, at ullamcorper sem odio a tellus. Mauris a luctus nunc.

Maecenas at nisl leo. Sed sed nisl a ligula eleifend posuere ut nec sapien. Proin tempor neque mi. Duis pretium dignissim elit nec feugiat. Morbi non orci felis. Nam vitae metus a orci iaculis facilisis.

Ligula eleifend posuere

Mauris laoreet arcu tortor. Fusce neque felis, bibendum vel lacinia et, eleifend ut tortor. Sed imperdiet, purus porttitor vestibulum lobortis, lorem nunc adipiscing ipsum, at ullamcorper sem odio a tellus. Mauris a luctus nunc.

Maecenas at nisl leo. Sed sed nisl a ligula eleifend posuere ut nec sapien. Proin tempor neque mi. Duis pretium dignissim elit nec feugiat. Morbi non orci felis. Nam vitae metus a orci iaculis facilisis.

Pretium dignissim elit nec feugiat

Mauris laoreet arcu tortor. Fusce neque felis, bibendum vel lacinia et, eleifend ut tortor. Sed imperdiet, purus porttitor vestibulum lobortis, lorem nunc adipiscing ipsum, at ullamcorper sem odio a tellus. Mauris a luctus nunc.

Maecenas at nisl leo. Sed sed nisl a ligula eleifend posuere ut nec sapien. Proin tempor neque mi. Duis pretium dignissim elit nec feugiat. Morbi non orci felis. Nam vitae metus a orci iaculis facilisis.

Maecenas pellentesque laoreet diam et dapibus

Phasellus sagittis, justo at sollicitudin gravida, nisl augue fringilla augue, dapibus condimentum ipsum justo a odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum non vehicula lectus. Donec tempus odio et eros pharetra consectetur lobortis nisi egestas. Aliquam felis nisl, adipiscing vel tristique a, rutrum gravida diam. Duis pretium tincidunt tempor. Donec sit amet felis quis velit suscipit laoreet ut sed justo. Integer a sapien in elit gravida pharetra. Mauris dictum massa vel magna aliquam dapibus. Nam ornare arcu vel eros laoreet quis tempus massa laoreet. Sed vel justo mauris. Donec congue posuere vulputate. Etiam pellentesque volutpat est. Pellentesque vitae neque mi, quis tincidunt sem. Sed quis neque arcu, sed pharetra purus.

Quisque id scelerisque ante. Ut ac metus orci.

Aliquam sit amet arcu id nunc pretium facilisis. Praesent ut orci vitae arcu dignissim iaculis eget vitae dolor. Sed magna nisl, pharetra id malesuada in, sagittis in lectus. Duis at vulputate nulla. Vestibulum consequat dictum purus, at tempor augue iaculis non. Suspendisse tempus gravida blandit. Sed placerat pharetra nulla et ultrices. Suspendisse dignissim bibendum venenatis. Aenean in nisi lacus. Etiam libero mauris, rhoncus non auctor eu, sagittis et enim. Fusce adipiscing tempor varius. Proin dictum dignissim luctus. Cras dapibus rutrum lobortis. Curabitur augue libero, tempor in aliquet nec, dapibus quis odio. Fusce condimentum, urna et bibendum ullamcorper, eros mi vestibulum tellus, at accumsan risus dui sed lectus. Nullam vel orci sit amet est ultrices pharetra. In a diam luctus elit tincidunt lobortis quis non massa.

In hac habitasse platea dictumst

Vivamus consequat risus vitae turpis lobortis ultrices. Donec sed quam metus, rutrum semper ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis at sem magna. Maecenas viverra, felis vitae hendrerit luctus, quam ligula viverra libero, non feugiat ligula enim volutpat elit. Praesent orci tortor, pretium euismod ultrices quis, faucibus nec augue. In rutrum, neque nec pharetra placerat, lorem nisi ultricies elit, non accumsan orci turpis a dolor. Vivamus pellentesque commodo tellus, id placerat nisi venenatis fringilla. Aenean dapibus, leo eu vestibulum venenatis, augue mi euismod nunc, quis aliquet purus ante hendrerit odio. Nam augue sapien, interdum vitae dictum nec, facilisis id lorem. Sed tincidunt tincidunt dapibus. Donec lobortis orci id lectus porta dapibus. Nullam tincidunt mollis mauris, vitae ullamcorper turpis congue quis. Mauris cursus nisl ut velit ultrices suscipit. Aliquam viverra aliquam purus, quis rhoncus augue pulvinar ac. Nam eu lorem eros.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices

Sed malesuada, tellus pharetra porta malesuada, massa est laoreet dolor, eu viverra dolor ipsum ut mauris. Donec non neque a elit viverra rhoncus ac et odio. Proin viverra scelerisque adipiscing. Ut eu sem mi. Duis tempor posuere urna, ac elementum metus cursus a. Vivamus convallis bibendum dui, vel scelerisque ipsum laoreet eu. Maecenas porttitor, felis et varius faucibus, elit purus vestibulum nibh, et ornare leo nunc ut magna. Nullam iaculis turpis vitae quam posuere luctus vehicula nunc ultrices. Sed ac ligula in urna ultricies ornare. Sed feugiat nibh vel nunc commodo vulputate. Aliquam erat volutpat. Phasellus lacinia cursus blandit. Pellentesque rutrum laoreet commodo. Nullam placerat mattis erat eget dictum. Nunc laoreet sollicitudin arcu posuere ullamcorper. Duis pretium dolor volutpat enim vulputate tincidunt venenatis ipsum tincidunt.

MODULES POSITIONS

Fixed positions:

These modules positions use fixed positions and are mostly built for custom modules and have fixed:

  • audio_player - used for Audio Player module // fixed position, you can css position it where you want
  • background - used for slideshows, fixed images, videos in the background etc.
  • breadcrumbs - used for Breadcrumbs module
  • date - used for Date module
  • live_comments - used for Facebook Comments & Latest Tweets Module. It's fixed and located at { right: 0; top: 100px; }
  • menu - used for the Main menu.
  • search - used for Search module // fixed position, located at { bottom: 130px; left: 0; }
  • social_icons - used for social icons module // fixed position, located at {bottom: 85px; left:0; }
  • social_sharing - used for HG Social Sharing module (like, tweet, gplus buttons) // fixed position, located at: {right: 0; bottom: 75px;}

Special positions:

These positions are also fixed, but inside them you can place anything you want.

  • mainboxes - it's located right above the footer, you can place a carousel, images, or anything you want. It's especially built for a homepage or default page. This position only appears on Homepage where the component is disabled.
  • slideshow - it's especially built to have fixed width slideshows (not in background). Mostly used for homepage.
  • footer[1,2,3,4,5,6] - These modules have user defined width, you can align them on right/left.

Normal positions:

  • maintop - up to 16 modules (each 40px wide)
  • mainbottom - up to 16 modules (each 40px wide)
  • utility - up to 16 modules (each 40px wide)
  • showcase - up to 16 modules (each 40px wide)
  • sidebar_left
  • sidebar_right

Generic Joomla positions:

  • debug - used for Joomla for displaying data when set on debug mode

Across the website (in module manager) you will see some module positions like contact_details, contact_form, newsletter_module, partners_module, qrcode. These modules are loaded inside the PopupIcon modules or loaded via {loadposition} syntax inside the articles. They just have a unique module position to be called inside an article or other module.

 

MODULES MAP » HOMEPAGE

 

MODULES MAP » INNER PAGES

 

  • Tweets

Please add WIDGET ID!! (Reconfigure the HG Live Social Module's settings.)