Joomla Templates Club 406,261 posts

[marcometer Friend marcometerJoin date: December 2012Posts: 20Downloads:0Uploads:8 Thanks: 6]

#182880

Hi,

I need help with adjusting the spaceholder for my desired Logo ( watch screenshot ).

Further on how can I customize the image of the background)

I’m thankful for any help!

edit: I used the Quickstar setup.

---

Attachments:

1. 

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

#475435

What joomla version are you running on Mero template?

[marcometer Friend marcometerJoin date: December 2012Posts: 20Downloads:0Uploads:8 Thanks: 6]

#475463

Sorry for that missing info. Joomla 3

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

#475525

You can try with my following suggestion

If your site is setting with css
<blockquote>templates/ja_mero/css/template.css</blockquote>

There should be CSS code defiined for logo like this and make your desired change

.logo {
float: left;
}
.logo h1,
.logo h1 a {
display: inline-block;
line-height: 1;
margin: 0;
}
.logo-image {
overflow: hidden;
}
.logo-image a {
background-image: url('../images/logo.png');
background-repeat: no-repeat;
width: 151px;
height: 41px;
}
.logo-image span,
.logo-image small {
display: none;
}
.logo-text h1 {
color: #444
}
.logo-text h1 a {
color: #444
text-decoration: none;
}
.logo-text:hover h1 a,
.logo-text h1 a:hover,
.logo-text h1 a:active,
.logo-text h1 a:focus {
text-decoration: none;
}
With less
<blockquote>templates/ja_mero/less/style.less</blockquote>

// Logo
// ---------------------------------------------------------
.logo {
float: left;

h1, h1 a {
display: inline-block;
line-height: 1;
margin: 0;
}

}

// Logo Image
// ----------
.logo-image {
overflow: hidden;

a {
background-image: url("@{T3LogoImage}");
background-repeat: no-repeat;
width: @T3logoWidth;
height: @T3logoHeight;
}

//hide sitename and slogan
span, small {
display: none;
}

}

// Logo Text
// ----------
.logo-text {

h1 {
color: @grayDark;
}

h1 a {
color: @grayDark;
text-decoration: none;
}

&:hover h1 a,
h1 a:hover,
h1 a:active,
h1 a:focus {
text-decoration: none;
}

// Taglines
.site-slogan {
display: block;
font-size: @BaseFontSize;
margin-top: 5px;
}

}


You can find parameter settings to change background in this file:

templates/ja_mero/less/variables.less

1 user says Thank You to Ninja Lead for this useful post

1. franbrak

[ryan kishan Friend ryan kishanJoin date: November 2012Posts: 13Downloads:0Uploads:4 Thanks: 5 Thanked: 1 times in 1 posts]

#475630

<em>@Ninja Lead 349659 wrote:</em><blockquote>You can try with my following suggestion

If your site is setting with css

There should be CSS code defiined for logo like this and make your desired change

.logo {
float: left;
}
.logo h1,
.logo h1 a {
display: inline-block;
line-height: 1;
margin: 0;
}
.logo-image {
overflow: hidden;
}
.logo-image a {
background-image: url('../images/logo.png');
background-repeat: no-repeat;
width: 151px;
height: 41px;
}
.logo-image span,
.logo-image small {
display: none;
}
.logo-text h1 {
color: #444
}
.logo-text h1 a {
color: #444
text-decoration: none;
}
.logo-text:hover h1 a,
.logo-text h1 a:hover,
.logo-text h1 a:active,
.logo-text h1 a:focus {
text-decoration: none;
}
With less

// Logo
// ---------------------------------------------------------
.logo {
float: left;

h1, h1 a {
display: inline-block;
line-height: 1;
margin: 0;
}

}

// Logo Image
// ----------
.logo-image {
overflow: hidden;

a {
background-image: url("@{T3LogoImage}");
background-repeat: no-repeat;
width: @T3logoWidth;
height: @T3logoHeight;
}

//hide sitename and slogan
span, small {
display: none;
}

}

// Logo Text
// ----------
.logo-text {

h1 {
color: @grayDark;
}

h1 a {
color: @grayDark;
text-decoration: none;
}

&:hover h1 a,
h1 a:hover,
h1 a:active,
h1 a:focus {
text-decoration: none;
}

// Taglines
.site-slogan {
display: block;
font-size: @BaseFontSize;
margin-top: 5px;
}

}


