قالب واکنش گرا

[mdsn]

با سلام.
چطور میشه کاری کرد که قالب های نیوک واکنش گرا بشن؟

[reper]

نیوک خودش واکنش گرا هست بیشتر واکنش گراش نکن منفجر میشه

[lenux]

نیوک خودش واکنش گرا هست بیشتر واکنش گراش نکن منفجر میشه

در جواب دوستمون باید بگم شما ابتدا باید تگ viewport به قالبت اضافه کنی و بعد با منحصر کردن در فایل style.css به سایز های استاندارد قالبت رو به استلاح خودت واکنش گرا کنی...
می تونی برای تست هم در فایرفاکس از روش ctrl+shift+m استفاده کنی.

[mdsn]

نیوک خودش واکنش گرا هست بیشتر واکنش گراش نکن منفجر میشه

در جواب دوستمون باید بگم شما ابتدا باید تگ viewport به قالبت اضافه کنی و بعد با منحصر کردن در فایل style.css به سایز های استاندارد قالبت رو به استلاح خودت واکنش گرا کنی...
می تونی برای تست هم در فایرفاکس از روش ctrl+shift+m استفاده کنی.

میشه بیشتر توضیح بدید که دقیقه باید چیکار کنم؟
ممنون

[mdsn]

خواهشا اگر کسی اطلاعی در این رابطه داره به من کمک کنه...

[reper]

باید داخل مرورگرت وقتی که داخل سایتت هستی کلیدهای ctrl+shift+m از صفحه کلید رو فشار بدی سایز قالبت رو نمایش میده حال باید در فایلهای css قالبت تغییرات رو اعمال کنی که که قالب داخل اون مقداری که نمایش میده سایزش یکی بشه در اصل باید css قالبت رو استاندارد کنی

[perfeshnal]

دوست عزیز در گوگل قالبهای Responsive رو جستجو کنید نتایج زیادی پیدا می کنید از آموزش این کار گرفته تا دانلود خود این قالب ها و ...

[webdesign2012]

باید داخل مرورگرت وقتی که داخل سایتت هستی کلیدهای ctrl+shift+m از صفحه کلید رو فشار بدی سایز قالبت رو نمایش میده حال باید در فایلهای css قالبت تغییرات رو اعمال کنی که که قالب داخل اون مقداری که نمایش میده سایزش یکی بشه در اصل باید css قالبت رو استاندارد کنی

دوستانی که ذره ای اطلاعات کدنویسی ندارن لطفا از دادن پاسخ بی جا خودداری کنن

برای رسپانسیو کردن جز گذاشتن اون تگ باید در استایل نویسی حالتی از ایف if ایجاد کرد

که مثلا سایز صفحه 300px بود این سایزها اعمال بشن یا اگه 1080px بود سایز های دیگه اعمال بشن

[reper]

شما که اطلاعاتت بالاست دوست عزیز همین پیکسل رو هم باید داخل سی اس اس تعریف کرد if هم شرط هست که تعیین می کنه که کاربر با هر رزولیشنی وارد سایت میشه سایت به همون رزولیشن نمایش داده بشه با شرط هم نمیشه اینکار رو کرد

[reper]

اینم یکسری کد css شاید بهتر متوجه بشی برای سایز تبلت قرار دارد

کد: انتخاب همه

/* #Tablet (Landscape)
----------------------------------------------------------------------*/
@media only screen and (min-width: 959px) and (max-width: 1177px) {
    body {overflow-x: hidden}
    .boxed, .boxed-margin {width: 98%;margin: 0 auto}
    .boxed-margin {margin: 10px auto}
    .row {width: 88%}

    a.btn_canvas, #layout .tt_nav .sf-menu {display: block}
    .sec_head .sf-menu li a {padding: 0 10px}
    .more_news_pic.featured_thumb {width: 28.4%}
    .grid_6 .def_wgr {min-width: 178px;width: 40%;min-height: 200px}
    .sec_head .subarrow, .b_4 .tt_review, #header .sf-menu, #layout .head_t a.btn_canvas {display: none}
    .details_w {width: 36%}
    .ads_widget a {float: none !important;margin: 10px auto;display: table}
    .two_col_mas .post { width: 45% }
    .grid_9 .two_col_mas .post { width: 45% }
    .grid_6 .two_col_mas .post { width: 44% }
    .grid_6.alpha .two_col_mas .post, .grid_6.omega .two_col_mas .post { width: 44% }
    .three_col_mas .post { width: 29.4% }
    .grid_9 .three_col_mas .post { width: 28% }
    .grid_6 .three_col_mas .post { width: 43% }
    .grid_6.alpha .three_col_mas .post, .grid_6.omega .three_col_mas .post { width: 43% }
    .four_col_mas .post { width: 29.4% }
    .grid_9 .four_col_mas .post { width: 29% }
    .grid_6 .four_col_mas .post { width: 43% }
    .grid_6.alpha .four_col_mas .post, .grid_6.omega .four_col_mas .post { width: 43% }
}

