German flagEnglish flagSpanish flag

Website

The planning experience to the many travel blogs were a great help for our own journey planning. For this reason, we want to turn our experiences documented so that others can benefit. For the technically minded, here is a brief compilation of the software:

Hosting

The page is at METANET hosted, a Swiss Hoster with excellent price / performance ratio and incredible fast and competent support. The elected by us METAhost product includes 17 GB of storage, unlimited number of domains and the usual services such as PHP, mysql, etc. The price of the offer is only CHF 7.70 per month. If you also decide for this offer you can at login like my 'mediators number "1004082 specify. How do I get per application generous commission of 50 CHF METANET

Web Blog Software

We have based on PHP and mysql blog software WordPress used for our blog. WordPress is free, very easy to install and can be extended through countless plugins and themes.

Theme

The appearance of the blog can be changed by "themes" quick and easy. After a long search we opted for the paid Theme Purelight decided. The one time fee of 27 U.S. $ also includes support. My questions to the developer of the theme were answered in a very short time to my complete satisfaction. I can therefore only recommend the theme.

Plugins

The functionality can be extended with plugins to taste. We opted for the following plugins:

  • Geocache Stat bar indicates badge in the sidebar, which the number of found and hidden caches
  • Global Translator plugin which can translate the page in virtually all languages
  • Google Analyticator generates statistics about the visitors of the page
  • NextGEN Gallery Images Gallery for WordPress
  • Subscribe2 plugin to send emails about new posts automatically to specific people
  • W3 Total Cache improves the performance of the site through caching of contents
  • WP Wall Guestbook for WordPress
  • XML Google Maps Provides GPX files from a GPS on Google Maps available
  • Auto Syntax Highlighter
  • IDrive for WordPress Creates a backup of the entire Blogs (incl. files and DB) and stores it on the IDrive. It only changes are saved, after first securing the diff backup so only takes a few seconds / minutes. IDrive offers 2GB storage space - for free. For the last 10 days snapshots are created.
  • WordPress Database Backup Sends a daily dump of the database to any email address
  • WordPress File Monitor Monitors, existing edit or delete any changes in the file system and alerts when new files are added
  • Google XML Sitemaps Creates a XML Sitemap for different search engines
  • Core Control
  • TOC For WordPress Created a Site of posts or pages due to the headings h4, h3, h2, etc ..

Good Articel about hardening WordPress, definitly worth reading. Other helpful articels on Wordpress developing development:

Theme Mods

One-column template

One-column page templates can be created as described on the Following site http://wordpress.org/support/topic/317673

  • Create a copy of the page.php file and name it onecolumn.php
  • Add the following to the top of the file onecolumn.php . This way you can choose from this new template in the admin backend wordpress When creating a new page.
  <? Php
 / *
 Template name: 1-Column
 * /
 ?> 
  • Remove the Following code (sidebar) in order did the sidebar will not be Displayed anymore
  <? Php get_sidebar ();  ?> 
  • Change the default css style for posts be editing the Following line from
  <Div class = "post" id = "? Post - <php the_id ();>?"> 

to

  <Div class = "post_wide" id = "? Post - <php the_id ();>?"> 
  • Add the following lines to the style.css file right below div#content div.post after line 87:
  div # content div.post_wide {width: 856px;  background: # e3e3e3 url ('images / post_bg.png') repeat;  padding: 20px;  clear: both;  font-size: 12px;  position: relative;  border: 1px solid # d1d1d1;  } 

Support for wide logo

Changes to file purelight/style.css . Replace section div#header h1#logo after line 53

  div # header h1 # logo {width: 500px;  height: 78px;  position: absolute;  display: block;  left: 0px;  top: 1px;  background: url ('images / logo.png') left top no-repeat;  } 

No header pic in first post

  • Add the following line to the index.php file (after line 45):
  <? Php if (is_home () &&! ($ Post == $ posts [0]) &&! Is_paged ()) {?> 
  • So add this line right after line 53:
  <?  }?> 

Additional css in style.css

  • Green border for xml google maps plugin
  .xmlgm {
	 padding: 3px;
	 background: # A7C443;
 } 
  • Border around images, replace the follwing lines in the style.css
  div.post img.alignright {float: right;  margin-right: 0px;  }
 div.post img.alignleft {float: left;  margin-left: 0px;  } 

