hobos.ch

Hosting

The site is at METANET hosted, a Swiss Hoster with excellent value for money and incredibly 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 in my application like '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 your blog can be changed by "themes" quick and easy. After a long search, we have paid for the theme PureLight decided. The one time fee of U.S. $ 27 also includes support. My questions to the developer of the theme were answered in a very short time to my complete satisfaction. Therefore I can only recommend the theme.

Plugins

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

• Geocache Stat bar displays badge in the sidebar, which is the number of found and hidden geocaches
• Global Translator Plugin, which can be translated into the page as well as all languages
• Google Analyticator generates statistics about the visitors of the page
• Gallery NextGEN Gallery for WordPress
• Subscribe2 plugin to send emails when new posts automatically to specific people
• W3 Total Cache improves performance by caching the contents of the site
• WP Wall Guestbook for WordPress
• XML Google Maps Provides GPX files from a GPS on Google Maps available
• Car Syntax Highlighter
• IDrive for WordPress Creates a complete backup of the blogs (including 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 an XML sitemap to different search engines
• Core Control
• For TOC WordPress Created a table of contents of posts or pages based on the headings h4, h3, h2, etc..

Good articel about hardening WordPress, definitly worth reading. Other helpful articels on Developing WordPress:

• WP scheduling
• WP Widgets
• WP DB Transactions
• Parsing HTML with PHP

Theme mods

One-column template

One-column page templates can be created as described on the site Following Following 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 wordpress admin backend When creating a new page.

  <? Php
 / *
 Template Name: 1-Column
 * /
 > 

• Remove the Following 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 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.post_wide div # content {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 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 Following line

  . Sidebar_box {width: 236px; margin-bottom: 25px; background: url ('images / sidebar_box_bg.png') bottom center 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') bottom center no-repeat; position: relative; clear: both; padding: 30px 20px 10px;} 

• Changes to the info boxes: replace the Following 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 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 0 5px 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.post div # content 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 h5 {font div.post: 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.post div.entry div # content 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_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 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

  # P wall comments
 {
	 margin-bottom: 15px;
	 clear: both;
	 border-bottom: 1px dotted # 789 819;
 } 

  # Wall_post input {
	 border: 1px solid # cccccc;
	 width: 225px;
 } 

  # Wall_post textarea {
	 border: 1px solid # cccccc;
	 width: 225px;
 } 

  . {Old wall
	 background: # d9e2d2;
 }

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

 . Wallnav {
	 text-align: center;
	 margin: 5px 0px 0px 0px;
 } 

  . {Wall comment
	 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 block Following Following 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 </ a>
					 <? 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 are.

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, currentIndex, currentOpts) {
				     return '<span id="fancybox-title-over">' + (? title.length '' + title:'') + 'Gallery Image' + (currentIndex + 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 of Picture in View mode

• Follow the instructions on the page Following Following: http://j.modjeska.us/?p=113

Change opacity of title overlay background in View mode of Picture

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

Global Translator

Fix permissions

Which all cache files are created by the scripts shouldhave 777 permissions. By default the cache files will be created with the user "apache" and 755 This way it is not possibleness 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 ); ?>

  <? 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 theme used

  / ********************* BAR TRANSLATION ************************* /
 / ************************************************* ************** /

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

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

Subscribe2

Messages Should Appear 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>"; 

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

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

  . Toc ul ul. Toc ol ol {
		 margin: 0 0 0 0;
 }