Joomla Templates Club 406,261 posts

[ahsanashraf Friend ahsanashrafJoin date: May 2011Posts: 57Downloads:7Uploads:16 Thanks: 20]

#197281

Hi there

I am struggling to resize the logo on my website.

I have followed the tutorial and created custom.css

I have pasted:

@media screen and (max-width: 1000px) {
.logo {
position: static !important;
text-align: center !important;

}

.navbar-default .navbar-header .navbar-toggle, .navbar-toggle {
margin-top: -40px !important;

}

}

But nothing changes?

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#533132

please post your site Url

[ahsanashraf Friend ahsanashrafJoin date: May 2011Posts: 57Downloads:7Uploads:16 Thanks: 20]

#533246

http://www.sacredknowledge.org.uk
UN: Ahsan
PW: ah54n86

The UN and PW are to access the site and not the admin CP

[ahsanashraf Friend ahsanashrafJoin date: May 2011Posts: 57Downloads:7Uploads:16 Thanks: 20]

#533248

I have tried to follow the guide here too: http://t3-framework.org/documentation/bs3-customization#logo-custom with no luck.
So reverted the less files back to original.

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

#533308

<em>@ahsanashraf 424783 wrote:</em><blockquote>I have tried to follow the guide here too: http://t3-framework.org/documentation/bs3-customization#logo-custom with no luck.
So reverted the less files back to original.</blockquote>

To what dimensions are you wanting to resize your logo?

Perhaps you can throw together a mock-up screenshot of how you want your logo to display?

1 user says Thank You to TomC for this useful post

1. ahsanashraf

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

#533309

I managed to resize your logo by modifying the following CSS rule:


.logo-image .logo-img {
max-height: 40px;
}

What I did was increase the pixel value – say to 60px (as a test)

I do not know how large you are wanting your logo to be. Depending on how large, you may also need to adjust the header area a bit to fit it in nicely.

You can do the same thing (testing how it will look) by playing around with the CSS via an online web development tool such as FIREBUG – which is exactly what I did (and it worked).

Hope That Helps

1 user says Thank You to TomC for this useful post

1. ahsanashraf

[ahsanashraf Friend ahsanashrafJoin date: May 2011Posts: 57Downloads:7Uploads:16 Thanks: 20]

#533313

Hi Tom

Thank you for your help. Wish you the best of prosperity.

Do I copy:

.logo-image .logo-img {
max-height: 40px;
}

in to custom.css ?

PS I want it to be w434 × h150

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

#533317

Okay, this will involve modifying a couple of different CSS rules – both of which you will put in your custom.css file . I’ve made a few adjustments that seem to work a bit better in terms of spacing/display . . . .


.logo-image .logo-img {
height: 120px;
margin-left: -110px;
width: 350px;
}

.logo-image .logo-img {
height: 120px;
}


SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

Does this get you a little closer to what you were thinking?

1 user says Thank You to TomC for this useful post

1. ahsanashraf

[ahsanashraf Friend ahsanashrafJoin date: May 2011Posts: 57Downloads:7Uploads:16 Thanks: 20]

#533318

Thanks Tom

In my custom.css which is in size the folder ja_biz I have the following code:
@media screen and (max-width: 1000px) {
.logo-image .logo-img {
height: 120px;
margin-left: -110px;
width: 350px;
}

.logo-image .logo-img {
height: 120px;
}

}

.navbar-default .navbar-header .navbar-toggle, .navbar-toggle {
margin-top: -40px !important;

}

}

body {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif, quadranta; }

However, still no luck?

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

#533319

The correct file path for your custom.css file should be –> /templates/ja_biz/css/custom.css

1 user says Thank You to TomC for this useful post

1. ahsanashraf

[ahsanashraf Friend ahsanashrafJoin date: May 2011Posts: 57Downloads:7Uploads:16 Thanks: 20]

#533323

Hi Tom

Progress made for the first time with your kind help.

However, the logo is squashed and the menu bar needs to be big.

My logo size should be:

289×100 and I liked the logo being wear it was before, now it has gone to the edge on the left?

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

#533324

I suggested the repositioning of the logo – given the dimensions we were working with – so that it wouldn’t overlap the main-navigation menu items. You can easily adjust this by simply modifying (or removing) the “margin-left” property within . . .


.logo-image .logo-img {
height: 120px;
margin-left: -110px;
width: 350px;
}

1 user says Thank You to TomC for this useful post

1. ahsanashraf

[ahsanashraf Friend ahsanashrafJoin date: May 2011Posts: 57Downloads:7Uploads:16 Thanks: 20]

#533325

Again thanks for your kind support.

.logo-image .logo-img {
height: 100px;
width: 289px;
}

Is all I have in custom.css however, the logo looks very squashed and on the left?

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

#533326

<em>@ahsanashraf 424878 wrote:</em><blockquote>Again thanks for your kind support.

.logo-image .logo-img {
height: 100px;
width: 289px;
}

Is all I have in custom.css however, the logo looks very squashed and on the left?</blockquote>

What would be very helpful is if you could throw together a mock-up screenshot of how you want your logo to look/display on the home page. That way, I will be better able to understand what you are envisioning and, thus, better able to provide more concise recommendation(s) for you. 🙂

1 user says Thank You to TomC for this useful post

1. ahsanashraf

[ahsanashraf Friend ahsanashrafJoin date: May 2011Posts: 57Downloads:7Uploads:16 Thanks: 20]

#533327

Thanks for your kind and supportive response and more importantly patience.

---

Attachments:

1. 

[Author]

Posts