Coockie Policy

Cookies e registrazione sui siti

I cookies sono piccoli file di informazioni inviati da un web server ad un web browser, che permettono al server di raccogliere informazioni dal browser. Il Centro Studi Pedagogici (CSP) e i suoi fornitori di servizi inviano cookies quando si visitano i Siti Web di CSP, si eseguono login nelle aree riservate, ci si registra per alcuni servizi o si richiedono informazioni. Attraverso i cookies, CSP non raccoglie informazioni personali ma esclusivamente dati utili per facilitare i procedimenti di login agli Utenti, per avere traccia della visita, del Paese, della lingua e altre informazioni geografiche e di utilizzo dei Siti. Infine, i cookies vengono utilizzati dai servizi di statistiche sugli accessi abilitati sui Siti Web di CSP. Se l'Utente non desidera ricevere dei cookies, può bloccarli o richiedere che gli venga inviato preventivamente un avviso, seguendo le procedure specificate dal browser web installato sul proprio computer.

Per maggiori informazioni su come gestire i Cookie nel browser si rimanda a: Google Chrome, Mozilla Firefox, Apple Safari e Microsoft Windows Explorer. Tuttavia, impostando questi blocchi, può accadere che il browser reagisca in maniera non appropriata, non solo quando l'Utente visita i Siti Web di CSP, ma anche quando ne visita altri. Pertanto, poiché i cookies non permettono a CSP di identificare gli Utenti, si suggerisce di accettare che vengano installati in modo da sfruttare appieno le funzionalità dei Siti Web.

Per maggiori informazioni sull’utilizzo dei cookies e su come bloccarli, è possibile visitare i siti www.allaboutcookies.org, www.youronlinechoices.eu per l’Europa o www.aboutads.info/choices/ per gli Stati Uniti.

Consenso all’uso dei cookie

Come richiesto dalla normativa vigente, il Sito Web presenta un’informativa breve sull’utilizzo dei cookie visualizzata in ogni pagina di primo accesso tramite un banner dinamico. Scrollando la pagina, facendo click su uno dei link interni delle pagine o facendo click sul tasto “OK” presente nel banner dinamico, si esprime il proprio consenso per l’uso dei cookie.

Utilizzo dei Cookie

Cookie tecnici
I Siti Web di CSP utilizzano i seguenti cookie tecnici, che vengono installati automaticamente a seguito dell’accesso al sito, per le finalità indicate in relazione a ciascuno di essi:

  • Cookie di sessione - necessaria al funzionamento e all'erogazione dei servizi del sito;
  • Cookie di statistica - utilizzati per raccogliere informazioni in forma aggregata.

Cookie di profilazione
I Siti Web di CSP non utilizzano cookie di profilazione, ad eccezione dei plugin di Google Analytics che esegue un'aggregazione statistica dei dati di accesso, permanenza e navigazione, rilevando esclusivamente informazioni di natura tecnica (browser, pagine visitate, permanenza, ecc.) e geografica (Paese di collegamento, città, ecc.).

Theme Widgets

Dolce Vita includes 4 awesome and custom widgets.

Parallax

Parallax

We modified the Parallax widget this time to add some more customization options and really nice effects!.

Background + Image are working now

As you may already have noticed, we’ve already used CSS blend mode effects for the block appearance options of Dolce Vita and Avanti block appearance options. Now we've added this for the Widgetkit 2 Parallax widget, too. Now the images can blend into the 2 different background colors!

Background Blend Mode

You can select from 15 different background blend modes! They work very well with two background colors and the image opacity. Please check this link on MDN for example.

CSS background blend modes are not supported by any Microsoft Internet Explorer, yet. Please use the Image Opacity settings to recreate a similiar effect.

Image Opacity

It depends on the image itself how well the single blend modes will work and harmonize with the custom background colors. To give you more control over this, you can select an extra opacity value, too.

Contrast Color

Select the default, secondary or primary based colors for your item content style.

Blur

Another brand new option is to set two blur values for the title and for the content. This will blur in or blur out your item content.

Badge

This widget also supports a badge display option with vertical aligned text.

Slider

Slider

The slider widget comes width some useful little effects and tweaks.

Item scaling

This slider supports CSS scaling for the before and after items, you can choose from different value options in the widget settings. While scrolling through the single items you will experience a liquid like effect.

Overlay Changes

We have modified the overlay to allow some more flexibility.

  • Default Full background overlay and centered content.
  • Top, Bottom, Left, Right Content and overlay background will be aligned to the direction selected and the background's width/height will adjust itself to the amount of content.