/* #Tablet (Portrait)
----------------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
    body {overflow-x: hidden}
    .boxed, .boxed-margin {width: 100%;margin: 0 auto}
    .row { width: 88% }
    .sidebar, .post {width: 100%;margin: 0 0 40px}
    .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12,
    .grid_1.alpha,.grid_1.omega, .grid_2.alpha,.grid_2.omega, .grid_3.alpha,.grid_3.omega, .grid_4.alpha,.grid_4.omega, .grid_5.alpha,.grid_5.omega,
    .grid_6.alpha,.grid_6.omega, .grid_7.alpha,.grid_7.omega, .grid_8.alpha,.grid_8.omega, .grid_9.alpha,.grid_9.omega, .grid_10.alpha,.grid_10.omega, .grid_11.alpha,.grid_11.omega {width: 100%;margin: 0 0 30px}

    a.btn_canvas, #layout .tt_nav .sf-menu {display: block}
    #header .sf-menu, #layout .head_t a.btn_canvas { display: none }
    h3 {font-size: 16px}
    .pagination-tt {margin: 0 0 60px 0}
    .copyright {float: none;display: table;margin: 0 auto}
    #footer .grid_3, #footer .grid_4, #footer .grid_9 {width: 48%; margin: 0 1% 30px}
    .grid_8 .grid_6 {width: 48%}
    .b_6 .grid_6, .b_1 .grid_6, .b_3 .grid_6 {width: 48%;margin: 0 1%}
    .b_3 .more_posts {margin-top: -10px}
    #footer .sf-menu {float: none;margin: 20px auto 0;display: table}
    .ads_widget a {float: none !important;margin: 10px auto;display: table}
    .sec_head .breaking {margin: 0}
    .masonry_T .post {width: auto}
    .widget, .T20-tabs-nav, .load_anim .introfx, .load_anim .introfxo > div {opacity: 1 !important}
    #masonry-container .post { width: 46% !important }
}

/* #Mobile (Landscape)
----------------------------------------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 768px) {
    body {overflow-x: hidden}
    .boxed, .boxed-margin {width: 100%;margin: 0 auto}
    .row { width: 88% }
    .sidebar, .post {width: 100%;margin: 0 0 40px}
    .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12,
    .grid_1.alpha,.grid_1.omega, .grid_2.alpha,.grid_2.omega, .grid_3.alpha,.grid_3.omega, .grid_4.alpha,.grid_4.omega, .grid_5.alpha,.grid_5.omega,
    .grid_6.alpha,.grid_6.omega, .grid_7.alpha,.grid_7.omega, .grid_8.alpha,.grid_8.omega, .grid_9.alpha,.grid_9.omega, .grid_10.alpha,.grid_10.omega, .grid_11.alpha,.grid_11.omega {width: 100%;margin: 0 0 30px}

    a.btn_canvas {display: block}
    h3 {font-size: 16px}
    .pagination-tt {margin: 0 0 60px 0}
    .copyright {float: none;display: table;margin: 0 auto}
    #popup {width: 300px}
    .banner {margin: 0 0 10px;width: 100%}
    .sec_head .social, #header .sf-menu { display: none }
    .sec_head .r_post { display: block }
    .medium_thumb .post_thumbnail {width: 100%;margin: 0 0 10px 0}
    #slideshowt .slider_content {width: 100%}
    .big_carousel .owl-pagination, .slideshow_b5 .owl-pagination, #slideshowt .slider_tabs, .sec_head .breaking, #layout .e_center .sf-menu {display: none}
    #block_carousel .owl-controls {right: -20px}
    .grid_6 .def_wgr {min-width: inherit;width: 94%}
    #footer .sf-menu {float: none;margin: 20px auto 0;display: table}
    .ads_widget a {float: none !important;margin: 10px auto;display: table}
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {width: 100%}
    .grid_6 .def_wgr {width: 92%}
    .masonry_T .post {width: auto}
    .widget, .T20-tabs-nav, .load_anim .introfx, .load_anim .introfxo > div {opacity: 1 !important}
    #masonry-container .post { width: 95% !important }
}

/*  #Mobile (Portrait) 320px
----------------------------------------------------------------------*/
@media only screen and (min-width: 100px) and (max-width: 480px) {
    body {overflow-x: hidden}
    .boxed, .boxed-margin {width: 100%;margin: 0 auto}
    .row { width: 88%; padding: 0; }
    .sidebar, .post {width: 100%;margin: 0 0 40px}
    .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12,
    .grid_1.alpha,.grid_1.omega, .grid_2.alpha,.grid_2.omega, .grid_3.alpha,.grid_3.omega, .grid_4.alpha,.grid_4.omega, .grid_5.alpha,.grid_5.omega,
    .grid_6.alpha,.grid_6.omega, .grid_7.alpha,.grid_7.omega, .grid_8.alpha,.grid_8.omega, .grid_9.alpha,.grid_9.omega, .grid_10.alpha,.grid_10.omega, .grid_11.alpha,.grid_11.omega {width: 100%;margin: 0 0 30px}

    a.btn_canvas {display: block}
    h3 {font-size: 16px}
    .pagination-tt {margin: 0 0 60px 0}
    .copyright {float: none;display: table;margin: 0 auto}
    #popup {width: 220px}
    .banner {margin: 0 0 10px;width: 100%}
    #slideshowt .slider_content {width: 100%}
    .sec_head .r_post { display: block }
    .medium_thumb .post_thumbnail {margin: 0 0 10px 0}
    .big_carousel .owl-pagination, .slideshow_b5 .owl-pagination, .sec_head .social, #header .sf-menu, #slideshowt .slider_tabs, .sec_head .breaking, #layout .e_center .sf-menu {display: none}
    .more_news_pic.featured_thumb {width: 29%}
    #block_carousel .owl-controls {right: -24px}
    #footer .sf-menu {float: none;margin: 20px auto 0;display: table}
    .ads_widget a {float: none !important;margin: 10px auto;display: table}
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {width: 100%}
    .grid_6 .def_wgr {width: 92%}
    .masonry_T .post {width: auto}
    .widget, .T20-tabs-nav, .load_anim .introfx, .load_anim .introfxo > div {opacity: 1 !important}
    #masonry-container .post { width: 95% !important }
}

