Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
The Brave World of ZB CSS...
Topic Started: Jun 8 2009, 06:06 PM (584 Views)
Karabox Jun 8 2009, 06:06 PM Post #1
Member Avatar
I am Iron Man.
[ * * * ]
 I'm going to begin work on my first Zetaboard Skin. Any advice?
Offline Profile Quote Post Goto Top
 
Viral. Jun 8 2009, 06:09 PM Post #2
Member Avatar
Member
[ * * * * * * ]
 Learn CSS:
http://www.w3schools.com/css/
http://www.html.net/tutorials/css/introduction.asp
http://www.learn-css-tutorial.com/

Then Read This:
http://docs.zetaboards.com/themes/themeguide
Online Profile Quote Post Goto Top
 
Karabox Jun 8 2009, 06:14 PM Post #3
Member Avatar
I am Iron Man.
[ * * * ]
 Thanks. I like to think I know CSS as I've made some stylesheets but they could all suck and I could be horrible at CSS. Anyway, I was looking for more along the lines of your last link.
Offline Profile Quote Post Goto Top
 
Pete B Jun 8 2009, 06:31 PM Post #4


Use firefox, and install the firebug extension.
Offline Profile Quote Post Goto Top
 
Aeroice Jun 8 2009, 07:13 PM Post #5
C'est un piège!
[ * * * ]
Pete B
Jun 8 2009, 06:31 PM
Use firefox, and install the firebug extension.
!!! This is very important !!!

So important that I did something I rarely do - that is, put multiple exclamation marks. I can't tell you how important firebug is for anyone dealing with anything ZB. The ability to quickly traverse the DOM, see all of the classes and IDs, and run script on-page is absolutely essential.
Offline Profile Quote Post Goto Top
 
Karabox Jun 8 2009, 07:16 PM Post #6
Member Avatar
I am Iron Man.
[ * * * ]
Aeroice
Jun 8 2009, 07:13 PM
Pete B
Jun 8 2009, 06:31 PM
Use firefox, and install the firebug extension.
!!! This is very important !!!

So important that I did something I rarely do - that is, put multiple exclamation marks. I can't tell you how important firebug is for anyone dealing with anything ZB. The ability to quickly traverse the DOM, see all of the classes and IDs, and run script on-page is absolutely essential.
Thanks, to both you and Pete B for that.
Offline Profile Quote Post Goto Top
 
Lout Jun 9 2009, 05:09 PM Post #7
Member Avatar
Member
[ * * * * ]
Pete B
Jun 8 2009, 06:31 PM
Use firefox, and install the firebug extension.
I was 95% finished doing my first skin before I discovered Firebug. What I had spent 2-3 weeks doing I could have done in 2-3 hours with it. :(

But on the plus side, I learnt a lot by trial and error :lol:
Offline Profile Quote Post Goto Top
 
Nicola Jun 9 2009, 05:18 PM Post #8
.....

 I personally don't use Firebug unless editing HTML stuff. While it adds a few lines of junk at the top and also grabs the in-line CSS that cannot be altered directly on each board:
Spoiler: click to toggle
...at the end, I find the 'EditCSS' extension really super. My screen is wider than it is tall, so I prefer any 'real time' editing extensions to sit next to the window, not be half of it. But we all have our preferences ^_^
Offline Profile Quote Post Goto Top
 
Axonite Jun 9 2009, 05:20 PM Post #9
Member Avatar
Member
[ * * * * ]
Nicola
Jun 9 2009, 05:18 PM
I personally don't use Firebug unless editing HTML stuff. While it adds a few lines of junk at the top and also grabs the in-line CSS that cannot be altered directly on each board:
Spoiler: click to toggle
...at the end, I find the 'EditCSS' extension really super. My screen is wider than it is tall, so I prefer any 'real time' editing extensions to sit next to the window, not be half of it. But we all have our preferences ^_^
Im the same lol.
Offline Profile Quote Post Goto Top
 
Aeroice Jun 9 2009, 05:29 PM Post #10
C'est un piège!
[ * * * ]
Nicola
Jun 9 2009, 05:18 PM
I personally don't use Firebug unless editing HTML stuff. While it adds a few lines of junk at the top and also grabs the in-line CSS that cannot be altered directly on each board:
Spoiler: click to toggle
...at the end, I find the 'EditCSS' extension really super. My screen is wider than it is tall, so I prefer any 'real time' editing extensions to sit next to the window, not be half of it. But we all have our preferences ^_^
I suppose that's true. I mainly am a fan of firebug for its on-the-page-script-execution feature - that is, the console.

It also is very useful when you get caught on one of those rickroll websites, so I can just destroy the page's HTML and get away without having to endure all those annoying alerts.
Offline Profile Quote Post Goto Top
 
Dennis Jun 10 2009, 02:28 AM Post #11
Member Avatar
Future Dennis does not necessarily condone the contents of this message.
[ * * * * * * * ]
 I love the Web Developer toolbar. It will show you the path to each element, it's classes and IDs and everything. You can see all of the names of IDs and classes.. it's great. Firebug is good too, but I use Web Developer more.
Offline Profile Quote Post Goto Top
 
Viral. Jun 12 2009, 05:59 PM Post #12
Member Avatar
Member
[ * * * * * * ]
 Firebug is extremely useful for it's console object. Does web developer have that as well?
Online Profile Quote Post Goto Top
 
Nicola Jun 12 2009, 06:02 PM Post #13
.....

 I love being weird :P I use ColorZilla to snag colours and also grab the ID and class names for things. It outlines them in a red dotted line and the name appears on the status bar.
Offline Profile Quote Post Goto Top
 
Axonite Jun 12 2009, 06:11 PM Post #14
Member Avatar
Member
[ * * * * ]
Nicola
Jun 12 2009, 06:02 PM
I love being weird :P I use ColorZilla to snag colours and also grab the ID and class names for things. It outlines them in a red dotted line and the name appears on the status bar.
LMFAO

Exactly what i use, im not sure who told me about it, it might off been you... Its what helped me learn how to code.
Offline Profile Quote Post Goto Top
 
Aeroice Jun 15 2009, 11:38 AM Post #15
C'est un piège!
[ * * * ]
Dennis
Jun 10 2009, 02:28 AM
I love the Web Developer toolbar. It will show you the path to each element, it's classes and IDs and everything. You can see all of the names of IDs and classes.. it's great. Firebug is good too, but I use Web Developer more.
Firebug does that as well, except you can edit any attribute of any element, edit the innerHTML, delete elements, add attributes, etc.. as well as having the console. :P
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Technology Chat · Next Topic »
Add Reply