Joomla Templates Club 406,261 posts

[marioss456 Friend marioss456Join date: March 2012Posts: 19Downloads:3Uploads:2 Thanks: 11 Thanked: 4 times in 1 posts]

#186018

Hello.. 🙂

#1
I cannot fine the line to change the logo.png in the mobile CSS file.. Can you help please.. It’s usually after the MAIN DIVS section……. like in the Template CSS… I’m using ja zite. just trying adjust it to make it the correct size for smartphones.. right now the logo is too big and off to the right.. I typically open up a copy of css files in notepad2 to get acquainted easier on the eyes..lol Is there a different method?

#2
What is the best resource for me to learn how to change the css or really just a background image in a specific article/K2Item to give it a different look.. I’ve seen the official Joomla instructions but they seem to be written for J1.5.. can you recommend a link or Joomlart section to learn this for application on joomlart templates.. I really like your templates but often the need arises.

THANKS!!!!!!!!!!

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

#487341

1) You can change logo on mobile layout by

Open templates/ja_zite/css/layout-mobile.css file

/* Logo Image ---*/
h1.logo {
float: none;
height: 131px;<-change match with height logo mobile
margin: 0 auto;
width: 527px;<-change match with width logo mobile
}

h1.logo a {
background: url(../images/logo.png) no-repeat left top;<-change to other logo mobile
display: block;
height: 131px;<-change match with height logo mobile
width: 527px;<-change match with height logo mobile
}

2) Open templates/ja_zite/css/layout.css file
from


#ja-current-content, #ja-main {
float: right;
}

change to


#ja-current-content, #ja-main {
float: right;
background: ur(your_path_background);
}


Remember to clear cache from Admin area

[marioss456 Friend marioss456Join date: March 2012Posts: 19Downloads:3Uploads:2 Thanks: 11 Thanked: 4 times in 1 posts]

#487410

Thanks.. Sounds good.. but I cannot find these lines.. It seems like all of Logo Image/ h1 lines are missing.. This is kinda unique…
This is all I find that is closest to what you wrote in the “layout mobile css” for ja zite…

/* Headings & Titles —*/
h1 { font-size: 1.5em !important; }

h2 { font-size: 1.25em !important; }

h3 { font-size: 1.1em !important; }

h4 { font-size: 10px !important; }

h5 { font-size: 10px !important; }

or this section…

}

h4.title-logo {
font-size: 1.15em !important;
}

Usually it would be by the main div, Here is that part..

/* MAIN LAYOUT DIVS
——————————————————— */
.main {
width: 100% !important;
max-width: 480px !important;
margin-left: 0px !important;
margin-right: 0px !important;
}

.main .inner {
padding-left: 0px !important;
padding-right: 0px !important;
}

body.bd #ja-wrapper {
min-width: 320px !important;
}

I included a copy of the css file..

Thanks …. M

---

Attachments:

1. layout-mobile.zip

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

#487721

1) Open templates/ja_zite/css/layout-mobile.css file

add new script

/* Logo Image ---*/
h1.logo {
float: none;
height: 131px;<-change match with height logo mobile
margin: 0 auto;
width: 527px;<-change match with width logo mobile
}

h1.logo a {
background: url(../images/logo.png) no-repeat left top;<-change to other logo mobile
display: block;
height: 131px;<-change match with height logo mobile
width: 527px;<-change match with height logo mobile
}

With path logo image templates/ja_zite/images/logo.png

2) Open templates/ja_zite/css/layout.css file

Line 68:

from


#ja-current-content, #ja-main {
float: right;
}


change to

#ja-current-content, #ja-main {
float: right;
background: ur(your_path_background);
}

[Author]

Posts