Joomla Tips – Remove Whitespace Beside Logo in Beez_20 Template

by Elaine on April 18, 2011

Joomla TipsJoomla 1.6 template – Beez_20 is easy to configure.    You can basically change the layout of the Beez_20 template by modifying the Joomla 1.6 template css file.  For example you can reduce or remove the margins or borders of your Beez20 template by modifying the personal.css file.   Remember to make a backup of your personal.css file in case you change/remove code accidentally.  Below are steps to remove the whitespace/margins/border on the right and left side of the Beez_20 Joomla 1.6 template.

1.  Login to your file server backend or FTP server

2.  Edit the file ‘templates/beez_20/css/personal.css’

3.  Change this line:

From:

.logoheader {
background: url(“../images/personal/personal2.png”) no-repeat scroll right bottom #0C1A3E;
color: #FFFFFF;
margin: 0 10px 0 !important;
min-height: 200px;
}

To:

.logoheader {
background: url(“../images/personal/personal2.png”) no-repeat scroll right bottom #0C1A3E;
color: #FFFFFF;
margin:0px;
min-height: 200px;
}

After you save your personal.css file and refresh your Joomla 1.6 website, you should see that your template now is full width with no margins or padding on the side.

 Joomla Tips   Remove Whitespace Beside Logo in Beez 20 Template

Elaine

Elaine is the founder of CmsMind, an online blog providing Joomla and Wordpress tutorials. Elaine lives in Toronto and when she is not online, she is either Marathon and Triathlon training or travelling and racing somewhere in the world. Find her also at: Save Money, Premium Themes and Templates, and at Webhosting Tips.

More Posts - Website

{ 6 comments… read them below or add one }

carlos August 18, 2011 at 10:23 pm

Very useful. Thanks a lot!

Reply

Elaine August 19, 2011 at 1:25 pm

Hi carlos,
No problem!
Thanks again for your visit,
elaine

Reply

Dean Askin December 1, 2011 at 5:09 am

Hi Elaine,

Glad I found this article; it’s very useful! I’m just starting to build my website with Joomla! and have dropped in my logo over the header image.

I’m now trying to remove the white space beside the logo in the Beez 20 template and am trying to follow your instructions about editing the code in the template. However, when I go into the templates directory for Beez20 to edit the HTML coding (I’m using Joomla 1.7), it won’t let me edit the code. Not sure what to do now….

The header looks crappy with the white space padding beside my logo.

Any suggestions appreciated.

Thanks and regards,
Dean Askin

Reply

kaip numesti svorio August 17, 2012 at 9:31 pm

which exactly white space are you talking about?
a screenshot would really be helpful.
I cant remove the upper whitespace with font sizes and other stuff, is that the one you are talking about?

Reply

kelly July 9, 2013 at 3:46 pm

I found a post which shows how to delete the logo from all pages except the front page of your site.
I’m using joomla 2.5.11 with the beez 20 template
My question is how do I eliminate the logo space on the articles pages or how do I add a different logo in it’s place for the article pages? I am sorry to bother you but I can’t find anyone that can help me and I came across this site, the code from a post I found was for the beez 5 template but it did the trick to remove the logo but in my article pages, but I still have the big space,and I’d like to either remove the space or be able to add another image in it’s place, Thank you for any help or direction you can offer me I really appreciate your time and consideration

Reply

Elaine July 15, 2013 at 7:40 pm

Hi Kelly,
Sorry I didn’t see your comment earlier. Did you get your problem resolved? Can you send me your site url? Did you look at this tutorial, here, on how to change the site logo?
Thanks,
Elaine

Reply

Leave a Comment

Captcha Captcha Reload

Older Post:

Newer Post: