Actueel

nicoledevries.nl

Nicole de Vries - website

Deze website heb ik vandaag opgeleverd. Uniek aan dit ontwerp is dat het blog systeem is opgedeeld waardoor het lijkt alsof er twee individuele blogs draaien terwijl het er maar één is!

 

Nicole de vries is een kunstenaar die zich steeds op nieuw laat uitdagen door spontane technieken. Dit combineert zij met figuratief werk. Zij organiseert regelmatig deze uitdagende vaardigheid in haar kunst workshops. Ooit als etaleuse gestart en nu werkzaam als agogisch werker waar zij passie voor kunst deelt in workshops en de drijvende kracht is van het creatieve upcycle werkproject. Als illustrator krabbelt zij de kleine avonturen en zoekt nieuwe combinaties in technieken om sfeer en gevoel zeggingskracht te geven . Oprichtster van het Kunstcafe, voor kinderen met een vorm van autisme en A.D.H.D En als mede organisator van de kunstworkshops tijdens de avondopening van het Stedelijk Museum Alkmaar, deelt zij de kracht van kunst!

  • Custom made
  • PHP modificaties
  • HTML/CSS modificaties
  • Backend management

Bekijk de website

BreadCrumbs

Je wilt breadcrumbs op je website zonder plugins? Dat kan met onderstaande code te plaatsen in de daarbij horende WordPress (child) thema templates. We beginnen met onderstaande PHP code te plaatsen in je functions.php (child thema). Wat zijn breadcrumbs? Ze helpen je bij de navigatie op de website; statische pagina’s maar ook gecategoriseerde blogberichten. Zie afbeelding. breadcrumbs

 

 

 

 

