Scandinavian character ‘codes’

25. November 2021

Sym	Entity Code
Æ	Æ (198)
æ	æ (230)
Å	Å (197)
å	å (229)
Ä	Ä (196)
ä	ä (228)
Ð	Ð (208)*
ð	ð (240)*
Ø	Ø (216)
ø	ø (248)
Ö	Ö (214)
ö	ö (246)
Þ	Þ (222)*
þ	þ (254)*
Change thing on scroll in Wix

30. March 2021

$w.onReady(function () {
	$w('#image4').hide();

    $w('#vectorImage1').onViewportLeave(() => {
        $w('#image4').show();
        $w('#image3').hide();
    });

	$w('#vectorImage1').onViewportEnter(() => {
        $w('#image4').hide();
        $w('#image3').show();
    });
});
Add facebook customer chat to webpage with dialog window closed

24. January 2019

<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXX',
xfbml : true,
version : 'v3.2'
});
};

(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-customerchat"
attribution=setup_tool
page_id="XXXXXXXXXX"
theme_color="#C3002F"
greeting_dialog_display="hide"
logged_in_greeting="Velkommen! Hva kan vi hjelpe deg med?"
logged_out_greeting="Velkommen! Hva kan vi hjelpe deg med?">

</div>
Anonymize old _gaq or ga

1. October 2018

<script>

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXX-X', 'website.de');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');

