Site design tweaks

Community news posted by the SSC staff.
User avatar
Silence
Posts: 3825
Joined: Sun Apr 09, 2006 9:01 pm

Site design tweaks

Post by Silence » Fri Jun 20, 2008 3:41 am

Now that Firefox 3 is out, we'll have to start testing our HTML/CSS against the Cairo rendering engine. Previous versions of Firefox/Flock and all versions of Mozilla and Netscape use the Gecko rendering engine. The new one doesn't have any margins between the two columns of content on the front page of the website.

I'd also like to try making the Super Soaker Central banner clickable. That's been on our to-do list for quite a while but it's very easy to dodge.

User avatar
Specter
Posts: 474
Joined: Sun May 13, 2007 4:57 pm

Re: Site design tweaks

Post by Specter » Fri Jun 20, 2008 5:24 am

I'd also like to try making the Super Soaker Central banner clickable. That's been on our to-do list for quite a while but it's very easy to dodge.
I think I suggested having that done around the time of the big site makeover. I always like having/using clickable banners.
My "arsenal": Customizable APH, Storm 600 pistol (still haven't finished fixing this), launcher- Model:AB1.0(Decommissioned), AB1.5, soon AB 1.1(2"rebuild) maybe ill get something else in the future
My site Image My website/forum is back up and running, for the most part after it having been deleted in october

User avatar
DX
Posts: 1780
Joined: Wed Feb 04, 2004 1:00 pm

Re: Site design tweaks

Post by DX » Fri Jun 20, 2008 6:03 am

That's pretty simple.

Code: Select all

a#logo-click {
	display:block;
	width :( some number)px;
	height :( some number)px;
	float:left;
	}
Mess With the Best, Get Soaked Like the Rest!

2004 Red Sox - World Series Champions
2007 Red Sox - World Series Champions!

User avatar
SSCBen
Posts: 6449
Joined: Sat Mar 22, 2003 1:00 pm

Re: Site design tweaks

Post by SSCBen » Fri Jun 20, 2008 1:29 pm

Yeah, I never got around to making the banner clickable. It shouldn't be that hard but I never did it. If you did it SilentGuy that would be great. Any homepage tweaks would be fine too. Just make sure they still work in IE and Firefox 2.

User avatar
Silence
Posts: 3825
Joined: Sun Apr 09, 2006 9:01 pm

Re: Site design tweaks

Post by Silence » Sat Jun 21, 2008 1:15 am

DX, the main problem right now is the image is shown as the background of the header <div>. I'd say the best solution is to add a column to the front of the table of links in the header, make the leftmost column stretch across the entire unused space, and put the image in there. Unfortunately, the logo is taller than each row in the table and the table itself. Maybe the <div> should have a massive, one-row, two-column table. Then the logo could be on the left and the rest of the header could be lumped in on the right.

Clearly I'm not comfortable at all with HTML and CSS. If anybody has a better solution, it would be of great help.

Specter, you probably did mention having a clickable logo. Actually we all wanted one, but nobody got around to implementing it. Now that I think about it, that really is a crime, especially for visitors who care more about the rest of the website than the forums. We definitely shouldn't make them think.

Ben, I can probably fix the banner, but I'm totally clueless regarding the rendering issue in Cairo. Sorry, but I can't help on that front.

User avatar
SSCBen
Posts: 6449
Joined: Sat Mar 22, 2003 1:00 pm

Re: Site design tweaks

Post by SSCBen » Sat Jun 21, 2008 1:21 am

I'll look at the rendering issue then. The easiest way to do the logo link (I think at least) would be with a transparent image. I vaguely recall reading something about that.

Google turned up this: http://haacked.com/archive/2006/01/13/C ... iaCSS.aspx

That shouldn't be that hard to implement. I'll give it a try tomorrow if you don't beat me to it. Try editing the website template first before changing the homepage and forum skin. The backend's a little primitive because every page but the homepage uses the same header and footer. Once I rewrite sCMS we should be okay, and I'm been working on rewriting it plus a blog for trettel.org.

