CSS Guide

From: Dr Nick (FOZZA)22 Sep 2010 01:08
To: ALL1 of 19

Just trying to make a new style for a forum.

 

Understand enough about the CSS to plug in the correct hex color where I need to.

 

However not sure which bit of the SS coresponds to which bit of the forum.

 

Is there an idiots guide or a picture ref etc?

 

Cheers

 

Fozza

From: CHYRON (DSMITHHFX)22 Sep 2010 01:31
To: Dr Nick (FOZZA) 2 of 19
Try something like dom inspector to identify exactly which element's style you need to fuck with.
From: Peter (BOUGHTONP)22 Sep 2010 08:58
To: Dr Nick (FOZZA) 3 of 19
What that bloke said.

More specifically, get Firebug plugin for Firefox, and use its inspect tool, and it'll identify where styles come from.

(There's similar tools built into IE/Chrome/Opera, but Firebug is just that bit easier.)
EDITED: 22 Sep 2010 09:01 by BOUGHTONP
From: Dr Nick (FOZZA)22 Sep 2010 09:28
To: Peter (BOUGHTONP) 4 of 19
Cool have installed them both.

Just trying to figure out on the fly why things like this is happening.

I would like the lgo in the top.php to be floating a little higher. so it is not cut off come sa....

From: koswix22 Sep 2010 09:34
To: Dr Nick (FOZZA) 5 of 19
It's because you have the ask jeeves toolbar installed.
From: Dr Nick (FOZZA)22 Sep 2010 10:30
To: koswix 6 of 19
Happens on firefox too. Which has no extra tool bars. :(
From: JonCooper22 Sep 2010 13:35
To: Dr Nick (FOZZA) 7 of 19
if that was HTML and not PHP I would suggest looking at the 'border' properties - does PHP (or the CSS) set the 'border' dimension?
From: ANT_THOMAS22 Sep 2010 13:39
To: ALL8 of 19
Here's the code from the top frame on here...

HTML code:
<body style="margin: 0px; background-color: rgb(36,55,74);">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td align="left" valign="middle"><a href="http://www.beehiveforum.net/" target="_blank"><img src="./images/beehive_logo.png" border="0" alt="Beehive Logo" /></a></td>
    <td align="right" valign="middle"><a href="http://sourceforge.net" target="_top"><img src="http://sourceforge.net/sflogo.php?group_id=50772&amp;type=2" width="125" height="37" border="0" alt="SourceForge.net Logo" /></a>&nbsp;</td>
 
  </tr>
</table>
</body>
 

Make sure you've got the margins and stuff as 0 and 0px. All you really need to do here is change the images and colours.
From: Dr Nick (FOZZA)22 Sep 2010 16:29
To: ANT_THOMAS 9 of 19

Yeah all set to 0

 

I think I just need to add a few rows (75 rather than 60 to the top frame with the logo in) . However I can't find the file to change that in.

From: Peter (BOUGHTONP)22 Sep 2010 23:42
To: Dr Nick (FOZZA) 10 of 19
quote:
I think I just need to add a few rows (75 rather than 60 to the top frame with the logo in)


So search the source code for 60, find the relevant place, and change it to 75. :)


And if you're about to ask 'how', then grab software like FileLocator Lite which allows you to do regex searches, and search *.php files for "\b60\b" (without quotes) and it should show you relevant matches (without including 360 or 600 or similar; that's what the \b things prevent).


Though in this specific case, what you want is in index.php - there's a handful of occurrences where the top frameset size is set to 60 in assorted ways - change to 75 and you should be fine.
(Possibly there are some other files too, but try index.php first and if it doesn't work use the search above to locate others.)
EDITED: 22 Sep 2010 23:47 by BOUGHTONP
From: CHYRON (DSMITHHFX)23 Sep 2010 11:11
To: Dr Nick (FOZZA) 11 of 19
try a float: attribute.
From: Peter (BOUGHTONP)23 Sep 2010 11:24
To: Dr Nick (FOZZA) 12 of 19
Why would he do that? Floating doesn't change height.
From: CHYRON (DSMITHHFX)23 Sep 2010 23:57
To: Peter (BOUGHTONP) 13 of 19
Abandoning using tables for layout structure would be my first choice, but we're looking for desperate hacks here...
From: Peter (BOUGHTONP)23 Sep 2010 23:59
To: CHYRON (DSMITHHFX) 14 of 19
Desperate hacks? :? He just wants his top bar bigger to fit a larger image.

He can resize the frame, plonk in the new image, and all will be fine?
From: CHYRON (DSMITHHFX)24 Sep 2010 00:22
To: Peter (BOUGHTONP) 15 of 19
Really. WTF is that white margin top and left, then?
From: Peter (BOUGHTONP)24 Sep 2010 01:31
To: CHYRON (DSMITHHFX) 16 of 19
I dunno, I wasn't paying attention. Is it not part of the image?

It's probably a white margin. Or white padding. Or a white border. Maybe even a white outline.

But in any case, Firebug can identify what it's on and it can be removed by adding/modifying appropriate styles - and if markup needs changing, since it's a non-default webtag, the top.html can be modified freely, and wont get overwritten on upgrade.


Though this might all be pointless if he's got it fixed now - I am wondering a bit why Fozza's not returned yet to say "all working" or "help I'm stuck" or something else. :S
From: CHYRON (DSMITHHFX)24 Sep 2010 02:37
To: Peter (BOUGHTONP) 17 of 19

Yeah well, duh. :{)

 

Wifout the actual code to look at, we're all just guessing.

 

Just guessing, if a float:left don't fix it, or a position:absolute; left:0; top:0; don't fix it, the poor bastard is fuxored, and good luck with that.

 

:-(( :-(( :-((

From: Dr Nick (FOZZA)24 Sep 2010 08:31
To: Peter (BOUGHTONP) 18 of 19
quote:
I am wondering a bit why Fozza's not returned yet to say "all working" or "help I'm stuck" or something else


Because Fozza has been away on a business meeting.

But am back now :)

Yes the index.php was the key it had two references to top_frame which needed to be changed.

I had changed one of them before but missed the second one.

The forum is www.evelofa.com/forum
I still need to play with it a bit but on the whole it's working.

Would like to get the color scheme more like the actual site and I would maybe like to customsise a few more of the icons. Overall however I'm quite chuffed with it.

Massive thanks for everybodies help getting it up and running
From: milko28 Sep 2010 17:12
To: Dr Nick (FOZZA) 19 of 19
Hey buddy. why haven't you called it "League of Ascension"? (giggle)