electro-bargh

توضیح درباره این Combine images using CSS sprites

13 پست در این موضوع قرار دارد

با سلام

خوب هستین .. الحمدوالله .... ولی من خوب نیستم ... :rolleyes: به خاطر این :

ادرس وبسایتم : http://www.electro-bargh.ir/

دوستان برای سئوی وبسایتم خیلی زحمت کشیدم تا اینجا رسیدم .. خوب بریم سر اصل مطلب برین به لینک زیر رجوع کنید

http://gtmetrix.com/reports/www.electro-bargh.ir/6pNoCs9m

خوب قسمت Combine images using CSS sprites خیلی از وبسایت ها رو گشتم ولی مطالب یا ناقص بود یا اصل من هنگ کردم :o

خوب این ارور ها رو داده

The following images served from electro-bargh.ir should be combined into as few images as possible using CSS sprites.

حالا هر کاری می کنم نمیتونم چجوری این ارور ها رو درست کنم ..... این مطلب انگلیسی بالا میگه باید تمام عکس ها بشن یکی .... چجوری ...

خوهشا توضیح کامل باشه .

دوستان راهنمایی کنید............

راستی اگه این یه مورد رو اوکی کنم که میترکونه .... :D البته با کمک شما میترکونیـــــــــــــــــــــم :P

با تشکر ..منتظر نظراتتون هستم.

0

به اشتراک گذاری این پست


لینک به پست

شما باید تصاویری که در بکگراند لینکها ، لیستها، کلیدها و ... استفاده کردید را در یک فایل قرار دهید و با پوزیشن و طول و عرض مکان مورد نظر را در تصویر نشان دهید

http://www.w3schools.com/css/css_image_sprites.asp

http://www.spritecow.com/

http://css-sprit.es/

8

به اشتراک گذاری این پست


لینک به پست

ممنونم فکر کنم ... دارم درستش می کنم

0

به اشتراک گذاری این پست


لینک به پست

شما باید تصاویری که در بکگراند لینکها ، لیستها، کلیدها و ... استفاده کردید را در یک فایل قرار دهید و با پوزیشن و طول و عرض مکان مورد نظر را در تصویر نشان دهید

http://www.w3schools...age_sprites.asp

http://www.spritecow.com/

http://css-sprit.es/

ممنون

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

بعد خود عکس رو چیکار کنیم پاک کنیم؟

0

به اشتراک گذاری این پست


لینک به پست

کلا عکسها رو باید یکی کنید و استفاده کنید

توضیح این ترفند در بخش html-css هست

1

به اشتراک گذاری این پست


لینک به پست

ممنون من یک سرچی زدم

اومدم همه عکسام رو تو یک فایل جمع اوری کردم و همه عکسها رو پاک کردم

الان خوب شده

ولی باید عکس ها پاک می کردم؟

0

به اشتراک گذاری این پست


لینک به پست

بله دیگه، استفاده‌ای ندارند!

2

به اشتراک گذاری این پست


لینک به پست

رفتم تمام کارایی که گفته شده رو انجام دادم ، حالا دارم عکس ها رو پاک میکنم و عکس جدید رو آپلود میکنم

از یه طرف Combine images using CSS sprites داره رتبش خوب میشه ، از یه طرف Avoid bad requests داره رتبش بد میشه

همون عکس ها رو داره درخواست میده

توی یه فایل عکس ها رو قرار دادم ، اینجوری که من برداشت کردم باید تکه کد فراخونیش رو اینجوری بنویسم :


.parent-element {background:url(result.png);background-position: 0px 0px;background-position: 0px -16px;background-position: 0px -34px;background-position: 0px -75px;background-position: 0px -121px;background-position: 0px -151px;background-position: 0px -181px;background-position: 0px -200px;background-position: 0px -220px;background-position: 0px -250px;}

و بذارم توی style قالبم ، درسته ؟

عکسه رو هم توی قسمت images آپلودش کردما ، اما بازم نمیدونم مشکل چیه !

1

به اشتراک گذاری این پست


لینک به پست

نه شما اشتباه کردین این position ها رو شما میبایست توی هر کدوم از استایل هایی که تصویر لود میکردن استفاده کنید.

مثلا شما عکس چشم رو برای تعداد بازدید با تمامی عکس ها یکی کردین.

حالا میخواین توی کد ها ازش استفاده کنید.

اول از همه شما میاین توی استایل بازدید ها و

background:url(images/view.png);

و کد که داره تصویر view.png رو فراخوانی میکنه رو باید به result.png تغییر بدین و به جز اون باید ببینید که عکس چشم توی عکسی که ساختین چه اندازه ای داره.مثلا:

در اندازه:


background-position: 0px -16px;

قرار داره.حالا اینطوری تصویر به راحتی لود میشه و نیازی به تصویر های قبلی نیست.در اصل کد استایل view این شکلی میشه:


background:url(images/view.png);
background-position: 0px -16px;

البته برای تمامی تصویر ها همین کار باید انجام بشه.

در ضمن اون تصویری که ساخته میشه رو باید در پوشه images قالب بزارین.

2

به اشتراک گذاری این پست


لینک به پست

استایل بازدید ها ؟ از کجا بدونم کجا دارن فراخونی میشن ؟!

1

به اشتراک گذاری این پست


لینک به پست

بازدید ها مثال بود.

دقیق بخونید.

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

بعد کار های بالا رو براش لنجلم بدین.

1

به اشتراک گذاری این پست


لینک به پست

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

بعد کار های بالا رو براش انجام بدین.

از کجا میتونم بفهمم که تصاویر از کجا فراخوانی میشن ؟

1

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

ابتدا فایل .css این کد رو اضافه کنید


.Sp-ImageAll-2{background:url(images/ImageAll-2.png) no-repeat;}
.Sp-ImageAll-2.home{background-position:-83px -2px; width:23px; height:23px;}

کد بالا برای مثال هستش

نام ImageAll-2.png باید به عکسی که درست کردید تغییر کنه

آدرس فولدر عکساتون باید نام فولدر عکسهای خودتون باشه images

نام Sp-ImageAll-2.home رو در کلاس تگ div یا a قرار بدید تا عکس برای شما نمایش داده بشه

باید عرض کنم که background-position:-83px -2px;

پوزیشن آیکونی که میخواین نمایش بدید برای اینکه بفهمید پوزیشن عکستون چیه از طریق فتوشاپ این کار رو انجام بدید

در فتوشاپ منوی windows تیک info را بزنید تا ابزاری که پوزیشن عکس ها رو نمایش میده ظاهر میشه

بعد خودتون دستی تک تک برای هر عکس یک


.Sp-ImageAll-2.home{background-position:-83px -2px; width:23px; height:23px;}

تعریف کنید با این تفاوت که باید home رو تغییر نام بدید

البته اساتید باز کمکتون خواهند کرد

از کجا میتونم بفهمم که تصاویر از کجا فراخوانی میشن ؟

خودتون باید تعریف کنید به این صورت


.Sp-ImageAll-2{background:url(images/ImageAll-2.png) no-repeat;}