[mdsn]

اینم یکسری کد css شاید بهتر متوجه بشی برای سایز تبلت قرار دارد

کد: انتخاب همه

/* #Tablet (Landscape)
----------------------------------------------------------------------*/
@media only screen and (min-width: 959px) and (max-width: 1177px) {
    body {overflow-x: hidden}
    .boxed, .boxed-margin {width: 98%;margin: 0 auto}
    .boxed-margin {margin: 10px auto}
    .row {width: 88%}

    a.btn_canvas, #layout .tt_nav .sf-menu {display: block}
    .sec_head .sf-menu li a {padding: 0 10px}
    .more_news_pic.featured_thumb {width: 28.4%}
    .grid_6 .def_wgr {min-width: 178px;width: 40%;min-height: 200px}
    .sec_head .subarrow, .b_4 .tt_review, #header .sf-menu, #layout .head_t a.btn_canvas {display: none}
    .details_w {width: 36%}
    .ads_widget a {float: none !important;margin: 10px auto;display: table}
    .two_col_mas .post { width: 45% }
    .grid_9 .two_col_mas .post { width: 45% }
    .grid_6 .two_col_mas .post { width: 44% }
    .grid_6.alpha .two_col_mas .post, .grid_6.omega .two_col_mas .post { width: 44% }
    .three_col_mas .post { width: 29.4% }
    .grid_9 .three_col_mas .post { width: 28% }
    .grid_6 .three_col_mas .post { width: 43% }
    .grid_6.alpha .three_col_mas .post, .grid_6.omega .three_col_mas .post { width: 43% }
    .four_col_mas .post { width: 29.4% }
    .grid_9 .four_col_mas .post { width: 29% }
    .grid_6 .four_col_mas .post { width: 43% }
    .grid_6.alpha .four_col_mas .post, .grid_6.omega .four_col_mas .post { width: 43% }
}

