MooTools.Tips Port v1.1 to v1.2
Converting an old v1.1 implementation of basic MooTips to v1.2 requires a couple steps.
First, the CSS needs to be changed because the underlying element structure of the tip has changed (see a prior post on MooTools.Tips in v1.2 for example css). The new html structure looks like the following:
<div class="options.className">
<div class="tip-top"></div>
<div class="tip">
<div class="tip-title"></div>
<div class="tip-text"></div>
</div>
<div class="tip-bottom"></div>
</div>Next, you need to import your Title::Text from the “title” attribute of your tip anchor.
<span id="myTip" title="This is the title::This is the text">
Hover over me to see a tooltip
</span>The following function parses out the Title::Text from the tip anchor and uses element storage to assign it to the tip.
function SetTipStorage(element) {
// create an array including the "title" at
// position 0 and the "text" at position 1
var content = element.get('title').split('::');
// use the element storage functionality
// to store the title and text for the
// specified element
element.store('tip:title', content[0]);
element.store('tip:text', content[1]);
// remove the element title
element.title = '';
}window.addEvent('domready', function() {
SetTipStorage($('myTip'));
var tip = new Tips($('myTip'), {
fixed: false,
showDelay: 0,
hideDelay: 0
});
});See the full code and demo at http://www.uhleeka.com/archives/mootools/1.2.1/tips-convert-v11/
MooTools.Tips v1.2
Back in the days of MooTools v1.1, MooTips was an external class designed to use an element’s “title” attribute to control the content of the tip. See a demo of the 1.1 version.
MooTools v1.2 includes a “Tips” class which operates very differently from the v1.1 extension. Browse the online documentation.
Breaking it down…
Download the MooTools core library and use the more builder to download the additional “Tips” functionality. Include the files in the head of your page:
<script type="text/javascript" src="mootools-1.2.1-core-yc.js"></script> <script type="text/javascript" src="mootools-1.2-more.js"></script>
Add the tooltip css:
<style type="text/css">
/* MooTools.Tips */
.tip-top {
color: #fff;
width: 139px;
z-index: 13000;
}
.tip-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #9FD4FF;
padding: 8px 8px 4px;
background: url(bubble.png) top left;
}
.tip-text {
font-size: 11px;
padding: 4px 8px 8px;
background: url(bubble.png) bottom right;
color:#fff;
}
.tip-text A {
color:#069;
}
.tip-loading {
background: url(ajax_load.gif) center center no-repeat;
width: 30px;
height: 30px;
margin: 0 auto;
}
</style>Add an element to tooltip:
<body> <img src="moo.png" id="simple_tip" /> </body>
Using javascript, set the Title and Text to be displayed in the tip:
$('simple_tip').store('tip:title', "This is the Title");
$('simple_tip').store('tip:text', "This is the Text");And finally, create the tip:
var SimpleTip = new Tips($('simple_tip'), {
showDelay: 0,
hideDelay: 0,
offsets: {x: 10, y: 10},
fixed: false
});Check the full source code and a working v1.2 simple Tips demo.
How to Install Expression Engine on MediaTemple (gs)
The Files:
Step 1: Visit EE and download the latest version of the core after reading the EULA
Step 2: Post the file to the (gs) via FTP to the root directory of your website.
Step 3: Login to your (gs) via SSH.
Step 4: Change directory to find the zip you just uploaded.
cd ~/domains/uhleeka.com
Step 5: Unzip the EECore archive, then delete the archive
unzip EECore1.6.5.zip rm EECore1.6.5.zip
Step 6: Move the EECore directory into a subdirectory of html (e.g. html/ee)
mv -fv EECore1.6.5 html/ee cd html/ee
Step 7: Set the file permissions as required by the EE installation docs.
chmod 666 path.php chmod 666 system/config.php chmod 666 system/config_bak.php chmod 777 images/avatars/uploads/ chmod 777 images/captchas/ chmod 777 images/member_photos/ chmod 777 images/pm_attachments/ chmod 777 images/signature_attachments/ chmod 777 images/uploads/ chmod 777 system/cache/
Step 8 (optional but recommended): Rename the “system” folder as a security precaution
mv -fv system newsystemfoldername
Step 9 (optional): Find and download a theme at http://expressionengine.com/templates (see the EE install docs for more information). Note: EE does not allow dynamic switching of themes after installation.
cd themes/site_themes wget http://expressionengine.com/files/templates/zips/alex_blue.zip unzip alex_blue.zip rm alex_blue.zip
Step 10: Logout of SSH
logout
The Database:
Creating the database cannot be done via SSH because the (gs) MySQL user does not have CREATE DATABASE permissions. So, you have to use the MediaTemple control panel which is, thankfully, very simple and straightforward.
Once you login to your (gs) contol panel, click the “Manage Databases” link.
Click the “Add A Database” tab.
Specify the database name (e.g. dbXXXX_uhleeka_com) and select MySQL for the type.
Now that you’ve created your database, click the “Global Settings” tab to create a new user for your database (e.g. dbXXXX_uhleeka). Make sure to give your new user “Read/Write” access to your database.
Also, take note of the “Internal Hostname” listed under “Your Server Info”. It should be something like “internal-db.sXXXX.gridserver.com”.
The Configuration:
Step 1: Start the configuration by navigating to the website EECore folder (e.g. http://www.uhleeka.com/ee)
Step 2 (optional but recommended): if you renamed your system folder in the Files process, enter the value you renamed the folder to (e.g. newsystemfoldername)
Step 3: Fill out the configuration form and select your template. Example Database parameters are as follows:
Database Name: dbXXXX_uhleeka_com User Name: dbXXXX_uhleeka Password: ThisIsMyVerySecurePassword Database Host: internal-db.sXXXX.gridserver.com Table Prefix: exp_
How to Install WordPress on MediaTemple (gs)
After successfully trying the 1-Click Applications installer offered by the MediaTemple (gs) control panel, I decided I would rather know what was going on behind the scenes…not to mention that they have all sorts of warnings saying “DO NOT(!) use the one-click installer to upgrade any…yada yada yada or we will torture small animals to scare you…yadda yadda.”
Although it was a very straightforward process, after having stepped my way through the manual install, I felt inclined to record my paces.
The Files:
The first step is to download and extract the latest files from WordPress.org. Being new to Linux/UNIX, I decided to do things via SSH. If you are not so inclined, FTP is a simple and viable option that I decline to discuss in this post.
Login to your (gs) via SSH.
Change directory to the domain where you want to install WordPress (e.g. uhleeka.com):
cd ~/domains/uhleeka.com
Download the latest release from WordPress.org:
wget http://wordpress.org/latest.tar.gz
Decompress the archive into the default directory “wordpress” and delete the tar.gz file:
tar xvzf latest.tar.gz rm latest.tar.gz
Make the “wordpress” directory a subdirectory called “blog” (e.g. uhleeka.com/blog):
mv wordpress html/blog
Or put the contents of the wordpress folder into the root directory (e.g. uhleeka.com/):
mv wordpress/* html rm -dr wordpress
The Database:
Creating the database cannot be done via SSH because the (gs) MySQL user does not have CREATE DATABASE permissions. So, you have to use the MediaTemple control panel which is, thankfully, very simple and straightforward.
Once you login to your (gs) contol panel, click the “Manage Databases” link.
Click the “Add A Database” tab.
Specify the database name (e.g. dbXXXX_uhleeka_com) and select MySQL for the type.
Now that you’ve created your database, click the “Global Settings” tab to create a new user for your database (e.g. dbXXXX_uhleeka). Make sure to give your new user “Read/Write” access to your database.
Also, take note of the “Internal Hostname” listed under “Your Server Info”. It should be something like “internal-db.sXXXX.gridserver.com”.
The Configuration:
The last thing you will need to do is access and configure your new WordPress blog. Browse to the home page, and you will be directed to the configuration. Enter the following fields in the configuration, and you are done:
Database Name: dbXXXX_uhleeka_com User Name: dbXXXX_uhleeka Password: ThisIsMyVerySecurePassword Database Host: internal-db.sXXXX.gridserver.com Table Prefix: wp_