Template design tutorial!

Discussion in 'Tutorials' started by Lhotch, Apr 20, 2006.

  1. Lhotch curmudgeon

    Ok, after typing my fingers to the bone over the last few days I have put together a little tutorial to help people better understand the 68 Classifieds template system and to help guide you through not only creating the new images, but slicing them up and modifying the css to make use of them.

    Tutorial PDF

    If you find any blatant errors etc please feel free to let me know and I can update it.
    1 people like this.
  2. calaf6 Customer

    THANK YOU

    I have only browsed the first bit, but it makes sense and is easy to read, it is printing now, and I will be taking it to read on the train to/from work.

    The first thing I have realised is I should have got photoshop - I have been using Pain shop pro which does not look as easy to use
  3. build Customer


    Hi calaf6


    using Pain shop pro was that a pun ?

    First time we have met I think

    What version of PSP do you have?

    Yes when I had a look at the help pdf I thought the same, I wish I could afford the price of it.

    I have been useing PSP since it first came out.
  4. calaf6 Customer

    Hi John,

    Yes its the first time we have met *shakes hands*

    That was not intended at all now that you have pointed it out I wish it had been!!

    I'm not sure which version I have, I only got it about 18 months ago, so it would be reasonably up to date. I find it very frustrating to use though. I will give it a go over the weekend, and see if I can find someone with photoshop as well so I can compare.
  5. Lhotch curmudgeon

    If you happen to be a studen *wink wink* you can get the latest version of photoshop CS for under $300

    http://www.studica.com/products/product_detail.cfm?productid=46807

    Im sure you can accomplish the same things in PSP that I did in photoshop it just wont be as easy. Cutting up images for example could be done in a different application just using the crop tool or selection and copy tools, it would just be more cumbersome to cut the image up that way.

    Calaf, if you make an image and want me to cut it up for you let me know, I could probably cut it up in just a few minutes and send you back the layout.html and images.
  6. calaf6 Customer

    Thanks for that Larry unfortunately I would be a bit 'mature' for a student, nearer to granny status than student

    I will have a look in our cd collection here (work) in a while, as its nearly home time for those who do normal hours, but if I have a problem I may well take you up on that offer, thanks a lot
  7. Lhotch curmudgeon

    Just an update. After creating the tutorial I took the whole /orange template and copied it over to my V3.1 beta install and it appears to work fine for the new version as well.

    The only issue I had was that my template was looking for folder.gif in the /orange/images folder and it didnt exist so I copied it over from the /images to /templates/orange/images .
  8. Eric Barnes Guest

    Also a small change was made in v3.1 where it uses an array of template directories. This way if you just want to replace the layout.tpl.php file you can create a new template folder and just include it. It will look for the templates inside your designated template folder first and if it isn't found it will go to the default. This way you do not have to copy all the files out, just the ones you need. Also this wasn't added until recently so the latest beta may not include this.
  9. civ Customer

    Ok that is just plain awesome.
  10. calaf6 Customer

    Thats good news, thanks for confirming as I will kick on and finish the one I am doing this weekend.

    Photoshop is definately easier than Paint Shop Pro as well
  11. Kateedyd Customer

    New and need LOTS of HELP on Template!

    Hello,
    I am brand new to 68classifieds and this forum. I have purchased the hosted version, created my categories and hit a brick wall. I have tried to read the tutorial, but I don't have Photoshop or even know what it is. Don't know what cascading sheets are and don't know html. I was understanding that I didn't have to know html to build this site. Soooo, as far as the tutorial, I don't have a clue what is being discussed. Although, reading farther in about the layering is very familiar to me. I have built websites with layering (copy and paste and drag and drop). I feel if I could just get started I may be O.K. with time. I thought I may could at least go in and change the colors, but I don't know the color numbers and the site in the tutorial doesn't come up.
    Also, I am using the default, but if I wanted to change to the blue or green, how do I do that?
    Where can I find the control panel? What about FTP? I have the Usernames and passwords but can't find the page.
    I am feeling really DUMB about this, because everyone talks about how easy it is. I have been wanting and trying to get this classified site built for nearly three years, and I really want this to work. Can somebody PLEASE help me by giving me some instructions for a first grader to get me started?
    Ava:
  12. Lhotch curmudgeon

    Kateedyd, 68classifieds, like most interactive web sites, combines a lot of different components to control its collection and display of data.

    I have no formal training in programming or anything web related and just learned on the fly. With a little tenacity, ambition and some time I dont think you should have a problem picking up the basics. The biggest hurdle right now appears to be a lack of an overall internet foundation.

    I guess if I were in your shoes, I would visit

    http://www.w3schools.com/default.asp

    There are many good examples and tutorials on HTML (hypertext markup language)and CSS (cascading style sheets). These are what is used to control how your pages look, their colors etc.

    In the right column near the bottom are a couple tutorials called "my first html" and "my first css" they give you a short crash course on what html and css is.

    If you still need more to sink your teeth in just do a google search for beginner html tutorials.

    the "Dummies" series of books are also very good when you are starting from the ground floor.

    HTML 4 For Dummies (Html 4 for Dummies)

    and

    CSS Web Design For Dummies (For Dummies (Computer/Tech))

    would be a couple good books to get. They are usually written for the total novice and very easy to understand and follow along with.
  13. calaf6 Customer


    I am probably a second grader!! so I can really understand what its like to be confused
    The site that Larry gave a link to is very good, helped me a lot.

    I would not think about the tutorial for now, as its best if you get used to the files and the program first, the tutorial is fantastic, but not something you would want to be starting with as you do need to be confident with the software first.

    I knew nothing about css or php until I came on here, and with a lot of help from everyone on here I have managed to get 2 sites running using this software, and am ploughing slowly through a third (the really hard one!!). When I did the first one I needed a lot of 'hand holding' but now I am quite happy playing with the files and trying things not always successful, but the program has not broken yet!!

    FTP, is File Transfer Protocol - how the files are transferred onto the server, and on the server you have a control panel where you can do all sorts, like set up email addresses and see site visitors statistics.

    You can access the css file from the admin panel in v.3.1 which is where you change the colours. I use THIS SITE to get the colour code - you want the 6 digit hex (after the # on the left of the screen) just put it into the css file and save, and the colour will change on the site. On that site the Studio (link on the right of the screen gives you ideas for colours that go well together.

    A good tip the guys on here gave me was to use Firefox as it will show your css file to the left of the screen, and you can see the effect of changing things immediately. Then you copy the css and paste it into your own file.

    If you want to change the template, log into your admin area, and look for the Main Settings, then about half way down the screen there is a box called Site Template, click on the one you want to use.
  14. Kateedyd Customer

    Thanks for Help

    Thanks for your help. Maybe I can get a grip on SOMETHING and at least get started. I'm more than sure you will be hearing back from me very soon and quiet often.
    Ava
  15. Kateedyd Customer

    CHMOD to 777?????

    O.K. It's only been 10 minutes and I'm back. Changed my template and looking around in the file. Have message that the file can't be written as is. The CHMOD needs to be changed to 777. What does this mean, and do I need to do this at this time?
    Ava
  16. Chaslie Moderator

    Ava,

    What FTP program are you using? That is, how have you uploaded the 68 Classifieds script?
  17. Kateedyd Customer

    Upload?

    I haven't uploaded anything. I emailed support and asked what I needed to do to DOWNload the script. they said I didn't need to DOWNload anything because I have the hosted version. I didn't think to ask about UPloading. This could very well be why I can't get anywhere.
    Please give me instructions!
    Ava
  18. mazarron.com Customer

    Hi,

    I am using PSP V9 and it has an Image Slicer which works fine. Access to it is a bit obscure (until you think about it ... ) File --> Export --> Image Slicer.

    I've been using PSP for yearrrrrrs, and I think it's great - beats Photoshop hands down on price versus performance. Haven't found anything I could not do with it.

    Good luck
  19. dpendleton Customer

    Broken Link

    Hi, Just tried to download the PDF and I get a error 404, does anybody have the tutorial?

    Thanks,

    Dan
  20. dpendleton Customer

    Never mind!

    Blair has fixed the link...

Share This Page