Build a Joomla Website Forum

Free Joomla support for all and priority support for members.

0
Hi everybody,

OK, first things first yes I am very much still a newbie and I'm testing stuff on test sites using Joomla 2.5.x. However, as my site still won't be ready for a few months and because the official Joomla site states "Joomla 3.0 is the newest version recommended for most new installs" I'm testing stuff on a Joomla 3.0.x test site as well.

The Protostar template looks good and I've created a copy of it (with a new name) so that I can customise it. The Protostar template allows you to have either title and description or logo and description but not all three. I wish to use the description as the tag line.


  1. Logo (square 50 x 50 or 100 x 100 pixels)
  2. Title
  3. Description (used for website tag line)


I'd like the logo to be in the top left hand corner, with the title on the right hand side of the logo and the description below the title.


#logo# Title
#logo#
#logo# Description


Would somebody please recommend how I achieve this and which files (if necessary) I need to change?

I'm not worried about making modifications to template files as I am using a copy of a template. So it's not a problem if I do make a mistake. ;)

Many thanks,
Responses (10)
  • Accepted Answer

    Thursday, May 30 2013, 03:58 AM - #permalink
    0
    Hi Laurie and Les,

    Firstly apologies for not replying sooner. things have been really busy. However I'm back again now.

    I had some help (over at The Joomla! Forum), I've now got the logo, site name, and tag line all on the page. The main reason to do this was to experiment on the fly using Firebug for Firefox. This has been good as it has allowed me to quickly test fonts and sizes, however you are right - it is best to use a logo with everything in.

    Many thanks for the GIMP instruction, they are brilliant and I will use them to learn GIMP when my site is nearer completion - I'm just doing the bare bones and structure at the moment.

    Thanks for the advice on Artisteer, I have downloaded the trial version but for the moment I'm happy with the Protostar template. Once the site is nearer completion the I will experiment with templates.

    Kind Regards,
    The reply is currently minimized Show
  • Accepted Answer

    Les
    Les
    Offline
    Saturday, March 23 2013, 08:46 AM - #permalink
    0
    Laurie said: Artisteer would be an excellent choice for easily getting full versatility though I don't know if it will give you those three elements in the head as individual elements.

    Artisteer 4 will provide the ability to place multiple texts and multiple images over the top of a header image. You can overlay many images. I stopped at 4 on one header. It is very easy to accomplish.
    As to some of your other questions about Artisteer 4, Mike would probably be the most fluent with the new release.
    The reply is currently minimized Show
  • Accepted Answer

    Saturday, March 23 2013, 08:31 AM - #permalink
    0
    Artisteer creats Artisteer templates. It creates templates for Joomla, Wordpress, Drupal and html sites. So you could create an Artisteer template for a Dreamveaver built site. Artisteer is not an HTML editor.

    In order to edit your Joomla template, Prostar or other, you'll need your HTML editor, same with the Kunena template.

    Artisteer would be an excellent choice for easily getting full versatility though I don't know if it will give you those three elements in the head as individual elements.

    You don't need all three elements in the one graphic, only the logo and title. you can then use image and description. This would be the way to go.

    In GIMP it's quite easy, far easier, I would think, than altering the template if you are not a php whizz.

    * Create a new, blank image with a white background, at the size you want.

    * Create a new layer with transparent background.

    * Open the logo image, scale it to the size you want, paste it onto the new layer, and position it where you want. Anchor the floating image to the layer.

    * Create a new , transparent layer.

    * Create the site title graphic text at about the size you want and scale it correctly. Depending on how you create the graphic text, you may be able to tick the box for transparent background or you may be able to delete the background layer.

    * Paste the title graphic onto the new layer, move and anchor.

    * Save this as a .xcf file so you can come back and edit it if need be.

    * Delete or turn off the original layer with the white background.

    * Merge Visible Layers.

    * Save a Copy as a .png file.

    Your done! Easy wasn't it. Nobody told me that. I had to learn it all for myself from scratch.

    From an SEO viewpoint, I'm not so sure you want your site title and description as the first thing on every page. That's one of the reasons to use a graphic.

    You want the site title and description as the first thing on the home page and you can do that using the opening article title, and a sub heading or bolded text for the description somewhere near the beginning.

    Then on every subsequent page, you have your article title first up, for the search engines as well as visitors.

    Put the site title in the copyright statement in the footer of every page, or some such.

    Ask your self why it is that most templates give the header options that Prostar gives or else only allow the graphic or text. Maybe they're too lazy, just don't know how or never thought of it. ;)

    Best wishes with it. Let's know what you decide and how you go.
    The reply is currently minimized Show
  • Accepted Answer

    Saturday, March 23 2013, 04:58 AM - #permalink
    0
    Hi Les, one of the first things that I learnt in IT was to ensure that you always had a backup, the second thing to learn was how to use that backup to restore! The real way to impress users was to have undocumented automated backups (in addition to the regular ones) so when they asked for a restore you could offer the user a restore to a particular part of the day as well as the full/incremental ones. Whilst I was in IT for a long time, I was never a programmer as such. I coded things mainly to make my job easier and to offer better assistance to my users, although a few pieces of my code did get into production.

    I might try Artisteer, I have to admit I'm a little nervous of buying something like that because in the past I bought Adobe Dreamweaver but ended up using Notepad++ to code the HTML and CSS (as well as to slightly modify some javascript) required for my wife's business website.

    Can Artisteer deal with Joomla 3.x.x?
    Would I be able to edit/modify the Joomla 3 Protostar template in Artisteer?
    I would like to use the Kunena forum extension when it is ready for Joomla 3, can Artisteer create/modify Kunena templates?

    Kind Regards,
    The reply is currently minimized Show
  • Accepted Answer

    Les
    Les
    Offline
    Saturday, March 23 2013, 04:27 AM - #permalink
    0
    Hi Robert, I had to smile when you talked about being an old IT guy, me too. I lost the desire to get into heavy coding and I enjoy the newer code generation systems. Leaves more room for creativity and less drudgery.. There are other Template softwares that will let you do exactly what your looking for. I think Artisteer $ has a trial version. I got it a while and it was well worth the little money they ask for it. It can be simple or it can be very in depth. It just depends on what you want to do.
    The reply is currently minimized Show
  • Accepted Answer

    Saturday, March 23 2013, 04:16 AM - #permalink
    0
    Hi Les, Laurie, Tristan,

    Many thanks for your replies. The general consensus of opinion is that it is best to create a single graphic of combined logo, title, and description (tag line).

    I have a number of graphics programs (the main two I use are Microsoft Paint and GIMP) however my graphics skills are poor. The logo is a good graphics on its own (created by a professional) and I would rather have the three separate entities controlled by CSS. This would allow me the luxury of adding/changing a background graphic as and when I like as well as the ability to use Firebug to test positioning of the entities.

    The fact that the template currently allows only title and description or logo and description indicates that there is some piece of code somewhere (probably in the index.php or template.php file), so Tristan has come nearest to answering my question.

    Sounds to me, Mate, as though you're taking on far more than you are capable of. I would think you'll need to hard code the template.php file. Are you php literate?

    I was in IT for more than 20 years, most of which were involved with mainframe computers. I've coded in JCL, RPF, TSO (script), REXX, and a number of third party application coding languages. No, I'm not PHP literate, however what I have studied of PHP seems to indicate that it has similar structure to other languages. The most important thing is that I’m willing to learn by having a go.

    I've created a copy of the template, if I change something and it fails then what is the worst that can happen on a test site - surely that's the whole ethos of Joomla being open source?

    Can anybody give me a clue of where the code is that determines that it's either logo or title?

    Kind Regards,
    The reply is currently minimized Show
  • Accepted Answer

    Les
    Les
    Offline
    Friday, March 22 2013, 01:55 PM - #permalink
    0
    Well Robert, you just got basically the same answer from three of us.... use paint shop or Corel or any graphic Editor and make your header in on image file and it will be the easiest solution.
    Go for it...
    The reply is currently minimized Show
  • Accepted Answer

    Friday, March 22 2013, 01:07 PM - #permalink
    0
    Hi Robert,
    If you're comfortable editing HTML and PHP files, you can edit your template's index.php file and hard code your logo and text there, where the original logo is. Otherwise, you'll need to check your template's settings in Template Manager and try to figure how to go about it from there. One thing I can suggest - use an image editor like Gimp, Adobe Fireworks or Photoshop or even MS Paint to create your title, logo and description as one whole image and then use your template manager to upload that image as your logo.
    The reply is currently minimized Show
  • Accepted Answer

    Friday, March 22 2013, 10:00 AM - #permalink
    0
    G'day Robert!

    Sounds to me, Mate, as though you're taking on far more than you are capable of. I would think you'll need to hard code the template.php file. Are you php literate?

    A better alternative, if you really must have all that, would be to create a logo image that includes both the logo and text as image.

    Keep in mind that you are using a responsive template. Some, maybe most, responsive templates have the header also responsive. However, the template that I use does not which means that I have to keep the header image to about 160px wide in order to fit properly into a vertical phone. So you should check this out for your own template before you go too far.

    However, the best solution in my view would be to be content with what the template developer gives you and happily get on with the tasks of learning Joomla and building your website.

    You can spend an awful lot of time editing a template, trying to do a better job than the experts, and be no further ahead at the end.
    The reply is currently minimized Show
  • Accepted Answer

    Les
    Les
    Offline
    Friday, March 22 2013, 08:56 AM - #permalink
    0
    Most templates will allow the placement of an image in the header. They also try to make it easy for a user to put in Title, Tag Line or Logo but they do limit it. If you choose Title and Tag Line through their menu, you should also be able to ad an image to the header and place it where you want. That being said, Template managers do vary. If your Template manager only allows one large image i the header, you may have to choose the main image and then overlay your Logo on top of the image using an editor. Save that image and then load it to the Template manager. Artisteer 4 added the function to add multiple images to the header on their last releases.
    It just takes a little creativity sometimes and a few more steps.
    Good Luck
    The reply is currently minimized Show
Your Reply