Joomla Templates Club 406,261 posts

[gayle cajee Friend gayle cajeeJoin date: September 2014Posts: 1Downloads:0Uploads:0 Thanks: 3]

#164656

I’d like to post a logo which is 178 x 100, but when I have done this there is a top black margin of around 18px which pushes it down. How can I top align the logo?

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#393935

Please post a link to your site and we will be glad to help. Please make sure CSS optimization is set to “No” in the template manager first so we can see the correct css to edit.

1 user says Thank You to Phill for this useful post

1. irfandi

[irfandi Friend irfandiJoin date: July 2011Posts: 94Downloads:0Uploads:42 Thanks: 43 Thanked: 2 times in 1 posts]

#430486

thanks man..from this forum I know that I have to turn off the CSS optimization before I edit the template…my site http://www.jroh.us is editable now.. 🙂
many thanks..

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

#430556

<em>@irfandi 290232 wrote:</em><blockquote>thanks man..from this forum I know that I have to turn off the CSS optimization before I edit the template…my site http://www.jroh.us is editable now.. 🙂
many thanks..</blockquote>

You will need to do some minor modifications within your template.css file (for your chosen color theme).
The path is as follows . . . /templates/ja_minisite/core/themes/red/template.css

at line 24, you should see the following . . .


/* Logo Image ---*/
h1.logo a { background: url(../images/logo.png) 0 0 no-repeat;
display: block;
height: 63px;
overflow: hidden;
width: 160px; }


This is where you can adjust the height for the div containing your logo.

Now, depending on the size you want your logo to display, you may also need to adjust the height of your overall header area.
This can be found within /templates/ja_minisite/css/template.css . . . starting at line 576:


/* HEADER
--------------------------------------------------------- */
#ja-header { z-index: 30; }


#ja-header .main { height: 83px; padding: 17px 0 0; }


/* Logo Image ---*/
h1.logo { height: 63px; width: 115px; }


h1.logo a {
background: url(../images/logo.png) 0 0 no-repeat;
display: block;
height: 63px;
overflow: hidden;
width: 115px;
}


It will also be a good idea to modify the “height” parameter for your logo in this file as well – same as you did within your red/template.css file.

Hope that helps

1 user says Thank You to TomC for this useful post

1. irfandi

[irfandi Friend irfandiJoin date: July 2011Posts: 94Downloads:0Uploads:42 Thanks: 43 Thanked: 2 times in 1 posts]

#430657

Thanks, I will try it…but, I am curious. if I change too much of my site code, will it become a lot messy when I updating the template? and can I use HTML 5 code in my joomlart template site?

thanks

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#430668

As long as you use the JA Extension manager to update your template your changes should remain in place. Just make sure you make all your changes in the templates folder and try not to make changes to the JAT3 plugin and all will be fine.

And yes, you can use HTML5.

1 user says Thank You to Phill for this useful post

1. irfandi

[irfandi Friend irfandiJoin date: July 2011Posts: 94Downloads:0Uploads:42 Thanks: 43 Thanked: 2 times in 1 posts]

#430833

I have another question related to this thread.
please take a look at my link: http://www.smpluqmanulhakim.org
the question are in the picture attached:

thanks for your answer..

---

Attachments:

1. 

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#430834

To increase the height of the header block please edit template.css around line 604 and add the code highlighted in red below

#ja-header .main {
background: none repeat scroll 0 0 #111111;
height: 100px;
padding: 5px 0;

}

To move the social icons edit template.css at line 637 and ass the lines highlighted in red below.

.top-social {
padding: 0 10px 0 0;
position: relative;
text-align: right;
top: 80px;

}

1 user says Thank You to Phill for this useful post

1. irfandi

[irfandi Friend irfandiJoin date: July 2011Posts: 94Downloads:0Uploads:42 Thanks: 43 Thanked: 2 times in 1 posts]

#430842

great…it’s work..
one more thing. How to move the menu to the left??
I have tried it in firebug, but it all mess up…

---

Attachments:

1. 

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#430843

Edit mega.css line 26. Adjust the figure in red below as per required.

#ja-megamenu {
padding-left: 240px;

}

1 user says Thank You to Phill for this useful post

1. irfandi

