Joomla Templates Club 406,261 posts

[maryp Friend marypJoin date: April 2009Posts: 36Downloads:0Uploads:0 Thanks: 19]

#183565

How can I make the area/space higher to fit my logo. I don’t want to shrink the logo. Also, how can you see the RGB. I want to have the blue from JA_Selini and make it the blue of JA_Nex. I don’t know how to get to the css to change.:-[

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#478213

Hi,

You can make change easily by using Google chrome inspect element or Firebug for Firefox. What I usually do is set Compress CSS in Template manager to No, then hover on any element (div, logo, image, ..) you want and right click on it and then click on inspect element, it will show you which CSS class it is using and which CSS file and the path to this element on the right side. then you can go to the file and replace it with new CSS you change.

1 user says Thank You to Saguaros for this useful post

1. maryp

[splico123 Friend splico123Join date: January 2007Posts: 339Downloads:80Uploads:7 Thanks: 24 Thanked: 93 times in 16 posts]

#478680

All info about log is located here and change is as you see fit:
h1.logo a {
background: url('../templates/ja_nex/images/logo.png') no-repeat center center;
display: block;
height: 62px;
width: 152px;
}
and

h1.logo {
height: 62px;
width: 152px;
}
which are located in template.css file.

Hope that helps

1 user says Thank You to splico123 for this useful post

1. maryp

[spionen Friend spionenJoin date: June 2008Posts: 13Downloads:0Uploads:0 Thanks: 7]

#480038

Hello there!
Like the thread-starter, I also needed to increase the height of the logo field, or rather the coloured space surrounding it (the field determined by your choice in the template settings).
After going after the source using Firebug, I made changes to the “#ja-header” css code (I added the line “height: 120px;”
It looked fine.
Problem was it only aplied to the index-page of my site (unfortunately not live just yet).
I traced this to the above mentioned css compression mode mentioned above. If I set this to “no” or “linked files” the changes works fine, however if I set it to “join&minify” the added code won´t affect anything but the height of the mentioned field on the index page.

I also fiddled with the code as suggested by splico123, but this only affects the actual image (logo) and not the coloured field around it. Unfortunately.

So my question is: Is there a better way of doing this? I can run the site with css-compression set to “linked files” but how will this affect things?

And to splico123: I´m I missing something or have you actually been able to change the height the logo/header field by changing this particular code?

Grateful for answers!

And of course. Heres the code in the JA Nex “template.css” I´ve been fiddeling with:


/* HEADER
--------------------------------------------------------- */
#ja-header { background: #c33
}

#ja-header .main {
background: url(../images/map-bg.png) no-repeat left bottom;
padding: 8px 0 15px 0;
}

h1.logo, div.logo-text h1 {
float: left;
font-size: 250%;
line-height: 1;
margin-left: -30px;
}

div.logo-text h1 { margin-left: 0; }

/* Logo Image ---*/
h1.logo { height: 62px; width: 152px; }

h1.logo a {
background: url(../images/logo.png) no-repeat center center;
display: block;
height: 62px;
width: 152px;
}

/* Logo Text ---*/
div.logo-text h1 {
font-family: Arial, sans-serif;
font-size: 250%;
font-weight: bold;
}

div.logo-text h1 a { background: #fff color: #c33 text-decoration: none; }

p.site-slogan {
clear: both;
color: #fff
display: block;
font-size: 85%;
margin: 3px 0 0;
padding: 0;
text-transform: uppercase;
}

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#480098

Hi,

Linked files or Join & Minify files in options of compression in template manager helps to compress all css files in your site to just 1 file.

If you’re in development stage, please set this compress to No, it’ll be easier.

In case, your changes only affects to index page since you may assign different profile to other pages than index page. You can go to that page, use Firebug and look for appropriate css file to make the same change.

Once done, clean JAT3 cache.

1 user says Thank You to Saguaros for this useful post

1. maryp

[splico123 Friend splico123Join date: January 2007Posts: 339Downloads:80Uploads:7 Thanks: 24 Thanked: 93 times in 16 posts]

#480110

Hey ok, what i think is that when you applied that to the index page you have multiple template styles assigned in the backend, if you apply it to default template.css you also have to apply that to each template.css in subfolders of the styles, or just assign one template for whole website, ie. delete the pageIDs set in template settings.

hope that helps.

1 user says Thank You to splico123 for this useful post

1. maryp

[Author]

Posts