modifying beez3 template

[xanterra]

Hi, I am new to Joomla and using Joomla 3.1 version and trying to modify beez3 template to display only my logo, see enclosed image, my logo is black image in front of red part.
I need your expertise on following;
- How to remove red part so only logo will appear? I tried to change template colour but that does not help
- How to move my logo ( black image) left or right ? is there any way to make it in the middle of page or change its position?

I tried to search and tried few things with no success, hoping that senior Joomla users can direct me to correct topic or answer me here.

[imanickam]

From where the Red color comes from?

What is your site's URL so that others can see what is happening?

[xanterra]

Hello, here is my test site.
http://www.s497735293.onlinehome.us/joomla/
I can provide its admin credential if you need.
Red colour comes with default template, i mean when i installed this site, i have also installed all sample data so i can learn how to edit/modify things by practicing.
there is a settings under;
extension > template manager > select beez3 > edit > options > template clour at the bottom
I have played with this settings but could not get rid of red colour and neither move my logo in to the middle of page.

[imanickam]

(a) Removing the color: Add the following css entry at the end of the file red.css that is located in the directory \templates\beez3\css

Code: Select all

.logoheader {background-color: transparent;background-image:none;}

(b) Center the logo: Add the following css entry at the end of the file red.css that is located in the directory \templates\beez3\css

Code: Select all

#logo {width:100%; text-align:center;}
#logo img {display: inline;}

Note: Make a copy of the file before editing it.

[xanterra]

Hello, i have followed steps as below but results still same, i have also attached red.css file.

Steps:
1- Back up red.css
2- update red.css with above entry, see enclosed example/
3- upload red.css into /joomla/templates/beez3/css location on the server side where joomla installed

unfortunately i still see the same red banner and logo is in the same place.

Am I missing anything?

[xanterra]

Hi, i just re-checked my test site and now noticed that all settings are working as expected.
Thanks you so much for your help.

[xanterra]

Hello Ilagnayeru,

I am still working on my site and trying to change background coolor to gray, same clour as the header.
I tried to use firebug to inspect the page but when I change the red.css and upload to the site, I don't see any changes.
All I want to do is to make al white background colour to gray including Menu tables.
Can you please let me know which parameter I should change in enclosed red.css file?

[imanickam]

What is your site's URL so that others can see what is happening and offer suggestions?

[xanterra]

Hi, my site url is;
http://www.s497735293.onlinehome.us/joomla/

[imanickam]

Glad that you have shared the site's URL. Reviewed the site and the header color is White - not Grey.

Providing an image with markings to convey your thoughts would be of help.

[xanterra]

Hi, please find enclosed screenshot which I was able to modify via firebug. I have also enclosed position.css if needed. I am trying to do similar background changes on my site but I could not find which parameter I should change in which .css file. In the screen shot there are 3 section I need to modify:
1- Exterior background color
2- interior background color
3- background in Menu table which I need to display all gray without white borders
Site url:http://www.s497735293.onlinehome.us/joomla/

Your help is much appreciated.

[imanickam]

Reviewed the URL provided.

For (1) edit the following css entry that is available in the file red.css (located in the directory /templates/beez3/css) and change the background color.

Code: Select all

body{background:#eee}

For (2) you have to edit multiple css entries.
(a) Edit the following css entry that is available in the file position.css (located in the directory /templates/beez3/css) and add the css attribute background-color.

Code: Select all

#header {
    display: block !important;
    position: relative;
    padding: 8em 0 0 0;
    overflow: hidden;
}

(b) Edit the following css entry that is available in the file layout.css (located in the directory /templates/beez3/css) and add the css attribute background-color.

Code: Select all

.breadcrumbs,.article-info {
	padding: 7px;
	margin: 0 0 18px;
	list-style: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

(c) Edit the following css entry that is available in the file position.css (located in the directory /templates/beez3/css) and add the css attribute background-color.

Code: Select all

#contentarea,
#contentarea2 {
    position: relative;
    overflow: hidden;
    padding: 0 20px !important;
    margin: 0;

}

For (3) edit the following css entry that is available in the file red.css (located in the directory /templates/beez3/css) and change the background color.

Code: Select all

.moduletable_menu{border:solid 1px #ddd;background:#f9f9f9}

Additionally, if you do not want borders, you may have to remove the border attributes from the corresponding css, and/or remove the Module Class Suffix, and/or add the Menu Class Suffix.

Note: Make a copy of the files before editing them. All the changes suggested were tested using FireBug in FireFox.

[xanterra]

it works flawlessly as instructed. Your help and guidance is much appreciated.