Gossamer Forum: Products: Gossamer Links: Discussions: LUNA template

May 8, 2005, 10:27 AM

factures

Novice (22 posts)

May 8, 2005, 10:27 AM

Post #1 of 13

Shortcut

LUNA template

Hello all,

I would like to know how to get rid of the swirls.gif background image on headers. I wanted to delete the login/out (done) and clear the area (done also with background: none; in .css file) but the place shows now an empty area... I would like to place a banner there and cannot find out how.

Check my website in order to understand better (the banner should be on top of page and the empty space removed.

http://64.69.64.195/...inks/page.cgi?g=;d=1

Could you please help me? Thanks.

Another remarq for non mac users... safari 2.0 doesnt print correctly the tags (popular, new etc...)

May 8, 2005, 10:41 AM

pugdog

Veteran / Moderator (6956 posts)

May 8, 2005, 10:41 AM

Post #2 of 13

Shortcut

Re: [factures] LUNA template In reply to

hi,

There are a few "catches" to this, I've worked some out, for example, the

http://betterbeading.com/...ge.cgi?g=;t=luna;d=1

shows how I changed the left-side logo, to show simple text (the text was formerly moved off-screen with a -9999px margin.

Code:

<div id="header"> 
  <div id="loginbar"><a href="<%config.db_cgi_url%>/user.cgi<%if user.Username%>?logout=1<%endif%>" class="<%if user.Username%>in<%else%>out<%endif%>"><%if user.Username%>Logout<%else%>Login/Register<%endif%></a></div> 
  <div id="logo"><h1><a href="<%config.build_root_url%>"><%site_title%></a></h1></div> 
</div> 

/*--------*\ 
|* header *| 
\*--------*/ 
#logo { 
  width: 400px; 
  height: 60px; 
  background-image: none;  
/*  background: transparent url(images/logo.gif) top left no-repeat; */ 
  text-indent: 0px; 
} 
#logo a { 
  text-decoration: none; 
  display: block; 
  font-size: 30px; 
  padding-top: 20px; 
} 

#header { 
  background: transparent url(images/swirls.gif) top right no-repeat; 
} 
#loginbar { 
  float: right; 
  text-align: right; 
} 
#loginbar a { 
  margin-top: 25px; 
  padding: 10px 30px 10px 0px; 
  color: #212126; 
  font-weight: bold; 
  display: block; 
}

that is the relevant css, you can add to the luna.css file, and override the styles. It's partly modified, (left side) and just cut from luna_core for the right side. You can overrided by putting them into the luna.css.

If you look, the #logo.width property is what is probably kicking your banner down. You need to have enough room to put the two areas next to each other.

Sometimes, while debugging, changing the background: property to diffrent colors, and the display: property to block can help figure out where they are trying to fit themselves.

PUGDOG� Enterprises, Inc.

The best way to contact me is to NOT use Email.
Please leave a PM here.

May 8, 2005, 11:33 AM

factures

Novice (22 posts)

May 8, 2005, 11:33 AM

Post #3 of 13

Shortcut

Re: [pugdog] LUNA template In reply to

Thanks pugdog... but I cannot see what to do to remove the background of the right top picture (called swirls.gif) and area realted to it...

check my screenshoot that explain exactly what I want to do...

http://www.gossamer-threads.com/...ent;postatt_id=1921;

could you please be more specific about my problem?, thanks a lot for your help !

Cheers,

Steve

Last edited by:

factures: May 8, 2005, 11:35 AM

May 8, 2005, 11:47 AM

rgbworld

User (325 posts)

May 8, 2005, 11:47 AM

Post #4 of 13

Shortcut

Re: [factures] LUNA template In reply to

I think part of the problem is that you are using tables.

Add this code to luna.css and it should fix your problem.

Code:
#logo { 
  width: 150px; 
  height: 35px; 
  background-image: url(images/tagline.gif); 
} 

#header { 
  background: transparent; 
  float: left; 
}

Be advised that I don't quite understand the flow of your pages, but I tested this and it seems like the easiest way to fix your problem. Look here. I will leave this up for a few hours.

Chris
RGB World, Inc. - Software & Web Development.
rgbworld.com

May 8, 2005, 11:57 AM

factures

Novice (22 posts)

May 8, 2005, 11:57 AM

