BrainKing - Diskusní kluby (BrainKing design)

Moderátor: toedder

BrainKing design

Learn how to customize BrainKing's view layer and share your CSS experiences.

Useful links
Wikipedia - for general information on what CSS is, why it is useful, and a short introduction on how to use it.
W3Schools - for a tutorial and a reference on CSS.
W3C - for detailed and advanced information for those who are interested.
CSS Zen Garden - for some trickery and demonstration of what is possible with CSS

Seznam diskusních klubů

Mód: Každý může psát

Zobrazit nejstarší zprávy jako první

12. dubna 2007, 14:01:45

AbigailII

zobrazit příspěvky tohoto uživatele | odkaz

Subjekt: Some CSS tricks.

I'm trying to use CSS to make the pages as minimal as possible. Here are some tricks I'm using:


/* Since we have a custom style sheet, we can't switch anyway */
div#style-switcher                { display: none }
div#set-style-result              { display: none }

/* No need to remind me that I'm cloaked */
div[class="spacer cecko"]         { display: none }

/* Images in posting really mess up the formatting - get rid of them */
img[class~="post-icon"]           { display: none }

/* Am a member to 2010, won't use the bonus for a while */
img[src="/images/smileys/28.gif"] { display: none }

/* I don't care who's online */
img[src="/images/online.gif"]                         { display: none }
div#user-games-section>div[style="float: right;"]     { display: none }
div#opponent-games-section>div[style="float: right;"] { display: none }

/* There are always waiting games and tournaments anyway */
/* so why display the number? */
td.menutd a[href=WaitingGames]+span.rednumber { display:    none }
td.menutd a[href=Tournaments]+span.rednumber  { display:    none }

/* Left hide side links I never use */
td.menutd a[href=Friends]                     { display:    none }
td.menutd a[href=Enemies]                     { display:    none }
td.menutd a[href="PlayerList?a=ap"]           { display:    none }

/* Make the left hide side column smaller */
#menu-column { background: #e0e0e0; margin-bottom: 10px; padding: 6px; } /* Outcomment original line */
td.menutd                                     { font-size:  80% }