Cannot align logo to extreme left of page
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.
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.
-
- Joomla! Apprentice
- Posts: 10
- Joined: Thu Nov 24, 2011 2:37 am
Cannot align logo to extreme left of page
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.
-
- Joomla! Apprentice
- Posts: 43
- Joined: Tue Nov 15, 2011 10:30 pm
- Location: Romania
- Contact:
Re: Cannot align logo to extreme left of page
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
http://www.aerconditionat-shop.ro
-
- Joomla! Apprentice
- Posts: 10
- Joined: Thu Nov 24, 2011 2:37 am
Re: Cannot align logo to extreme left of page
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.
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.
- duyet
- 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
Do you have a link to your site?
-
- Joomla! Apprentice
- Posts: 10
- Joined: Thu Nov 24, 2011 2:37 am
Re: Cannot align logo to extreme left of page
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.
- duyet
- 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
Ok, you should add margin-left in personal.css
and remove the max-width from position.css
Do make a copy of the original files, just in case ...
HTH
Code: Select all
h1#logo {
margin-left: -20px;
...
}
Code: Select all
#all {
margin: 0 auto;
/* max-width: 1050px; */
padding: 0;
text-align: left;
}
HTH
-
- Joomla! Apprentice
- Posts: 10
- Joined: Thu Nov 24, 2011 2:37 am
Re: Cannot align logo to extreme left of page
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?
-
- 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
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
Firebug https://addons.mozilla.org/en-US/firefox/addon/1843/
Firebug Tutorial http://docs.joomla.org/Tutorial:Using_F ... la_Website
-
- Joomla! Apprentice
- Posts: 10
- Joined: Thu Nov 24, 2011 2:37 am
Re: Cannot align logo to extreme left of page
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'.
-
- Joomla! Apprentice
- Posts: 10
- Joined: Thu Nov 24, 2011 2:37 am
Re: Cannot align logo to extreme left of page
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.
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.
- duyet
- 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
Good to hear it works out.
-
- 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
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.
-
- Joomla! Apprentice
- Posts: 10
- Joined: Thu Nov 24, 2011 2:37 am
Re: Cannot align logo to extreme left of page
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?
-
- 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
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?
Or does someone know a different answer?