ویرایش شده در توسط M.At
0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط masoudmosleh267
      سلام دوستان. من یه سایتی رو از بکاپ گرفتم و از یه هاست و دامنه به یه هاست و دامنه جدید انتقال دادم. حالا چه سایت رو که باز میکنم چه وارد پیشخوان وردپرس میشم یه ارور میاد یکی از خطلی functions.php قالب رو نشون میده.
      Parse error: syntax error, unexpected 'class' (T_CLASS), expecting identifier (T_STRING) or variable (T_VARIABLE) or '{' or '$' in /public_html/wp-content/themes/khadamator/functions.php on line 1132
      مشکل چیه؟
    • توسط amirsa
      سلام
      من محصولات متغیر رو در ووکامرس که وارد میکنم،(محصول ممکنه 2 یا 3 صفت داره که باید انتخاب بشه)
       توی فروشگاه ووکامرس بصورت حد اقل و حداکثر قیمت ها نشون داده میشه
      مثلا کالا دونوع 10 و  20 تومانی هست.صفت آ 15 تومن برای مشتری هایی که بخوان.تو فروشگاه قیمت رو بصورت 10-35 نشون میده که بیشتر از قیمت اصلی است.من میخوام همون 10 و 20 رو نشون بده
      این مشکل انرژی زیادی ازم گرفته ممنون میشم راهنماییم کنید 
    • توسط arianemun
      سلام عرض ادب به کاربران وردپرس پارسی ، من یک مشکلی دارم در افزونه ای ، افزونه woocomerce product finder یک افزونه ای است طبق تنظیمات و چیز هایی که برای محصول ووکامرسی تعریف میکنیم با انتخواب گزینه ها توسط کاربر محصول مورد نظر خودش رو پیدا میکنه، تنها مشکلی که این افزونه یا میشه گفت ضعفی که داره تفاوت محصول برجسته رو با محصول ساده متوجه نمیشه یعنی اگر تو اون دسته یک محصول برجسته باشه و یک محصول ساده اون ها رو از هم تفکیک نمیکنه من میخواستم این قابلیت رو به این افزونه اضافه کنم که کاربر وقتی محصولش رو پیدا کرد هم محصول ساده ها رو ببینه و محصول برجسته شده ! ممنون میشم کمک کنید .
       
      لینک افزونه استفاده شده
    • توسط صالح طالبی
      باسلام خدمت شما عزیزان
      بنده این تکه کد رو که در اصل افزونه نمایش آخرین های انجمن بود برای وردپرس به صورت کد در خود فانکشن قالب دراوردم:
      function ipslatest_main($query) { if ( is_home() && $query->is_main_query() ) { $db_user = 'root'; $db_name = 'ipsdb'; $db_pass = ''; $db_host = 'localhost'; $prefix = get_option('ipslatest_db_prefix'); $url = 'http://localhost/IPS'; $limit = '5'; $title = ''; $width = '300'; $direction = 'rtl'; $translations = array('عنوان','بازدید','پاسخ ها','ارسال شده به وسیله'); $db = new wpdb( $db_user, $db_pass, $db_name,$db_host ); $q = $db->get_results( 'SELECT topic_id,author_name FROM '.$prefix.'forums_posts ORDER BY pid DESC LIMIT '.$limit ); echo '<div id="ipslatest-mainTitle" style="width:'.$width.'">'.$title.$position.'</div>'; echo '<table id="ipslatestTopics" border=0 style="padding:10px;width:'.$width.'">'; echo '<tr><td class="ipslatest-row-views">'.$translations[2].'</td><td class="ipslatest-row-answers">'.$translations[1].'</td><td class="ipslatest-row-sender">'.$translations[3].'</td><td class="ipslatest-row-title">'.$translations[0].'</td> </tr>'; if (is_array($q) || is_object($q)) { foreach ($q as $key => $row) { $topicDetails = $db->get_row('SELECT title,tid,views,posts FROM '.$prefix.'forums_topics WHERE tid='.$row->topic_id); $userMemberID = $db->get_row('SELECT member_group_id FROM '.$prefix."core_members WHERE name='".$row->author_name."'"); $userShowingData = $db->get_row('SELECT prefix,suffix FROM core_groups WHERE g_id='.$userMemberID->member_group_id); echo '<tr id="ipstopic"> <td class="ipslatest-row-views-content"> <span>'.$topicDetails->views.' </span></td> <td class="ipslatest-row-answers-content"><span>'.$topicDetails->posts.'</span></td> <td id="ipslatest-row-sender-content">'.$userShowingData->prefix.$row->author_name.$userShowingData->suffix.'</td> <td class="ipsTitle"> <a rel="follow" href="'.$url.'topic/'.$topicDetails->tid.'-'.strtolower(str_replace(" ","-",$topicDetails->title)).'">'. strip_tags($topicDetails->title) .' </a> </td> </tr>'; } /*}*/ } echo '</table>'; } } به صورت خودکار خود افزونه از کد زیر برای نمایش اون در اول پست های سایت و یا در آخر پست های سایت استفاده میکنه کد ها هم به این شکله:
      add_action( 'wp', 'ipslatestMain' ); function ipslatestMain( $query ) { $position = "bottom"; if($position === "bottom") $acton = "loop_end"; elseif ($position === "top") $acton = "loop_start"; add_action($acton,"ipslatest_main"); } الان بدون هیچ مشکلی نمایش میده در پایین پست ها ولی من میخام این نمایش رو در یه قسمت دیگه از قالب انجام بدم و چجوری میتونم این فانکشن و تابع رو نمایش بدم؟؟؟
      نام افزونه هم در ضمن ipsuite-latest-topics هست و من از حالت افزونه فقط خارجش کردم و در خود قالب و فانکشن اون اوکی کردم.
      فقط مشکل اینه که نمیخام در بالای پست یا پایین پست ها نمایش بدم و میخام در جایی که خودم تعیین میکنم تابع رو نمایش بدم؟!!!
      ممنون میشم راهنمایی بفرمایید.
    • توسط سعید فرزادی پور
      با عرض سلام
      من به مشکلی خوردم که راه حل اون رو نمیدونم
      در هدر سایت یک نویگیشن بار دارم که منوی اصلی سایتم به صورت دراپ داون در این نویگیشن بار وجود داره ، قال سایت من shaply هستش و استفاده از ویجت ها در body بازه ، من با استفاده از یک ویجت اسلایدر در بالاترین قسمت و زیر هدر سایت که ارتفاع اونم 55 پیکسل هستش اسلایدر بزرگ ایجاد کردم ، و حالا زمانی که میرم روی دراپ داون ها متاسفانه تا قبل از اسکرول کردن به پایین ، زیر منو ها به زیر اسلایدر میرن ، اما بعد از اسکرول کردن به پایین این مشکل حل شده و منو ها و زیر منو ها نمایش داده میشن ، هرچه z-index رو افزایش دادم نتیجه ای نداشت ، چطور میتونم این مشکل رو حل کنم ؟
      و سوال دوم این که در این تم منو ها اول به پایین و بعد به راست باز میشن و من میخوایم سایت رو به صورت فارسی داشته باشم و میخوام اول به پایین و بعد به چپ باز بشن منو ها , چه تغییری میتونم در css ایجاد کنم ؟