Cannot align logo to extreme left of page

Everything to do with Joomla! 2.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Locked
Bryboy
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Thu Nov 24, 2011 2:37 am

Cannot align logo to extreme left of page

Post by Bryboy » Thu Nov 24, 2011 2:46 am

I have inserted a .jpg file as a logo in place of the Joomla header. But I cannot get it to align to the extreme left of the page. I have spent much time going through my personal.css, template.css, position.css and layout.css without any success. Can anyone help? If it helps anyone I can give you the site details.

aerconditionat
Joomla! Apprentice
Joomla! Apprentice
Posts: 43
Joined: Tue Nov 15, 2011 10:30 pm
Location: Romania
Contact:

Re: Cannot align logo to extreme left of page

Post by aerconditionat » Thu Nov 24, 2011 9:23 am

If you use a template you must make the new logo like the old one, not bigger or smaller, all the template it's made in a way to work with a specific dimension of logo.
I love to Help and to receive help.
http://www.aerconditionat-shop.ro

Bryboy
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Thu Nov 24, 2011 2:37 am

Re: Cannot align logo to extreme left of page

Post by Bryboy » Sun Nov 27, 2011 3:37 am

Thanks aerconditionat, apologies for the delay in replying. Two 14 hour days at work!

My problem came about because originally I had inserted a .png file in place of the joomla header which was exactly the same size as the header. It worked fine except that when you opened the website the blue background was still there and the .png file then superimposed on the blue background. Not a good look especially for those on slower computers.

I didn't like this so thought I would try a work around. I edited personal.css and was able to get rid of any header at all. Then I went and inserted a .jpg copy of my .png as a logo. But this is where it no longer aligned to the left of the page and part of the Logo bled off the side of the page and was not visible. As far as I am aware the .jpg was the correct size.

I actually overcame the problem by making the .jpg smaller which meant that it fitted on the page and no longer bled off the right hand side of the page. I'm hoping this is a temporary fix until I can find a solution to the blue background coming up with my first (and preferred scenario).

So I would be interested in a solution to the two problems if possible.

1. How to stop the blue background from appearing before the .png image comes up in the header.

2. How to move the logo to the extreme left side of my page which then means it could be returned to it's original size and not bleed off the right hand side of the page. Maybe there is a restriction on how far a logo can be moved to the left, I am still trying to learn these things.

I still hope someone can help.

User avatar
duyet
Joomla! Guru
Joomla! Guru
Posts: 935
Joined: Wed Sep 21, 2011 8:21 pm
Location: on earth
Contact:

Re: Cannot align logo to extreme left of page

Post by duyet » Sun Nov 27, 2011 5:48 am

Do you have a link to your site?

Bryboy
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Thu Nov 24, 2011 2:37 am

Re: Cannot align logo to extreme left of page

Post by Bryboy » Mon Nov 28, 2011 7:56 am

Hi duyet, link to the site is http://www.taurangabapt.org.nz. Appreciate any help you may be able to give. You will be able to see where the logo is positioned in relation to the page. I would like it to be hard left aligned so that I can make the image larger and not have it bleeding off the right hand side as it was initially.

User avatar
duyet
Joomla! Guru
Joomla! Guru
Posts: 935
Joined: Wed Sep 21, 2011 8:21 pm
Location: on earth
Contact:

Re: Cannot align logo to extreme left of page

Post by duyet » Mon Nov 28, 2011 4:02 pm

Ok, you should add margin-left in personal.css

Code: Select all

h1#logo {
    margin-left: -20px;
    ...
}
and remove the max-width from position.css

Code: Select all

#all {
    margin: 0 auto;
    /* max-width: 1050px; */
    padding: 0;
    text-align: left;
}
Do make a copy of the original files, just in case ...

HTH

Bryboy
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Thu Nov 24, 2011 2:37 am

Re: Cannot align logo to extreme left of page

Post by Bryboy » Mon Nov 28, 2011 9:58 pm

Hi Duyet, thanks for help. We have made some progress. The Logo now aligns with the left hand side of the search box which is what I wanted. But now the whole page has moved to the extreme left and is out of alignment with the 'powered by joomla' bar at the bottom of the page. I want the Logo to be where it is but the Logo and Main Menu to be lining up with the left hand side of the Grey bar at the bottom. Any ideas?

aemiller
Joomla! Hero
Joomla! Hero
Posts: 2301
Joined: Sat Aug 29, 2009 3:08 am
Location: Akron PA
Contact:

Re: Cannot align logo to extreme left of page

Post by aemiller » Mon Nov 28, 2011 10:01 pm

If you have not yet done so, I would recommend that you download and use the Firefox plugin Firebug. This greatly simplifies the process of finding css code. Firebug will tell you the name of the css file and the line number of the element that you want to change. You can also make changes on the screen to see how that change will look before you make the change in the css file.

Firebug https://addons.mozilla.org/en-US/firefox/addon/1843/
Firebug Tutorial http://docs.joomla.org/Tutorial:Using_F ... la_Website

Bryboy
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Thu Nov 24, 2011 2:37 am

Re: Cannot align logo to extreme left of page

Post by Bryboy » Tue Nov 29, 2011 8:17 am

Thanks aemiller. I have Firefox and Firebug on one of my computers but am not confident using it yet. Will take time to view the tutorial you mentioned as it would be brilliant to be able to see the effect of any change before comitting to it. I'm hopeful that someone can help me get the alignment corrected as we are almost there I feel. Hopefully it's not a case of 'so near but so far away'.

Bryboy
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Thu Nov 24, 2011 2:37 am

Re: Cannot align logo to extreme left of page

Post by Bryboy » Tue Nov 29, 2011 8:29 am

Hi all, just to let you know that I undid the 'max-width: 1050px;' removal and this has fixed the problem

Code:
#all {
margin: 0 auto;
max-width: 1050px; /*Returned this line which fixed above problem*/
padding: 0;
text-align: left;
}

so all that was needed to fix my original issue was the change to the left-margin code as follows:

Code:
h1#logo {
margin-left: -20px;
...
}

Thanks heaps for all your help. Great.

User avatar
duyet
Joomla! Guru
Joomla! Guru
Posts: 935
Joined: Wed Sep 21, 2011 8:21 pm
Location: on earth
Contact:

Re: Cannot align logo to extreme left of page

Post by duyet » Tue Nov 29, 2011 8:57 am

Good to hear it works out.

aemiller
Joomla! Hero
Joomla! Hero
Posts: 2301
Joined: Sat Aug 29, 2009 3:08 am
Location: Akron PA
Contact:

Re: Cannot align logo to extreme left of page

Post by aemiller » Tue Nov 29, 2011 10:26 am

I'm glad to hear that you got it. Now go back to your original post. At the beginning of the subject line, add the word [SOLVED!] and the green circle check mark.

Bryboy
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Thu Nov 24, 2011 2:37 am

Re: Cannot align logo to extreme left of page

Post by Bryboy » Sun Dec 04, 2011 10:53 pm

Hi aemiller, I feel fairly ignorant asking this but if I'm going to be able to do it in the future I'll need to know. I was able to insert [SOLVED] but could find absolutely no way of getting the green circle check mark in to the subject line. Can you help one last time?

aemiller
Joomla! Hero
Joomla! Hero
Posts: 2301
Joined: Sat Aug 29, 2009 3:08 am
Location: Akron PA
Contact:

Re: Cannot align logo to extreme left of page

Post by aemiller » Mon Dec 05, 2011 2:23 am

This may have something to do with the length of time since the original post. On occasion other people have said they had difficulty doing that.

Or does someone know a different answer?


Locked

Return to “Templates for Joomla! 2.5”