User avatar
Silence
Posts: 3825
Joined: Sun Apr 09, 2006 9:01 pm

Re: Site design tweaks

Post by Silence » Sat Jun 21, 2008 2:15 am

Honestly, I don't understand why the author of that article used a blank anchor tag + background instead of an anchor tag with the image in it. I mean, if he's using an anchor tag anyway, does it really matter? In this case, at any rate, we still have to format the header section to display the anchor in the right place, at which point it won't matter how the image is displayed. And as the first comment mentioned, a background image won't print (which is probably a good thing).

Incidentally, that article didn't show the slash at the end of the <img/> tag.

I could probably hack up a solution using z-levels. But that's messy and totally unnecessary since the image and text don't even overlap here (or they shouldn't, at any rate).

Edit: Now I feel stupid. I see the author used CSS to reposition the tag. That's a bit of a hack in my opinion since I don't think CSS should be used to position elements, but it works. And maybe I'm just wrong anyway.

At any rate, you could probably put an <img/> in the repositioned <a>.

Edit again: After I catch up on new posts I'll try to make the changes. I'll need to install FireFTP on this computer though, unless there's an online FTP service.

User avatar
SSCBen
Posts: 6449
Joined: Sat Mar 22, 2003 1:00 pm

Re: Site design tweaks

Post by SSCBen » Sat Jun 21, 2008 2:32 am

After some examination, what that blog is proposing wouldn't work for us as written. The absolute positioning stuff is tricky. It defines position based on one of the corners of the window, now the <div>. So unless we change a few things it won't work for us. We either need to use 100% width on the #header, #main, and #footer divs with fixed padding on each side and then use his method or change the logo to a real anchor. I think the first option would involve the least coding. I'll look into it tomorrow.

Edit: Oops. I didn't exactly know what I'm talking about but what he had should work for us afterall. Read this quote:
Notice that I had to add "position: relative;" to the header element . That ensures that the absolute positioning applied to the header link is relative to the header and not the entire document.

User avatar
DX
Posts: 1780
Joined: Wed Feb 04, 2004 1:00 pm

Re: Site design tweaks

Post by DX » Sat Jun 21, 2008 4:11 am

DX, the main problem right now is the image is shown as the background of the header <div>. I'd say the best solution is to add a column to the front of the table of links in the header, make the leftmost column stretch across the entire unused space, and put the image in there. Unfortunately, the logo is taller than each row in the table and the table itself. Maybe the <div> should have a massive, one-row, two-column table. Then the logo could be on the left and the rest of the header could be lumped in on the right.
Oh, then I guess I didn't know how SSC's logo was done. I have the logo click at my new site, it was really simple coding, just that snippet of CSS posted above ^ modifying the logo, which was set as the body background. Then again I haven't looked at SSC code since 2004...so yeah I have no idea how it is set up these days...
Mess With the Best, Get Soaked Like the Rest!

2004 Red Sox - World Series Champions
2007 Red Sox - World Series Champions!

User avatar
Silence
Posts: 3825
Joined: Sun Apr 09, 2006 9:01 pm

Re: Site design tweaks

Post by Silence » Sat Jun 21, 2008 4:40 am

Ben: Even if the position was absolute, would it be legal to say "5% + 50 px" (or the equivalent)? Or does CSS lack the ability to calculate the end result like that? At any rate, it would solve the problem of the proportional page margin and improportional header margin.

User avatar
Silence
Posts: 3825
Joined: Sun Apr 09, 2006 9:01 pm

Re: Site design tweaks

Post by Silence » Sat Jun 21, 2008 5:37 am

Heh, forgot about the online FTP site I found - net2ftp. There are boatloads out there. I guess I trust FireFTP more anyway since it's on my machine.

Quick question (and one that shows my rust with CSS): Does #header a include #header table tr td a? In other words, does the sequence matter, or just the fact that each tag name is there? Does having table tr td in the middle break the chain?

In the current setup, the link <a> tag is the only one that's a direct subchild of the <div>. Will #header a only select that tag, or all the <a> tags inside the table, too? I'm hoping it'll only select the <a> tag.

EDIT: Doesn't look like I'm right. #header a is already specified in the current stylesheet, so it must apply to all the <a> tags inside the header. I'm going to add id="link" to the anchor tag and use #header a#link.

EDIT again: Found the css, found the image, got the dimensions...I think we're good to go.

EDIT: Tracked down the css and header templates in the CP, got the link working in the forum. Next up: adding a Forums logo next to the main one. That would have to be done with both logos in one background image, but with two links. Maybe the images should be in the links after, repositioned with CSS.

Final EDIT: I added the link to the home page's php file. I was debating doing so since you don't really need a link to the page you're on. But I figure consistency is more important than redundancy.
Last edited by Silence on Sat Jun 21, 2008 6:17 am, edited 1 time in total.

User avatar
Specter
Posts: 474
Joined: Sun May 13, 2007 4:57 pm

Re: Site design tweaks

Post by Specter » Sat Jun 21, 2008 7:33 am

YAY, clickable banner. Nice job Silent :)
But is it possible to make it, so when you're on a forum page that it goes to the Forum Index rather than the main home page? And when on any other page in the site it goes to the main home page. Or is that too much work/Would it work at all?
My "arsenal": Customizable APH, Storm 600 pistol (still haven't finished fixing this), launcher- Model:AB1.0(Decommissioned), AB1.5, soon AB 1.1(2"rebuild) maybe ill get something else in the future
My site Image My website/forum is back up and running, for the most part after it having been deleted in october

User avatar
Silence
Posts: 3825
Joined: Sun Apr 09, 2006 9:01 pm

Re: Site design tweaks

Post by Silence » Sat Jun 21, 2008 4:55 pm

I mentioned the possibility of having two logos when in the forums - the current one that goes to the main page plus another that goes to main forums page. I'm thinking the word "Forums" could be added below the regular text in the current logo, with the new image just being displayed for the forums. Then another invisible link could be added in that section of the image. The "Forums" text would probably be red or something to show that it's a different link.

Regardless, I'm not sure what font, etc. Ben used for the logo text. Judging from the unaligned bottoms of each letter, I'm guessing it's Arial, but I'm not sure. I think he did it in Inkscape so he has the sources to work with the image anyway, so I'll just let him do it.

Also, the word forums could be added with the entire image going to the forums main page. It would be nice for the forums main page to link to the main main page, but the templates don't allow that to be done.

EDIT: I've searched for more information about Cairo, as it's been a long time since I read about it. Apparently Cairo is just an external graphics library - so in Gecko 1.9, which FF3 uses, they just outsourced some of the work. And apparently Cairo renders pages more accurately than Gecko 1.8 did, so I'm not sure why our home page is displaying incorrectly.
Last edited by Silence on Sat Jun 21, 2008 5:06 pm, edited 1 time in total.

User avatar
SSCBen
Posts: 6449
Joined: Sat Mar 22, 2003 1:00 pm

Re: Site design tweaks

Post by SSCBen » Sat Jun 21, 2008 9:17 pm

Thanks for fixing the logo.
I mentioned the possibility of having two logos when in the forums - the current one that goes to the main page plus another that goes to main forums page. I'm thinking the word "Forums" could be added below the regular text in the current logo, with the new image just being displayed for the forums. Then another invisible link could be added in that section of the image. The "Forums" text would probably be red or something to show that it's a different link.
I'll see what I can do about that and fixing the homepage.

User avatar
cantab
Posts: 1492
Joined: Fri Oct 19, 2007 1:35 pm

Re: Site design tweaks

Post by cantab » Fri Jun 27, 2008 5:17 pm

I'm finding the logo seems to be clickable, but the clickable area is larger than the image itself - to the point that it partially overlaps the forum breadcrumbs (ie where it says "Super Soaker Central > Super Soaker Central > News"). It's rather annoying when I try to click on what should be a link in the forums and it takes me back to the main site.

This is in Iceweasel (==Firefox) 2.0.0.14 on Kanotix.

Locked