Logoheader in Beez3

Everything to do with Joomla! 3.x 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.
Post Reply
Zippy142
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Sat Sep 13, 2014 8:21 pm

Logoheader in Beez3

Post by Zippy142 » Tue Feb 13, 2018 8:04 pm

Newbie here - I'm using the Beez3 Fruit Shop template on one page of my site for a Virtuemart Store. I've selected the red theme to match the rest of my site colors. I'm trying to remove what my inspection tool says is the logoheader. ( <div class; "logoheader"> ). I've found how to change it in the regular Beez3 template theme as it is the personal2.png file. But I cannot find a a graphics file that generates this large gradient red rectangle that surrounds the logo field.

Thanks in advance,

Martin
Last edited by toivo on Tue Feb 13, 2018 8:09 pm, edited 1 time in total.
Reason: mod note: changed the subject to normal case - please read the forum rules

User avatar
imanickam
Joomla! Master
Joomla! Master
Posts: 26720
Joined: Wed Aug 13, 2008 2:57 am
Location: Chennai, India

Re: Logoheader in Beez3

Post by imanickam » Wed Feb 14, 2018 5:12 am

The gradient comes from the following css entry available in the file red.css located in the directory \templates\beez3\css.

Code: Select all

.button:hover, .button:active, .button:focus, button:hover, p.readmore a:hover, #header ul.menu a:hover, #header ul.menu a:active, #header ul.menu a:focus, .pagenav a:hover, .pagenav a:active, .pagenav a:focus, #advanced-search-toggle:hover, #advanced-search-toggle:active, #advanced-search-toggle:focus, .profile-edit a:hover, .profile-edit a:active, .profile-edit a:focus, #fontsize a:hover, #fontsize a:active, #fontsize a:focus, #mobile_select h2 a, table th, .logoheader {
	background-color: #c00;
	background-repeat: repeat-x;
	filter: progid:dximagetransform.microsoft.gradient(startColorstr=#cc0000, endColorstr=#990000);
	background-image: -khtml-gradient(linear, left top, left bottom, from(#c00), to(#900));
	background-image: -moz-linear-gradient(top, #c00, #900);
	background-image: -ms-linear-gradient(top, #c00, #900);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c00), color-stop(100%, #900));
	background-image: -webkit-linear-gradient(top, #c00, #900);
	background-image: -o-linear-gradient(top, #c00, #900);
	background-image: linear-gradient(#c00, #900);
	border-color: #900;
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .33);
	-webkit-font-smoothing: antialiased
}
If you do not want to the gradient, you could use the following css entry:

Code: Select all

.logoheader {
	background-image: none;
}
Instead of modifying the css file red.css, suggest creating a css file named user.css and adding the css entries that you want to change in that file. This way, during the future Joomla! upgrades, even if the file red.css is overwritten, the changes you made will be intact in the file user.css as this file will not be overwritten by the upgrade.
Ilagnayeru (MIG) Manickam | இளஞாயிறு மாணிக்கம்
Global Moderators Team | Translations Coordination Team | Tamil (தமிழ்) Translation Team

Eegan - Support the poor and underprivileged

Zippy142
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Sat Sep 13, 2014 8:21 pm

Re: Logoheader in Beez3

Post by Zippy142 » Wed Feb 14, 2018 1:27 pm

imanickam,

Thanks for your quick response. I do have a couple of questions. Do I comment out or delete the code or can I just place the replacement code at the bottom after the line..

-webkit-font-smoothing: antialiased
}

If I create a user.css file how do I call the user.css? I looked in the Joomla Admin templates/styles/beez3 Fruit Shop/advanced/template colour: where I selected the "red" style but the "user" is not there to select.

Thanks Again,

martin

User avatar
imanickam
Joomla! Master
Joomla! Master
Posts: 26720
Joined: Wed Aug 13, 2008 2:57 am
Location: Chennai, India

Re: Logoheader in Beez3

Post by imanickam » Wed Feb 14, 2018 1:57 pm

The css file user.css will be automatically loaded by the template Beez if the file user.css is located in the directory \templates\beez3\css.

To create the file user.css:
- In the screen "Templates: Templates (Site)" (Extensions => Templates -> Templates), click on the link "Beez3 Details and Files"
- In the resultant screen "Templates: Customise (Beez3)" click on the button "New File"
- In the resultant pop-up screen "Create or Upload a new file.", click on the folder icon of css (if it is not highlighted already), in the field "File Name" enter the file name "user" (of course, without double quotes) & choose the "File Type" as "css", and click on the button "Create"
- Now, in the screen "Templates: Customise (Beez3)" when you expand the folder "css", you would see the file user.css
- You can edit this file and save it

Be known that the file user.css would contain the revised or new css entries.
Ilagnayeru (MIG) Manickam | இளஞாயிறு மாணிக்கம்
Global Moderators Team | Translations Coordination Team | Tamil (தமிழ்) Translation Team

Eegan - Support the poor and underprivileged

Zippy142
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Sat Sep 13, 2014 8:21 pm

Re: Logoheader in Beez3

Post by Zippy142 » Thu Feb 15, 2018 3:15 pm

Thanks again imanickam,

The last bit I'm trying to solve is how to get the user.css file to show in the template/styles/beez3 fruit shop/advanced/template colour pull down menu. I created the new user.css file as you instructed and copied the "red.css" contents into it. I then made your suggested modification to remove the headerlogo. When I go to the template/styles/beez3 fruit shop/advanced/template colour pull down menu the user.css does not show up. I then hacked the webroot/templates/beez3/templatedetails.xml file and added <option value="user">TPL_BEEZ3_OPTION_USER</option> to the list. This did give me the "user" option on the template colour pulldown. The only issue is I'm hacking a Joomla templatedetails.xml file. Is there a better way of doing this?

Martin

User avatar
imanickam
Joomla! Master
Joomla! Master
Posts: 26720
Joined: Wed Aug 13, 2008 2:57 am
Location: Chennai, India

Re: Logoheader in Beez3

Post by imanickam » Fri Feb 16, 2018 3:17 am

The file user.css is meant only to hold the customized css entries. Of course, you have all your customized color scheme in that file but it will not show in the dropdown list.

In fact, if you want to really have your personalized color scheme in the dropdown list then you must edit the file templateDetails.xml (as you have done) and create a new directory to hold your css entry (e.g., red that is there already). The downside of this approach is that when Joomla! is upgraded/updated, there is a chance that the file templateDetails.xml may be overwritten.

What you could possibly do is to create a copy of the template and work on it. This approach will shield your changes from getting overwritten. However, the downside is that if the template Beez3 is updated for security reasons or enhanced, these changes will not get reflected in your copy of the template.
Ilagnayeru (MIG) Manickam | இளஞாயிறு மாணிக்கம்
Global Moderators Team | Translations Coordination Team | Tamil (தமிழ்) Translation Team

Eegan - Support the poor and underprivileged


Post Reply

Return to “Templates for Joomla! 3.x”