blog icon

PHP variables inside external CSS

There’s a way of using php variables inside your css external file.
First, you have to rename your css file to “mycssfile.php”.
Then, insert the following line of code on top of the file:

  1. <?php header("Content-type: text/css"); ?>

Finally, don’t forget that the reference to the css file in your HTML is “mycssfile.php”.

Inside “mycssfile.php” you can define variables like colors, typography, measures, etc…

  1.  
  2. <?php
  3. $color1 = "#CCCCCC";
  4. $color2 = "#FFFFFF";
  5. $type1 = "Helvetica";
  6. etc…
  7. ?>
  8.  
Filed under: Blog, Tutorials

Random Image using PHP

Ok… this is really going to be simple.
You want to display a random image inside, lets say, a header div.

For the sake of simplicity, put all the images you want to display inside a folder and name them something1.jpg (or png, or gif, or whatever), something2.jpg, something3.jpg, etc…

Now you only have to generate a random number using the php rand() function. This function may receive two parameters: a minimum value and a maximum.
Example: rand(1,30) will return a number between 1 and 30 (inclusive).

In this example I have only 5 images inside a “images” folder. They are named “img1.jpg”, “img2.jpg”, etc…

Filed under: Blog, Tutorials

CSS variables with PHP

Want to have css variables in your css files?
Here’s a simple solution to have variables in your css.
Well, in fact this are PHP variables inside your css files.

Define all the variables that you want in your HTML document like this:

  1.  
  2. <?php
  3. $color1 = ‘#BB180E’;
  4. $color2 = ‘#666666′;
  5. ?>
  6.  

Use them in your CSS file like this:

  1.  
  2. h1 { color:<?php echo $color1 ?>; }
  3. p { color:<?php echo $color2 ?>; }
  4.  

Here you can see an example.

Filed under: Tutorials

Active Tab with Prototype and Ajax

I assume some basic knowledge on HTML/CSS, PHP and Javascript.

Problem:
Creating a Tab navigation menu with an active state menu item with javascript and update corresponding content width Ajax.

Here is a screenshot of the final solution:

ajaxtab_nav.png

You can see the final solution here.

Solution:

    Part 1
    ajaxtabnav_files.png

  1. Create the following file structure:
    • index.php - main file;
    • main.css - to style everything;
    • protoype.js - download Prototype library here;
    • content.php - the file with the content that will be used to update some div in index.php
Filed under: Tutorials

Preventing directory listing using .htaccess

A simple way to prevent directory listing is using .htaccess file in the target directory.
Imagine that you have a config folder in your site (www.mysite.com/config/) and you want to protect that folder by blocking users from listing the directory contents. To do this:

  1. Open notepad or any other text editor of your choice.
  2. Insert the following content:
    1.  
    2. Options -Indexes
    3. <files .htaccess>
    4. deny from all
    5. </files>
    6.  
  3. Save the file as “.htaccess” inside the target folder (”www.mysite.com/config/”).
Filed under: Tutorials

Introduction to Tutorials Section

First of all, sorry about my English and feel free to correct it.
The reason that I’m writing the tutorials in English is to provide a better way to help all the people like me who constantly seeks the web’s best solutions to their projects. This way I can communicate to a wider audience providing the tutorials in a language that most people will understand. Sometimes it’s a little difficult to me to write in English but I will try to do my best.
The tutorials that I intend to write are very straightforward. What I want to say is that I’m not going to talk about the things you have to know to understand the toturial. I will go just straight to the point. Meanwhile feel free to contact me if you have any questions that doesn’t relate directly with the tutorial itself.
For example, imagine that I’m writing a tutorial about how to implement tab navigation using Ajax with Prototype Library (available soon). In this case I’m not going to explain javascript syntax.. but if you have any questions that relates to the syntax itself you may always contact me and I will try to explain you the best way I can.

Filed under: Tutorials