with the Following

  div.post img.alignright {float: right;  padding: 5px;  background-color: # e3e3e3;  margin-left: 10px;  margin-bottom: 5px;  border-width: 1px;  border-style: dotted;  border-color: # A7C443;  }
 div.post img.alignleft {float: left;  padding: 5px;  background-color: # e3e3e3;  margin-right: 12px;  margin-bottom: 5px;  border-width: 1px;  border-style: dotted;  border-color: # A7C443;  } 
  • Add the following CSS sniplet to show the mail icon
  .s2_form_widget h4 {
	 padding-top: 25px;
	 cursor: pointer;
 }

 .s2_form_widget {
     background-image: url ('/ wp-content / themes / purelight11 / images / mail_icon_small.png');
	 background-repeat: no-repeat;
	 background-position: top right;
	 margin-top: -25px;
	 padding-top: 65px;
 } 
  • Replace the Following line
  .sidebar_box {width: 236px;  margin-bottom: 25px;  background: url ('images / sidebar_box_bg.png') center bottom no-repeat;  position: relative;  clear: both;  padding: 40px 20px 10px;  } 

with

  .sidebar_box {width: 236px;  margin-bottom: 10px;  background: url ('images / sidebar_box_bg.png') center bottom no-repeat;  position: relative;  clear: both;  padding: 30px 20px 10px;  } 
  • Changes to the info boxes: replace the Following lines in the style.css
  div # info block div.post_wrap div.post div.post_image img {height: 80px;  width: 237px;  margin: 0px;  } 

with the Following

  div # info block div.post_wrap div.post div.post_image img {height: 80px;  width: 237px;  margin: 0px;  border: 1px solid # A9A9A9;  background-color: #FFFFFF;  padding: 4px;  margin-bottom: 8px;}
 div # info block div.post_wrap div.post div.post_image img: hover {background-color: # A7C443;} 
  • Add the following to the style.css for the impromptus jQuery Lightbox effect:
  / *
 ------------------------------
	 Impromptu's
 ------------------------------
 * /
 .jqifade {
	 position: absolute;
	 background-color: # 000;
 }
 div.jqi {
	 width: 400px;
	 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	 position: absolute;
	 background-color: ffffff;
	 font-size: 11px;
	 text-align: left;
	 border: solid 1px #EEEEEE;
	 border-radius: 10px;
	 moz-border-radius: 10px;
	 webkit-border-radius: 10px;
	 padding: 7px;
 }
 div.jqi .jqicontainer {
	 font-weight: bold;
 }
 div.jqi .jqiclose {
	 position: absolute;
	 top: 4px;  right: -2px;
	 width: 18px;
	 cursor: default;
	 color: #bbbbbb;
	 font-weight: bold;
 }
 div.jqi .jqimessage {
	 padding: 10px;
	 line-height: 20px;
	 color: # 444444;
 }
 div.jqi .jqibuttons {
	 text-align: right;
	 padding: 5px 5px 0 0;
	 border: solid 1px #EEEEEE;
	 background-color: # f4f4f4;
 }
 div.jqi button {
	 padding: 3px 10px;
	 margin: 0 10px;
	 background-color: # 2F6073;
	 border: solid 1px # f4f4f4;
	 color: ffffff;
	 font-weight: bold;
	 font-size: 12px;
 }
 div.jqi button: hover {
	 background-color: # 728A8C;
 }
 div.jqi button.jqidefaultbutton {
	 / * Background-color: # 8DC05B; * /
	 background-color: # A7C443;
 }
 .jqiwarning .jqi .jqibuttons {
	 background-color: # A7C443;
 } 

These lines will give some more space after the titles

  div # content div.post h3 {font: 16px / 20px Tahoma, Arial, Verdana, sans-serif;  margin-top: 30px;}
 div # content div.post h4 {font: 14px / 18px Tahoma, Arial, Verdana, sans-serif;  margin-top: 25px;}
 div # content div.post h5 {font: 12px / 16px Tahoma, Arial, Verdana, sans-serif;  color: # 000;  margin-top: 20px;} 

More spacing between lines in body text, change the existing lines

  div # content div.post div.entry {line-height: 22px;  font-size: 12px;  padding: 0px;  text-align: left;  margin-bottom: 10px;  }
 div # content div.post div.entry p {line-height: 22px;  font-size: 12px;  } 

IE6 compatibility

Add the following to the ie6.css file in the path /httpdocs/wp-content/themes/purelight11/css

  .s2_form_widget h4 {
	 padding-top: 25px;
	 cursor: pointer;
    	 height: 1px;
 }

 .s2_form_widget {
    	 background-image: url ('/ wp-content / themes / purelight11 / images / mail_icon_small.png');
	 background-repeat: no-repeat;
	 background-position: top right;
	 margin-top: -25px;
	 padding-top: 65px;
    	 height: 1px;
 } 

Changes in the header.php file

  • Remove / comment line 18-20 where jQuery and other JS scripts gets loaded, we want to load it the proper way with wp_enqueue_script
  <Script type = "text / javascript" src = "<php ​​blog info ('template_url');?> / Js / jquery-min.js"> </ script>
 <Script type = "text / javascript" src = "<php ​​blog info ('template_url');?> / Js / fancy.js"> </ script>
 <Script type = "text / javascript" src = "<php ​​blog info ('template_url');?> / Js / load.js"> </ script> 
  • Load jQuery right before the line (29) with <?php wp_head(); ?> <?php wp_head(); ?>
  <? Php wp_enqueue_script ("jquery");  ?> 
  • Right after this line we are going to load all jQuery dependent scripts (including the jQuery Slider for the newsletter):
  <Script type = "text / javascript" src = "<php ​​blog info ('template_url');?> / Js / fancy.js"> </ script>
 <Script type = "text / javascript" src = "<php ​​blog info ('template_url');?> / Js / load.js"> </ script>
 <Script type = "text / javascript" src = "<php ​​blog info ('template_url');?> / Js / jquery-impromptu.3.1.min.js"> </ script>
 <Script type = "text / javascript">
 jQuery (document) .ready (function ()
 {
   // Hide the all of the element with class msg_body
   jQuery ("newsletter_body.") hide ().
   // Toggle the componenet with class msg_body
   jQuery (". s2_form_widget h4"). click (function ()
   {
     jQuery (this) .next ("newsletter_body.") slideToggle (200).
   });
 });
 </ Script> 
  • Replace the Following block
  <Script type = "text / javascript">
 $ (Document) .ready (function () {
	 $ ('# Featured'). JqFancyTransitions ({
	 width: 920,
	 height: 260,
	 strips: 25,
	 delay: <? php echo $ pl_slidedelay?>
	 left: <? php echo $ pl_slidelink?>
	 direction: 'random',
	 position: 'top',
	 <? Php if ($ pl_slideeffect! = "Default") {?>
	 effect: '<? php echo $ pl_slideeffect?>',
	 <?  }?>
	 strip delay: 40,
	 title speed: 1200,
	 navigation: true
	 });
	 });
 </ Script> 

with

  <Script type = "text / javascript">
 jQuery (document) .ready (function () {
	 jQuery ('# featured'). jqFancyTransitions ({
	 width: 920,
	 height: 260,
	 strips: 25,
	 delay: <? php echo $ pl_slidedelay?>
	 left: <? php echo $ pl_slidelink?>
	 direction: 'random',
	 position: 'top',
	 <? Php if ($ pl_slideeffect! = "Default") {?>
	 effect: '<? php echo $ pl_slideeffect?>',
	 <?  }?>
	 strip delay: 40,
	 title speed: 1200,
	 navigation: true
	 });
	 });
 </ Script> 

Plugin Mods

WP Wall

  • CSS Changes in wp-wall.css
  #wallcomments p
 {
	 margin-bottom: 15px;
	 clear: both;
	 border-bottom: 1px dotted # 789819;
 } 
  #wall_post input {
	 border: 1px solid #cccccc;
	 width: 225px;
 } 
  #wall_post textarea {
	 border: 1px solid #cccccc;
	 width: 225px;
 } 
  .wall old-{
	 background: # d9e2d2;
 }

 #wall_post_toggle {
	 cursor: pointer;
	 font-weight: bold;
 }

 .wallnav {
	 text-align: center;
	 margin: 5px 0px 0px 0px;
 } 
  .wallcomment {
	 line-height: 21px;
	 font-weight: normal;
 } 