/*——— Breadcrumbs ———-*/
// Breadcrumbs
function custom_breadcrumbs() {

// Settings
$separator = ‘>’;
$breadcrums_id = ‘breadcrumbs’;
$breadcrums_class = ‘breadcrumbs’;
$home_title = ‘Homepage’;

// If you have any custom post types with custom taxonomies, put the taxonomy name below (e.g. product_cat)
$custom_taxonomy = ‘product_cat’;

// Get the query & post information
global $post,$wp_query;

// Do not display on the homepage
if ( !is_front_page() ) {

// Build the breadcrums
echo ‘<ul id=”‘ . $breadcrums_id . ‘” class=”‘ . $breadcrums_class . ‘”>’;

// Home page
echo ‘<li class=”item-home”><a class=”bread-link bread-home” href=”‘ . get_home_url() . ‘” title=”‘ . $home_title . ‘”>’ . $home_title . ‘</a></li>’;
echo ‘<li class=”separator separator-home”> ‘ . $separator . ‘ </li>’;

if ( is_archive() && !is_tax() && !is_category() && !is_tag() ) {

echo ‘<li class=”item-current item-archive”><strong class=”bread-current bread-archive”>’ . post_type_archive_title($prefix, false) . ‘</strong></li>’;

} else if ( is_archive() && is_tax() && !is_category() && !is_tag() ) {

// If post is a custom post type
$post_type = get_post_type();

// If it is a custom post type display name and link
if($post_type != ‘post’) {

$post_type_object = get_post_type_object($post_type);
$post_type_archive = get_post_type_archive_link($post_type);

echo ‘<li class=”item-cat item-custom-post-type-‘ . $post_type . ‘”><a class=”bread-cat bread-custom-post-type-‘ . $post_type . ‘” href=”‘ . $post_type_archive . ‘” title=”‘ . $post_type_object->labels->name . ‘”>’ . $post_type_object->labels->name . ‘</a></li>’;
echo ‘<li class=”separator”> ‘ . $separator . ‘ </li>’;

}

$custom_tax_name = get_queried_object()->name;
echo ‘<li class=”item-current item-archive”><strong class=”bread-current bread-archive”>’ . $custom_tax_name . ‘</strong></li>’;

} else if ( is_single() ) {

// If post is a custom post type
$post_type = get_post_type();

// If it is a custom post type display name and link
if($post_type != ‘post’) {

$post_type_object = get_post_type_object($post_type);
$post_type_archive = get_post_type_archive_link($post_type);

echo ‘<li class=”item-cat item-custom-post-type-‘ . $post_type . ‘”><a class=”bread-cat bread-custom-post-type-‘ . $post_type . ‘” href=”‘ . $post_type_archive . ‘” title=”‘ . $post_type_object->labels->name . ‘”>’ . $post_type_object->labels->name . ‘</a></li>’;
echo ‘<li class=”separator”> ‘ . $separator . ‘ </li>’;

}

// Get post category info
$category = get_the_category();

if(!empty($category)) {

// Get last category post is in
$last_category = end(array_values($category));

// Get parent any categories and create array
$get_cat_parents = rtrim(get_category_parents($last_category->term_id, true, ‘,’),’,’);
$cat_parents = explode(‘,’,$get_cat_parents);

// Loop through parent categories and store in variable $cat_display
$cat_display = ”;
foreach($cat_parents as $parents) {
$cat_display .= ‘<li class=”item-cat”>’.$parents.'</li>’;
$cat_display .= ‘<li class=”separator”> ‘ . $separator . ‘ </li>’;
}

}

// If it’s a custom post type within a custom taxonomy
$taxonomy_exists = taxonomy_exists($custom_taxonomy);
if(empty($last_category) && !empty($custom_taxonomy) && $taxonomy_exists) {

$taxonomy_terms = get_the_terms( $post->ID, $custom_taxonomy );
$cat_id = $taxonomy_terms[0]->term_id;
$cat_nicename = $taxonomy_terms[0]->slug;
$cat_link = get_term_link($taxonomy_terms[0]->term_id, $custom_taxonomy);
$cat_name = $taxonomy_terms[0]->name;

}

// Check if the post is in a category
if(!empty($last_category)) {
echo $cat_display;
echo ‘<li class=”item-current item-‘ . $post->ID . ‘”><strong class=”bread-current bread-‘ . $post->ID . ‘” title=”‘ . get_the_title() . ‘”>’ . get_the_title() . ‘</strong></li>’;

// Else if post is in a custom taxonomy
} else if(!empty($cat_id)) {

echo ‘<li class=”item-cat item-cat-‘ . $cat_id . ‘ item-cat-‘ . $cat_nicename . ‘”><a class=”bread-cat bread-cat-‘ . $cat_id . ‘ bread-cat-‘ . $cat_nicename . ‘” href=”‘ . $cat_link . ‘” title=”‘ . $cat_name . ‘”>’ . $cat_name . ‘</a></li>’;
echo ‘<li class=”separator”> ‘ . $separator . ‘ </li>’;
echo ‘<li class=”item-current item-‘ . $post->ID . ‘”><strong class=”bread-current bread-‘ . $post->ID . ‘” title=”‘ . get_the_title() . ‘”>’ . get_the_title() . ‘</strong></li>’;

} else {

echo ‘<li class=”item-current item-‘ . $post->ID . ‘”><strong class=”bread-current bread-‘ . $post->ID . ‘” title=”‘ . get_the_title() . ‘”>’ . get_the_title() . ‘</strong></li>’;

}

} else if ( is_category() ) {

// Category page
echo ‘<li class=”item-current item-cat”><strong class=”bread-current bread-cat”>’ . single_cat_title(”, false) . ‘</strong></li>’;

} else if ( is_page() ) {

// Standard page
if( $post->post_parent ){

// If child page, get parents
$anc = get_post_ancestors( $post->ID );

// Get parents in the right order
$anc = array_reverse($anc);

// Parent page loop
if ( !isset( $parents ) ) $parents = null;
foreach ( $anc as $ancestor ) {
$parents .= ‘<li class=”item-parent item-parent-‘ . $ancestor . ‘”><a class=”bread-parent bread-parent-‘ . $ancestor . ‘” href=”‘ . get_permalink($ancestor) . ‘” title=”‘ . get_the_title($ancestor) . ‘”>’ . get_the_title($ancestor) . ‘</a></li>’;
$parents .= ‘<li class=”separator separator-‘ . $ancestor . ‘”> ‘ . $separator . ‘ </li>’;
}

// Display parent pages
echo $parents;

// Current page
echo ‘<li class=”item-current item-‘ . $post->ID . ‘”><strong title=”‘ . get_the_title() . ‘”> ‘ . get_the_title() . ‘</strong></li>’;

} else {

// Just display current page if not parents
echo ‘<li class=”item-current item-‘ . $post->ID . ‘”><strong class=”bread-current bread-‘ . $post->ID . ‘”> ‘ . get_the_title() . ‘</strong></li>’;

}

} else if ( is_tag() ) {

// Tag page

// Get tag information
$term_id = get_query_var(‘tag_id’);
$taxonomy = ‘post_tag’;
$args = ‘include=’ . $term_id;
$terms = get_terms( $taxonomy, $args );
$get_term_id = $terms[0]->term_id;
$get_term_slug = $terms[0]->slug;
$get_term_name = $terms[0]->name;

// Display the tag name
echo ‘<li class=”item-current item-tag-‘ . $get_term_id . ‘ item-tag-‘ . $get_term_slug . ‘”><strong class=”bread-current bread-tag-‘ . $get_term_id . ‘ bread-tag-‘ . $get_term_slug . ‘”>’ . $get_term_name . ‘</strong></li>’;

} elseif ( is_day() ) {

// Day archive

// Year link
echo ‘<li class=”item-year item-year-‘ . get_the_time(‘Y’) . ‘”><a class=”bread-year bread-year-‘ . get_the_time(‘Y’) . ‘” href=”‘ . get_year_link( get_the_time(‘Y’) ) . ‘” title=”‘ . get_the_time(‘Y’) . ‘”>’ . get_the_time(‘Y’) . ‘ Archives</a></li>’;
echo ‘<li class=”separator separator-‘ . get_the_time(‘Y’) . ‘”> ‘ . $separator . ‘ </li>’;

// Month link
echo ‘<li class=”item-month item-month-‘ . get_the_time(‘m’) . ‘”><a class=”bread-month bread-month-‘ . get_the_time(‘m’) . ‘” href=”‘ . get_month_link( get_the_time(‘Y’), get_the_time(‘m’) ) . ‘” title=”‘ . get_the_time(‘M’) . ‘”>’ . get_the_time(‘M’) . ‘ Archives</a></li>’;
echo ‘<li class=”separator separator-‘ . get_the_time(‘m’) . ‘”> ‘ . $separator . ‘ </li>’;

// Day display
echo ‘<li class=”item-current item-‘ . get_the_time(‘j’) . ‘”><strong class=”bread-current bread-‘ . get_the_time(‘j’) . ‘”> ‘ . get_the_time(‘jS’) . ‘ ‘ . get_the_time(‘M’) . ‘ Archives</strong></li>’;

} else if ( is_month() ) {

// Month Archive

// Year link
echo ‘<li class=”item-year item-year-‘ . get_the_time(‘Y’) . ‘”><a class=”bread-year bread-year-‘ . get_the_time(‘Y’) . ‘” href=”‘ . get_year_link( get_the_time(‘Y’) ) . ‘” title=”‘ . get_the_time(‘Y’) . ‘”>’ . get_the_time(‘Y’) . ‘ Archives</a></li>’;
echo ‘<li class=”separator separator-‘ . get_the_time(‘Y’) . ‘”> ‘ . $separator . ‘ </li>’;

// Month display
echo ‘<li class=”item-month item-month-‘ . get_the_time(‘m’) . ‘”><strong class=”bread-month bread-month-‘ . get_the_time(‘m’) . ‘” title=”‘ . get_the_time(‘M’) . ‘”>’ . get_the_time(‘M’) . ‘ Archives</strong></li>’;

} else if ( is_year() ) {

// Display year archive
echo ‘<li class=”item-current item-current-‘ . get_the_time(‘Y’) . ‘”><strong class=”bread-current bread-current-‘ . get_the_time(‘Y’) . ‘” title=”‘ . get_the_time(‘Y’) . ‘”>’ . get_the_time(‘Y’) . ‘ Archives</strong></li>’;

} else if ( is_author() ) {

// Auhor archive

// Get the author information
global $author;
$userdata = get_userdata( $author );

// Display author name
echo ‘<li class=”item-current item-current-‘ . $userdata->user_nicename . ‘”><strong class=”bread-current bread-current-‘ . $userdata->user_nicename . ‘” title=”‘ . $userdata->display_name . ‘”>’ . ‘Author: ‘ . $userdata->display_name . ‘</strong></li>’;

} else if ( get_query_var(‘paged’) ) {

// Paginated archives
echo ‘<li class=”item-current item-current-‘ . get_query_var(‘paged’) . ‘”><strong class=”bread-current bread-current-‘ . get_query_var(‘paged’) . ‘” title=”Page ‘ . get_query_var(‘paged’) . ‘”>’.__(‘Page’) . ‘ ‘ . get_query_var(‘paged’) . ‘</strong></li>’;

} else if ( is_search() ) {

// Search results page
echo ‘<li class=”item-current item-current-‘ . get_search_query() . ‘”><strong class=”bread-current bread-current-‘ . get_search_query() . ‘” title=”Search results for: ‘ . get_search_query() . ‘”>Search results for: ‘ . get_search_query() . ‘</strong></li>’;

} elseif ( is_404() ) {

// 404 page
echo ‘<li>’ . ‘Error 404’ . ‘</li>’;
}

echo ‘</ul>’;

}

}

