Category: Tech Blog

Shift Joomla and WordPress installs

  • Copy HTML/CSS/etc. – folders. everything
  • Move the database

Login to old cPanel -> PHPmyAdmin
select databse, check all tables, “export” – all (custom – all options)

Go into new PHPmyAdmin
import all

edit (WP-config.php,. config.php (in Joomla)

Edit the database location:

  • Databse name (same)
    But – might be something like:
    old DBS name is “shop”
    new name is “rotapixt_shop”
  • Server (local host if it is on the same server, else the address (EG: http://cpanel.something.com)
    it’s possible to install the HTML files on one FTP account server, and install the database on a different server….
  • Database user username:  (hosting account username/ password login)
  • Database user password

Note:
In website hosting – you have an account username and password, this is the same for :

  • FTP account
  • cPanel login (maybe PHPmyadmin has a different password)
  • Database / MySQL username / password (would be the same as PHPmyAdmin)

Joomla – Configuration.php:

  • host $host
  • DB name $db
  • username MYSQL $user
  • pass $password

WordPress – wp-config.php

  • commented with labels ~

LOCAL HOST =

HTML goes in the htdocs folder

http://localhost/cpanel(then click “PHPMYADMIN” to edit database

  • DBS name = whatever you call it in PHPmyadmin
  • server = localhost
  • username = root
  • password = “” (nothing)

Stylebot Chrome Browser Stylish

Stylebot – I love this plugin.

It’s like stylish/ greasemonkey for FireFox, but simpler to make your own edits to websites.
You just go to a website you want to edit, and click areas of the page you want to change, or add your own CSS to add to that domain.

Maybe not that powerful, but It could get better ~

Here are my first ones, completely cleaning some websites:

SMSfun.com.au

This website can be so obnoxious, covered in bright colours and flashing images, but now theres:

body {
background-image: none;
background-color: #ccc;
}

#contentright, #tblrightcolumn, #sitebanner, #leftcolumn , #sitebanners, #featured, #regright, .features, #weeklypollbox, #joinnowbox, #welcomeblock {
display: none;
}

#sitenav {
margin-top: 97px;
}

 

Before:

2After

1

whois.domaintools.com – Removing the Sidebar

.main_right_content, #center-content-right, #main-left-content, #google-ads-container, iframe, #aswift_0_anchor, .whois-social-media float-row, .addthis_toolbox, .whois-social-media {
display: none;
}

.main_left_content, .float-row, .rounded-grey-tab, .tab-panel, .whoisTabs, .tab-panel-header, .unselectable, .tab-panel-header-plain, .tab-panel-body, .tab-panel-body-top , .tab-strip-wrap, #center-content-left {
width: 100%
;
}

.right {
float: left;
}

domaintools.com

#dt-nav-wrapper-banner, .right-column, .things-to-do, .float-row, .vert-pad-10
{
display:none;
}

YouTube

.homepage-side-block, .yt-alert-promo, .shmoovies-list-container, #ALL-content , .watch-sidebar-section, #watch-sidebar , .browse-content , #__ffYoutube3, #ad_creative_1, #homepage-side-content, .h2-links-black {
display: none;
}

FaceBook – remove the blue bar at the top (make it white)

.slim #blueBar {
border-bottom: 1px solid #fff;
}

#blueBar {
background-color: #fff;
}

#pageLogo a {
background-color: #fff;}

biblegateway.com

#home-picks , #votd-box, .section-box, #merch-bottom, #rotate-link, #social-media-links, #top-link, #gospel-com-results, .with-alert, .results-head, .passage-share-buttons , .share-buttons {
display: none;
}

#body {
min-height: 200px;
}

mobile.biblegateway.com

#merch-bottom, #home-picks, .with-alert, #sections-left-col, #welcome-box , #mobile_block , #social-media-links, #top-link {

display: none;
}

.max_width {
max-width: none;
margin: 1px 5px 0 ;
}

#main-col {
min-height: 10px ;
}

#sig p {
position: relative;
float: left;
padding-left: 30px;
}

 

double click animation, double right click GIF animation

I made these two animations, since I needed them for explaining that in embedded Google Maps, you can double left or right click to zoom in and out..

Double Click GIF Animation
left-click-double-gif-animationDouble Right Click GIF Animation
right-click-double-gif-animation

You can download the ZIP of both GIFs and the photoshop file, if you want to edit it – you can make single click too
The original image is GPL licence, as are my derivative edits.

Double click Animation – GIF, double right click ZIP file – Free for any use.

HTML Back button for website

If you would like to add a back button on your website, rather than asking people to click back (which some people might never do when you want them to..)

You can use this HTML Back Button:

<form><input type=”button” VALUE=”Back” onClick=”history.go(-1);return true;”></form>

Shows up like this:

 

 

Redirect Dynamic URL to Static Link and Redirect old to new no loop error

I spent such a huge amount of time trying to find the answer to this problem, and different servers might behave differently, I spent a long time trying so many different variations and combinations

In the end I couldn’t get it to work, and so I renamed the PHP file that was generating the pages:

EG:

  • I want
  • https://pushkaCom.com/product.php?id=6
  • to redirect to
  • https://pushkaCom.com/products/toasters/

rename product.php to p-product.php

RewriteCond %{QUERY_STRING} ^id=6$
RewriteRule ^product\.php(.*)$ https://pushkaCom.com/products/toasters/? [R=301,L]
RewriteRule ^products/toasters/$ p-product.php?id=6 [NC,L]

This was coming up as an infinite loop…

RewriteEngine On
[R=301,L]
RewriteCond %{QUERY_STRING} ^id=6$
RewriteRule ^product\.php$ https://pushkaCom.com/products/toasters/? [R=301,L]

RewriteEngine on
RewriteRule ^products/toasters/$ product.php?id=6 {{{maybe add  [R=301,L]  and switch the two?? }}}

Make a static website using templates

CMS like WordPress are great for easily uploading and editing content, using templates and databases, but what if you don’t have a database, only HTML files?

  • add .PHP to all files,
  • cut out the head and footer, adding them to external files so that only the body text is in your PHP files
  • add this for the head and foot of each page
    <?php include $_SERVER[‘DOCUMENT_ROOT’].”/head.html ?>
    <?php include $_SERVER[‘DOCUMENT_ROOT’].”/head.html ?>

And there you have it, template.

Done.

Why this is awesome:

  • If you need to edit something in the header or footer, you can edit it once, in these two files, rather than editing every page. This is similar to the logic behind external CSS
  • If you want to change the template of your website, you can just edit these two files
  • You don’t need to install a database driven program to run your template

JQuery Javascript content rotator layering text scrambled on page load

On some content rotators, while the page is loading and the javascript is rendering the rotator, all the elements of the roator are layered on top of each other, so the text is layered on top of each other and looks like a mess…

Javascript is executed line by line as the HTML document is read, so what you can do, is hide the text with javascript at the top of your HTML page, and then fade it in at the bottom of your page, meaning that when your page loads, the text won’t all be visible until everything is ready to be displayed:

Add to beginning of <head>

<script type="text/javascript">

document.write("<style type='text/css'>.headerText{display:none;}</style>");

</script>

And add this to the bottom of the footer, before </body> if possible:

<script type="text/javascript">//<!--

//$(window).bind("load", function() {

// you can uncomment these

//two things to load this script when the page finishes loading,

//but that could add to a delay in the text being shown...

$('.headerText').fadeIn('slow', function() {

// Animation complete

});

//});

//-->

</script>