CSS for newbies
|
July 24, 2007, 08:30 AM
|
|
Hi and please excuse my English.
Where can i get an overview of the 23 elements? (What/where is allcontainer or albumbar etc.)
Thank you
Olaf
|
| |
|
Team 23
July 24, 2007, 08:37 AM
|
|
There's no CSS guide, sadly...
The quick overview of elements though:
#topcontext: The greyed menubar in the top
#toolbar: The bar with in the top
#titlebar: The identity bar with buddy icon and headline
#tabs: The tabs, obviously
#main #sidebar: The sidebar
#main #content: The main content area
#bottomcontext: The greyed menubar in the bottom
#topcontainer: Container around #toolbar, #titlebar and #tabs
#maincontainer: Container around #content and #sidebar
#allcontainer1 & #allcontainer1: Container around #topcontainer and #maincontainer reponsible for drawing the shaded borders around the frame.
For the rest of them, you'll probably have to look at the site's stylesheet and experiment a bit. Here you'll be able to see how the #albumbar is styled. The way I usually do this is through Firefox with the Web Developer extension, which allows you to edit CSS on any site on-the-fly. Experimenting here will certainly allow you to get a feel for the site.
Hope this helps a bit...
|
| |
|
|
July 24, 2007, 08:53 AM
|
|
Thank you for your fast answer.
"There's no CSS guide," Yes, i miss this so. It's advantageous I can customize my site. This is the best reason for 23. By
|
| |
|
|
July 24, 2007, 09:08 AM
|
|
How can I remove the frame around the content?
|
| |
|
July 24, 2007, 09:10 AM
|
|
I will do a small addition to the tidy list Steffen made.
First of all, you can "borrow" the style from another user theme you like and then modify it to suit your needs better. Those styles don't sit in the default connected style, but inside the page and overwrite the default. You can open a page's source (usually by right-click and selecting the corresponding point in the menu in the various browsers) and then copy all that sits between the style tags, and pase it into the custom CSS field in your Settings -> Settings -> Custom Theme section.
After you see what it does, you can go to that field and change the color values, for instance, to see how this works.
I am a fan of learning by doing, and I find this to be the most productive way (plus, it saves you time and effort, as you have something to start with).
The CSS2 reference: http://www.w3.org/TR/REC-CSS2/indexlist.html
Something for beginners: http://www.cs.tut.fi/~jkorpela/styles/howto.html
For much of the rest, you will find anything you wish to know by simply using google. Or, if it is 23-related, by posting your question here, for instance, where someone will hopefully answer :)
As Steffen mentioned, in case you are using Firefox, you can download the wonderful Web Developer extension (http://chrispederick.com/work/web-developer) which will help you identify the different elements on the page and then you can redefine them in your custom css.
Cheers!
|
| |
|
|
Team 23
July 24, 2007, 09:11 AM
|
|
Removing the frame around content:
#allcontainer1, #allcontainer2 {border:0;}
|
| |
|
|
July 24, 2007, 09:24 AM
|
|
Hi inkscar, i have write to you over "contact" because of CSS.
Yes, for the moment I experiment with styles from another users and changes the codes.
Thank you very for your helpful answers.
Olaf
|
| |
|
July 24, 2007, 09:31 AM
|
|
a further good extension is also the CSSViewer
|
| |
|
|
Team 23
July 24, 2007, 09:34 AM
|
|
@philipp: Looks nice, installed. I don't know about the Simpsons buddy icon though...
|
| |
|
|
July 24, 2007, 09:36 AM
|
|
@philipp: Great for newbies, fantastic!
|
| |
|
|
July 25, 2007, 09:19 PM
|
|
Another little question: I would like only one big picture on the first side (opener). Is that possible?
Thanks
olaf
|
| |
|
|
Team 23
July 25, 2007, 09:20 PM
|
|
Probably not without doing some actual "programming". Do you know how to use JavaScript?
|
| |
|
|
July 25, 2007, 09:23 PM
|
|
Sounds like something I was fancying for some time now...
|
| |
|
|
Team 23
July 25, 2007, 09:29 PM
|
|
Could one of you provide me with a design sketch of what you're looking for -- and I'll see if I can come up with a few lines of code some time this week.
|
| |
|
|
July 25, 2007, 09:30 PM
|
|
OOOOOOOOHHHHHHH, I have already problems with CSS.
It should look in such a way: http://www.23hq.com/i_hate_flickr/photo/2241410/view-large
@inkscar "Töne wie etwas, das ich vorstellte während einiger Zeit mir jetzt…" WAAAAAS? (Google very BETA Übersetzung)
|
| |
|
|
Team 23
July 25, 2007, 09:33 PM
|
|
@olaf: you basically just want to redirect the user to that page when he visits the first time?
|
| |
|
|
July 25, 2007, 09:37 PM
|
|
No redirect, the first page should just look like this with only picture.
|
| |
|
|
July 25, 2007, 09:38 PM
|
|
@Steffen: He's got it more or less right. Simplified as there is no text under the photo, but I also think that switching this view for the latest uploaded photo on the first page would be easier than making a custom view.
@Olaf: Englisch, genau wie Deutsch, macht oft kein sinn wenn man ihn direkt in Babelfish eintippt.
|
| |
|
|
July 25, 2007, 09:39 PM
|
|
(And now there was a double post here, though I posted only once.)
|
| |
|
|
Team 23
July 25, 2007, 09:40 PM
|
|
You guys got a flag in my mail inbox now. That's usually a good thing...
|
| |
|
|
July 25, 2007, 09:41 PM
|
|
As long as it does not smell bad..
|
| |
|
|
July 25, 2007, 09:50 PM
|
|
Lesen und verstehen geht gut, but conversation . . .
Zweisprachig müsste man aufwachsen . . .
|
| |
|
|
July 25, 2007, 09:53 PM
|
|
Keine sorge - Deutsch ist auch nicht meine erste Sprache.
|
| |
|
|
August 11, 2007, 08:26 PM
|
|
|
|
| |
|
|
August 12, 2007, 01:27 PM
|
|
Hello and an another question: How can I resize my pictures on my first page?
Thanks
Olaf
|
| |
|
|
August 12, 2007, 06:00 PM
|
|
|
|
| |
|
|
Team 23
August 12, 2007, 07:00 PM
|
|
Hey Olaf,
You can change the photo sizes with CSS, but since you're hoping to scale the photos up, they'll be pixelated if you employ a CSS-only solution. Sorry.
|
| |
|
|
August 14, 2007, 07:17 PM
|
|
How can I find out the name of an element with the Web Developer?
I am not very successful with display element information.
Olaf
|
| |
|
August 16, 2007, 06:19 AM
|
|
I'm personally using SHIFT-CTRL-Y to display information on an element. That would be "CSS" -> "View Style Information" in the WebDevToolbar.
|
| |
|
|
August 16, 2007, 08:01 PM
|
|
That is really better. I can see, what's the name of the element. Thank you!
|
| |
|
August 16, 2007, 08:48 PM
|
|
I am using DOM Inspector as Firefox addon (https://addons.mozilla.org/en-US/firefox/addon/1806), there you see the element selected (and the tree) right to the menu bar.
|
| |
|