You can find parameter settings to change background in this file:

templates/ja_mero/less/variables.less
</blockquote>

Hi,

I am following your advice and changing the size to my desired size of 151×71 but its not working. I tried both CSS and LESS on my joomla 3.0 version on my localhost.

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

#475645

If possible, PM me admin and FTP account of site you’re working on, I shall help you out.

[ryan kishan Friend ryan kishanJoin date: November 2012Posts: 13Downloads:0Uploads:4 Thanks: 5 Thanked: 1 times in 1 posts]

#475672

Done! Please check your inbox.

[Andrew Winkler Friend Andrew WinklerJoin date: September 2014Posts: 725Downloads:206Uploads:31 Thanks: 291 Thanked: 34 times in 2 posts]

#475873

I have the same problem. I’ve changed the logo size in the template.css in the /templates/ja_mero/css and the /templates/ja_mero/css/theme/light/ folder to a width of 460px but the logo still got displayed incompletely.

[ryan kishan Friend ryan kishanJoin date: November 2012Posts: 13Downloads:0Uploads:4 Thanks: 5 Thanked: 1 times in 1 posts]

#475909

OK so I got it, I installed the Joomla 2.5 version of JA Mero and its working. Seems like Joomla 3.0 version of this template has bugs.

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

#475914

@ryan kishan: As I see from link you pm me, you made change on logo, please restore it back to default and pm me admin access and ftp account, i shall help you to change

@other:
You can change logo on JA Mero Template by going to file:

<blockquote>Open templates/ja_mero/css/template.css file</blockquote>

.logo-image a {
background-image: url('../images/logo.png'); <- change image
background-repeat: no-repeat;
width: 151px; <- change width
height: 41px;<- change height
}

and replace default logo with your own logo in following path:
<blockquote>templates/ja_mero/images/logo.png</blockquote>

1 user says Thank You to Ninja Lead for this useful post

1. bigleveller

[ryan kishan Friend ryan kishanJoin date: November 2012Posts: 13Downloads:0Uploads:4 Thanks: 5 Thanked: 1 times in 1 posts]

#475916

Sorry for my last post!!!

I was again testing in Joomla 2.5 version of Mero on my local host and I used ThemeMagic to create a new style for me ( I just changed the background to white and saved it as 1). This made a new folder with name 1
templatesja_merocssthemes1
. Now if we modify the template.css file inside the Joomla, we will still be modifying the
templatesja_merocsstemplate.css
file. But since my new theme is 1, modifying the
templatesja_merocssthemes1template.css
externally using any editor gives the desired result. This is convenient on local host but what about a live website? This is my first try with Joomla so I am confused if every time I need to modify the new template.css file, I would have to edit it on my system and then upload it to
templatesja_merocssthemes1
for a live website??

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

#476099

Because you changed theme on your template, i helped you to change logo on your site
<blockquote>Open templates/ja_mero/css/themes/1/template.css file</blockquote>
from

.logo-image a {
background-image: url('../../../images/logo.png');
background-repeat: no-repeat;
width: 151px;
height: 41px;
}
change to

.logo-image a {
background-image: url('../../../images/logo.png');
background-repeat: no-repeat;
width: 234px;
height: 60px;
}
Please check it again.

1 user says Thank You to Ninja Lead for this useful post

1. ryan kishan

[ryan kishan Friend ryan kishanJoin date: November 2012Posts: 13Downloads:0Uploads:4 Thanks: 5 Thanked: 1 times in 1 posts]

#476177

I understood what is happening when I change the theme…Thanks for your help.

[nicorithner Friend nicorithnerJoin date: January 2012Posts: 1Downloads:0Uploads:1]

#476406

<em>@Ninja Lead 350420 wrote:</em><blockquote>Because you changed theme on your template, i helped you to change logo on your site

from

.logo-image a {
background-image: url('../../../images/logo.png');
background-repeat: no-repeat;
width: 151px;
height: 41px;
}

change to

.logo-image a {
background-image: url('../../../images/logo.png');
background-repeat: no-repeat;
width: 234px;
height: 60px;
}

Please check it again.</blockquote>
I’m following exactly these steps but I still can’t modify the placeholder size.

---

Attachments:

1. 

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

#476414

@nicorithner: Please send me URL of your site, i shall help you out

[Author]

Posts