In this tutorial we will show you how to set up Joomla(2.5 or 3.0 and up) in Dreamweaver CS6 so that you may edit the CSS of your layout while still making good use of Dreamweaver’s great productivity tools. One warning before we proceed though, Whilst working with Joomla in Dreamweaver CS6 do not edit any of the core Joomla files. This goes for all of Joomla’s PHP and CSS files. Only work with the CSS files directly assosciated with the template you are working on. If it isn’t a CSS file you should probably not be using Dreamweaver for this task. If you touch anything else the risks of you breaking something are significant.
In this tutorial we will show you the basics of the @font-face CSS3 property and how to use it. Although this guide is geared more towards using in a Adobe Dreamweaver CS6 or CS5.5 development environment it can be used not matter what editor you are using. Even other levels of Dreamweaver can use this tutorial, even though major support has been added to Dreamweaver CS5.5 and CS6 for CSS3 @font-face is not amongst the properties it has been expanded to include. Continue reading
In this quick tip I will show you how to create unevenly corners on a CSS3 HTML element. There is a lot of information out there on how to create evenly rounded corners but not a lot on how to create a more elongated rounded effect on our corners.
CSS3: Uneven Rounded Corners
Unevenly rounded corners only works on the… Continue reading
Today I thought I would share three interesting tools for developing Phone Apps for users of varying levels of experience. All of these tools are free or open source programs. These three Phone App development tools are great for what they are designed to do. However each has its own natural limitations. Some requires some skill to use others do not but are then limited in what you can actually build with it. Continue reading
In this tutorial we will cover some of the things you need to seriously consider when designing button for a mobile app or website.These buttons are naturally going to be the core of any mobile application yet many designers over look the obvious ways in which these buttons must differ from our more traditional navigational elements.
With the increasing presence of mobile devices on the web and with more and more people accessing the web on more and more mobile devices every day this has gone from being an optional exercise for a web developer to a necessity.
Due to the restricted space on a mobiles screen we are faced with major challenges in how do we redesign our site to be more mobile friendly. To further complicate things every week, even daily new screen sizes are added particularly in android. So how do we deal with them. Lets start in this series of tutorials by breaking down and looking at the common elements, the things that regardless of screen size we need to look at as a designer to make the switch to mobile. Continue reading
In this tutorial we will show you how to make changes to the header of your Moodle 2.1 custom theme using Dreamweaver CS5.5. We will concentrate on changing the background of our header and the text contained within it. If you wish to change the logo or add one I have already done a tutorial on this so I won’t be covering that in this article.
To add a Logo to your header see this tutorial:
In this tutorial we will be concentrating on using Dreamweaver CS5.5 to add a logo to your Custom Moodle theme. Before you go ahead with this tutorial you should make sure that you have already set your Moodle server up and that the theme you are going to edit is ready to edit before proceeding. If you have not already done so please check out the following articles then we can begin to edit your Moodle themes header and footer ready for deployment to the web.
- Dreamweaver CS5.5: Create Custom Moodle 2.0 Themes in Dreamweaver CS5
- Moodle 2.1: Getting a Theme Ready to Edit
Although I am using Dreamweaver CS5.5 for my run through everything that I do is exactly the same in Dreamweaver CS5 and CS4.
Note: This method is based loosely on the Methods used in the older style Moodle setups. This will work more often than not however there there is an easier way to do this so please visit that tutorial to see if that will work for you before proceeding with this now outdated method. (some themes may still need to do things using this method.) This method is usually used if the code that places the Logo in your header has been removed from the theme you are basing your Custom theme on.
In this tutorial we will show you how to set your Moodle theme up ready for you to edit it to your hearts content. We will show you how to get the name of your Moodle theme to show up properly in the themes selection menu, edit the basic information of your theme and how to get Moodle to show any changes you have made to the CSS. Many beginners have problems with these three areas in particular having their CSS changes not show up in Moodle.
Although I am using Moodle 2.1 for this tutorial these changes are all exactly the same in Moodle 2.0 and Moodle 1.9. Although I am not sure about earlier versions they would fairly similar to the changes in these versions. Continue reading
This is more of a tip than an actual tutorial but we will be showing you how to round off the corners of an image using just CSS3. This tip will work for all browsers except for a few older IE versions.
In this tutorial we will show you how to create your own Youtube Theme (or template what ever you prefer to call them)in Fireworks CS5.5. First we will show you the best way to set up your background image and then we will go into putting it in on your YouTube account and adding the final touches that have to be done actually in YouTube.
Remember we do not have access to CSS in a YouTube theme so we are limited in a lot of ways when it comes to our custom themes however with a little imagination you will still be able to create amazing profiles.
As an example I have put one up on my YouTube for you. Feel free to take a look and comment.