با سلام.
من یک پوسته ای رو انتخاب کردم که عرض اون ثابت و فکر میکنم حدود ۹۰۰ پیکسل هست. اما من میخوام تبدیل بشه به این مدل پوسته هایی که توی مانیتورهای Wide هم سایزشون تغییر میکنه و کل عرض صفحه رو میگیره. نمیدونم تو اصطلاح طراحی به این مدل نمایش سایت دقیقا چی میگن.
چه جور باید این کار رو انجام بدم؟ از این پوسته خیلی خوشم میاد و نمیخوام عوضش کنم. طراحی سایت و نوشتن CSS و این چیزا رو بلد نیستم. اگه ممکلنه مراحل دقیق رو به من بگید.
ضمنا پوسته ی ساده و شیک به طرح ویبولتن میخواستم اما فقط یه دونه فارسی پیدا کردم که طرح ورژنای خیلی قدیمیه ویبولتن بود و با اینکه از نظر فونت و عرض صفحه و چیزای دیگه خیلی مرتب بود اما زیاد خوب طراحی نشده بود و ظاهرش خیلی قدیمی و کهنه بود. اگر چیزی میشناسید معرفی کنید لطفا.
بجای 900px مقدار رو به درصد بنویسین. مثلاً 95%
هر عددی که بذارین همون درصد از عرض مانیتور رو میگیره
ممنون دوست عزیز. تا حد زیادی حل شد. خیلی جالب بود. فکر میکردم خیلی باید پیچیده تر باشه. ولی هنوز کادر اصلی پس زمینه و در واقع قاب اصلی انجمن تو همون سایز قدیمی هست و لیست فروم ها و مطالب از اون قاب زده بیرون. و مثلا توی مانیتور Wide ازحدود 50 پیکسل سمت چپ تصویر شروع میشه و اندازه حدود ۹۰۰ پیکسل که عرض Header هست میاد و قاب پس زمینه توی همچین فضایی هست. اما انجمن ها و مطالب و فوتر و ... به صورت عرض کامل صفحه نشون داده میشه. در واقع برچسب Container رو که مثلا ۹۷٪ میذارم فقط باعث میشه از سمت چپ صفحه شروع بشه و عرضش تغییر نمیکنه
من فقط global.css رو دست زدم. درسته؟!
فایل Global.css پوسته مورد نظر به این صورت هست:
کد:
body {
background: #2f3f4e url(images/v2/bg.png) top repeat-x;
color: #222;
text-align: center;
line-height: 1.4;
font-family: Tahoma;
font-size: 13px;
}
a:link, a:visited {
color: #1359AE;
outline: 0;
text-decoration: none;
}
a:hover, a:active {
color: #C62222;
outline: 0;
text-decoration: underline;
}
#container {
background: url(images/v2/container.png) repeat-y;
width: 978px;
color: #222;
text-align: right;
margin: auto auto;
}
#content {
width: 920px;
margin: auto;
line-height: 1.4em;
}
.menu ul {
color: #000000;
font-weight: bold;
text-align: right;
padding: 4px;
}
.menu ul a:link {
color: #000000;
text-decoration: none;
}
.menu ul a:visited {
color: #000000;
text-decoration: none;
}
.menu ul a:hover, .menu ul a:active {
color: #4874a3;
text-decoration: none;
}
#panel {
background: #efefef;
color: #000000;
font-size: 11px;
border: 1px solid #D4D4D4;
padding: 8px;
}
table {
color: #222;
font-family: Tahoma;
font-size: 13px;
}
.tborder {
background: #ccc;
width: 100%;
margin: auto auto;
border: 1px solid #999;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.thead {
background: #026CB1 url(images/v2/thead.png) top left repeat-x;
color: #ffffff;
padding: 7px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
}
.thead a:link, .thead a:visited {
color: #ffffff;
text-decoration: none;
}
.thead a:hover, .thead a:active {
color: #ffffff;
text-decoration: underline;
}
.tcat {
background: #ADCBE7 url(images/v2/tcat2.png) repeat-x;
color: #fff;
font-size: 12px;
}
.tcat a:link, .tcat a:visited {
color: #fff;
}
.tcat a:hover, .tcat a:active {
color: #fff;
}
.tcat2 {
background: #ADCBE7 url(images/v2/tcat2.png) repeat-x;
color: #fff;
font-size: 12px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
}
.tcat2 a:link, .tcat a:visited {
color: #fff;
text-decoration: none;
}
.tcat2 a:hover, .tcat a:active {
color: #fff;
text-decoration: underline;
}
.trow1 {
background: #f5f5f5;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
}
.trow2 {
background: #F1F1F1;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
}
.trow_shaded {
background: #ffdde0;
}
.trow_selected td {
background: #FFFBD9;
}
.trow_sep {
background: #e5e5e5;
color: #000;
font-size: 12px;
font-weight: bold;
}
.tfoot {
background: #026CB1 url(images/v2/thead.png) top left repeat-x;
color: #ffffff;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
}
.tfoot a:link, .tfoot a:visited {
color: #ffffff;
text-decoration: none;
}
.tfoot a:hover, .tfoot a:active {
color: #ffffff;
text-decoration: underline;
}
.bottommenu {
background: #efefef;
color: #000000;
border: 1px solid #4874a3;
padding: 10px;
}
.navigation {
color: #000000;
font-size: 13px;
font-weight: bold;
}
.navigation a:link, .navigation a:visited {
text-decoration: none;
}
.navigation a:hover, .navigation a:active {
text-decoration: none;
}
.navigation .active {
color: #000000;
font-size: 13px;
font-weight: bold;
}
.smalltext {
font-size: 11px;
}
.largetext {
font-size: 16px;
font-weight: bold;
}
input.textbox {
background: #ffffff;
color: #000000;
padding: 2px;
border: 1px dotted grey;
font-family: Tahoma;
font-size: 13px;
}
textarea {
background: #ffffff;
color: #000000;
line-height: 1.4;
padding: 2px;
border: 1px dotted grey;
font-family: Tahoma;
font-size: 13px;
}
select {
background: #ffffff;
border: 1px solid #0f5c8e;
}
.editor {
background: #f1f1f1;
border: 1px solid #ccc;
}
.editor_control_bar {
background: #fff;
border: 1px solid #0f5c8e;
}
.autocomplete {
background: #fff;
border: 1px solid #000;
color: black;
}
.autocomplete_selected {
background: #adcee7;
color: #000;
}
.popup_menu {
background: #ccc;
border: 1px solid #000;
}
.popup_menu .popup_item {
background: #fff;
color: #000;
}
.popup_menu .popup_item:hover {
background: #C7DBEE;
color: #000;
}
.trow_reputation_positive {
background: #ccffcc;
}
.trow_reputation_negative {
background: #ffcccc;
}
.reputation_positive {
color: green;
}
.reputation_neutral {
color: #444;
}
.reputation_negative {
color: red;
}
.invalid_field {
border: 1px solid #f30;
color: #f30;
}
.valid_field {
border: 1px solid #0c0;
}
.validation_error {
background: url(images/invalid.gif) no-repeat center left;
color: #f30;
margin: 5px 0;
padding: 5px;
font-weight: bold;
font-size: 11px;
padding-right: 22px;
}
.validation_success {
background: url(images/valid.gif) no-repeat center left;
color: #00b200;
margin: 5px 0;
padding: 5px;
font-weight: bold;
font-size: 11px;
padding-right: 22px;
}
.validation_loading {
background: url(images/spinner.gif) no-repeat center left;
color: #555;
margin: 5px 0;
padding: 5px;
font-weight: bold;
font-size: 11px;
padding-left: 22px;
}
img {
border: none;
vertical-align: middle;
}
.clear {
clear: both;
}
.hidden {
display: none;
float: none;
width: 1%;
}
.float_left {
float: left;
}
.float_right {
float: right;
}
.menu ul {
list-style: none;
margin: 0;
}
.menu li {
display: inline;
padding-right: 5px;
}
.menu img {
padding-left: 5px;
vertical-align: top;
}
#panel .links {
margin: 0;
float: left;
}
.expcolimage {
float: left;
width: auto;
vertical-align: middle;
margin-top: 3px;
}
img.attachment {
border: 1px solid #E9E5D7;
padding: 2px;
}
hr {
background-color: #000000;
color: #000000;
height: 1px;
border: 0px;
}
#debug {
float: right;
text-align: right;
margin-top: 0;
}
blockquote {
border: 1px solid #ccc;
margin: 0;
background: #fff;
padding: 4px;
}
blockquote cite {
font-weight: bold;
border-bottom: 1px solid #ccc;
font-style: normal;
display: block;
margin: 4px 0;
}
blockquote cite span {
float: right;
font-weight: normal;
}
blockquote cite span.highlight {
float: none;
font-weight: bold;
padding-bottom: 0;
}
.codeblock {
background: #fff;
border: 1px solid #ccc;
padding: 4px;
}
.codeblock .title {
border-bottom: 1px solid #ccc;
font-weight: bold;
margin: 4px 0;
}
.codeblock code {
overflow: auto;
height: auto;
max-height: 200px;
display: block;
font-family: Tahoma;
font-size: 13px;
}
.subforumicon {
border: 0;
vertical-align: middle;
}
.separator {
margin: 5px;
padding: 0;
height: 0px;
font-size: 1px;
list-style-type: none;
}
form {
margin: 0;
padding: 0;
}
.popup_menu .popup_item_container {
margin: 1px;
text-align: left;
}
.popup_menu .popup_item {
display: block;
padding: 3px;
text-decoration: none;
white-space: nowrap;
}
.popup_menu a.popup_item:hover {
text-decoration: none;
}
.autocomplete {
text-align: left;
}
.subject_new {
font-weight: bold;
}
.highlight {
background: #FFFFCC;
padding-top: 3px;
padding-bottom: 3px;
}
.pm_alert {
background: #FFF6BF;
border: 1px solid #FFD324;
text-align: center;
padding: 5px 20px;
font-size: 11px;
margin-bottom: 15px;
}
.red_alert {
background: #FBE3E4;
border: 1px solid #A5161A;
color: #A5161A;
text-align: center;
padding: 5px 20px;
font-size: 11px;
margin-bottom: 15px;
}
.high_warning {
color: #CC0000;
}
.moderate_warning {
color: #F3611B;
}
.low_warning {
color: #AE5700;
}
div.error {
padding: 5px 10px;
border-top: 2px solid #FFD324;
border-bottom: 2px solid #FFD324;
background: #FFF6BF;
font-size: 12px;
}
div.error p {
margin: 0;
color: #000;
font-weight: normal;
}
div.error p em {
font-style: normal;
font-weight: bold;
padding-left: 24px;
display: block;
color: #C00;
background: url(images/error.gif) no-repeat 0;
}
div.error.ul {
margin-left: 24px;
}
.online {
color: #15A018;
}
.offline {
color: #C7C7C7;
}
.pagination {
font-size: 11px;
padding-top: 10px;
margin-bottom: 5px;
}
.tfoot .pagination, .tcat .pagination {
padding-top: 0;
}
.pagination .pages {
font-weight: bold;
}
.pagination .pagination_current, .pagination a {
padding: 2px 6px;
margin-bottom: 3px;
}
.pagination a {
border: 1px solid #81A2C4;
}
.pagination .pagination_current {
background: #F5F5F5;
border: 1px solid #81A2C4;
font-weight: bold;
color: #000;
}
.pagination a:hover {
background: #F5F5F5;
text-decoration: none;
}
.thread_legend, .thread_legend dd {
margin: 0;
padding: 0;
}
.thread_legend dd {
padding-bottom: 4px;
margin-right: 15px;
}
.thread_legend img {
margin-right: 4px;
vertical-align: bottom;
}
.forum_legend, .forum_legend dt, .forum_legend dd {
margin: 0;
padding: 0;
}
.forum_legend dd {
float: right;
margin-left: 10px;
}
.forum_legend dt {
margin-left: 10px;
float: right;
}
.success_message {
color: #00b200;
font-weight: bold;
font-size: 10px;
margin-bottom: 10px;
}
.error_message {
color: #C00;
font-weight: bold;
font-size: 10px;
margin-bottom: 10px;
}
.post_body {
padding: 5px;
}
.post_content {
padding: 5px 10px;
}
.quick_jump {
background: url(images/jump.gif) no-repeat 0;
width: 13px;
height: 13px;
padding-right: 13px;
vertical-align: middle;
border: none;
}
#header {
background: transparent url(images/v2/header.png) no-repeat;
height: 115px;
position: relative;
}
#header_home_link {
position: absolute;
width: 600px;
height: 100px;
top: 7px;
right: 0;
}
#logo, #logo_with_tagline {
text-decoration: none;
color: #FFF;
font-family: "Rockwell", Tahoma;
letter-spacing: -1px;
font-size: 40px;
font-weight: bold;
position: absolute;
top: 48px;
left: 25px;
text-shadow: #17222C 1px 1px 1px;
}
#logo_with_tagline {
top: 38px;
}
#tagline {
color: #AABBC8;
font-family: Tahoma;
font-size: 17px;
font-weight: bold;
font-style: italic;
position: absolute;
top: 70px;
left: 25px;
text-shadow: #17222C 1px 1px 1px;
}
#header_search {
width: 210px;
height: 50px;
position: absolute;
top: 40px;
left: 45px;
}
#search_input {
position: absolute;
left: 13px;
top: 13px;
width: 160px;
font-size: 14px;
border: solid 1px #FFF;
}
.overlabel {
color: #888888;
position: absolute;
top: 14px;
left: 17px;
z-index: 1;
padding: 2px;
border: 1px dotted grey;
font-family: Tahoma;
font-size: 13px;
}
.overlabel-apply {
color: #888;
position: absolute;
top: 14px;
left: 17px;
z-index: 1;
}
#navigation {
height: 54px;
background: url(images/v2/navigation.png) no-repeat;
position: relative;
}
#subscribe {
color: #FFF;
position: absolute;
height: 25px;
width: 239px;
top: 17px;
right: 20px;
text-align: center;
}
#subscribe a {
text-decoration: none;
font-weight: bold;
background-color: #852F32;
padding: 2px 4px;
color: #FFF;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
text-shadow: #3D1618 0 1px 1px;
border-top: solid 1px #3D1618;
border-bottom: solid 1px #BB4C46;
position: relative;
top: 1px;
}
#subscribe #rss_icon_link {
position: absolute;
width: 40px;
height: 40px;
top: -12px;
right: 232px;
border: none;
background: none;
}
#subscribe a:hover {
background-color: #000;
}
.after_post_rss {
margin-top: 20px;
padding: 20px 20px 20px 75px;
background: url(images/v2/after_post_rss.png) no-repeat 17px 17px #FFFCD5;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: solid 1px #F2E0AC;
}
#footer {
clear: both;
height: 80px;
background: url(images/v2/footer.png) no-repeat;
position: relative;
}
#copyright {
color: #AEC0C9;
position: absolute;
top: 20px;
left: 40px;
}
#copyright a {
text-decoration: none;
font-weight: bold;
color: #FFF;
text-shadow: #2D3D4D 0 1px 1px;
}
#copyright a:hover {
color: #ffffff;
text-decoration: none;
}
#copyright .copyright_owner {
color: #DDEEF3;
}
#site_map {
position: absolute;
width: 500px;
height: 25px;
top: 20px;
right: 40px;
text-align: right;
color: #424F62;
}
#site_map a {
text-decoration: none;
color: #FFF;
font-weight: bold;
text-shadow: #2D3D4D 0 1px 1px;
margin-left: 12px;
}
#site_map a:hover {
text-decoration: none;
}
#credits {
clear: both;
text-align: center;
position: relative;
top: -5px;
padding-bottom: 20px;
font-size: 11px;
color: #5C6D7C;
}
#credits a {
text-decoration: none;
color: #9AABB9;
}
#credits a:hover {
color: #FFF;
text-decoration: none;
}
.iletisim {
background: transparent url(images/v2/iletisim.png) no-repeat left center;
padding-left: 20px;
}
.yukari {
background: transparent url(images/v2/yukari.png) no-repeat left center;
padding-left: 20px;
}
.arsiv {
background: transparent url(images/v2/arsiv.png) no-repeat left center;
padding-left: 20px;
}
.anasayfa {
background: transparent url(images/v2/anasayfa.png) no-repeat left center;
padding-left: 20px;
vertical-align: text-top;
width: 16px;
height: 16px;
}
.navayrac {
background: transparent url(images/v2/ok.gif) no-repeat left center;
padding-left: 13px;
vertical-align: text-top;
}
.navbit {
background: transparent url(images/v2/nav_bit.gif) no-repeat left center;
padding-left: 15px;
vertical-align: text-top;
}
.alt_forumlar {
list-style: none;
margin: 0;
padding: 0;
}
.alt_forumlar li {
width: 50%;
float: right;
}
.yazar a:link, .yazar a:visited {
color: #333333;
text-decoration: none;
}
.yazar a:hover, .yazar a:active {
color: #333333;
text-decoration: none;
}
.moderasyon {
background: #FAFCFE url(images/v2/moderasyon.png) center left no-repeat;
color: #465584;
background-color: #FAFCFE;
border-left: 4px solid #b28383;
border-right: 1px dotted #000;
border-top: 1px dotted #000;
border-bottom: 1px dotted #000;
padding: 4px;
padding-left: 50px;
margin: 0px auto 8px auto;
}
#panel .remember_me input {
vertical-align: middle;
margin-top: -1px;
}
.hiddenrow {
display: none;
}
.selectall {
background-color: #FFFBD9;
font-weight: bold;
text-align: center;
}
.repbox {
font-size:16px;
font-weight: bold;
padding:5px 7px 5px 7px;
}
._neutral {
background-color:#FAFAFA;
color: #999999;
border:1px solid #CCCCCC;
}
._minus {
background-color: #FDD2D1;
color: #CB0200;
border:1px solid #980201;
}
._plus {
background-color:#E8FCDC;
color: #008800;
border:1px solid #008800;
}
.pagination_breadcrumb {
background-color: #f5f5f5;
border: 1px solid #fff;
outline: 1px solid #ccc;
padding: 5px;
margin-top: 5px;
font-weight: normal;
}
.pagination_breadcrumb_link {
vertical-align: middle;
cursor: pointer;
}