Joomla Templates Club 406,261 posts

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#517021

Well, you could probably change it right now as follows:

Within file path –> /t3-assets/dev/templates.ja_fubix.less.style.less.css
at line 27, where you will see the following:


.logo-image a {
background-image: url("../../templates/ja_fubix/images/logo.png");
background-repeat: no-repeat;
height: 17px;
width: 70px;
}

Try modifying the various parameters to best fit your logo image.

I’m not 100% sure as to the actual dimensions of your particular logo (i.e. height/width) – so I’m not sure what additional modifications to the header section may be needed to best accommodate your logo image for the best presentation.

Here’s the thing . . . There’s a chance that making the modifications in the CSS file above could be overwritten when/if you or your client try to update either the template version or the Joomla CMS version at some future date. Therefore, you may want to read through the following piece toward trying to avoid such from occurring —> UNDERSTANDING TEMPLATE/LAYOUT OVERRIDES IN JOOMLA

HAVE A SAFE & HAPPY NEW YEAR’S CELEBRATION !!!

[Andrew Carleton Friend Andrew CarletonJoin date: September 2014Posts: 23Downloads:0Uploads:0 Thanks: 8]

#517039

Thanks Tom.

I have made this change but it is still cutting the logo out, do I need to change the header height as well?

Thanks again.

Andrew

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#517040

Yes, you’re going to have to adjust the height of both the header section, as well as the div.logo to accommodate the whole logo image.

[Andrew Carleton Friend Andrew CarletonJoin date: September 2014Posts: 23Downloads:0Uploads:0 Thanks: 8]

#517061

Thanks again Tom,

I had a look at that file, where do I find the option to change the header height?

Andrew

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#517062

My apologies, it’s actually the main nav container

file path —> /t3-assets/dev/templates.ja_fubix.less.navigation.less.css
at line 3


.t3-mainnav {
background: none repeat scroll 0 0 #FFFFFF
border-bottom: 1px solid #D5D5D5
height: 50px;
}

[Andrew Carleton Friend Andrew CarletonJoin date: September 2014Posts: 23Downloads:0Uploads:0 Thanks: 8]

#517066

Hi Tom, I made that change and it increased the height of the navigation header, unfortunately the logo is still cut in half?

What am I doing wrong?

Thanks, Andrew

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#517068

Two things you’re going to need to try to do . . . .

(1)
file path –> /t3-assets/dev/templates.ja_fubix.less.style.less.css
line 10


.logo {
border-left: 1px solid #E5E5E5
border-right: 1px solid #E5E5E5
display: inline-block;
float: left;
height: 125px;
}

(2)
file path –> /t3-assets/dev/templates.ja_fubix.less.style.less.css
line 3


.t3-mainnav {
background: none repeat scroll 0 0 #FFFFFF
border-bottom: 1px solid #D5D5D5
height: 125px;
}

See if that is going in the right direction

1 user says Thank You to TomC for this useful post

1. Andrew Carleton

[Author]

Posts