Dan voegen we toe in een template, met name de header.php uit het thema doet het erg goed hiervoor.

<?php custom_breadcrumbs(); ?>

Tot slot de CSS voor een knappe opmaak.

/******** BreadCrumbs ********/
#breadcrumbs{
list-style:none;
margin:55px 0;
overflow:hidden;
background-color: rgba(0,0,0,.25);
border-radius: 8px;
max-width: 500px;
margin-left:10px;
}

#breadcrumbs li{
display:inline-block;
vertical-align:middle;
margin-right:15px;
}

#breadcrumbs .separator{
font-size:18px;
font-weight:100;
color:#ccc;
}

Ik ben GDPR/AVG compliant!

We hebben het voor elkaar; https, een groen slotje, cookie notice en een privacy verklaring zodat de website voldoet aan de GDPR/AVG wet! Als je zelf een website/blog runt dan zul je deze stappen ook moeten nemen, eigenlijk moest dat al voor 25-mei 2018, maar men voert een mild beleid. Echter zal er een dag komen dat je beboet kunt worden als je website niet aan deze regels voldoet. Het gaat om:

  • SSL certificaat (https met groen slotje)
  • Cookie notice (melding dat je cookies gebruikt, bijna alle websites doen dat)
  • Privacyverklaring waarin je inzichtelijk maakt hoe je omgaat met gebruikers gegevens

