Joomla Templates Club 406,261 posts

[placidpete Friend placidpeteJoin date: May 2010Posts: 57Downloads:0Uploads:1 Thanks: 9 Thanked: 3 times in 1 posts]

#190326

Hi

I’m trying out the JA_Fixel J3.1 template and have added a new logo 184px x 30px. The logo appears on the page but at the original JA_Fixel size.

I edited template.css to change the width of h1 logo and h1 logo a to the new size but it does not display correctly. The inspector seems to to show the T3 Assets css and I’m not sure how to override this. Help please!!!

You can see the problem at http://www.dgvsound.com/ved

Thanks

[urbaniak frederic Friend urbaniak fredericJoin date: August 2010Posts: 34Downloads:42Uploads:1 Thanks: 15 Thanked: 1 times in 1 posts]

#504732

In template config, have you check ‘No’ for ‘Optimized CSS’ ?

Now if you have uncheck that, you will see the name of CSS file.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#504857

I have checked link URL of your site. I saw the logo of your site changed to 184px x 30px. You need to clear cache of your browser and check it again.

[placidpete Friend placidpeteJoin date: May 2010Posts: 57Downloads:0Uploads:1 Thanks: 9 Thanked: 3 times in 1 posts]

#504872

Thanks – from the reply yesterday I realised I had edited the wrong template.css file since I’m using the dark orange theme as default. So all is Ok now thanks.

However I notice that the bigger logo is too wide for the iphone layout. I couldn’t see where the iphone layout css files are – could someone please let me where to to find them so I can get the logo to display properly on the iphone too.

Thanks for your help.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#505067

This below solutions will help you to resize logo image on iphone layout

Open templates/ja_fixel/css/themes/dark-orange/template.css file


@media (max-width: 767px) {
.logo-image a {
background-image: url("../../../images/logo.png");
background-repeat: no-repeat;
width: 184px;
height: 30px;
display: block;
background-size: 60%;
}
}

Or you create mobile_logo image and and change width, height to match the mobile logo

[Author]

Posts