ToG 4.0.2 How to add custom logo

[meph++]

Hi, TSG & Giant Eagle  I always appreciate your work 

I wanted to ask how can I add a custom logo (exsample 120x100) in the upper left of the template as the photos, and moving 3 lines to the right

nameserver
DATE
Current Directory:Home

the screenshot was created with the paint


I tried to add some parameters on the file tog.css under folder code but not working properly 

Many thanks

[meph++]

I try to change in tog.css this:

an I create a logo and put it under image folder

Code: [Select]

#header {
color:#FFF;
height:100px;
[color=red]background:url('../images/myPersonallogo.jpg') left center no-repeat;[/color]
background:url('/~img_graph300x100xx003366x004480') right center no-repeat #003366;
border-bottom:0;
}
#header div {
height:100px;
font-size:20px;
line-height:35px;
[color=red]padding-left:150px;[/color]
}

the secon option work, move the 3 lines on the right (150px) but the first row not work.. the logo not show

any suggestion

Thanks

[Wasserfloh]

remove background:url('/~img_graph300x100xx003366x004480') right center no-repeat #003366;

[rejetto]

the url should not be "../images" but "/images"

[meph++]

remove background:url('/~img_graph300x100xx003366x004480') right center no-repeat #003366;

I tried myself but if I remove the line no longer displays the graph on the right, there is a way to see both

the url should not be "../images" but "/images"

thanks Rejetto, I copied the row from another template (RAWR-Template) which has the logo on the left and tried to adapt the ToG css file, however with (../) logo appears but covers the entire frame, then the graph is that the information the server does not appear..

[rejetto]

there's only one background per element.
if you want to not remove the graph as it is, you should add an <img src='/images/logo'> at the right place

[TSG]

Wont this work:

Code: [Select]

/* this is layer 0 */
#header {
color:#FFF;
height:100px;
background:url('/~img_graph300x100xx003366x004480') right center no-repeat #003366;
border-bottom:0;
}
/* this is layer 1 */
#header div {
height:100px;
font-size:20px;
line-height:35px;
padding-left:150px;
background:url('/images/myPersonalLogo.jpg') left center no-repeat transparent;
}

You could also create another surrounding div with the same properties, however I am fairly certain the above will work.

Code: [Select]

/* this is layer 0 */
#header {
color:#FFF;
height:100px;
background:url('/~img_graph300x100xx003366x004480') right center no-repeat #003366;
border-bottom:0;
}
/* this is layer 1 */
#header div {
height:100px;
font-size:20px;
line-height:35px;
padding-left:150px;
}
/* this is layer 2 */
#header div div {
height:100px;
background:url('/images/myPersonalLogo.jpg') left center no-repeat transparent;
}


[meph++]

Wont this work:

Code: [Select]

/* this is layer 0 */
#header {
color:#FFF;
height:100px;
background:url('/~img_graph300x100xx003366x004480') right center no-repeat #003366;
border-bottom:0;
}
/* this is layer 1 */
#header div {
height:100px;
font-size:20px;
line-height:35px;
padding-left:150px;
background:url('/images/myPersonalLogo.jpg') left center no-repeat transparent;
}

You could also create another surrounding div with the same properties, however I am fairly certain the above will work.

Code: [Select]

/* this is layer 0 */
#header {
color:#FFF;
height:100px;
background:url('/~img_graph300x100xx003366x004480') right center no-repeat #003366;
border-bottom:0;
}
/* this is layer 1 */
#header div {
height:100px;
font-size:20px;
line-height:35px;
padding-left:150px;
}
/* this is layer 2 */
#header div div {
height:100px;
background:url('/images/myPersonalLogo.jpg') left center no-repeat transparent;
}


Thanks Stevens & Rejetto.

In all cases if I put background: url ('/images logo does not appear
it'd work background: url ('../images


I did both tests but did not work as expected:

1

Code: [Select]

#header {
color:#FFF;
height:100px;
background:url('/~img_graph300x100xx003366x004480') right center no-repeat #003366;
border-bottom:0;
}
#header div {
height:100px;
font-size:20px;
line-height:35px;
padding-left:150px;
[color=red]background:url('../images/mylogo.jpg') left center no-repeat transparent;[/color]
}
logo appears twice as photos


2

Code: [Select]

#header {
color:#FFF;
height:100px;
background:url('/~img_graph300x100xx003366x004480') right center no-repeat #003366;
border-bottom:0;
}
#header div {
height:100px;
font-size:20px;
line-height:35px;
padding-left:150px;
}
[color=red]#header div div {
height:100px;
background:url('../images/mylogo.jpg') left center no-repeat transparent;[/color]
}
the logo appears on the address line

  suggestions

thanks always

[TSG]

Code: [Select]

#header {
color:#FFF;
height:100px;
background:url('/~img_graph300x100xx003366x004480') right center no-repeat #003366;
border-bottom:0;
}
#header div {
height:100px;
font-size:20px;
line-height:35px;
padding-left:150px;
background:url('../images/mylogo.jpg') left center no-repeat;
}
#header div div {
background: transparent;
}

Whats happening with this is that you are talking to ALL 'div' below. That code should work, not great but should work.

[meph++]

Yes yes Stevens now work 

T H A N K S