rejetto forum

ToG 4.0.2 How to add custom logo

meph++ · 10 · 1982

0 Members and 1 Guest are viewing this topic.

Offline meph++

  • Occasional poster
  • *
    • Posts: 30
    • View Profile
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


Offline meph++

  • Occasional poster
  • *
    • Posts: 30
    • View Profile
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


Offline Wasserfloh

  • Occasional poster
  • *
    • Posts: 81
    • View Profile
remove background:url('/~img_graph300x100xx003366x004480') right center no-repeat #003366;


Offline rejetto

  • Administrator
  • Tireless poster
  • *****
    • Posts: 13308
    • View Profile

Offline meph++

  • Occasional poster
  • *
    • Posts: 30
    • View Profile
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..



Offline rejetto

  • Administrator
  • Tireless poster
  • *****
    • Posts: 13308
    • View Profile
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


Offline TSG

  • Moderator
  • Tireless poster
  • *****
    • Posts: 1934
    • View Profile
    • RAWR-Designs
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;
}
« Last Edit: March 28, 2010, 11:55:44 AM by TSG »


Offline meph++

  • Occasional poster
  • *
    • Posts: 30
    • View Profile
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


Offline TSG

  • Moderator
  • Tireless poster
  • *****
    • Posts: 1934
    • View Profile
    • RAWR-Designs
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.


Offline meph++

  • Occasional poster
  • *
    • Posts: 30
    • View Profile