Other Options

  • Grid gutter large and extra large.
  • H5 and H6 options for the title size.
  • Supports Badge display option.
Gallery

Gallery

Dolce Vita provides a custom gallery widget which comes with a handful of new and unique features.

Sequence Grid

The gallery grid provides a pre-defined sequence which supports first- and last doubled item widths. This sequence is also fully responsive.

Overlay Settings

We took a look at the overlay settings and added new options to provide more flexibility.

Options
  • Background None, OnHover or Static.
  • Background Color Global (Body), Primary or Secondary.
  • Blend Mode Select from 15 different CSS background blend modes. Please check this link on MDN for examples.
  • Image Opacity 0% to 100% opacity of the item media.
  • Content Boxed This will add box around your content for better visibility.
  • Content Hover Content will only be displayed while hovering the item.
  • Overlay Position Select where your content will be displayed.
  • Overlay Text Align Select left, centered or right aligned text.

CSS background blend modes are not supported by any Microsoft Internet Explorer, yet. Please use the Image Opacity settings to recreate a similiar effect.

Other Options

  • Grid gutter large and extra large.
  • H5 and H6 options for the title size.
Grid

Grid

For Dolce Vita we have added a modified grid widget to customize our output, especially the one we can not control at all, like WordPress/Joomla system content. We have added a truncate option for the title and the content which makes it easier to control the data output and height.

Specials

  • Truncation option for the item title and content.
  • Grid divider option displays a border between the items.
  • Grid gutter large and extra large.
  • H5 and H6 options for the title size.
  • Option to display article/post tags as badges.

Additions

The Theme comes with some unqiue and cool features.

Font Variables and Modifiers

Font Variables and Modifiers

In Dolce Vita every style supports 3 possible font families. You can use three theme classes to overwrite the default font by adding those.

  • .tm-font Uses the @global-font-family which is the regular text font.
  • .tm-font-alt-1 Uses the @global-alt-1-font-family which is the regular font for headlines.
  • .tm-font-alt-2 Uses the @global-alt-2-font-family which is the regular font for navs, subnavs, tabs, buttons and all other UI elements.

Example Code

<p>Hello this is some regular text and <span class="tm-font-alt-2">this text with the button or nav like type of font</span>.</p>

If you want to switch the font families, please use the Customizer in the Warp UI.

Dotnav Follower

Dotnav Follower

If you want to use the dotnav follower on your pages, please create a module/widget and paste the following code to it. Please also use the correct link targets, for example if there's nothing published on the position top-a do not link to it, it will not work. Only use active sections. After adding the code, please assign it to your favorite page and publish this on the layout position fixed-bar.

Example Code

<div class="uk-flex uk-flex-middle uk-flex-center uk-height-1-1 uk-position-relative uk-hidden-small" data-uk-nav-follower>
    <ul class="tm-dotnav uk-dotnav uk-flex-column" data-uk-scrollspy-nav="{smoothscroll: {offset: 90}, closest:'li'}">
        <li><a href="#tm-top-a"></a></li>
        <li><a href="#tm-top-b"></a></li>
        <li><a href="#tm-top-c"></a></li>
        <li><a href="#tm-top-d"></a></li>
        <li><a href="#tm-main"></a></li>
        <li><a href="#tm-bottom-a"></a></li>
        <li><a href="#tm-bottom-b"></a></li>
        <li><a href="#tm-bottom-c"></a></li>
        <li><a href="#tm-bottom-d"></a></li>
        <li><a href="#tm-footer"></a></li>
    </ul>
</div>

The dotnav follower will always show the active sections. If the sections’ heights are too low, it might show two active items.

Horizontal Address

Horizontal Address

We've added a tiny little special styling to style contact information. If you want to to use this element please copy and edit the snippet. If you want to edit the width, font size and color, please use the Customizer in the Warp UI. Please use the .tm-address-horizontal class for the parent element and .tm-label for label/description and .tm-data for the content.

Example Code

<address class="tm-address-horizontal uk-text-center-medium">
    <div class="tm-label tm-font-alt-2">Phone</div>
    <div class="tm-data">+39 555 59382</div>
    <div class="tm-label tm-font-alt-2">Email</div>
    <div class="tm-data">fashion(at)dolce.vita</div>
</address>

Content Boxed

Content Boxed

To add a panel box like style to your elements, you can add the the class .tm-content-boxed to a block element.

Example Code

<div class="tm-content-boxed uk-text-center">
  <h2 class="uk-h1 uk-margin-bottom-remove">Where to find us</h2>
  <p class="uk-margin-small-top uk-margin-bottom-remove">Open up the map and locate our local store in Milano, Italy.</p>