Zorg dat dit in orde is!  

GSAP – GreenSock Animation Platform for JavaScript

gsapWe kunnen onze websites weer op een hoger plan tillen dankzij GSAP. GreenSock (GSAP) is een platform waar we zonder gebruik van b.v. Flash, zeer dynamische animaties kunnen maken van wat dan ook in HTML5. De voertalen zijn HTML/CSS/SCSS/JavaScript.

We zijn hier sinds kort mee bezig en hier en daar al wat succesjes geboekt. Ook op deze website heb ik het e.a. aan demo materiaal opgenomen. Vandaag ontwikkeld, morgen geïmplementeerd!

We volgen een nieuwe weg met GSAP!

Bekijk de demo’s op deze website!

Demo 1

Demo 2

Demo 3

ktvo.nl

klanttevredenheidsonderzoek

KTVO staat voor KlantTevredenheidsOnderzoek; 1 woord, een ruim begrip. Dit kun je zien als een zusterbedrijf van I-ConnecT. Ik heb de website gemaakt, Wouter v.d. Fluit heeft het logo ontworpen, ik heb een 3D-rendering gemaakt van de header image (de blauwe staafdiagrammen), de kleuren uit het logo geabstraheerd en toegepast in de stijl van de website.

U wilt meer inzage in de mening van uw klanten/cliënten over uw onderneming? Denk dan eens aan een digitaal enquête systeem, een eenvoudige webapplicatie die d.m.v. een aantal vragen aan  uw klanten/cliënten inzage geeft over de tevredenheid van uw onderneming.

Wij leveren de software en eventueel de hardware inclusief zuil. Bekijk de demo op deze site om te ervaren wat onze enquête systemen zoal kunnen. Een eenvoudige frontend voor een groot gebruiksgemak en een overzichtelijke backend waar u de resultaten van de enquête kunt zien in een duidelijke statistiek.

U kunt eventueel de enquête zelf inrichten met door u ingevulde vragen en bepaalde opties in/uitschakelen.

Wij zijn met dit initiatief begonnen nadat we enkele enquête systemen met succes hebben uitgerold op diverse locatie’s. Wij bieden de systemen op huurbasis aan.

  • HTML/CSS modificaties
  • Backend management
  • Demo by Chris Aker

Bekijk de website.

Doe de demo.

Ben jij een codecracker?! Multicolumns CSS

Wil je in een html division (div) tekst en content opdelen in een gebalanseerde gecalculated layout van platte tekst naar een ‘multi column’ b.v. naar 2 kolommen. Gebruik dan onderstaande CSS code. 

/* On this page – the no columns parts */
.no-columns p
{
          column-count: 1;
          -webkit-column-count: 1; /* Chrome, Safari, Opera */
          -moz-column-count: 1; /* Firefox */
}
.multi-column
{
          column-count: 2;
          -webkit-column-count: 2; /* Chrome, Safari, Opera */
          -moz-column-count: 2; /* Firefox */
}
@media screen and (max-width: 770px)
 {
          .multi-column
          {
                     column-count: 1;
                     -webkit-column-count: 1; /* Chrome, Safari, Opera */
                     -moz-column-count: 1; /* Firefox */
          }
}