Add the following block:

  #wp_latest {
	 color: # 999;
	 width: 100%;
	 text-indent: 10px;
	 font-size: x-small;
	 background-color: #efefef;
	 margin-bottom: 10px;
	 border-bottom: 1px dotted;
 } 

So We change some text in the wp-wall.php file on line 227 from

  $ Result = '<div id = "wp_latest"> Latest on' $ latest_comment '</ div>' $ result... 

to

  $ Result = '<div id = "wp_latest"> Last entry:' $ latest_comment '</ div>' $ result;... 

We want to display the navigation arrows below the comments we move the Following block below the <div id="wallcomments"> block

  <Div class = "wallnav">
					 <Img alt = "Previous" id = "img_left" src = "<? Php echo $ wp_wall_plugin_url;?> / I / left.png" />
					 <Img alt = "Next" id = "img_right" src = "<? Php echo $ wp_wall_plugin_url;?> / I / right.png" />
					 <? Php if ($ show_all):>
					 <a href="<?php echo get_permalink($pageId) ?> "> All this code
					 <? Php endif;  ?>
  	 </ Div> 

NextGEN Gallery

CSS changes

Changes in nggallery.css

  .ngg-gallery-thumbnail img: hover {
	 background-color: # A7C443;
 } 
  / * ----------- Single picture ------------- * /
 .ngg-singlepic {
	 border: 1px solid # A9A9A9;
	 background-color: #FFFFFF;
	 display: block;
	 padding: 4px;
	 margin-bottom: 8px;
 } 
  .ngg-left {
	 float: left;
	 margin-right: 15px;
 } 
  .ngg-right {
	 float: right;
	 margin-left: 15px;
 } 
  .ngg widget img {
	 border: 1px solid # A9A9A9;
	 margin: 0px 4px 4px 5px;
	 padding: 4px;
 } 
  .ngg-gallery overview {
     overflow: hidden;
     margin: -5px;
     width: 100%;
     clear: both;
     display: block! important;
 } 
  .ngg-gallery-thumbnail-box {
     float: left;
     margin-bottom: 10px;
 } 
  • All paths to .png files for Internet Explorer in the section /* IE */ must be added. For example, should the Pfad /fancybox/fancy_loading.png nach /wp-content/plugins/nextgen-gallery/fancybox/fancy_loading.png geändert will.

