Joomla Templates Club 406,261 posts

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#189122

Origional tips: HOW TO CHANGE TEMPLATE LOGO – (Any Template) ~ Tom C

<blockquote>This post will focus on how to change the logo on our recent T3 templates (T3 blank, Brisk, Mero, Mitius …) which are running on our new robost T3v3 framework with few basic steps below: </blockquote>

Step 1: Create your own custom logo

Name and put it into templates/ja_template/images/ path.

Step 2: Define new logo in .less file

You need to open templatesja_templatelessvariables.less . Then find lines:

// --------------------------------------------------
@T3logoWidth: 80px;
@T3logoHeight: 50px;
@T3LogoImage: "../images/logo.png";

Replace logo.png with your custom logo which was mentioned in the 1st step, and you can change with your own logo properties (width/height). Then go to Joomla administration backend >> Extensions >> Template Manager >> JA_Template_style >> Click Compile Lss to Css. Save & check out your website.

(* *) The logo size properties in this post are used for an example purpose, they can be different on each T3 templates. Remember to backup your .less file before applying changes.

Note: In cases, you want to change the logo in different themes in the Template styles which are assigned to menu items, at step 2nd, you need to open templatesja_templatelessthemestheme_namevariables.less. Then find line:

// --------------------------------------------------
@T3LogoImage: "../images/themes/coffee/logo.png";

Replace logo.png with your own logo, make sure that you uploaded to templatesja_templateimagesthemestheme_name path. Then Compile Lss to Css in Template Manager as usual.

Updated: On T3 templates, We use the Twitter Bootstrap grid system (12 colums) to display the template layout width. In some case, You will need to adjust the logo & menu width in templates/ja_template/tpls/blocks/header.php when the logo size is quitely big. Open file & look lines:

<!-- LOGO -->
<div class="span3 logo">
......................................
.......................................

<!-- MAIN NAVIGATION -->
<nav id="t3-mainnav" class="t3-mainnav navbar-collapse-fixed-top span9">


[salirporbenidorm Friend salirporbenidormJoin date: December 2012Posts: 25Downloads:13Uploads:9 Thanks: 16]

#499908

Ok, now its done, but its a maxium logo size
thx

---

Attachments:

1. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#499917

Hi salirporbenidorm,

In this case, you need to open templatesja_hawkstoretplsblocksheader.php, then find line

<div class="span3 logo">

Change span3 to span4. It will make your logo’s width wider.

Note: After changing the logo span, you also need to reduce the main menu width to span8.
Thank you for your feedbacks. I updated this note in previous tip 😉

[Author]

Posts