[1numarahost Friend 1numarahostJoin date: January 2008Posts: 29Downloads:0Uploads:3 Thanks: 14 Thanked: 2 times in 1 posts]

#511291

Hello, I’m using the Joomla 3.0 version of this theme. How can I change the logo size? Thank you.

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

#511317

Hi,

You can change the logo on JA Minisite’s theme by opening /templates/ja_minisite/themes/theme_name/css/template.css file, find lines:

/* Logo Image ---*/
h1.logo a { background: url(../images/logo.png) 0 0 no-repeat; }

Change with your logo file and make sure you did upload the logo image to templatesja_minisitethemestheme_nameimages fColder on your server. And remember to clear JAT3 cache after saving changes.

[1numarahost Friend 1numarahostJoin date: January 2008Posts: 29Downloads:0Uploads:3 Thanks: 14 Thanked: 2 times in 1 posts]

#511357

<em>@Leo Burnetts 396700 wrote:</em><blockquote>Hi,

You can change the logo on JA Minisite’s theme by opening /templates/ja_minisite/themes/theme_name/css/template.css file, find lines:

/* Logo Image ---*/
h1.logo a { background: url(../images/logo.png) 0 0 no-repeat; }

Change with your logo file and make sure you did upload the logo image to templatesja_minisitethemestheme_nameimages fColder on your server. And remember to clear JAT3 cache after saving changes.</blockquote>

I want all images to have the same size so I went for the /public_html/templates/ja_minisite/css/template.css file

Take a look at my site, this is what happens. What do I need to change to fit it there (so it doesn’t overflow the navigation)?

http://www.imaj-online.de/index.php

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

#511413

Hi,

The original size of the logo is bigger than the height of header section, that is why the logo overflows the navigation. The idea in this case is narrowing the logo size to fit with the header’s height. You can open templates/ja_minisite/css/template.css file, change lines:

h1.logo a {
background: url(../images/logo.png) 0 0 no-repeat;
display: block;
height: 300px;
overflow: hidden;
width: 300px;
}


to

h1.logo a {
background: url(../images/logo.png) 0 0 no-repeat;
display: block;
overflow: hidden;
height: 80px;
width: 200px;
background-size: 100% 100%;
}

Remember to clear JAT3 cache after saving change. The logo will display fine then.

[1numarahost Friend 1numarahostJoin date: January 2008Posts: 29Downloads:0Uploads:3 Thanks: 14 Thanked: 2 times in 1 posts]

#511458

<em>@Leo Burnetts 396825 wrote:</em><blockquote>Hi,

The original size of the logo is bigger than the height of header section, that is why the logo overflows the navigation. The idea in this case is narrowing the logo size to fit with the header’s height. You can open templates/ja_minisite/css/template.css file, change lines:

h1.logo a {
background: url(../images/logo.png) 0 0 no-repeat;
display: block;
height: 300px;
overflow: hidden;
width: 300px;
}


to

h1.logo a {
background: url(../images/logo.png) 0 0 no-repeat;
display: block;
overflow: hidden;
height: 80px;
width: 200px;
background-size: 100% 100%;
}

Remember to clear JAT3 cache after saving change. The logo will display fine then.</blockquote>

But I don’t want to scale down my image or resize it. My customer requested big logo so I’m giving it to him. The customer desk suggested this code changes below which solved the fitting problem but messed up the mega menu’s dropdown links:


- Open file: /templates/ja_minisite/css/template.css
- From:
#ja-header {
z-index: 30;
}
To:
#ja-header {
z-index: 30;
height: 210px;
background: url(../images/bgd_body.gif) 0 0 repeat #fbfcfe
}

From:
#ja-mainnav {
background: url(../images/bgd_mainnav.gif) 50% 50px no-repeat;
}
To:
#ja-mainnav {
background: url(../images/bgd_body.gif) 0 0 repeat;
}

From:
#ja-search {
background: url(../images/bgd_search.png) 100% 100% no-repeat;
bottom: auto;
padding: 0 0 10px;
right: -10px;
top: 100px;
width: 220px;
z-index: 100;
}
To:
#ja-search {
background: url(../images/bgd_search.png) 100% 100% no-repeat;
bottom: auto;
padding: 0 0 10px;
right: -10px;
top: 210px;
width: 220px;
z-index: 100;
}


[Author]

Posts