Post #5 of 13

Shortcut

Re: [rgbworld] LUNA template In reply to

Well, thaks a lot for your help Chris! now it's ok !!

last little tweak for a newbie in .css... if I would like to get the title (swissone) in the middle vertical position?

and 2nd subsiliary question... see on my screenshoot, how to change the tags to display them correctly (even in Safari 2 mac browser) ?

Cheers

Last edited by:

factures: May 8, 2005, 11:57 AM

May 8, 2005, 12:06 PM

rgbworld

User (325 posts)

May 8, 2005, 12:06 PM

Post #6 of 13

Shortcut

Re: [factures] LUNA template In reply to

Ok, try this...

In swiss.html, line 19 change the height.
<td valign="top" border="0" width="468" height="70"><script language="JavaScript">

Update luna.css with this...

Code:
#logo { 
  width: 150px; 
  height: 35px; 
  background-image: url(images/tagline.gif); 
margin-top: 15px;
}

You may also want to add this to luna.css to move everything down a little...

Code:
body { 
  margin: 5px; 
}

Peace,
Chris
RGB World, Inc. - Software & Web Development.
rgbworld.com

May 8, 2005, 12:43 PM

rgbworld

User (325 posts)

May 8, 2005, 12:43 PM

Post #7 of 13

Shortcut

Re: [factures] LUNA template In reply to

Ok, this should do it.
This change should probably be added to luna_core by GT as it fixes Safari 2.0 and doesn't appear to break any other browsers (at least on the mac).

Add this to luna.css

Code:
.new-item span, .updated-item span, .popular-item span, .unpaid-item span, .expired-item span, .free-item span, .bookmark-public span, .bookmark-default span {  
  vertical-align: top;  
}

I have added this one to my css as well.
I actually removed the background color and use colored type instead.
I don't really care for the "button" look.

Here's what I use (with above fix applied). Change colors to your liking.

Code:
/* link/bookmark status icons */  
.new-item, .updated-item, .popular-item, .unpaid-item, .expired-item, .free-item, .bookmark-public, .bookmark-default {  
  background: none;  
  font-weight: normal;  
  font-size: 9px;  
  color: #000000;  
  vertical-align: top;  
}  
.new-item {  
  color: red;  
}  
.updated-item {  
  color: #c5a600;  
}  
.popular-item {  
  color: green;  
}  
.unpaid-item {  
  color: #555555;  
}  
.expired-item {  
  color: #92589c;  
}  
.free-item {  
  color: red;  
}  

.new-item span, .updated-item span, .popular-item span, .unpaid-item span, .expired-item span, .free-item span, .bookmark-public span, .bookmark-default span {  
  padding: 0px 3px;  
  background: none;  
  vertical-align: top;  
}

I am going to delete that previous example of your page from my site now.

Chris
RGB World, Inc. - Software & Web Development.
rgbworld.com

Last edited by:

rgbworld: May 8, 2005, 12:44 PM

May 8, 2005, 2:07 PM

rgbworld

User (325 posts)

May 8, 2005, 2:07 PM

Post #8 of 13

Shortcut

Re: [rgbworld] LUNA template In reply to

Retraction...

Quote:

Ok, this should do it.
This change should probably be added to luna_core by GT as it fixes Safari 2.0 and doesn't appear to break any other browsers (at least on the mac).

Add this to luna.css

Code:
.new-item span, .updated-item span, .popular-item span, .unpaid-item span, .expired-item span, .free-item span, .bookmark-public span, .bookmark-default span {   
  vertical-align: top;   
}

That change fixes Safari 2.0, but breaks Firefox 1.0.3 on mac

The example that I personally use in the previous post (without buttons) works everywhere :-)

Chris

RGB World, Inc. - Software & Web Development.
rgbworld.com

May 8, 2005, 2:21 PM

brewt

Staff (4101 posts)

May 8, 2005, 2:21 PM

Post #9 of 13

Shortcut

Re: [rgbworld] LUNA template In reply to

I ran into that bug on Friday. I'll have to figure out a proper fix for it.

Adrian

May 8, 2005, 2:41 PM

brewt

Staff (4101 posts)

May 8, 2005, 2:41 PM

Post #10 of 13

Shortcut

Re: [brewt] LUNA template In reply to

