Joomla Templates Club 406,261 posts

[bossies Friend bossiesJoin date: September 2006Posts: 172Downloads:39Uploads:15 Thanks: 16 Thanked: 16 times in 2 posts]

#182809

i want create a bigger logo than what the template is setup for. changing the css file is fine, but i would like to know where can i change when the normal logo change to the mobile logo.

thus because i want to use a bigger logo, the search field will go under the logo before it changes to the mobile version – is it possible to set the template that say when the template goes below 800px it must change to the mobile logo – at the moment it looks like the change happens when the template is about 470px wide, but i want to do it earlier.

hope you understand what i mean and can help me with this?

thanks

[Luna Garden Moderator Luna GardenJoin date: July 2011Posts: 2617Downloads:80Uploads:96 Thanks: 78 Thanked: 453 times in 425 posts]

#475313

Hi,

Please go to this file
templatesja_mendozitecsstemplate.css

And add code like bellow:

@media screen and (min-device-width: min_sizepx) and (max-device-width: max_sizepx) and (orientation:portrait){
h1.logo a {
background: url("your_logo_url") no-repeat scroll left center transparent!important;
height: height_of_logopx!important;
width: width_of_logopx!important;
}
h1.logo {
height: height_of_logopx!important;
width: width_of_logopx!important;
}
}

Once done, clear your cache.

Try and let me know the result.

Regards

[tim_aus Friend tim_ausJoin date: October 2010Posts: 5Downloads:0Uploads:1 Thanks: 3]

#477908

I have tried the advise above and I couldn’t get it to work with the JA University template.

I would also like the logo-mobile.png to appear above the Search box at the moment when you view the site on a mobile device the
logo-mobile.png file appears in the search box.

My template.css file located in /public_html/templates/ja_university/css nas the following code below:


/* Logo Image ---*/
h1.logo {
width: 347px;
height: 100px;
}

h1.logo a {
background: url(../images/logo.jpg) no-repeat left;
display: block;
width: 347px;
height: 100px;
}


Can you please advise how to fix, it will be much appreciated

Thanks

---

Attachments:

1. 

[bossies Friend bossiesJoin date: September 2006Posts: 172Downloads:39Uploads:15 Thanks: 16 Thanked: 16 times in 2 posts]

#478047

try below – it will put the logo top but it will not drop them below – not perfect solution but it works

/* Logo Image —*/
h1.logo {
width: 347px;
height: 200px;
}

[Luna Garden Moderator Luna GardenJoin date: July 2011Posts: 2617Downloads:80Uploads:96 Thanks: 78 Thanked: 453 times in 425 posts]

#478211

Hello,

<em>@tim_aus 352730 wrote:</em><blockquote>I have tried the advise above and I couldn’t get it to work with the JA University template.
</blockquote>

You may try this solution, go to this file <blockquote>templatesja_universityetclayoutsdefault.xml</blockquote>

Find these lines:

<file>css/template.css</file>
<file media="only screen and (max-width:719px)">css/layout-mobile.css</file>
<file media="only screen and (max-width:479px)">css/layout-mobile-port.css</file> Define for layout mobile portrait, change the value as you wish
<file media="only screen and (min-width:720px) and (max-width: 985px)">css/layout-tablet.css</file>

The style is only applied for screen width size: 479 px and less, if you change the size to adjust CSS, some style might be broken.

<blockquote>I would also like the logo-mobile.png to appear above the Search box at the moment when you view the site on a mobile device the logo-mobile.png file appears in the search box</blockquote>

In order to change mobile logo, please go to this files: <blockquote>templatesja_universitycsslayout-mobile.css</blockquote>

Find these lines
#ja-header h1.logo {
height: 56px;
width: 59px;
}

#ja-header h1.logo a {
background-image: url(../images/logo-mobile.png);
height: 56px;
width: 59px;
}

change value of height and width as you wish.

And to make logo above search box, go to this file <blockquote>templates/ja_university/css/layout-mobile.css</blockquote> and find these lines:

#ja-search {
background: none repeat scroll 0 0 transparent;
float: right;
padding: 0;
position: absolute;
right: 20px;
top: auto;
}

Change to:

#ja-search {
background: none repeat scroll 0 0 transparent;
float: none;
padding: 0;
position: static;
}

And add these lines:

#ja-header h1.logo
{
float: none;
}

Hope this helps

2 users say Thank You to Luna Garden for this useful post

1. tim_aus
2. vtpages

[tim_aus Friend tim_ausJoin date: October 2010Posts: 5Downloads:0Uploads:1 Thanks: 3]

#478728

made the changes and it works great.

Thanks very much

[Author]

Posts