/* #Tablet (Portrait)
----------------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
    body {overflow-x: hidden}
    .boxed, .boxed-margin {width: 100%;margin: 0 auto}
    .row { width: 88% }
    .sidebar, .post {width: 100%;margin: 0 0 40px}
    .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12,
    .grid_1.alpha,.grid_1.omega, .grid_2.alpha,.grid_2.omega, .grid_3.alpha,.grid_3.omega, .grid_4.alpha,.grid_4.omega, .grid_5.alpha,.grid_5.omega,
    .grid_6.alpha,.grid_6.omega, .grid_7.alpha,.grid_7.omega, .grid_8.alpha,.grid_8.omega, .grid_9.alpha,.grid_9.omega, .grid_10.alpha,.grid_10.omega, .grid_11.alpha,.grid_11.omega {width: 100%;margin: 0 0 30px}

    a.btn_canvas, #layout .tt_nav .sf-menu {display: block}
    #header .sf-menu, #layout .head_t a.btn_canvas { display: none }
    h3 {font-size: 16px}
    .pagination-tt {margin: 0 0 60px 0}
    .copyright {float: none;display: table;margin: 0 auto}
    #footer .grid_3, #footer .grid_4, #footer .grid_9 {width: 48%; margin: 0 1% 30px}
    .grid_8 .grid_6 {width: 48%}
    .b_6 .grid_6, .b_1 .grid_6, .b_3 .grid_6 {width: 48%;margin: 0 1%}
    .b_3 .more_posts {margin-top: -10px}
    #footer .sf-menu {float: none;margin: 20px auto 0;display: table}
    .ads_widget a {float: none !important;margin: 10px auto;display: table}
    .sec_head .breaking {margin: 0}
    .masonry_T .post {width: auto}
    .widget, .T20-tabs-nav, .load_anim .introfx, .load_anim .introfxo > div {opacity: 1 !important}
    #masonry-container .post { width: 46% !important }
}

/* #Mobile (Landscape)
----------------------------------------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 768px) {
    body {overflow-x: hidden}
    .boxed, .boxed-margin {width: 100%;margin: 0 auto}
    .row { width: 88% }
    .sidebar, .post {width: 100%;margin: 0 0 40px}
    .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12,
    .grid_1.alpha,.grid_1.omega, .grid_2.alpha,.grid_2.omega, .grid_3.alpha,.grid_3.omega, .grid_4.alpha,.grid_4.omega, .grid_5.alpha,.grid_5.omega,
    .grid_6.alpha,.grid_6.omega, .grid_7.alpha,.grid_7.omega, .grid_8.alpha,.grid_8.omega, .grid_9.alpha,.grid_9.omega, .grid_10.alpha,.grid_10.omega, .grid_11.alpha,.grid_11.omega {width: 100%;margin: 0 0 30px}

    a.btn_canvas {display: block}
    h3 {font-size: 16px}
    .pagination-tt {margin: 0 0 60px 0}
    .copyright {float: none;display: table;margin: 0 auto}
    #popup {width: 300px}
    .banner {margin: 0 0 10px;width: 100%}
    .sec_head .social, #header .sf-menu { display: none }
    .sec_head .r_post { display: block }
    .medium_thumb .post_thumbnail {width: 100%;margin: 0 0 10px 0}
    #slideshowt .slider_content {width: 100%}
    .big_carousel .owl-pagination, .slideshow_b5 .owl-pagination, #slideshowt .slider_tabs, .sec_head .breaking, #layout .e_center .sf-menu {display: none}
    #block_carousel .owl-controls {right: -20px}
    .grid_6 .def_wgr {min-width: inherit;width: 94%}
    #footer .sf-menu {float: none;margin: 20px auto 0;display: table}
    .ads_widget a {float: none !important;margin: 10px auto;display: table}
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {width: 100%}
    .grid_6 .def_wgr {width: 92%}
    .masonry_T .post {width: auto}
    .widget, .T20-tabs-nav, .load_anim .introfx, .load_anim .introfxo > div {opacity: 1 !important}
    #masonry-container .post { width: 95% !important }
}

/*  #Mobile (Portrait) 320px
----------------------------------------------------------------------*/
@media only screen and (min-width: 100px) and (max-width: 480px) {
    body {overflow-x: hidden}
    .boxed, .boxed-margin {width: 100%;margin: 0 auto}
    .row { width: 88%; padding: 0; }
    .sidebar, .post {width: 100%;margin: 0 0 40px}
    .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12,
    .grid_1.alpha,.grid_1.omega, .grid_2.alpha,.grid_2.omega, .grid_3.alpha,.grid_3.omega, .grid_4.alpha,.grid_4.omega, .grid_5.alpha,.grid_5.omega,
    .grid_6.alpha,.grid_6.omega, .grid_7.alpha,.grid_7.omega, .grid_8.alpha,.grid_8.omega, .grid_9.alpha,.grid_9.omega, .grid_10.alpha,.grid_10.omega, .grid_11.alpha,.grid_11.omega {width: 100%;margin: 0 0 30px}

    a.btn_canvas {display: block}
    h3 {font-size: 16px}
    .pagination-tt {margin: 0 0 60px 0}
    .copyright {float: none;display: table;margin: 0 auto}
    #popup {width: 220px}
    .banner {margin: 0 0 10px;width: 100%}
    #slideshowt .slider_content {width: 100%}
    .sec_head .r_post { display: block }
    .medium_thumb .post_thumbnail {margin: 0 0 10px 0}
    .big_carousel .owl-pagination, .slideshow_b5 .owl-pagination, .sec_head .social, #header .sf-menu, #slideshowt .slider_tabs, .sec_head .breaking, #layout .e_center .sf-menu {display: none}
    .more_news_pic.featured_thumb {width: 29%}
    #block_carousel .owl-controls {right: -24px}
    #footer .sf-menu {float: none;margin: 20px auto 0;display: table}
    .ads_widget a {float: none !important;margin: 10px auto;display: table}
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {width: 100%}
    .grid_6 .def_wgr {width: 92%}
    .masonry_T .post {width: auto}
    .widget, .T20-tabs-nav, .load_anim .introfx, .load_anim .introfxo > div {opacity: 1 !important}
    #masonry-container .post { width: 95% !important }
}