New sections:

  a: hover img {
	 background-color: # A7C443;
 } 
  .ngg widget img: hover {
	 background-color: # A7C443;
 } 

Fancybox integration

  • Download and extract Fancybox into the nextgen-gallery folder inside the plugin folder (wp-content / plugins / nextgen-gallery)
  • Make all Necessary Modifications as discribed at the bottom of this post
  • IMPORTANT: the activation of the fancybox within the function load_scripts() section needs to be done at the very bottom
  • Include the css file of the file in fancybox nggallery.php in wp-content/plugins/nextgen-gallery below the line function load_styles()
  // Activate modified Custom
 if (($ this> options ['thumbEffect'] == 'custom'))
	 wp_enqueue_style ('custom', NGGALLERY_URLPATH .'fancybox / jquery.fancybox-1.3.1.css', false, '1.3.0', 'screen'); 
  • Create a new file called fancyboxConf.js inside wp-content/plugins/nextgen-gallery/fancybox and Add the following code
  FancyBoxReload function () {
     / * This is basic - uses default settings * /

	 jQuery ("a.fancybox"). fancybox ({
		 'Title position': 'over',
		 'OverlayOpacity': 0.6,
		 'Overlay color': '# 444',
 		 'Title format': function (title, current array, current index, currentOpts) {
				     return '<span id = "fancybox-title-over">' + (? title.length '' + title: '') + 'Gallery Image' + (current index + 1) + 'of' + currentArray.length + '</ span>';
		 }
		 'Cyclic': false,
		 'OnComplete': function () {
			 $ ("# Fancybox-wrap"). Hover (function () {
				 $ ("# Fancybox-title") show ().
			 }, Function () {
				 $ ("# Fancybox-title") hide ().
			 });
		 }
	 });
 }

 jQuery (document) .ready (function () {
	 FancyBoxReload ();
 }); 

Display Title / Description in View mode of Picture

Change opacity of title overlay in background View of Fashion Picture

  • Adjust the png /httpdocs/wp-content/plugins/nextgen-gallery/fancybox/fancy_title_over.png accor ding to your desire.

Global Translator

Fix permissions

All cache files Which are created by the scripts shoulderstand have 777 permissions. By default the cache files will be created with the user "apache" and 755 This way it is Not possible to remove cache files with the default FTP users.

  • Add the following line into the script wp-content/plugins/global-translator/translator.php right after line 1191
  chmod ($ filename, 0777); 

Flags in the header

  • Add the following lines to the header.php of your theme right after the line 54 wp_nav_menu( $menu_set ); ?> wp_nav_menu( $menu_set ); ?>
  <? Php
   if (function_exists ("gltr_build_flags_bar")) {
   gltr_build_flags_bar ();
   }
 ?> 

CSS changes

  • Choose the option "Enclose the flags inside a DIV (for CSS customization)" in the Settings menu of Global Translator
  • Add the following lines to the style.css file from the used theme
  / ********************* TRANSLATION ************************* BAR /
 / ************************************************* ************** /

 div # {translation_bar
	 padding: 11px;
	 outline: none;
	 float: right;
 }

 a # flag_en, a # {flag_en
	 margin: 0px 12px 0px 0px;
 } 

Subscribe2

Messages appear <br> shoulderstand in a jQuery light box. Change the file subscribe2.php file on line 83 (for the 'Confirmation mail message'):

  $ This> confirmation_sent = "<script type = \" text / javascript \ "> jQuery.prompt ('A confirmation message is on its way!') </ Script> <p>".  __ ('A confirmation message is on its way!', 'Subscribe2').  "</ P>"; 

TOC for WordPress

There Should not be a blank line before the TOC

Remove the &nbsp; in between the <div> tags on line 338 from

  $ Out = "<div class = 'toc-end'> & nbsp; </ div>". 

to

  $ Out = "<div class = 'toc-end'> </ div>". 

Less listsindent

Change the Following in the setting of the plugin:

  .toc ul ul, ol ol {.toc
		 margin: 0 0 0 0;
 } 

Leave a Reply

You must be logged in to post a comment.