The Joomla! Forum ™



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.



Post new topic Reply to topic  [ 14 posts ] 
Author Message
PostPosted: Thu Nov 24, 2011 2:46 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Nov 24, 2011 2:37 am
Posts: 10
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.


Top
 Profile  
 
PostPosted: Thu Nov 24, 2011 9:23 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Nov 15, 2011 10:30 pm
Posts: 43
Location: Romania
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


Top
 Profile  
 
PostPosted: Sun Nov 27, 2011 3:37 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Nov 24, 2011 2:37 am
Posts: 10
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.


Top
 Profile  
 
PostPosted: Sun Nov 27, 2011 5:48 am 
User avatar
Joomla! Guru
Joomla! Guru

Joined: Wed Sep 21, 2011 8:21 pm
Posts: 936
Location: on earth
Do you have a link to your site?


Top
 Profile  
 
PostPosted: Mon Nov 28, 2011 7:56 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Nov 24, 2011 2:37 am
Posts: 10
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.


Top
 Profile  
 
PostPosted: Mon Nov 28, 2011 4:02 pm 
User avatar
Joomla! Guru
Joomla! Guru

Joined: Wed Sep 21, 2011 8:21 pm
Posts: 936
Location: on earth
Ok, you should add margin-left in personal.css
Code:
h1#logo {
    margin-left: -20px;
    ...
}

and remove the max-width from position.css
Code:
#all {
    margin: 0 auto;
    /* max-width: 1050px; */
    padding: 0;
    text-align: left;
}

Do make a copy of the original files, just in case ...

HTH


Top
 Profile  
 
PostPosted: Mon Nov 28, 2011 9:58 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Nov 24, 2011 2:37 am
Posts: 10
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?


Top
 Profile  
 
PostPosted: Mon Nov 28, 2011 10:01 pm 
Joomla! Hero
Joomla! Hero

Joined: Sat Aug 29, 2009 3:08 am
Posts: 2301
Location: Akron PA
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_Firebug_With_Your_Joomla_Website

_________________
http://alsweb.aembz.us


Top
 Profile  
 
PostPosted: Tue Nov 29, 2011 8:17 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Nov 24, 2011 2:37 am
Posts: 10
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'.


Top
 Profile  
 
PostPosted: Tue Nov 29, 2011 8:29 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Nov 24, 2011 2:37 am
Posts: 10
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.


Top
 Profile  
 
PostPosted: Tue Nov 29, 2011 8:57 am 
User avatar
Joomla! Guru
Joomla! Guru

Joined: Wed Sep 21, 2011 8:21 pm
Posts: 936
Location: on earth
Good to hear it works out.


Top
 Profile  
 
PostPosted: Tue Nov 29, 2011 10:26 am 
Joomla! Hero
Joomla! Hero

Joined: Sat Aug 29, 2009 3:08 am
Posts: 2301
Location: Akron PA
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.

_________________
http://alsweb.aembz.us


Top
 Profile  
 
PostPosted: Sun Dec 04, 2011 10:53 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Nov 24, 2011 2:37 am
Posts: 10
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?


Top
 Profile  
 
PostPosted: Mon Dec 05, 2011 2:23 am 
Joomla! Hero
Joomla! Hero

Joined: Sat Aug 29, 2009 3:08 am
Posts: 2301
Location: Akron PA
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?

_________________
http://alsweb.aembz.us


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 14 posts ] 



Who is online

Users browsing this forum: No registered users and 30 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group