Category: Joomla Tutorials

Joomla 2.5 – Unable to create directories in media manager

Issue error message -You do not have permission for this request /administrator/index.php?option=com_media&task=folder.create&tmpl=index
I am unable to create folders in Media Manager of Joomla 2.5

Solution: Edit the htaccess file

Commented out this from the .htaccess file inside of public_html

## Disallow visual fingerprinting of Joomla! sites (module position dump)
## http://www.slideshare.net/brianteeman/hidden-joomla-secrets
## Improved to work more efficiently and handle template
## and tmpl query parameters
RewriteCond %{QUERY_STRING} (^|&)tmpl=component [NC]
RewriteRule .* – [L]
RewriteCond %{QUERY_STRING} (^|&)tp= [NC,OR]
RewriteCond %{QUERY_STRING} (^|&)template= [NC,OR]
RewriteCond %{QUERY_STRING} (^|&)tmpl= [NC]
RewriteRule .* – [F]

Iheritance in CSS: Using Firebug to find the Gantry logo

Since I started using frameworks, I noticed that the complexity of using Firebug to track down the locations of CSS and images got to be a little more complicated.

You may have to go through a few extra steps to track down the source you’re looking for. Those of us who work with these things all the time often forget that what seems simple to us today, was very strange when we started. So I’m going to back up a step for beginners and show you a basic skill.

Using the generic Gantry Template as an example, we’ll show you:

  • How to locate the CSS code.
  • How to find the location of the logo graphic using a process of elimination.
  • Demonstrate inheritance in CSS.

Before you start

There are some requirements if you want to follow the example exactly.

  • Firefox as your browser .
  • Firebug installed as an add on.
  • The Gantry Framework installed on Joomla. (A test site is preferred.)
  • The Gantry Template installed on Joomla.

You can get both the framework and the template at http://gantry-framework.org. They are open source and there is no charge.

Looking at the statistics on my web visitors, Firefox is used by such an overwhelming majority, I’m going to use it as the sample. There are similar tools that work with IE and Chrome if you are familiar with them.

If you need Firefox and Firebug you can get them from http://www.mozilla.org/en-US/firefox/fx/.
You can get add-ons like Firebug here https://addons.mozilla.org/en-US/firefox/.

Open your home page in the browser

wpid2184-Open_your_home_page_in_the_browser.png

Right-click on the Gantry logo.
Choose Inspect Element from the context menu.

wpid2180-media_1324076922775.png

A split window will open and you will see
1. HTML Tab
2. The html code
3. The Style Tab
4. The CSS code
5. The name of the CSS file that has the code

wpid2181-media_1324078521289.png

In the Style pane you see the CSS for the logo. It’s #rt-logo and it’s on line 1 of template css.
The background image is located at – background-image: url("../images/logo/logo.png");

In a usual template, you could make a new logo.png and upload it to that directory, or you could go into the CSS file and change the location of the image by editing the url. This is where this gets a bit tricky with Gantry and other frameworks. I’ll show you what I mean.

As you run your mouse over the lines you see some gray circles. If you click one of those gray circles, Firebug will temporarily "turn off" that line so it is not active. You can bring it back by clicking again or refreshing the page.

wpid2182-media_1324078762016.png

Normally this would make the logo image disappear, but as you can see in the above image, it is still there. Obviously this isn’t the actual logo.

Look a little farther down the page and you see another section labeled #rt-logo, and there is a line through everything, except the background image. The strike through went away when you turned off the background image in the section above.

Now go down the line and click the circle next to the background image in the second section.

wpid2183-media_1324079293844.png

The logo has disappeared.

This happens because there are two style sheets that control things. In this case template.css and gantry.css. They can’t both be right so one will take precedence over the other. This demonstrates the idea of "inheritance" in css styling.

One way to replace this logo on your site would be to create another logo and name it header-assets.png and overwrite the one in the images file. Or you could open the gantry.css and change the url to the background image there.

Frameworks and more complicated templates use inheritance, which may introduce a little more complexity to your CSS work.

Next time you change the CSS coding, but don’t see any change on the site, you may need to look a little further to see which style sheet is really controlling the layout. You may need to change things in more than one location, so be sure you don’t give up too easily.

What’s New in Joomla 2.5

It looks like there are some simple improvements along with some profound improvements coming up next week.

For instance A little clean up with category filtering for articles, fixing some spacing and design tweaks, making things a little more convenient, adding a core search feature to name few.

According to Joomla.org , “Version 11.3 of the Platform has just been merged into the CMS and we are down to the last few weeks before 2.5! We plan to release Version 2.5 beta on or before December 20th.” There’s a lot of last minute testing going on, but we can give you a peek at what we see coming up.

Read more ...

Using AllVideos for Joomla

One of our students was having a problem getting 4 videos on a page in a neat little box. We wrote this quick tutorial for him.

Video, Audio, local or remote. AllVideos plugin will allow display of almost any type of media, and more than one on a page. If you can make a table, you make a nice video grid.

wpid2142-media_1323838053270.png.png

In this lesson we’ll show you how to download and install the plugin, then how to get the videos into the article. Unlike components, this plugin doesn’t create a link in a drop down menu for you to click on or a link beneath the edit window to insert anything.

You need to be able to write a token. In WordPress they call it shortcode, in Drupal it’s token. i’m calling it a token here. It’s a piece of code in an html document that gets replaced by information from somewhere else when the page is created.

If you use AllVideos, you don’t have to write any embed code or strict html. You can write the token directly into the editing window. It starts with a tag. By tag I mean something very similar to an HTML tag, but this one is special because it uses "{ }" curly brackets. Here’s an example : {mp4}yourvideofilename1{/mp4} Every token has a start-tag {mp4} and and end-tag {/mp4} the / tells you were to end like a period on a sentence.anywhere you place the tag a video is going to show up.