Here's a real simple fix. Just change luna_core.css (fine to change it here since the change will be included in the next release) around line 463:

Code:
  vertical-align: top;

to:

Code:
  vertical-align: text-top;

The 'icon' isn't as high as it was before (since now it's at the top of the text next to it, which is small), but it works in all browsers.

Adrian

May 8, 2005, 4:40 PM

rgbworld

User (325 posts)

May 8, 2005, 4:40 PM

Post #11 of 13

Shortcut

Re: [rgbworld] LUNA template In reply to

Hi factures,

I spent more time on your javascript/table problem. My fix did not work in IE 5 for mac.
I knew hacking #header style into a float was a bad idea, but without eliminating the
html table, it was the only way I could move the ads up on the page.
This is the "correct" way of fixing the problem :-)

1) First of all make Adriens suggested edit to luna_core.css

2) Forget about all the css I gave you previously and use this in luna.css instead

Code:
body {    
  margin-top: 5px;    
}    

#header {    
  background: transparent;    
  height: 60px; /* the height of your ad. Increase for white space below */    
}    

#loginbar {    
  display: none;    
}    

#logo {    
  width: 150px;    
  height: 35px;    
  background-image: url(images/tagline.gif);    
}    

/* A completely new style */    
#float_java {    
  float: right;    
  text-align: right;    
}

Then, you should fix "include_header.html" so it looks like this at the beginning

Code:
<div id="header">    
  <div id="loginbar"><a href="<%config.db_cgi_url%>/user.cgi<%if user.Username%>?logout=1<%endif%>" class="<%if user.Username%>in<%else%>out<%endif%>"><%if user.Username%>Logout<%else%>Login/Register<%endif%></a></div>    

    <div id="float_java">    
        <script language="JavaScript">    
        if(typeof(adlink_randomnumber)=="undefined"){var adlink_randomnumber=Math.floor(Math.random()*10000000000)}    
        document.write('<scr'+'ipt language="JavaScript" src="http://ad.ch.doubleclick.net/adj/swissone.ch/homepage;dcopt=ist;sz=468x60;tile=1;ord='+adlink_randomnumber+'?"><\/scr'+'ipt>');    
        </script>    
        <noscript>    
            <a href="http://ad.ch.doubleclick.net/jump/swissone.ch/homepage;sz=468x60;tile=1;ord=1234567890?" target="_blank"> <img src="http://ad.ch.doubleclick.net/ad/swissone.ch/homepage;sz=468x60;tile=1;ord=1234567890?" border="0" width="468" height="60"> </a>    
        </noscript>    
    </div>    

  <div id="logo"><h1><a href="<%config.build_root_url%>"><%site_title%></a></h1></div>    
</div>

That will remove the html table that you were using.
The login bar has been hidden in the css file. How will people login?

I have tested this in IE 5, FireFox 1.0.3 and Safari 2.0, all mac.

Chris
RGB World, Inc. - Software & Web Development.
rgbworld.com

Last edited by:

rgbworld: May 8, 2005, 4:51 PM

May 8, 2005, 4:50 PM

rgbworld

User (325 posts)

May 8, 2005, 4:50 PM

Post #12 of 13

Shortcut

Re: [factures] LUNA template In reply to

As for moving the logo down, add canvas in photoshop. Your ads are 60px tall. I would make your logo the same height as the ads and center it vertically within the 60px.

Quote:

last little tweak for a newbie in .css... if I would like to get the title (swissone) in the middle vertical position?

Hope that helps,
Chris

RGB World, Inc. - Software & Web Development.
rgbworld.com

May 9, 2005, 6:17 AM

factures

Novice (22 posts)

May 9, 2005, 6:17 AM

Post #13 of 13

Shortcut

Re: [rgbworld] LUNA template In reply to

THANK YOU VERY MUCH IT WORKS GREAT NOW!!!!

-> about the login bar (The login bar has been hidden in the css file. How will people login?)

I dont like people to login or use those fancy mods... my site is basically a directory and most of people who would have logged would have not participated or posted stupid inputs etc... I take the control of all by myself and this is the best for my site... ;)

Cheers !!!!

LUNA template

Attached Files:

Last edited by:

Last edited by:

Attached Files:

Last edited by:

Last edited by: