Categoriearchief: Website

Suri: Stylesheet (style.css)

* 10.1 Header
*/

.site-header {
margin-bottom: 26px;
border-bottom: 1px solid #e6e6e6;
background-color: #DD9933;
}

.header-items {
text-align: center;
}

.custom-logo-link {
line-height: 0;
display: inline-block;
}

.custom-logo-link:hover,
.custom-logo-link:focus {
border-bottom: none;

Copy naar clipboard

Code in “OH Add Script Header Footer” – Plugin:

Hide Generic header script:  aanvinken

<button type="button" id="copy-button" data-clipboard-target="#copy">Copy</button>
<script>
(function(){
new Clipboard('#copy-button');
})();

In de tekst van de WordPress:

MB rek <input id="post-shortlink" type="text" value="170768406" />
<button id="copy-button" class="button" data-clipboard-target="#post-shortlink">Copy</button>

Copy to Clipboard” Made Easy with Clipboard.js

Copy to Clipboard” Made Easy with Clipboard.js

On any given web page it’s not uncommon to copy a piece of text, such as a paragraph, code snippet, or a URL. And to do so, users first have to select the text, then use either the menu in the browser (the contextual menu) or keyboard shortcut to copy the selected content.

However, as far as UX is concerned, we can streamline the process if it’s likely to happen often. In Github, for example, there’s a button to copy the repository URL.

Thanks Github
Thanks Github

In Bit.ly, you will find a similar one to copy the short URL. This button is really handy for users to copy a piece of content that is expressly meant to be copied.

Thanks Bitly
Thanks Bit.ly

Owing to browser restrictions, adding such functionality used to be a real hassle. Most developers had to resort to a library dependant on Flash, like Clippy, for example. Fortunately now we have a JavaScript library that allows us to implement it much more easily. It’s called Clipboard.js, and in this beginner’s tutorial I’ll teach you how to effectively deploy it.

To install Clipboard.js to your web project, download the file, place it in a suitable folder within your website directories, and link it in the document. Alternately, we can load it from the hosted file in CDN, so add this to the bottom of your HTML page:

Now we need two elements in our document. First is the target which holds the content we want to copy. The target element could be, for example, an input (with an ID) containing a short URL:

The second element is the trigger. This element, in our case, is a button. The trigger element must use the data attribute data-clipboard-target, whose value points to the target element through its ID:

Once these elements are in place, turn Clipboard.js on by adding this within script tags, or in a separate JavaScript file:

Bingo! We should now be able to copy the shortened URL in the input element by clicking on the button.

In some cases, adding an ID, class and the data-* attribute to the target elements of our content is not feasible — something that could happen when dealing with lots of legacy content as well as multiple target elements.

As an example, let’s say we have a website whose content comprises paragraphs and a number of code snippets. We’ll use PrismJS, a fantastic library to display code with properly highlighted syntax. PrismJS does not come with the “copy” utility, so we’ve decided to do that with Clipboard.js. But, the problem is, we have hundred of pages throughout our website with that kind of content.

This is where the Clipboard.js APIs come into play.

Clipboard.js presents a couple of events, success and error, which respectively allow us to identify whether it has effectively copied the content, or failed. The error would likely occur in Safari as it does not support the copy/cut command from the execCommand method that Clipboard.js relies upon.

Furthermore, these events also return the following Properties:

  • action: return the action we aim at the target element. This will return either copy or cut
  • text: only returned upon the success event. It returns the text that has been copied or cut from the target element.
  • trigger: returns the element which triggered the copy or the cut action.

These APIs enable us to implement Clipboard.js into our content without directly modifying its wrapping elements. In our case, we can use them to add the “copy” utility to the code snippets in our legacy content.

At this point, we should have PrismJS already setup (download the files to your project folder, reference the JavaScript in your document). In our page markup, each of the code snippets is wrapped in a pre and code element with a language-{name} class name. In this example we’re using LESS code, so we have it added with the class language-less, as follows:

We now have to include a button in each pre element to copy the respective code. To begin with, we get all the pre tags within the content by selecting them using the getElementsByTagName method.

We most likely have two or more pre tags within the content, so we need to loop through each the pre we’ve selected.

Within the for loop, add the following lines to include the button.

Let’s recap the code. We first validate whether we have a code element added with the language- prefixed class. If that’s not the case, we won’t include the button.

So we add the button in the pre element. Each button is set with a class,copy-button, and “Copy” text, as shown below:

It should now be visible in each code snippet:

Button is added in the code snippet

Now we run Clipboard, so each button copies the code by setting the targetelement to the previous element relative to the trigger, .copy-button. In our case, this element is the code.

We now have the button functioning. As you click the button, it should copy the code snippet. But let’s go a little bit further by working with the custom events.

Let’s imagine we want to make the copy experience more interactive for our users. As the user has clicked the button, and it has successfully copied the code, we would like to change the button text from “Copy” to “Copied”. To do so, add the following:

The above code does three things:

  • First, we clear selection within the area of the copied content using the clearSelection() utility function from Clipboard. Adding this is optional.
  • Then we set the content to “Copied”
  • Lastly, we revert it back to “Copy” after two seconds.

In case of an error where execCommand is not supported, like in Safari (at the time of writing), we change the the button text to ‘Press “Ctrl + C” to copy’ instead. Add the following code:

That’s it! We now have a fully functioning and interactive copy button. The remaining task we have here is to style the button, but I will leave that entirely up to you.

Clipboard.js is a handy JavaScript library that has make adding the copy utility to web pages much less complicated. In this tutorial, we looked into the basics, then some advanced stuff with the exposed APIs and the custom events.

Clipboard.js relies on Selection and the execCommand so it will only work in browsers where these two methods are supported: Chrome 42, Firefox 41, Internet Explorer 9, and Opera 9. As mentioned, Safari users are currently out of luck.

Finally, I hope you enjoyed the tutorial and don’t forget the demo

Downloads

Bit Che is een freeware programma waarmee snel op meer dan 60 torrentsites tegelijkertijd gezocht kan worden naar torrents om gratis te downloaden. Zo doorzoekt het programma openbare torrentsites zoals BTJunkie.org, ThePirateBay.org, IsoHunt.com en MiniNova.org, maar ook torrents op sites waarvoor registratie is vereist zoals BitNation, Demonoid, SuperTorrents.org en Torrents.ru.

Het programma is zeer eenvoudig opgebouwd, het bestaat uit een zoekveld met daaronder een overzicht van de gevonden zoekresultaten. Vervolgens kunt u dit bestand direct downloaden of ervoor kiezen om eerst de site die het bestand aanbiedt te bezoeken.

Website van de makers van Bit Che

website van Bit Che direct naar Bit Che download pagina

Easy Responsive Tabs

Tab bladen en hun kleuren.
instelling:

  • Tab color  :              rood: #dd3333       tab color
  • Active  tab color:  oranje: #dd9933
  • Tab hover color:   geel: #eeee22
  • Tab heading color:              groen: #81d742
  • Active tab heading color : blauw: #1e73be
  • Kolom kleur:                          paars: #8224e3

uitkomst:

  • Tab 1 content goes here.
  • Tab 2 content goes here.
  • Tab 3 content goes here.
  • Tab 4 content goes here.
  • tabcolor=”#dd3333″
  • tabheadcolor=”#81d742″
  • seltabcolor=”#dd9933″
  • seltabheadcolor=”#1e73be”
  • tabhovercolor=”#eeee22″
  • contentcolor=”#8224e3″]

plaatje 725 x 460

plaatje nu 300

verhouding op schaal: 284 x 184
is                                         790 x 512 => 855 x 577 ==> 790 x 577

Plus 65 extra bij 10 en 15 rand maken.
790 minus is: 725
512 minus is: 457
525 minus is: 460

725 x 460 plaatje maat voor rand maken.

breed uitgelicht

<h4>Admit it.</h4> There are times when you wish you could get away from it all by moving to your own private island. Well, some cruise passengers actually can at least for a day. Each of the following cruise lines below offer passengers a day of fun in the sun on their very own private island. For many cruisers, this stop is the highlight of the trip. After all, what could be better than sitting on a white-sand beach, drinking a pia colada and soaking in the rays without crowds?

“It’s a wonderful destination, we will come back next year for sure!”

All of these islands have pristine shores, swaying palm trees, aquamarine waters and lots of ocean-side adventure. There usually are fees for shore excursions and equipment rental. Every destination offers something a little different for cruise passengers.

View of buildings on the coast of tropical island San Andres y Providencia

Even at first glance, CocoCay looks like the quintessential Caribbean hideaway. There are wide stretches of beach in quiet coves, island huts in bright Caribbean pinks and blues, and a colorful straw market offering Bahamian crafts and goods.

Many of the island buildings look brand new and they are. In 2002, the company invested more than US$ 21 million to turn this 140-acre (0.5 km) slip of land into a destination their passengers would never forget. Nature trails wind through the isle, which is home to wild chickens, peacocks and occasional iguanas. Those seeking solitude will enjoy the hammocks that are hung under coconut trees in quiet locations.

English Harbour, Hurricane Hole

Sea lovers have plenty of activities to choose from. Hop on a jet ski (US $ 95 for 50 minutes) and speed across waters so clear that you can see orange starfish 20 feet below, or don a snorkel mask and explore life under the sea up close.

For a great view of the island, try your hand at parasailing (US $ 79 per hour). You’ll soar 200-400 feet in the air and maybe even take a cooling dip in the water before returning to the boat. Children will enjoy Caylana’s Castle Cove and SeaTrek Aqua Park (US$ 15 adults, $10 children). Its floating sand castle and aquatic trampolines are just the things for those who are young at heart.

A staff of 45 people lives on CocoCay, and it’s obvious they take pride in keeping the island’s natural beauty in top condition. Their pampering service makes the island experience so pleasurable that you won’t want to leave when dusk falls all too soon.

“Disney knows children, so it’s no wonder that they feel at home on Castaway Cay”

The cruise ship docks right at the island (other cruise ships use tender boats to ferry passengers back and forth), so youngsters can head right down the ship’s ramp and out to explore Castaway Cay. There is a beach just for families, and Scuttle’s Cove is a safe and fun club for children. Parents need some time on their own, so there is Serenity Bay, a secluded beach for adults. For a little pampering, have a relaxing massage in the open-air cabanas at the seaside spa.

Street in Key West

Game for a little exploration? Then grab a bike (child seats are available for little ones) and hit the trails (US$ 6 per hour). This is, after all, a secluded island getaway, and there are miles of empty shoreline and tropical forest to explore.

If you prefer the water, check out the Walking and Kayak Nature Adventure ($60). Participants walk with a guide through the island’s lush fauna and kayak through an ecologically sensitive mangrove environment. If paddling wears you out, just jump in for a refreshing swim in the crystal clear island waters.

Teens can get into their own adventure on The Wild Side (US$ 35), an excursion that includes snorkeling, biking and kayaking. Families who want to adventure together can try the Seahorse Catamaran Snorkel Adventure (US$ 49 adults, US$ 29 children). This easy 45-minute sail takes you out to calm waters and unspoiled coral reefs. Even younger children will enjoy floating in the turquoise Caribbean Sea with schools of colored fish.

View of the Caribbean Sea

Visitors to the tiny islet of Motu Mahana (Polynesian for sunlit island) are greeted with the sounds of Polynesia. Les Gauguines, an eight-woman song and dance troupe, perform beguiling love songs in their Polynesian tongue while guests enjoy a scrumptious feast under the shade of thatched huts. After lunch, guests can relax in the sea or wade for yards in the shallow waters while waiters wearing bathing suits offer tropical drinks to those in need of refreshment. Try out the complimentary water sports like kayaking or snorkeling. For a different experience, board a motorized outrigger canoe and head to the beautiful island lagoon of Tahaa. Tahaa is known for two things: producing vanilla and black pearls.

Guests can take a four-wheel drive tour into the hills to tour the vanilla plantations (US$ 65) or view French Polynesia’s rare jewel, the black pearl, at the Motu Pearl Farm (US$ 64). From there, head to the lagoon for some quality time with the region’s underwater fauna. There is even a small lagoonarium where rays, turtles, sharks and fish are enclosed in four different pools.

Kind thema maken.

Why use a Child Theme?

There are a few reasons why you would want to use a child theme:

  • If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.
  • Using a child theme can speed up development time.
  • Using a child theme is a great way to learn about WordPress theme development.

How to Create a Child Theme

Creating a Child Theme from an Unmodified Parent Theme

Child Theme directory structure

A child theme consists of at least one directory (the child theme directory) and two files (style.css and functions.php), which you will need to create:

  • The child theme directory
  • style.css
  • functions.php

The first step in creating a child theme is to create the child theme directory, which will be placed in wp-content/themes. It is recommended (though not required, especially if you’re creating a theme for public use) that the name of your child theme directory is appended with ‘-child’. You will also want to make sure that there are no spaces in your child theme directory name, which may result in errors. In the screenshot above we have called our child theme ‘twentyfifteen-child’, indicating that the parent theme is the Twenty Fifteen theme.

The next step is to create your child theme’s stylesheet (style.css). The stylesheet must begin with the following (the stylesheet header):

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

A couple things to note:

  • You will need to replace the example text with the details relevant to your theme.
  • The Template line corresponds to the directory name of the parent theme. The parent theme in our example is the Twenty Fifteen theme, so the Template will be twentyfifteen. You may be working with a different theme, so adjust accordingly.
  • The only required child theme file is style.css, but functions.php is necessary to enqueue styles correctly (below).

The final step is to enqueue the parent and child theme stylesheets. Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice, as it increases the amount of time it takes style sheets to load. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php. You will therefore need to create a functions.php in your child theme directory. The first line of your child theme’s functions.php will be an opening PHP tag (<?php), after which you can enqueue your parent and child theme stylesheets. The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your child theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies.

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
?>

If your child theme style.css contains actual CSS code (as it normally does), you will need to enqueue it as well. Setting ‘parent-style’ as a dependency will ensure that the child theme stylesheet loads after it. Including the child theme version number ensures that you can bust cache also for the child theme. (See a more detailed discussion on Stack Exchange.) The complete (recommended) example becomes:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

where parent-style is the same $handle used in the parent theme when it registers it’s stylesheet.

Your child theme is now ready for activation. Log in to your site’s administration panel, and go to Administration Panels > Appearance> Themes. You should see your child theme listed and ready for activation. (If your WordPress installation is multi-site enabled, then you may need to switch to your network administration panel to enable the theme (within the Network Admin Themes Screen tab). You can then switch back to your site-specific WordPress administration panel to activate your child theme.)

Note: You may need to re-save your menu (Appearance > Menus, or Appearance > Customize > Menus) and theme options (including background and header images) after activating the child theme.

Creating a Child Theme from a Modified Existing Theme

It’s much easier if you create a child theme from the start. However, if you have already edited the theme files directly without creating a child theme, it’s important to get all your modifications into a child theme so that updating the parent does not wipe out your changes. These directions are intended to guide you in doing just that. Read through all of the steps below until you understand the process before starting.

  1. Make a backup of your customized parent theme using FTP, SSH or your Web Hosts file manager. You’ll need this if things don’t work out and you need to revert.
  2. Create a child theme from the Parent/Child Tab, but do not activate it yet. Make sure you check the “Copy Parent Theme Menus, Widgets and other Options” box.
  3. Go to the Files tab and select any parent templates you have changed from the list of “Parent Templates” and click “Copy Selected to Child Theme.” WordPress will automatically pull the templates from the new directory when it is activated (but don’t activate it just yet).
  4. Now the tricky part — moving your modified styles to the child theme. The best way to do this is to download your modified “style.css” file from the parent and run a DIFF against the original parent “style.css” file and move any selector blocks over to a separate file. You can use Notepad++, TextWrangler or any advanced text editor to find differences between two files.
    If you do not have an advanced text editor, open the modified stylesheet and manually copy/paste any selector blocks you have changed to a separate text file.
  5. Once you have all of your changed selectors in a file, copy the entire thing into the “Raw CSS” textarea box at the bottom of the Query/Selector tab. Click the “Save” button to the left of the textarea box (not the one at the top).
  6. Test the new child theme using the Live Preview. Go to Appearance > Themes and click “Live Preview” on the child themes icon. It should display all of your modifications correctly. If not, repeat step 3-5 until everything is working.
  7. Re-install the parent theme to a fresh, clean version and repeat step 6. If you notice anything wrong, you may need to investigate where you missed copying something. If necessary, revert to the backup parent theme and start over.
  8. Once everything looks good, go to Appearance > Themes and activate your new child theme. You can then make changes to the child theme without touching the parent.

Template Files

If you want to change more than just the stylesheet, your child theme can override any file in the parent theme: simply include a file of the same name in the child theme directory, and it will override the equivalent file in the parent theme directory when your site loads. For instance, if you want to change the PHP code for the site header, you can include a header.php in your child theme’s directory, and that file will be used instead of the parent theme’s header.php.

You can also include files in the child theme that are not included in the parent theme. For instance, you might want to create a more specific template than is found in your parent theme, such as a template for a specific page or category archive. See the Template Hierarchy for more information about how WordPress decides what template to use.

Using functions.php

Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php. (Specifically, it is loaded right before the parent’s file.)

In that way, the functions.php of a child theme provides a smart, trouble-free method of modifying the functionality of a parent theme. Say that you want to add a PHP function to your theme. The fastest way would be to open its functions.php file and put the function there. But that’s not smart: The next time your theme is updated, your function will disappear. But there is an alternative way which is the smart way: you can create a child theme, add a functions.php file in it, and add your function to that file. The function will do the exact same job from there too, with the advantage that it will not be affected by future updates of the parent theme. Do not copy the full content of functions.php of the parent theme into functions.php in the child theme.

The structure of functions.php is simple: An opening PHP tag at the top, and below it, your bits of PHP. In it you can put as many or as few functions as you wish. The example below shows an elementary functions.php file that does one simple thing: Adds a favicon link to the head element of HTML pages.

<?php // Opening PHP tag - nothing should be before this, not even whitespace

// Custom Function to Include
function my_favicon_link() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action( 'wp_head', 'my_favicon_link' );

TIP FOR THEME DEVELOPERS. The fact that a child theme’s functions.php is loaded first means that you can make the user functions of your theme pluggable —that is, replaceable by a child theme— by declaring them conditionally. E.g.:

if ( ! function_exists( 'theme_special_nav' ) ) {
    function theme_special_nav() {
        //  Do something.
    }
}

In that way, a child theme can replace a PHP function of the parent by simply declaring it beforehand.

Referencing / Including Files in Your Child Theme

When you need to include files that reside within your child theme’s directory structure, you will use get_stylesheet_directory(). Because the parent template’s style.css is replaced by your child theme’s style.css, and your style.css resides in the root of your child theme’s subdirectory, get_stylesheet_directory() points to your child theme’s directory (not the parent theme’s directory).

Here’s an example, using require_once, that shows how you can use get_stylesheet_directory when referencing a file stored within your child theme’s directory structure.

require_once( get_stylesheet_directory() . '/my_included_file.php' );

Other Useful Information

Using Post Formats

A child theme inherits post formats as defined by the parent theme. When creating child themes, be aware that using add_theme_support(‘post-formats’) will override the formats defined by the parent theme, not add to it.

RTL support

To support RTL languages, add rtl.css file to your child theme, containing:

/*
Theme Name: Twenty Fourteen Child
Template: twentyfourteen
*/

rtl.css is only loaded by WordPress if is_rtl() returns true.

It’s recommended to add the rtl.css file to your child theme even if the parent theme has no rtl.css file.

Internationalization

Child themes, much like other extensions, may be translated into other languages by using gettext functions. For an overview, please see Translating WordPress & I18n for WordPress Developers.

To internationalize a child theme follow these steps:

  • Add a languages directory.
    • Something like my-theme/languages/.
  • Add language files.
    • Your filenames have to be he_IL.po & he_IL.mo (depending on your language), unlike plugin files which are domain-he_IL.xx.
  • Load a textdomain.
    • Use load_child_theme_textdomain() in functions.php during the after_setup_theme action.
    • The text domain defined in load_child_theme_textdomain() should be used to translate all strings in the child theme.
  • Use GetText functions to add i18n support for your strings.

Example: textdomain

<?php
/**
 * Setup My Child Theme's textdomain.
 *
 * Declare textdomain for this child theme.
 * Translations can be filed in the /languages/ directory.
 */
function my_child_theme_setup() {
    load_child_theme_textdomain( 'my-child-theme', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_child_theme_setup' );
?>

Example: gettext functions

<?php
esc_html_e( 'Code is Poetry', 'my-child-theme' );
?>

To sum up, all strings that use “my-child-theme” textdomain will be translatable. The translation files must reside in “/languages/” directory.

Resources

Be aware that some of these resources recommend using @import from your child theme’s stylesheet as the method of importing the parent theme stylesheet. Please use the wp_enqueue_script() method described above.