</script>

 

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXX-YY']);
  _gaq.push(['_gat._anonymizeIp']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

 

 

 

Bootstrap – nice to know

10. September 2018

All you need to know?

<!DOCTYPE html>
<html lang="no">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

    <style>

        .col {
         outline: solid rgb(255, 255, 255) 1px;
         height: 100px;
         background-color: rgba(42, 95, 142, 0.226);
        }
    
    </style>

</head>

<body>

    <!-- Bootstrap Classes

        Columns:
        .col-xs- <768px
        .col-sm- >=768px
        .col-md- >=992px
        .col-lg- >=1200px

        Usefull links:
        https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
        https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
        http://getbootstrap.com/docs/3.3/css/#grid
        https://www.w3schools.com/bootstrap/bootstrap_ref_all_classes.asp
        http://www.newthinktank.com/2015/11/learn-bootstrap-one-video/

        Icons: 
        https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp

        Cheatsheet:
        https://cheatsheet.kursbootstrap.pl/
        https://hackerthemes.com/bootstrap-cheatsheet/ (Bootstrap 4)

    -->

    <!-- Navbar with dropdown and hamburger -->

    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#collapsemenu"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Navbar</a>
            </div>

            <div class="collapse navbar-collapse" id="collapsemenu">
                <button class="btn btn-primary navbar-btn">Inbox <span class="badge">3</span></button>
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false" href="#">Links
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Example link1</a></li>
                            <li><a href="#">Example link1</a></li>
                            <li><a href="#">Example link1</a></li>
                        </ul>
                    </li>
                    <li class="disabled">
                        <a href="#">Disabled</a>
                    </li>
                </ul>
                <form class="navbar-form navbar-right" role="search">
                    <div class="form-group">
                        <input class="form-control" type="text" placeholder="Search" aria-label="Search">
                    </div>
                    <button class="btn btn-defaults" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>

    <!-- Jumbotron layout -->

    <br>
    <div class="jumbotron">
        <div class="container">
            <h2>Jumbotrooooon</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur obcaecati et consequatur nobis. Est
                quibusdam iusto dolorem perferendis, odit, in iure, ipsum dolore dolores quo neque amet consequatur
                pariatur doloribus maxime architecto reprehenderit. Ratione odio repellendus illo ea error
                necessitatibus, at quae, mollitia voluptas soluta natus, nostrum dolores et ex placeat impedit. Ab,
                blanditiis ducimus? Sequi cum, beatae adipisci earum repudiandae itaque sunt reprehenderit fugit
                impedit tempora culpa. Vel quis vitae, consequuntur odit facere adipisci. Ab voluptates voluptate
                molestias architecto sint quos nobis nam dolor officia quia minima maxime commodi optio quae odio,
                repellendus ut id, sed totam? Libero, expedita?</p>
        </div>
    </div>

    <div class="content container">
        <div class="row">
            <section class="col-sm-4">
                <h3>Col-SM-4</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, temporibus.</p>
                <a href="#">Read more</a>
            </section>
            <section class="col-sm-4">
                <h3>Col-SM-4 <span class="label label-primary">NEW</span></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, temporibus.</p>
                <a href="#">Read more</a>
            </section>
            <section class="col-sm-4">
                <h3>Col-SM-4</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, temporibus.</p>
                <a href="#">Read more</a>
            </section>
        </div>
        <div class="row">
            <section class="col-sm-4">
                <h3>Col-SM-4 <span class="label label-danger">HOT</span></h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, temporibus.</p>
                <a href="#">Read more</a>
            </section>
            <section class="col-sm-4">
                <h3>Col-SM-4</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, temporibus.</p>
                <a href="#">Read more <span class="badge">more</span></a>
            </section>
            <section class="col-sm-4">
                <h3>Col-SM-4</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, temporibus.</p>
                <a href="#">Read more</a>
            </section>
        </div>
    </div>

    <br>

    <!-- Breadcrumbs -->


    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#">home</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">us</a></li>
        </ol>
    </div>


    <!-- Thumbnails -->

    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="thumbnail">
                    <h1 class="text-center"><span class="glyphicon glyphicon-heart"></span></h1>
                    <div class="caption">
                        <h3>Heart</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua.</p>
                        <p><a href="#" class="btn btn-primary" role="button">Add to Cart</a></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="thumbnail">
                    <h1 class="text-center"><span class="glyphicon glyphicon-off"></span></h1>
                    <div class="caption">
                        <h3>Off</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua.</p>
                        <p><a href="#" class="btn btn-primary" role="button">Add to Cart</a></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="thumbnail">
                    <h1 class="text-center"><span class="glyphicon glyphicon-music"></span></h1>
                    <div class="caption">
                        <h3>Music</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua.</p>
                        <p><a href="#" class="btn btn-primary" role="button">Add to Cart</a></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="thumbnail">
                    <h1 class="text-center"><span class="glyphicon glyphicon-star"></span></h1>
                    <div class="caption">
                        <h3>Star</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua.</p>
                        <p><a href="#" class="btn btn-primary" role="button">Add to Cart</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Dropdown -->

    <div class="container">
        <div class="dropdown">
            <button id="dev-drop" class="btn btn-primary dropdown-toggle btn-lg" type="button" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="true">
                Dev. Dropdown
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dev-drop">
                <li class="dropdown-header">Front-End</li>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Back-End</li>
                <li><a href="#">Ruby</a></li>
                <li><a href="#">Phyton</a></li>
                <li><a href="#">PHP</a></li>
            </ul>
        </div>
    </div>

    <br>

    <!-- Form -->

    <div class="container">
        <form class="form-inline" style="text-align: center;">
            <div class="form-group has-feedback">
                <label class="sr-only" for="name">Name</label>
                <input type="text" class="form-control" id="name" placeholder="Name" style="border: 1px solid #4CAF50;">
                <span class="glyphicon glyphicon-user form-control-feedback" aria-hidden="true"></span>
            </div>
            <div class="form-group has-feedback">
                <label class="sr-only" for="email">E-mail</label>
                <input type="email" class="form-control" id="email" placeholder="E-mail" style="border: 1px solid #4CAF50;">
                <span class="glyphicon glyphicon-envelope form-control-feedback" aria-hidden="true"></span>
            </div>
            <div class="form-group">
                <button class="btn btn-primary" type="submit"> Submit
                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                </button>
            </div>
        </form>
    </div>

    <br>

    <!-- Carousel -->

    <div class="content container">
        <div class="row">
            <section class="col-sm-12">

                <div id="carouselen" class="carousel slide hidden-xs" data-ride="carousel">

                    <ol class="carousel-indicators">
                        <li data-target="#carouselen" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselen" data-slide-to="1"></li>
                        <li data-target="#carouselen" data-slide-to="2"></li>
                    </ol>

                    <div class="carousel-inner">
                        <div class="item active">
                            <svg width="1200px" height="300px">
                                <rect x="0" y="0" width="1200px" height="300px" style="fill:lightblue">
                                    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s"
                                        repeatCount="indefinite" />
                                </rect>
                                Sorry, your browser does not support inline SVG.
                            </svg>
                            <div class="carousel-caption">
                                <h4>First image</h4>
                                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque, expedita.</p>
                            </div>
                        </div>
                        <div class="item">
                            <svg width="1200px" height="300px">
                                <rect x="0" y="0" width="1200px" height="300px" style="fill:yellow">
                                    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s"
                                        repeatCount="indefinite" />
                                </rect>
                                Sorry, your browser does not support inline SVG.
                            </svg>
                            <div class="carousel-caption">
                                <h4>Second image</h4>
                                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque, expedita.</p>
                            </div>
                        </div>
                        <div class="item">
                            <svg width="1200px" height="300px">
                                <rect x="0" y="0" width="1200px" height="300px" style="fill:brown">
                                    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s"
                                        repeatCount="indefinite" />
                                </rect>
                                Sorry, your browser does not support inline SVG.
                            </svg>
                            <div class="carousel-caption">
                                <h4>Third image</h4>
                                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque, expedita.</p>
                            </div>
                        </div>
                    </div>

                    <a class="left carousel-control" href="#carouselen" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
                    <a class="right carousel-control" href="#carouselen" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

                </div>

            </section>
        </div>
    </div>

    <br>

    <!-- Modal -->

    <div class="container">
        <button class="btn btn-warning btn-lg" type="button" data-toggle="modal" data-target="#modal">Modal button</button>
        <div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" type="button" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times</span></button>
                        <div id="modalLabel" class="modal-title">
                            Modal Example
                        </div>
                    </div>
                    <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque eveniet architecto
                            excepturi exercitationem nobis ipsum perspiciatis quibusdam voluptate aliquid, vel, nostrum
                            rem error quas ipsam sequi ex iste harum accusamus.</p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" role="button" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <br>

    <!-- Video responsive -->

    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-sm-4">
                <div class="embed-responsive embed-responsive-16by9">
                    <!-- Can also be 4by3  -->
                    <video class="embed-responsive-item" src="video/#.mp4" autoplay controls muted></video>
                </div>
            </div>

            <div class="col-xs-6 col-sm-4">
                <div class="embed-responsive embed-responsive-4by3">
                    <video class="embed-responsive-item" src="video/#.mp4" autoplay controls muted></video>
                </div>
            </div>

            <div class="col-xs-6 col-sm-4">
                <div class="embed-responsive embed-responsive-16by9">
                    <video class="embed-responsive-item" src="video/#.mp4" autoplay controls muted></video>
                </div>
            </div>
        </div>
    </div>

    <br>

    <!-- Panel -->

    <div class="container">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h2 class="panel-title">This is a panel</h2>
            </div>
            <div class="panel-body">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, cumque. Quidem libero modi ipsa quia
                    facere deleniti nihil in animi est exercitationem quis laboriosam pariatur aperiam repudiandae
                    beatae quisquam eius, sunt nulla? Odit maiores nulla autem similique tenetur reprehenderit quidem
                    aspernatur fugit laboriosam iste molestias sequi alias laudantium, vero deserunt?</p>
            </div>
            <div class="panel-footer">
                <a href="#">Any kind of item here</a>
            </div>
        </div>
    </div>

    <!-- Pagination -->

    <div class="container">
        <ol class="pagination pagination-lg">
            <li><a href="#" aria-label="Previous">&laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#" aria-label="Next">&raquo;</a></li>
        </ol>
    </div>

    <br>
    <hr>
    <br>

    <h1>Example 0:</h1>

    <div class="container">
        <div class="row">
            <div class="col col-lg-1">M</div>
            <div class="col col-lg-1">A</div>
            <div class="col col-md-3">K</div>
            <div class="col col-md-3">S</div>
            <div class="col col-sm-2">I</div>
            <div class="col col-sm-2">MER</div>
        </div>
    </div>

    <div class="clearfix"></div>

    <br>
    <hr>
    <br>

    <h1>Example 1:</h1>

    <div class="container">
        <div class="row">
            <div class="col col-sm-1">1</div>
            <div class="col col-sm-1">1</div>
            <div class="col col-sm-1">1</div>
            <div class="col col-sm-1">1</div>
            <div class="col col-sm-1">1</div>
            <div class="col col-sm-1">1</div>
            <div class="col col-sm-1">1</div>
            <div class="col col-sm-1">1</div>
            <div class="col col-sm-1">1</div>
            <div class="col col-sm-1">1</div>
            <div class="col col-sm-1">1</div>
            <div class="col col-sm-1">1</div>
        </div>
    </div>

    <br>
    <hr>
    <br>

    <h1>Example 2:</h1>

    <div class="container-fluid">
        <div class="row">
            <div class="col col-sm-3 col-md-2">Column one</div>
            <div class="col col-sm-9 col-md-8">Column two</div>
            <div class="col col-sm-12 col-md-2">Column three</div>
        </div>
    </div>

    <br>
    <hr>
    <br>

    <h1>Example 3:</h1>

    <div class="container">
        <!-- Stack the columns on mobile by making one full-width and the other half-width -->
        <div class="row">
            <div class="col col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
            <div class="col col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        </div>
    </div>

    <br>
    <hr>
    <br>

    <h1>Example 4:</h1>

    <div class="container">
        <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
        <div class="row">
            <div class="col col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
            <div class="col col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
            <div class="col col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        </div>
    </div>

    <br>
    <hr>
    <br>

    <h1>Example 5:</h1>

    <div class="container">
        <!-- Columns are always 50% wide, on mobile and desktop -->
        <div class="row">
            <div class="col col-xs-6">.col-xs-6</div>
            <div class="col col-xs-6">.col-xs-6</div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

Live result: https://thomasweb.studio/bootstrap/bootstrap_moduler.html

 

 

A simple accordion menu using BEM classes

2. September 2018

HTML:

    <div id="accordion" class="accordion">
        <div id="Demo1" class="accordion__item accordion__item--first">
            <h4 class="accordion__title">Section 1</h4>
            <p class="accordion__text">Some text..</p>
        </div>
        <div id="Demo2" class="accordion__item accordion__item--second">
            <h4 class="accordion__title">Section 2</h4>
            <p class="accordion__text">Some text..</p>
        </div>
        <div id="Demo3" class="accordion__item accordion__item--third">
            <h4 class="accordion__title">Section 3</h4>
            <p class="accordion__text">Some text..</p>
        </div>
    </div>

 

SASS:

.accordion {
    max-width: 400px;
    margin: 0 auto;

    &__item {
        padding: 20px;
        cursor: pointer;

        &--first {
            background: lightpink;
            border-top-left-radius: 25px;
            border-top-right-radius: 25px;
        }

        &--second {
            background: lightblue;
        }

        &--third {
            background: lightgreen;
            border-bottom-left-radius: 25px;
            border-bottom-right-radius: 25px;
        }
    }

    &__title {
        color: aliceblue;
        text-transform: uppercase;
        font-size: 20px;
        text-align: center;
    }

    &__text {
        display: none;

        &--open {
            display: block;
        }
    }
}

 

JAVASCRIPT:

var itemParent = document.querySelector('#accordion');
itemParent.addEventListener("click", opentext, false);

 function opentext(e) {
     if (e.target !== e.currentTarget) {
         var clickedItem = e.target.id;
         var itemClicked = document.getElementById(clickedItem);
         var itemText = itemClicked.lastElementChild;
         itemText.classList.toggle('accordion__text--open');
     }
     e.stopPropagation();
 }

Live result: https://codepen.io/thomaskarl/pen/QVprZe

 

Add Class trigger event in Google Tag Manager

27. August 2018

  1. Workspace
  2. Variables
  3. Built-In Variables -> Configure
  4. Add, Click Classes, Click Element, Click ID

Then go to Triggers

  1. New
  2. Name the Trigger
  3. Click the ‘Pen’
  4. Add ‘All Elements’ (under Click section)
  5. Change to ‘Some Clicks’
  6. Add: Click Classes, matches RegEx, classname (if multiple classes, use: classname1|classname2|classname3)
  7. Add: Click Classes, equals, button

Then go to Tags and give the Trigger to you Tag.

Remember to Submit your changes

Anonymize IP in Google Tag Manager

27. August 2018

To set IP anonymization in GTM do this:

  • Open the tag that fires the GA pageview click the pencil at the top corner to edit the tag
  • Expand “More settings” (if you don’t see it check Enable overriding settings in this tag)
  • Expand “Fields to set
  • Click on Add a field and configure it like this:
    • Field name: anonymizeIp
    • Value: true
  • Save and publish the changes

Just remember that when you anonymize the IP your IP filters won’t work. So you should either change the last octet of your IP filters to 0 (which may filter more IPs that you need) or use a dynamic way of filtering your internal traffic, for example, using cookies.

 

UPDATE: the best way to apply anonymizeIp to all your GA tags is to do it from the “Google Analytics Settings” variable, that way you won’t have to override the field on each tag.

 

If you haven’t created this variable follow this steps:

To set up a new Google Analytics Settings Variable in GTM:

  1. Select New Variable…
  2. In the Variable Configuration screen, enter your Google Analytics Tracking ID.
  3. Cookie Domain: Leave this value set to “auto“, unless you set the cookie domain differently on other tags.
  4. Click More Settings to add anonimizeIP.
  5. Expand “Fields to set
  6. Click on Add a field and configure it like this:
    • Field name: anonymizeIp
    • Value: true
  7. Click Save.

Now select this variable on all your GA tags.

Site is under construction

24. August 2018

Use this to ‘close’ the site.

<div class="site-under-construction" style="
height: 100%;
width: 100%;
position: fixed;
z-index: 999;
left: 0;
top: 0;
background-color: rgba(0,0,0, 0.9);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px;
">
<p>DOMAIN.no is currently under construction</p>
<p>If you have any questions in the meantime, or need to contact us for any reason, please se our contact
<a href="https://www.DOMAIN.no/contacts/">page</a>
<br> https://www.DOMAIN.no/contacts/
</p>
</div>

 

Simple landingpage

16. July 2018

<html>
<head>
<title>TITLE</title>
<meta http-equiv="refresh" content="20;url=https://www.DOMAIN.no"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
body {
text-align: center;
font-family: 'Roboto', sans-serif;
}

img {
max-width: 300px;
padding: 40px;
}

.text-container {
padding: 40px 10px;
margin: 0 auto;
max-width: 400px;
}

.text-container a {
color: #EE8034;
}

</style>
</head>
<body>

<a href="https://www.DOMAIN.no"><img src="https://www.DOMAIN.no/enkel_logo.svg" alt="Logo"/></a>

<div class="text-container">

<h1>Hei og takk for besøk!</h1>

<h4>Nettsiden gjennomgår systemendringer og er dessverre ikke tilgjengelig for øyeblikket.</h4>
<h4>Vi håper å være oppe og stå igjen om et par timer.</h4>

<h3>For bestilling eller spørsmål,<br> ring <a href="tel:XXXXXXXX">XXXXXXXX</a> eller send en epost til <a href="mailto:post@DOMAIN.no">post@DOMAIN.no</a></h3>

</div>

</body>
</html>

 

How to prevent google from indexing pdf

18. June 2018

Add to your robots.txt file:

User-agent: Googlebot 
Disallow: /*.pdf$

Using WordPress, easily use Yoast Seo -> Tools. If you cant find ‘File Editor’ under Tools, then your wordpress installation has ‘disablefile editing’ on.

Then you have to upload (or edit) the robots.txt to the root folder in your wordpress installation.

Check your robots.txt using: www.yourwebsite.com/robots.txt

Jekyll nice to know

28. May 2018

– control+c (stop server)

-jekyll serve (start server) –watch

-jekyll new My Blog —blank (new blank page)

 

  gem install bundler jekyll

  jekyll new my-awesome-site

  cd my-awesome-site

  bundle exec jekyll serve

# => Now browse to http://localhost:4000

 

Git commands

20. April 2018

git init (choose folder to initialise)

git status (checks whats added)

git add . (adds all files in the folder and subfolders)

git commit -m “added a random file“

git commit -a -m “added more info” (commit all changes and adds a comment)

Working in different branches:
git branch addfonts (creates a branch with the name addfonts)

git checkout addfonts (changes from Master branch to addfonts)

git checkout master (go back to Master branch)

git branch (lists all the branches and show where you are)

git branch -d addfonts (removes the addfronts branch)

git merge addfonts (adds all changes from addfonts branch to the branch you are in, most likely Master branch when merging)

———————————————

git remote add origin https://github.com/user/xxxx.git
git push -u origin master

git diff (check the differences if you have changed a file)
Dummy Text Snippet

20. April 2018

Overskriftnivå én

Bacon ipsum dolor amet ipsum deserunt kielbasa ham flank swine ex spare ribs sed short ribs dolor. Tenderloin cow ground round spare ribs fatback turkey.

Ribeye porchetta commodo fugiat salami filet mignon tongue dolore incididunt meatloaf ut dolor. Boudin spare ribs sint, adipiscing elit. landjaeger ad ex ground round ut tail biltong swine dolore short loin frankfurter. Nostrud in short ribs, sed mollit elit nisi ham hock. Jerky deserunt pork belly reprehenderit fatback nisi..

Overskriftnivå to

Proident fugiat excepteur pork non shankle dolor dolore lorem venison. Sed aliqua est dolore fugiat ad ribeye ball tip bresaola enim sunt aliquip in. Enim veniam ut qui. Tongue ball tip spare ribs rump. Occaecat pork belly in, rump veniam tenderloin alcatra consectetur ball tip ad qui aute reprehenderit nisi fugiat.

Overskriftnivå tre

Boursin feta cheese and wine. Cream cheese paneer paneer pepper jack roquefort cow pecorino fromage. Halloumi mozzarella airedale cheese and biscuits dolcelatte parmesan blue castello squirty cheese. Rubber cheese melted cheese mozzarella say cheese.

Overskriftsnivå fire

I love cheese, especially cheesy grin cream cheese. Queso who moved my cheese pepper jack pepper jack bocconcini port-salut cheesy feet stilton. Cheesy grin cheeseburger jarlsberg stilton cow cow cheeseburger when the cheese comes out everybody’s happy. Cheese on toast cheese triangles chalk and cheese goat gouda halloumi cheesy feet brie. Port-salut.

Overskriftsnivå fem

lager lagering saccharification malt bottle conditioning, ibu lauter. units of bitterness, lambic krausen lauter tun carbonation caramel malt. lagering dextrin units of bitterness saccharification bittering hops mash. kolsch adjunct. noble hops; kolsch crystal malt pub bitter reinheitsgebot.

Overskriftsnivå seks

Kazaa dropio zappos sococo mobly sifteo oooj, jiglu vuvox jajah plugg eskobo blekko, eduvant unigo wesabe zoosk meebo. Grockit mzinga zlio insala meebo zappos tivo wikia mzinga, cloudera gsnap oooooc skype heekya plickers woopra insala, jibjab chartly meebo hipmunk imvu oovoo ifttt. Zoosk weebly kippt foodzie mozy scribd ngmoco, fleck eskobo doostang hipmunk ning weebly cloudera, divvyshot yoono hipmunk voxy disqus. Skype fleck oooj kaboodle spock dropio sclipo wikia jajah yammer, oooj koofers yoono doostang zoodles dogster kosmix airbnb yammer, rovio squidoo insala jajah gooru oooooc vimeo xobni.

button én

Overskriftsnivå tre, overskrift for ul li liste

  • Lorem
  • Ipsum
  • Dolor
  • Sit
  • Ipsum
    • Lorem barn
    • Ipsum barn
Work with a WP-Engine site

20. April 2018

Work with a site that uses wp-engine:

1. Logg in: xxxxxx.com/wp-admin

2. Go to: Wp Engine

3. Copy from LIVE to STAGING

4. Clone repo from bitbucket to local using Tower

5. Go to my.wpengine.com, log in, find customer xxxxxx

6. SFTP users: find address and port number (2222), add settings to PhpStorm.

PHP Storm Shortcuts

20. April 2018

Settings:		⌘ + ,

Search Everywhere:	⇧ + ⇧

Search in File:		⌘ + F

Search in Path:		⌘ + ⇧ + F

Find actions:		⇧ + ⌘ + A

!NAVIGATE   FILE:	⌘ + ⌥ + o

-----------------------------------------

Multiple cursors:	⌥ + Click

Selects multiple Occurrences:	⌘ + G

Select All Occurrences:	⌃ + ⌘ + G

-----------------------------------------

Extend selection:	⌥ + ↑ and ⌥ + 'arrow down' 

-----------------------------------------

Refactor (rename) file:	⌃ + T

Split H:		⌃ + H

Split V:		⌃ + V

-----------------------------------------

Upload file: ⇧ + ⌘ + ⌥ + X

Diff file: ⇧ + ⌘ + ⌥ + C