Je kunt b.v. via je Visual Composer een class toevoegen zoals ‘multi-column’, dat kan ook in HTML via de gebruikelijke wegen. Als je de code goed naleest dan vind je daar opdrachten die samenhangen met responsive websites. Dit houd in dat zoals in dit geval de 2 kolommen wordt samengevoegd beneden een schermbreedte van 770 pixels tot 1 kolom. Dit is alle code die je nodig hebt voor slimme layouts! Ben je een leek maar je denkt de code te begrijpen? Overweeg een toekomst in webdevelopment of webdesign!

kaasmakerijlandgoedwillibrordus.nl

kaasmakerij

Achter de duinen op het Landgoed Willibrordus in Heiloo is een kaasmakerij waar van de rijke biodynamische melk van de Blaarkopkoe romige kazen, yoghurt en hangop wordt gemaakt.
Een kleinschalig  kaasmakerij waar alles met de hand, veel tijd en aandacht wordt gedaan.  Een zuivelatelier waar wij de wondere wereld van melk ontdekken.

  • CSS/HTML modificatie’s
  • Backend management 

Wederom een website van mijn hand. Neem contact op voor meer informatie.

Bekijk de website.

Templates aanpassen en gebruiken als sjabloon

Je kunt in WordPress relatief eenvoudig pagina’s iets unieks meegeven, b.v.: je wilt op de homepage geen sidebars en een full width voor de content. Als je thema’s inkoopt zijn die sjablonen vaak al bij het thema geleverd, maar als dat niet zo is of als je zelf thema’s bouwt zul je het zelf moeten doen.

  • Maak een kopie van page.php en hernoem deze naar: front-page.php
  • open ‘front-page.php’ en plaats het volgende bovenin bij de comments:

<?php
/**
* Template Name: front-page
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other ‘pages’ on your WordPress site may use a
* different template.
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package TCZ
*/

Het relevante gedeelte is * Template Name: front-page 

  • Zoek in front-page.php naar het stukje waar de sidebar wordt aangeroepen en verwijder deze
  • Geef je content div de huidige class/id maar voeg bv -fp er achter. Dan zou de selector bv content-fp gaan worden dus.
  • Geef in je stylesheet ‘content-fp’ een width:100% 
  • Ga in het WordPress admin paneel naar ‘Pagina’s’
  • Edit de ‘home’ pagina en kijk rechts: onder ‘Pagina attributen’ kun je een template instellen
  • Zoek daar naar ‘front-page’ en klik op Bijwerken

Je home pagina zou nu geen sidebars meer moeten hebben en een content area met full width.

 

Succes!

Navigatiemenu; current selected item en subitem aanduiding

Als je zelf thema’s gaat bouwen is het goed om te weten dat je in WordPress een hoop kunt bereiken met css code alleen; WordPress gebruikt vaste selectors die je altijd kunt aanspreken.

Het meestal horizontale menu bovenin (navigatiemenu) bijvoorbeeld. Laten we beginnen met: Current selected item. We kunnen met de selectors: a, a:hover, a:visited, a:active een aantal css manipulaties toepassen. Maar wat je langs deze weg niet bereikt; Het geklikte item highlighten. (Soms zijn die menu items gehighlighted met een streep onder het item of de hele background is anders).

Met de volgende code kun je dit oplossen:

.current-menu-item a
{

border-left:0px solid;
border-top:0px solid;
border-right:1px solid;
border-bottom:1px solid;
border-bottom-color :#888;
border-right-color: #888;
-webkit-box-shadow: inset 1px 1px 2px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: inset 1px 1px 2px 0px rgba(0, 0, 0, 1);
box-shadow: inset 1px 1px 2px 0px rgba(0, 0, 0, 1);
background-color:rgba(255,255,255,0.125);
}

Let op! Het gaat niet om de css code tussen de accolade’s, maar om de selector: .current-menu-item a Wat je tussen de accolade’s zet is jouw keuze.

Dan gaan we naar: Subitem aanduiding.

 We zien ook welke menu items subpagina’s bevatten door een aanduiding met een ‘+’ of iets anders. Zweven of hoveren we daarboven met de muis dan komt er een menu. Het gaat om die ‘+’ of een door jou gekozen teken. Dit bereiken we met de volgende css code:

/******** vertical arrow top menu sub items ********/
.nav-menu li > a:after
{
color: #000;
content: ‘ ∨’;
}

.nav-menu li > a:only-child:after
{
content: ”;
}
/***************************************************/

Met color: #000; bepaal je de kleur voor het subitem symbool en: content: ‘ ∨’; is het symbool dat wordt gebruikt voor de aanduiding van subitems in het menu.

Details, maar zeker niet onbelangrijk!

 

Succes!