Merhabalar, bu konuda SMF forumda hazır bulunan CSS sınıflarını ve ne işe yaradıklarını göstereceğim.
CSS yolu: Themes\default\css\index.css
Forumdaki tüm link içeren yazılar için kullanılan CSS:
Kod:
/* Normal, standart linkler. */
a:link, a:visited
{
color: #346;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
cursor: pointer;
}
/* Yeni bir pencerede açılan linkler. */
a.new_win:link, a.new_win:visited
{
color: #346;
text-decoration: none;
}
a.new_win:hover
{
text-decoration: underline;
}
Tüm yazıların fontları ve forumun arkaplan resmi:
Kod:
body
{
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 15px 0;
}
Tüm yazıların rengi:
Kod:
body, td, th, tr
{
color: #444;
}
Form elemanları için CSS:
Kod:
input, button, select, textarea
{
font: 95%/115% verdana, Helvetica, sans-serif;
color: #000;
background: #fff;
border: 1px solid #7f9db9;
padding: 2px;
}
Submit ve Reset butonları için CSS:
.button_submit, .button_reset
{
background: #cde7ff url(../images/theme/submit_bg.png) no-repeat;
border: 1px solid #aaa;
cursor: pointer;
font-weight: normal;
}
[COLOR="red"][SIZE="5"]Fieldsets için CSS:[/SIZE][/COLOR]
fieldset
{
border: 1px solid #c4c4c4;
padding: 1em;
margin: 0 0 0.5em 0;
}
fieldset legend
{
font-weight: bold;
color: #444;
}
CODE etiketi için CSS:
Kod:
code.bbc_code
{
display: block;
font-family: "dejavu sans mono", "monaco", "lucida console", "courier new", monospace;
font-size: x-small;
background: #eef;
border-top: 2px solid #999;
border-bottom: 2px solid #999;
line-height: 1.5em;
padding: 3px 1em;
overflow: auto;
white-space: nowrap;
/* Show a scrollbar after about 24 lines. */
max-height: 24em;
}
/* Alıntı ve Kod için Başlık */
.codeheader, .quoteheader
{
color: #666;
font-size: x-small;
font-weight: bold;
padding: 0 0.3em;
}
Alıntı CSS:
Kod:
blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote
{
font-size: x-small;
color: #000;
line-height: 1.4em;
background: url(../images/theme/quote.png) 0.1em 0.1em no-repeat;
border-top: 2px solid #99A;
border-bottom: 2px solid #99A;
padding: 1.1em 1.4em;
margin: 0.1em 0 0.3em 0;
overflow: auto;
}
/* Alternatif alıntı */
blockquote.bbc_standard_quote
{
background-color: #d7daec;
}
blockquote.bbc_alternate_quote
{
background-color: #e7eafc;
}
Açılır menü için CSS'ler:
Kod:
#main_menu
{
padding: 0 0.5em;
float: left;
margin: 0;
width: 98%;
}
.dropmenu, .dropmenu ul
{
list-style: none;
line-height: 1em;
padding: 0;
margin: 0;
}
.dropmenu
{
padding: 0 0.5em;
}
.dropmenu a
{
display: block;
color: #000;
text-decoration: none;
}
.dropmenu a span
{
display: block;
padding: 0 0 0 5px;
font-size: 0.9em;
}
.dropmenu li a.firstlevel
{
margin-right: 8px;
}
.dropmenu li a.firstlevel span.firstlevel
{
display: block;
position: relative;
left: -5px;
padding-left: 5px;
height: 22px;
line-height: 19px;
white-space: pre;
}
.dropmenu li
{
float: left;
padding: 0;
margin: 0;
position: relative;
}
.dropmenu li ul
{
z-index: 90;
display: none;
position: absolute;
width: 19.2em;
font-weight: normal;
border-bottom: 1px solid #999;
background: url(../images/theme/menu_gfx.png) 0 -130px no-repeat;
padding: 7px 0 0 0;
}
.dropmenu li li
{
width: 19em;
margin: 0;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
.dropmenu li li a span
{
display: block;
padding: 8px;
}
.dropmenu li ul ul
{
margin: -1.8em 0 0 13em;
}
.dropmenu li a.active
{
background: url(../images/theme/menu_gfx.png) no-repeat 100% 0;
color: #fff;
font-weight: bold;
}
.dropmenu li a.active span.firstlevel
{
background: url(../images/theme/menu_gfx.png) no-repeat 0 0;
}
.dropmenu li a.firstlevel:hover, .dropmenu li:hover a.firstlevel
{
background: url(../images/theme/menu_gfx.png) no-repeat 100% -30px;
color: #fff;
cursor: pointer;
text-decoration: none;
}
.dropmenu li a.firstlevel:hover span.firstlevel, .dropmenu li:hover a.firstlevel span.firstlevel
{
background: url(../images/theme/menu_gfx.png) no-repeat 0 -30px;
}
.dropmenu li li a:hover, .dropmenu li li:hover>a
{
background: #d4dbe4;
color: #000;
text-decoration: none;
}
.dropmenu li:hover ul ul, .dropmenu li:hover ul ul ul
{
top: -999em;
}
.dropmenu li li:hover ul
{
top: auto;
}
.dropmenu li:hover ul
{
display: block;
}
.dropmenu li li.additional_items
{
background-color: #fff;
}
#menu_toggle
{
float: right;
margin-right: 10px;
padding-top: 3px;
}
#menu_toggle span
{
position: relative;
right: 5000px;
}
[COLOR="red"][SIZE="5"]
Navigation CSS:[/SIZE][/COLOR]
ul#navigation
{
margin: 0;
font-size: 0.9em;
padding: 1em 0.4em;
}
ul#navigation li
{
float: none;
font-size: 0.95em;
display: inline;
}
#adm_submenus
{
padding-left: 2em;
overflow: hidden;
}
Alt kısım için CSS:
Kod:
#footer_section
{
text-align: center;
background: url(../images/theme/main_block.png) no-repeat 0 -820px;
padding-left: 20px;
}
#footer_section span.smalltext
{
font-size: 100%;
}
#footer_section div.frame
{
background: url(../images/theme/main_block.png) no-repeat 100% -820px;
display: block;
padding: 60px 0 0 0;
}
#footer_section ul li, #footer_section p
{
font-size: 0.8em;
}
#footer_section ul li
{
display: inline;
padding-right: 5px;
}
#footer_section ul li.copyright
{
display: block;
}
select.qaction, input.qaction
{
font-size: 0.85em;
padding: 0;
}
#mlist table tbody td.windowbg2
{
text-align: center;
}
Gönderi butonları için CSS:
Kod:
#postbuttons div.buttons
{
padding: 0.5em;
width: 40%;
float: right;
}
#postbuttons div.middletext
{
width: 60%;
}
#postbuttons span
{
display: block;
text-align: right;
}
#postbuttons span.lower
{
clear: right;
}
#postbuttons .buttonlist
{
float: right;
}
#postbuttons #pagelinks
{
padding-top: 1em;
}
#moderationbuttons
{
overflow: hidden;
}
/* Events */
.linked_events
{
padding: 1em 0;
}
.edit_event
{
margin: 0 1em;
vertical-align: middle;
}
/* Poll question */
#poll
{
overflow: hidden;
}
#poll .content
{
padding: 0 1em;
}
h4#pollquestion
{
padding: 0 0 0.5em 2em;
}
Gönderi için CSS:
Kod:
#forumposts
{
clear: both;
}
#forumposts .cat_bar
{
margin: 0 0 2px 0;
}
/* author and topic information */
#forumposts h3 span#author
{
margin: 0 7.7em 0 0;
}
#forumposts h3 img
{
float: left;
margin: 4px 0.5em 0 0;
}
#forumposts h3.catbg
{
margin-bottom: 3px;
}
p#whoisviewing
{
margin: 0;
padding: 0.5em;
}
/* poster and postarea + moderation area underneath */
.post_wrapper
{
float:left;
width:100%;
}
.poster
{
float: left;
width: 15em;
}
.postarea, .moderatorbar
{
margin: 0 0 0 16em;
}
.postarea div.flow_hidden
{
width: 100%;
}
.moderatorbar
{
clear: right;
}
/* poster details and list of items */
.poster h4, .poster ul
{
padding: 0;
margin: 0 1em 0 1.5em;
}
.poster h4
{
margin: 0.2em 0 0.4em 1.1em;
font-size: 120%;
}
.poster h4, .poster h4 a
{
color: #c06002;
}
.poster ul ul
{
margin: 0.3em 1em 0 0;
padding: 0;
}
.poster ul ul li
{
display: inline;
}
.poster li.stars, .poster li.avatar, .poster li.blurb, li.postcount, li.im_icons ul
{
margin-top: 0.5em;
}
.poster li.avatar
{
overflow: hidden;
}
.poster li.warning
{
line-height: 1.2em;
padding-top: 1em;
}
.poster li.warning a img
{
vertical-align: bottom;
padding: 0 0.2em;
}
.messageicon
{
float: left;
margin: 0 0.5em 0 0;
}
.messageicon img
{
padding: 6px 3px;
}
.keyinfo
{
float: left;
width: 50%;
}
.modifybutton
{
clear: right;
float: right;
margin: 6px 20px 10px 0;
text-align: right;
font: bold 0.85em arial, sans-serif;
color: #334466;
}
Kod:
div.quickbuttons_wrap
{
padding: 0.2em 0;
width: 100%;
float: left;
}
ul.quickbuttons
{
margin: 0.9em 11px 0 0;
clear: right;
float: right;
text-align: right;
font: bold 0.85em arial, sans-serif;
}
ul.quickbuttons li
{
float: left;
display: inline;
margin: 0 0 0 11px;
}
ul.quickbuttons li a
{
padding: 0 0 0 20px;
display: block;
height: 20px;
line-height: 18px;
float: left;
}
ul.quickbuttons a:hover
{
color: #a70;
}
ul.quickbuttons li.quote_button
{
background: url(../images/theme/quickbuttons.png) no-repeat 0 0;
}
ul.quickbuttons li.remove_button
{
background: url(../images/theme/quickbuttons.png) no-repeat 0 -30px;
}
ul.quickbuttons li.modify_button
{
background: url(../images/theme/quickbuttons.png) no-repeat 0 -60px;
}
ul.quickbuttons li.approve_button
{
background: url(../images/theme/quickbuttons.png) no-repeat 0 -90px;
}
ul.quickbuttons li.restore_button
{
background: url(../images/theme/quickbuttons.png) no-repeat 0 -120px;
}
ul.quickbuttons li.split_button
{
background: url(../images/theme/quickbuttons.png) no-repeat 0 -150px;
}
ul.quickbuttons li.reply_button
{
background: url(../images/theme/quickbuttons.png) no-repeat 0 -180px;
}
ul.quickbuttons li.reply_all_button
{
background: url(../images/theme/quickbuttons.png) no-repeat 0 -180px;
}
ul.quickbuttons li.notify_button
{
background: url(../images/theme/quickbuttons.png) no-repeat 0 -210px;
}
ul.quickbuttons li.inline_mod_check
{
margin: 0 0 0 5px;
}
Kod:
.login
{
width: 540px;
margin: 0 auto;
}
.login dl
{
overflow: auto;
clear: right;
}
.login dt, .login dd
{
margin: 0 0 0.4em 0;
width: 44%;
padding: 0.1em;
}
.login dt
{
float: left;
clear: both;
text-align: right;
font-weight: bold;
}
.login dd
{
width: 54%;
float: right;
text-align: left;
}
.login p
{
text-align: center;
}
Kod:
.register_error
{
border: 1px dashed red;
padding: 5px;
margin: 0 1ex 1ex 1ex;
}
.register_error span
{
text-decoration: underline;
}
/* Additional profile fields */
dl.register_form
{
margin: 0;
clear: right;
}
dl.register_form dt
{
font-weight: normal;
float: left;
clear: both;
width: 50%;
margin: 0.5em 0 0 0;
}
dl.register_form dt strong
{
font-weight: bold;
}
dl.register_form dt span
{
display: block;
}
dl.register_form dd
{
float: left;
width: 49%;
margin: 0.5em 0 0 0;
}