Category: Tech Blog

Stylebot Chrome Browser Stylish

admin Google

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

admin Tech Blog

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

admin Tech Blog

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

admin Tech Blog

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

admin Tech Blog

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

admin Tech Blog

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>

 

If URL contains X, Then do this in PHP

admin Tech Blog

You can customise the code of your website using this function in PHP:

<?php if (stripos($_SERVER[‘REQUEST_URI’],’/current-page/’) !== false) {echo ‘class=”selected”‘;} ?>

or to check if the URL = something:

$urllow = $_SERVER['SCRIPT_URI'];
$urllow = strtolower($urllow);
if ((strpos($urllow,"search-text"))){
do something...
}

EG: showing a different header on a page etc

GitHub Notes, Social Coding

admin Tech Blog

I’m working on a website with one other developer who lives out of sydney, and we’re collaborating through Git, the system used for the creation of various pieces of software, web apps and other programs.

These three videos helped me a lot with the basics:

 



My quick reference notes:

  • in terminal, cd “c:/location”
  • git status (to see if there is anything to push to the server)
  • git commit -m “comment for the updates”
  • git push https://branch-url.git