</div>

Contain Background

Contain Background

We've already used background images for every block section in our latest themes but they automatically cover the entire section, so we added 4 new modifier classes to add to the block sections to give you more flexibilliy positioning the background images.

Classes

  • .tm-contain-background-top-center Scales the image to the largest possible amount whilst fitting its parent container and maintaining the image’s aspect ratio and aligns it to the top center.
  • .tm-contain-background-top-left Scales the image to the largest possible amount whilst fitting its parent container and maintaining the image’s aspect ratio and aligns it to the top left.
  • .tm-contain-background-top-right Scales the image to the largest possible amount whilst fitting its parent container and maintaining the image’s aspect ratio and aligns it to the top right.
  • .tm-contain-background-center Scales the image to the largest possible amount whilst fitting its parent container and maintaining the image’s aspect ratio and aligns it to the center.
  • .tm-contain-background-left Scales the image to the largest possible amount whilst fitting its parent container and maintaining the image’s aspect ratio and aligns it to the left.
  • .tm-contain-background-right Scales the image to the largest possible amount whilst fitting its parent container and maintaining the image’s aspect ratio and aligns it to the right.
  • .tm-contain-background-bottom-center Scales the image to the largest possible amount whilst fitting its parent container and maintaining the image’s aspect ratio and aligns it to the bottom center.
  • .tm-contain-background-bottom-left Scales the image to the largest possible amount whilst fitting its parent container and maintaining the image’s aspect ratio and aligns it to the bottom left.
  • .tm-contain-background-bottom-right Scales the image to the largest possible amount whilst fitting its parent container and maintaining the image’s aspect ratio and aligns it to the bottom right.

Hide Background Images

If you want to hide a background images on smaller viewports, we've added two theme classes you can add to the class field in the block appearance section in the Warp UI.

  • .tm-background-hidden-small Background images will disappear on small viewports.
  • .tm-background-hidden-medium Background images will disappear on small to medium viewports.

Card Gallery

Card Gallery

To apply the same box shadow of the Dolce Vita hover panels to a Gallery widget, add the .tm-card-gallery class to the HTML class field of the General section in the widget’s administration.

Widgetkit Settings

Widgetkit Settings

Condensed

Condensed

We also added the .tm-margin-condensed class. It reduces the spacing between a widget title and the following content. Just add the class to a grid widget, for example in the HTML class field of the general tab in the widget administration.

Widgetkit Settings

Widgetkit Settings

Extra Large

Extra Large

Grid Extra large

We've added a new grid modifier class which uses the @global-grid-gutter-xlarge variable for more grid gutter spacing. Just add the the class .uk-grid-xlarge to your uk-grid container.

Example
<div class="uk-grid uk-grid-xlarge" data-uk-grid-margin>
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

Margin Extra large

Similiar to the UIkit core utility component, we added a new margin modifier class which uses the @global-margin-xlarge variable for more spacing.

Classes
  • .tm-margin-xlarge Adds the same top and bottom margins as a paragraph usually has.
  • .tm-margin-xlarge-top Adds top margin.
  • .tm-margin-xlarge-bottom Adds bottom margin.
  • .tm-margin-xlarge-left Adds left margin.
  • .tm-margin-xlarge-right Adds right margin.

Theme Icons

We have added a custom webfont which contains some useful icons which we also used in our Dolce Vita UIkit theme.

How to use

The theme icons are similar to UIkit icon component. To apply this component, add any .uk-theme-icon-* class to an <i> or <span> element. Et voilà, you have a vector icon, which inherits size and color just like your text does.

  • cog
  • heart
  • search
  • author
  • comment
  • share
  • tag
  • arrow-left
  • arrow-right
  • arrow-up
  • arrow-down
  • bag
  • plus
  • minus
  • check
  • cross
  • menu
  • ellipsis

About this theme

This theme is built on the Warp framework, a well-engineered theme framework for WordPress and Joomla, and utilizes all of its latest features. The user interface is powered by UIkit, a lightweight and modular front-end framework, which provides the theme's styling. The theme also comes with a wide range of different layouts and widget variations.

This theme is available for JoomlaJoomla and WordpressWordPress including the same features on each system.

Con gli strumenti giusti è possibile superare ogni ostacolo

Theme Technologies

Our themes are using modern technologies.

UIkit Framework

UIkit Framework

A lightweight and modular front-end framework for developing fast and powerful web interfaces.

Read more

Warp Framework

Warp Framework

A fast and slick theme framework which is built on the latest web techniques.

Read more