این به هر قالبی می خوره؟
یعنی بدون دستکاری اینو در css قالب قرار بدم درست میشه؟

[mdsn]

دوست عزیز در گوگل قالبهای Responsive رو جستجو کنید نتایج زیادی پیدا می کنید از آموزش این کار گرفته تا دانلود خود این قالب ها و ...

یله در گوگل هست ولی برای نیوک نیست...

[reper]

شما اگر دقت کنی تمام این کدها برای body تعریف شده یعنی باید ساختار
body قالبت رو با سایزهای مختلف iهماهنگ کنی

[vahidmaster]

قالب‌های واکنشگرا براساس درصد ساخته میشه .
سیستم نیوک از همه نوع قالب پشتیبانی می‌کند . اما طراح قالب باید به ساختار نیوک اشراف داشته باشد .
بعضی وقت‌ها لازم است در برخی از ماژول‌ها از جمله اخبار تغییرات ساختاری داده شود تا بتوان از همه امکانات قالب بهرمند شد .
شما می‌توانید قالب واکنشگرا (Responsive) مورد نظر خود را ارسال کنید تا بشه برای شما تبدیل نمود . از جمله سایت‌های نیوکی که به صورت واکنشگرا می‌باشد ، سایت گرین اسکین هست که در بیشتر ساختار ماژول‌هاش تغییرات اعمال شده . از جمله ماژول اخبار و فروشگاه
بنده چند وقتی به دلیل کار و درس از مرجع نیوک فارسی دور بودم ، قرار بود با آقای نامور برای قالب‌های نیوک 8.4 همکاری کنم .
اما شما قالب خود رو پیدا کنید ارسال کنید تا براتون به نیوک تبدیل کنم .

[vahidmaster]

با آقای نامور صحبت کردم تا بتونم تاپیکی برای قالب‌های واکنشگرا (Responsive) را ایجاد کنم .
به دلیل زیاد بودن ترافیک کاری خودم نمیتونم جستجو کنم اما تبدیل رو انجام میدم .
دوستانی که میخوان قالب واکنشگرا (Responsive) مورد نظرشون تبدیل به نیوک شود .
به موارد زیر توجه کنن :
1- فایل زیپ قالب مورد نظر خود را از طریق بخش خصوصی ارسال نمایند .
2- فقط قالب‌های واکنشگرا (Responsive) باید ارسال شود .
3- ارسال لینک و در خواست ریپ به هیچ عنوان پذیرفته نمی‌شود .
4- جهت تماس هم یا از طریق پیغام خصوصی یا ایمیل info@greenskin.ir اقدام نمایید .
5- تبدیل قالب تنها برای نیوک 8.3 امکان پذیر می‌باشد . (به درخواست نیوک 8.2 رسیدگی نمی‌شود)

با تشکر