rejetto forum

Software => HTML & templates => HFS ~ HTTP File Server => RAWR-Designs => Topic started by: meph++ on March 24, 2010, 11:24:28 AM

Title: ToG 4.0.2 How to add custom logo
Post by: meph++ on March 24, 2010, 11:24:28 AM

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
(http://img696.imageshack.us/img696/9551/toglogo.jpg) (http://img696.imageshack.us/i/toglogo.jpg/)

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

Many thanks

Title: Re: ToG 4.0.2 How to add custom logo
Post by: meph++ on March 26, 2010, 03:12:21 PM

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

Title: Re: ToG 4.0.2 How to add custom logo
Post by: Wasserfloh on March 27, 2010, 12:22:22 AM

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

Title: Re: ToG 4.0.2 How to add custom logo
Post by: rejetto on March 27, 2010, 12:38:19 AM

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

Title: Re: ToG 4.0.2 How to add custom logo
Post by: meph++ on March 28, 2010, 10:07:33 AM

Quote from: Wasserfloh on March 27, 2010, 12:22:22 AM

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

Quote from: rejetto on March 27, 2010, 12:38:19 AM

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..

Title: Re: ToG 4.0.2 How to add custom logo
Post by: rejetto on March 28, 2010, 11:44:16 AM

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

Title: Re: ToG 4.0.2 How to add custom logo
Post by: TSG on March 28, 2010, 11:52:37 AM

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;
}


Title: Re: ToG 4.0.2 How to add custom logo
Post by: meph++ on March 29, 2010, 08:57:07 AM

Quote from: TSG on March 28, 2010, 11:52:37 AM

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]
}(http://img514.imageshack.us/img514/3565/immagine1rg.jpg) (http://img514.imageshack.us/i/immagine1rg.jpg/)
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]
}(http://img265.imageshack.us/img265/6066/immagine2on.jpg) (http://img265.imageshack.us/i/immagine2on.jpg/)
the logo appears on the address line

 ??? suggestions

thanks always

Title: Re: ToG 4.0.2 How to add custom logo
Post by: TSG on March 29, 2010, 11:10:08 AM

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.

Title: Re: ToG 4.0.2 How to add custom logo
Post by: meph++ on March 29, 2010, 11:18:01 AM

Yes yes Stevens now work  ;)

T H A N K S