AllVideos lets you put the many different file types between the brackets for an incredible variety of choices.

To get several videos to line up in a square, your going to have to make a table. This will be a lot easier if you have the JCE editor. I show you how to do it with the tinyMCE editor and give you the table code so you can see that part of the process.

Step 1. Download and install

wpid2144-media_1323812096367.png

You can get AllVideos here http://www.joomlaworks.gr/content/view/16/42/

  1. After install go to Extensions > Plug-in Manager
  2. Search for allvideos
  3. Click the name AllVideos

Step 2. Specify video and audio folders

wpid2145-media_1323812158739.png
  1. In your images folder create two folders one called videos the other called audio.
  2. Upload your videos to the videos folder. Or if you already have them uploaded, change the path in the Local Video and Audio fields.
  3. Set the size of the default display window. with four on a page you probably want 300px or less depending on your layout.
  4. Decide whether you want the videos to autoplay or not (you probably want "NO").

Step 3. Save your work

wpid2140-media_1323812493401.png

Be sure to save.

Step 4. Add code to an article

wpid2146-media_1323812568602.png

Go to your article manager. Either add a new article or go to the article you want to manage.

Step 5. Creating a table

wpid2138-media_1323812713696.png

Access the HTML code view to enter the table code.

This step depends on which editor you are using and whether or not you know how to put a table into the article. I am going to assume you have the default tinyMCE editor and you don’t know much code. So if that’s you, click on "Toggle Editor" or the HTML in the menu.

In this example I clicked Toggle Editor

Step 6. Paste or write the table code

wpid2141-media_1323812895358.png

Copy and paste, or type this code into your window.
Then be sure to update and save the page.

<table width="80%" border="0" align="center">
<tr>
<td>{mp4}yourvideofilename1{/mp4}</td>
<td>{mp4}yourvideofilename2{/mp4}</td>
</tr>
<tr>
<td>{mp4}yourvideofilename3{/mp4}</td>
<td>{mp4}yourvideofilename4{/mp4}</td>
</tr>
</table>

wpid2147-media_1323813116436.png

Here’s what the table will look like in the editing view. You can do this without the table and all the videos will be stacked up.

1. You created a table to contain your videos. If you have ace, you can insert one from the toolbar. If not use the method above.
2. Into each cell you see the token. In this case the files we want to load end in .mp4.

So we’re going to put {mp4 } in curly brackets on the front, and {/mp4} in curly brackets at the end. Between those start and end tags we want to put the file name without the extension, like this – yourvideofilename – leave off the . and the extension letters.

Example
yourvideofilename1.mp4 – you write {mp4}yourvideofilename(/mp4} if the file ends in .swf you would put swf in the brackets. If it’s from YouTube you would put youtube in the brackets.

If you want to see examples of all the possible tags and tokens you can use, visit their documentation page:

http://www.joomlaworks.gr/content/view/35/41/

There is a great chart that’s easy to follow.

Step 7. Replace the text inside the token and between the brackets as needed.

wpid2143-media_1323844372884.png

Here’s what it looks like with YouTube videos. I changed mp4 to youtube in the tags. I put the YouTube video number between the tags. No need for embed code, and I can fit it in with normal html and css styling.

Step 8: 4 YouTube videos in a box.

wpid2139-Example_4_YouTube_videos_in_a_box..png

Here’s what the youtube videos look like. They are contained by the table, and the default size we set in the configuration step determines their width. You can do some customization in each individual article for some extra control.

Step 9. Advanced configuration

You can use syntax inside the start tag to change the appearance on the fly. The added syntax will override the defaults.

You can also use syntax like: {format/provider}filename|width|height|autoplay{/format/provider}. You use the pipe "|" character between each parameter.

For example, an "autoplaying" YouTube video of 100×150 dimensions would be displayed adding this to a content item:

{youtube}inTas4CAls_egj200|150|1{/youtube} – First in line is the file name, then the width, then heighth, and the final "1" indicates autoplay. If you don’t want autoplay, make this a "0".

 

Step 10. Remote streaming services

In the example of the mp4 above we used local media, which means it’s on the same server as the website. But you are not restricted to your own server. We already showed you how to use a streaming service – YouTube. There are many other services and all you need to do to use their media is to put the name of the service in the brackets. Here are a few examples

    {brightcove}1656387563{/brightcove}
    {yahoo}3169238/8981933{/yahoo}
    {collegehumor}1824771{/collegehumor}

Step 11. Remote from another website

You can get remote videos from any website if you know the media type and the full URL to the video. Here are some samples of how you write the tokens to get video from another site that is not a streaming service. You need to indicate it’s a remote source in the start tag.

{mp3remote}http://www.filehosting.com/pixies_bonemachine.mp3{/mp3remote}
{swfremote}http://www.filehosting.com/presentation.swf{/swfremote}
    {mp4remote}http://www.filehosting.com/nadasurf.mp4{/mp4remote}

That’s pretty much all there is to it. You just need to know the type of media, the location of the media and how to write the token. With this knowledge you can put any video or audio source on your website. Combine it with text and a little formatting with tables or divs, add some syntax to the tags, and you can create any arrangement you want to fit your design.

Hika Cart USPS Shipping Module

Right after I published the tutorial on Hika Shop, I got several inquiries about USPS Shipping. There is a module for it, it’s free, but it’s a little hard to find. Here’s where to get it and a short tutorial on how to use it.

Read more ...


Enter your email address to subscribe to this blog and receive notifications of new posts by email.