How to locate the editable pages when you install WordPress.
1. Install WordPress to your hosts server. You’ll be asked to give the destination folder a name.
2. Locate the folder you named when installing.
3. Inside this folder you will see 3 main folders and a bunch of PHP and other files. You may see an index.php file and think.. that was easy!.. its not.. that file and many other index files you find in WordPress are not editable. Go into the “Web Content” folder.
4. Then go into the “Themes” folder.
5. Go into whatever the name of your theme is. My folder is called “twentyeleven”.
6. Inside this folder find these files:
style.css
header.php
index.php
content.php
footer.php
if you are going to be editing the sidebar you will also need these:
sidebar.php
sidebar-page.php
sidebar-footer.php
7. Open all these pages and start messing around. Investigate. WordPress leaves a few hidden comments describing certain pieces of code or warning you not to delete important parts OR ELSE.. but they don’t describe everything.. you have to figure most of it out with trial and error. I suggest starting with the header.php file first and work your way down.
What I Did: Although most of the labels for elements are pretty self explanatory, some are ridiculous. An easy way to find whats what in the CSS is to start adding borders or background colors to HTML elements.
Or in the actual pages themselves you can add numbers 1, 2, 3, 4… throughout the HTML code and see where they turn up.
If bits of code look completely ridiculous and you have no idea what they mean or what parts of the page they refer to try copying it and then deleting it. See if anything important disappears. You can always paste it back. *I only suggest doing this with HTML or CSS*… you don’t want to delete any important JavaScript or PHP code that runs in the background.
I hope this was useful!
If you did find this helpful and would like to endorse me for WordPress on linkedin you can do that here: http://www.linkedin.com/in/jenifrei/
I’d really appreciate it! Thanks for reading!
Filed under: Tutorials | Leave a Comment
Tags: CSS, Customize, Wordpress
Avahost Hosting
This is the hosting site I have used since I first purchased hosting.
I have been satisfied with the service.
Customer Service
Ticket system: They always respond to tickets in a timely manner.
Online chat: They do not ever respond to chat, at least not that I remember. I’ve waited hours before. If you just write a new ticket they will usually answer within a few hours – sometimes sooner. And definitely within 24 hours.
They are always helpful, patient, and professional and do not close a ticket until they are sure it is resolved.
cPanel
The cPanel is easy to use and understand.
I wish you could upload multiple pictures at a time through cPanel when I do not want to go through ftp. It would save a lot of time.
Their wordpress and mysql integration is easy to use.
I haven’t experienced any significant downtime. All hosts experience downtime at some point but I cant remember a time when the site was down.
Filed under: Reviews | 1 Comment
Tags: AVAHOST, AvaHost Review, Customer Service Ticket system, Online chat, ticket
If it doesn’t matter to you what the page extension is and/or you are already creating a new page then you can just give it the .php extension and the page will read both HTML and PHP code.
However if you want to execute code on an HTML page and do not want to have a .php extension this is a quick fix.
Why would you want to do this?
For me it was about usability. People are used to .html pages and the technically disinclined may not even know that there are other extensions for web pages and type in the url incorrectly. So to prevent this I wanted all my pages to end in .html. (I’m sure there are other ways to go about this, but this was easy enough for me.)
Another reason may be that you have 100’s of pages that need to execute php and do not have time to change them all to .php pages before a due date… this is a quick fix.
All you need is access to the .htaccess file.
For those using AvaHost like myself:
Use legacy file manager and click “show hidden files”. 
When the page opens find the “public_html” folder.
Click the image to the left, not the folder name itself.
When it opens locate the .htaccess file and click it… then in the right top corner choose the edit file link.
If you cannot locate the file you can contact your host and ask them how to find it. Like AvaHost it may be “hidden”.
Once you’ve located the file and opened it add the following code: (Start with the first one and if it does not work or causes the page to execute a download then try the next code.)
AddType application/x-httpd-php .htm .html
or
AddHandler application/x-httpd-php .htm .html
If the above codes do not work try adding a 5 to php in either code like this: (this is the one that worked for me)
AddHandler application/x-httpd-php5 .htm .html
I hope this has helped you!
If you did find this helpful and would like to endorse me for PHP on linkedin you can do that here: http://www.linkedin.com/in/jenifrei/
I’d really appreciate it! Thanks for reading!
Filed under: Tutorials | 1 Comment
Tags: AddHandler, AVAHOST, HTACCESS, PHP, PHP Tutorial
Basics of Javascript Arrays
Arrays are variables that contain multiple pieces of data. It is like any other variable because it has only 1 name but it has multiple storage compartments.
An array is like a dresser, the pieces of data are the drawers.
Every array has a value and a unique key.
Keys are usually numeric and start at 0. An array with a numeric key is an index array. So an array with an index 0 – 6 actually has 7 items.
What Can You Do With An Array?
Arrays can be used for a lot of different purposes. One popular use for arrays is to display an image slideshow. The array stores the images and allows the user to click “next” and “previous” (or whatever) to switch between the “data” – or more specifically – pictures in the array.
To create an array:
create a variable:
var myArray
then add “= new Array()” like this:
var myArray = new Array()
then add your data:
var myArray = new Array()
myArray[0]= “images/image1.png”;
myArray[1]= “images/image2.png”;
myArray[2]= “images/image3.png”;
myArray[3]= “images/image4.png”;
If you did find this helpful and would like to endorse me for Javascript on linkedin you can do that here: http://www.linkedin.com/in/jenifrei/
I’d really appreciate it! Thanks for reading!
Filed under: Tutorials | Leave a Comment
Tags: Array Tutorial, Arrays, Image Array, Javascript, Javascript Basics, Javascript Tutorial
FireFox Addons
I just downloaded a bunch of addons for Firefox. So in the next few weeks I will be updating with reviews for the following:
FireBug
Firebug includes a ton of web development tools to use from your browser. You can explore, edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
IE tab 1.95.20100930
A handy extension to see how a site is displayed at Internet Explorer.
FireFTP 1.0.9
FireFTP is simply an FTP client built into the Firefox browser. Important thing it is free and you can flip to it just like any tab in your browser.
Aardvark 3.0
If there is a need of utility for selecting elements and performing various actions then Aardvark is the best choice. It helps in cleaning up a page prior to printing it, for making the page more readable, and for analyzing the structure of a page.
ColorZilla 2.2.2
ColorZilla helps you in color reading from any point in your browser, quickly adjust this color and paste it into another program. You can also Zoom the page you are viewing,measure distances between any two points on the page, choose colors from pre-defined color sets and saving the most used colors in custom palettes.
SEO for Firefox
Who like to watch statistics right into Google and Yahoo search results then it is an Excellent plugin for them. You can get Alexa, Google PageRank, Tehnorati rankings and many other useful data.
Measure It
This extension gives you the ability to draw out a ruler to get the pixel width and height of any elements of a web page.
Stumble Upon 3.73
If you are a web-developer, StumbleUpon can drive a huge amount of visitors to your website.StumbleUpon helps you to find new sites very easy.
FireSizer 1.o.1
Provides a menu and status bar to resize the window dimensions to a specific size. Unlike other similar extensions, this one sets the size of the *entire window*, not just the HTML area.
YSlow 2.1.0
YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.YSlow is a Firefox add-on integrated with the Firebug web development tool.
PageDiff 1.5
This extension helps web developers and designers to see HTML-code(text) differences between web pages which can assist in fixing coding irregularities.
Delicious Bookmarks 2.1.106
Delicious bookmarks is official Firefox addon for del.icio.us. It integrates your browser bookmarks and tags, to keep them in order and “easy to find” way.
FirePHP 0.4.3
FirePHP is ideally suited for AJAX development where clean JSON or XML responses are required. FirePHP enables you to log to your Firebug Console using a simple PHP method call.
Unhide Passwords
Unhide Passwords is a tool for everyone who is bad at remembering or typing passwords correctly.
Javascript Debugger 0.9.88.1
A powerful JavaScript debugging environment for Mozilla based browsers.
IE NetRender 0.9.6
This adds buttons, tools menu and contextual menu entries to get a screenshot of the current page.It is really useful for webmasters which are not using Windows!
FEBE 6.3.3.2
FEBE (Firefox Environment Backup Extension) allows you to quickly and easily backup your Firefox Extensions. In fact, it goes beyond just backing up — It will actually rebuild your extensions individually into installable .xpi files. Now you can easily synchronize your office and home browsers.
Palette Grabber 0.4.1
This extension will create a color palette exportable to all major image editing apps, including, Photoshop, Paint Shop Pro, Fireworks and others based on the current page.
Morning Coffee 1.33
This extension lets you organize websites by day and open them up simultaneously as part of your daily routine. This is really handy if you read sites that update on a regular schedule (like webcomics, weekly columns, etc.)
Panic 0.3.7
panic Firefox Extension gives you the ability to close all tabs, while opening another one that will make it look like you are doing what you should be doing.
FontFinder 1.0
Font Finder simply highlight a single element (e.g. a paragraph or a strong tag ), right-click and select `Font Finder`, then marvel as the full CSS text styling of the selected element appears.
AutoFillForms 0.9.6.1
Autofill Forms enables you to fill out web forms with one click or a keyboard shortcut.
Filed under: Reviews | 1 Comment
CSS Horizontal Navigation Menu
The HTML:
<ul class="navigation"> <li><a href="http://www.target.com">Target</a></li> <li><a href="http://www.walmart.com">Wal-mart</a></li> <li><a href="http://www.bestbuy.com">Best Buy</a></li> <li><a href="http://www.forever21.com">Forever21</a></li> </ul> |
The CSS
ul.navigation,
ul.navigation ul {margin: 0;
}
ul.navigation li {list-style-type: none;
float: left;
}
|
(goes in a separate css stylesheet or in the header section of the html document)
This is the result:
– – – – – – – – – – – – – – – – –
To lose the underline add this to the CSS:
| li a:link {text-decoration:none;} |
This is the result:
– – – – – – – – – – – – – – – – –
Links too close? Add some padding.
To add padding to the right, add this code to the CSS:
| ul.navigation li {list-style-type: none; float: left; text-decoration:none; padding-right:10px; } |
This is the result:
Note: If you just add padding and not padding-right,
it will add padding around the entire link.
– – – – – – – – – – – – – – – – –
If you did find this helpful and would like to endorse me for CSS on linkedin you can do that here: http://www.linkedin.com/in/jenifrei/
I’d really appreciate it! Thanks for reading!
Filed under: Tutorials | Leave a Comment
Tags: CSS, horizontal navigation
SO say you want a dashed line to slowly come in across your flash ad.
Here’s what you do:
STEP 1.
In the TIMELINE section, create a layer for the dashed line and name it “dash”
(its always a good habit to name and organize your layers, especially when things start to get more complex)
STEP 2.
In the TOOLS section, select the line tool. Select the correct settings. (I chose dashed line with a 3px stroke, and the color is a teal green or #63cc63)
Then draw your line.
STEP 3.
In the TIMELINE section, create a layer for the mask and name it “mask”. This layer is what will make the line appear to move on and off the screen.
STEP 4.
In the TIMELINE section, select the “mask” layer and CTR +Click (or right click for PC). In the drop down menu, select “mask”. The layer should have this symbol in front of it. and the “dash” layer should have this symbol in front of it.
NOTE: If the “dashed” layer doesn’t have the symbol it is probably because it is not placed inside the mask layer. If that’s the case, drag the “dashed” layer under the masked layer.
STEP 5.
In the TIMELINE section, click on the very first frame of the “mask” layer. Then, in the TOOLS section, select the rectangle tool. Make sure the dashed line and the rectangle are contrasting colors. A stroke isn’t necessary. Now drag a rectangle over the entire dashed line.
STEP 6.
In the TIMELINE section, give both the “mask” and “dash” layers a keyframe in frame 45 – 50. Doesn’t need to be exact.. this is just what I did.
STEP 7.
In the TIMELINE section, select the first frame/1st keyframe in the “mask” layer. And select the rectangle. Move the rectangle over to the left of the stage but still aligned with the dashed line.
STEP 8.
In the TIMELINE section, select the last frame/2nd keyframe in the “mask” layer. And select the rectangle. Move the rectangle over to the right of the stage but still aligned with the dashed line.
STEP 9.
In the TIMELINE section, select a frame within the 1st and 2nd keyframes in the “mask” layer and create a classic tween.
Done.
Now test the movie.
– – – – – – – – – – – – – – – – – – – –
If you did find this helpful and would like to endorse me for Adobe Flash on linkedin you can do that here: http://www.linkedin.com/in/jenifrei/
I’d really appreciate it! Thanks for reading!
Filed under: Tutorials | Leave a Comment
Tags: Adobe Flash, Animation, CS4, Easy Flash Tutorial, Flash CS4, Flash Tutorial, Layers, Mask, Masks, Web Development
Jeni Frei's Blog 