/ آموزش ساخت پنجره لاگین پاپ آپ مناسب برای طراحان استایل
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
تبلیغات شما وندا هاست
صفحه 2 از 8 نخستنخست 1234 ... آخرینآخرین
نمایش نتایج: از 11 به 20 از 73

مقاله: آموزش ساخت پنجره لاگین پاپ آپ مناسب برای طراحان استایل

    1. آموزش ساخت پنجره لاگین پاپ آپ مناسب برای طراحان استایل

      آموزش ساخت پنجره لاگین پاپ آپ مناسب برای طراحان استایل

      درود
      به درخواست طراحان استایل عزیز این آموزش رو میزارم
      قبل از هرچیز برای افرادی که نمیدونن پنجره پاپ آپ لاگین چیه توضیح بدم که پنجره لاگین پاپ آپ این امکان رو به شما میده که با کلیک بر روی یک ئکمه با هر عنوانی یک پنجره زیبا باز بشه که درش اطلاعات ورود رو میخواد ، مثل پنجره لاگین ویکی وی بی که اگر اونرو ندیدید ، یکبار خارج بشید مجددا وارد بشید متوجه میشید .

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

      لازمه بگم این آموزش برای اولین بار در ایران ارایه میشه ، شاید قبلا به هر طریقی آموزش داده شده اما این ساده ترین و مطمئن ترین راه برای طراحان استایل هست بنابر این کپی برداری بدون ذکر منبع ممنوع میباشد .

      قبل از انجام این آموزش داریم :

      مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

      که بعدش اینجوری میشه :
      مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

      مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

      و خیلی ساده طراح میتونه ظاهرش رو با ویرایش کد های CSS تغییر بده .


      خب حالا بریم سراغ آموزش :

      بعد از اینکه استایل دیفالت رو ساختید قبل از هرکاری مراحل زیر رو انجام بدید

      1 - فایل پیوست رو دانلود کنید و فایل های jquery.bpopup.min.js و jquery.min.js رو داخل پوشه images بریزید

      2 - در جست و جوی قالب ها headinclude_bottom رو سرچ کنید و کد های زیر رو به انتهاش اضافه کنید :

      کد:
      <script src="mages/jquery.min.js"></script>
      <script src="mages/jquery.bpopup.min.js"></script>
      <script>
          ;(function($) {
              $(function() {
                  $('#wikivbloginbutton').bind('click', function(e) {
                      e.preventDefault();
              $('#popupwikione').bPopup({
                  speed: 800,
              });
                  });
              });
          })(jQuery);
      </script>
      3 - در جست و جوی قالب ها additional.css رو سرچ کنید و کد های زیر رو بهش اضافه کنید :

      کد:
      #wikivbloginbutton {
      margin-top: 5px;
      border: none;
      cursor: pointer;
      background: rgba(0,0,0,0.4);
      color: #fff;
      padding: 3px 10px 7px 10px;
      }
      .loginrighticon {
      height: 37px;
      width: 37px;
      position: absolute;
      right: 15px;
      margin-top: 324px;
      cursor: none;
      }
      #popupwikione { 
      background: #fff;
          color:#000;
          display:none; 
          padding:20px;
          position:relative;
          z-index: 99999999;
      }
      .b-close {
          cursor:pointer;
          position:absolute;
          left:7px;
          top: 8px;
      }
      4 - در جست و جوی قالب ها header رو جست و جو کنید ، کل کد هاش رو پاک کرده و کد های زیر رو جایگزینشون کنید :

      کد:
      <div class="above_body"> <!-- closing tag is in template navbar -->
      <div id="header" class="floatcontainer doc_header">
          <vb:if condition="$stylevar['titleimage']"><div><a name="top" href="{vb:link forumhome}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div></vb:if>
          <div id="toplinks" class="toplinks">
              <vb:if condition="$show['member']">
                  <ul class="isuser">
                      <li><a href="login.php?{vb:raw session.sessionurl}do=logout&amp;logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></li>
                      <vb:if condition="$show['registerbutton']">
                      <li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
                      </vb:if>
                      <li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase user_control_panel}</a></li>
                      <li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
                      <vb:if condition="$notifications_total">
                      <li class="popupmenu notifications" id="notifications">
                          <a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a>
                          <ul class="popupbody popuphover">
                              {vb:raw notifications_menubits}
                          </ul>
                      </li>
                      <vb:else />
                      <li class="popupmenu nonotifications" id="nonotifications">
                          <a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
                          <ul class="popupbody popuphover">
                              <li>{vb:rawphrase no_new_messages}</li>
                              <vb:if condition="$show['pmmainlink']"><li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li></vb:if>
                          </ul>
                      </li>
                      </vb:if>
                      <li class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li>
                      <vb:if condition="$vboptions['enablefacebookconnect']">
                          {vb:raw facebook_header}
                      </vb:if>
                  </ul>
                  {vb:raw template_hook.header_userinfo}
                  <vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}</p></vb:comment>
              <vb:else />
      <button id="wikivbloginbutton">ورود اعضا</button>
      <div id="popupwikione">
          <a class="b-close"><img src="http://upload.wikivb.ir/images/raqgrnep9ojchr765ng.png" width="26px" height="26px" alt="بستن" /><a/>
                  <ul class="nouser">
                  <vb:if condition="$show['registerbutton']">
                      <li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
                  </vb:if>
                      <li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}">{vb:rawphrase help}</a></li>
                      <li>
                  <script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
                  <form id="navbar_loginform" action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})">
                      <fieldset id="logindetails" class="logindetails">
                          <div>
                              <div>
                          <input type="text" class="textbox<vb:if condition="!$username"> default-value</vb:if>" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" />
                          <input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />
                          <input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />
                          <input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />
                              </div>
                          </div>
                      </fieldset>
                      <div id="remember" class="remember">
                          <label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label>
                      </div>
      
                      <input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
                      <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
                      <input type="hidden" name="do" value="login" />
                      <input type="hidden" name="vb_login_md5password" />
                      <input type="hidden" name="vb_login_md5password_utf" />
                  </form>
                  <script type="text/javascript">
                  YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
                  YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
                  vB_XHTML_Ready.subscribe(function()
                  {
                  //
                      YAHOO.util.Event.on('navbar_username', "focus", navbar_username_focus);
                      YAHOO.util.Event.on('navbar_username', "blur", navbar_username_blur);
                      YAHOO.util.Event.on('navbar_password_hint', "focus", navbar_password_hint);
                      YAHOO.util.Event.on('navbar_password', "blur", navbar_password);
                  });
                  
                  function navbar_username_focus(e)
                  {
                  //
                      var textbox = YAHOO.util.Event.getTarget(e);
                      if (textbox.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>')
                      {
                      //
                          textbox.value='';
                          textbox.style.color='{vb:stylevar input_color}';
                      }
                  }
      
                  function navbar_username_blur(e)
                  {
                  //
                      var textbox = YAHOO.util.Event.getTarget(e);
                      if (textbox.value == '')
                      {
                      //
                          textbox.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>';
                          textbox.style.color='{vb:stylevar shade_color}';
                      }
                  }
                  
                  function navbar_password_hint(e)
                  {
                  //
                      var textbox = YAHOO.util.Event.getTarget(e);
                      
                      YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "none");
                      YAHOO.util.Dom.setStyle('navbar_password', "display", "inline");
                      YAHOO.util.Dom.get('navbar_password').focus();
                  }
      
                  function navbar_password(e)
                  {
                  //
                      var textbox = YAHOO.util.Event.getTarget(e);
                      
                      if (textbox.value == '')
                      {
                          YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
                          YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
                      }
                  }
                  </script>
                      </li>
                      <vb:if condition="$vboptions['enablefacebookconnect']">
                          {vb:raw facebook_header}
                      </vb:if>
                  </ul>
      </div>
              </vb:if>
          </div>
          <div class="ad_global_header">
              {vb:raw ad_location.global_header1}
              {vb:raw ad_location.global_header2}
          </div>
          <hr />
      </div>
      حالا برید استایلتون رو رفرش کنید و لذت ببرید مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

      نکته 1 : برای تغییر مسیر فایل های jquery.bpopup.min.js و jquery.min.js اونها رو داخل پوشه مورد نظرتون که میشه پوشه استایل قرار بدید بعدش مسیرشون رو از دو خط زیر که داخل headinclude_bottom قرار دادیم تغییر بدید :

      کد:
      <script src="images/jquery.min.js"></script>
      <script src="images/jquery.bpopup.min.js"></script>
      نکته 2 : برای ویرایش باکس پاپ فقط کافیه کد های اضافه شده به additional.css رو طبق نیازتون ویرایش کنید ، بقیه فرم لاگین مثل همیشه با همون کلاس های سابق باقی موندن که کد هاشون مثل همیشه داخل vbulletin-chrome.css هست .

      اگر قدم به قدم انجام بدید هیچ مشکلی پیش نمیاد پس نگران نباشید
      امیدوارم از این به بعد شاهد استایل هایی با این قابلیت باشیم
      اگر چیزی جا افتاده اعلام کنید اضافه میکنم

      سربلند باشید
      ویکی وی بی
      مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
      چنانچه این مطلب مورد پسند شما واقع شده بر روی کلیک کنید .

  1. #11
    WikiVB آنلاین نیست.
    WikiVB
    مديريت کل انجمن
    5,839نوشته26,610مورد پسند

    تاریخ عضویت
    Oct 2012
    شماره عضویت
    1
    پسندیده است
    8,003 پست
    بلاگ
    0 پست
    میزان امتیاز
    26487
    wikivb.ir
    نقل قول نوشته اصلی توسط jigh3da نمایش پست ها
    اووووووووه عجب انتقاد صریح زننده ای ولی این فقط به درد طراحان میخوره که از صفر بخان یه استایل رو شروع کنن ولی اینی که من دادم رو میتونن روی استایل فعلی که دوسش دارن و ازش دارن استفاده میکنن استفاده کنند و نمونه اش رو دیدم چند دقیقه پیش و بسیار زیبا بود خیلی خوشم اومد ازش و بنده پرسیدم صفحه لاگینش چه جوری باز میشه؟؟و برای این قضیه که پاک کردیم دیگه بنده کاری انجام نمیدم خودتون همه چی رو بذارید موفق پیروز باشید
    شما اگر پست اول رو خوب مطالعه میکردید میدیدید که نوشته شده :

    لازمه بگم این آموزش برای اولین بار در ایران ارایه میشه ، شاید قبلا به هر طریقی آموزش داده شده اما این ساده ترین و مطمئن ترین راه برای طراحان استایل هست بنابر این کپی برداری بدون ذکر منبع ممنوع میباشد .
    حرف هاتونم جز چند کلمه چیزی متوجه نشدم
    موفق باشید

    3 نفر از اعضا پست WikiVB را پسندیده اند


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  2. #12
    Hose!N آنلاین نیست.
    Hose!N
    کاربر اخراجي
    497نوشته2,246مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1515
    پسندیده است
    2,186 پست
    بلاگ
    2 پست
    میزان امتیاز
    2256
    wikivb.ir
    به نظرم روش اقا مصطفی خیلی عالیه
    اون طوری به روش جیغ صدای عزیز کلاس اصلی لوگین که ماله اصل قالب هست پاک میشه که ممکنه مشکلاتی رو به وجود بیاره ولی تو این نه این همون کلاس ها هست و داخل یه باکس قرار داده شده

    2 نفر از اعضا پست Hose!N را پسندیده اند



  3. #13
    NiNE آنلاین نیست.
    NiNE
    مدير بازنشسته
    1,975نوشته4,462مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    63
    پسندیده است
    7,092 پست
    بلاگ
    1 پست
    میزان امتیاز
    4470
    gilas-web.ir
    ببخشید برای تغییر ظاهر دکمه " ورود " باید چه کلاسی رو تغییر بدم ؟

    - - - Updated - - -

    ببخشید برای تغییر ظاهر دکمه " ورود " باید چه کلاسی رو تغییر بدم ؟
    Different type

  4. #14
    Hose!N آنلاین نیست.
    Hose!N
    کاربر اخراجي
    497نوشته2,246مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1515
    پسندیده است
    2,186 پست
    بلاگ
    2 پست
    میزان امتیاز
    2256
    wikivb.ir
    نقل قول نوشته اصلی توسط NiNE نمایش پست ها
    ببخشید برای تغییر ظاهر دکمه " ورود " باید چه کلاسی رو تغییر بدم ؟

    - - - Updated - - -

    ببخشید برای تغییر ظاهر دکمه " ورود " باید چه کلاسی رو تغییر بدم ؟
    همون کلاسی که قبلا بوده
    کد:
    .toplinks form input.loginbutton {
    - - - Updated - - -

    شرمنده 2تا سوال
    1.چون از id استفاده شده نمیشه از div استفاده کرد و باید از a class استفاده کنیم.راه جلی براش دارید؟
    2.ایا میشه 2تا باکس نام کاربری و رمز عبور زیر هم باشهمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    2 نفر از اعضا پست Hose!N را پسندیده اند


    ویرایش توسط Hose!N : 09-12-2013 در ساعت 07:19 PM

  5. #15
    WikiVB آنلاین نیست.
    WikiVB
    مديريت کل انجمن
    5,839نوشته26,610مورد پسند

    تاریخ عضویت
    Oct 2012
    شماره عضویت
    1
    پسندیده است
    8,003 پست
    بلاگ
    0 پست
    میزان امتیاز
    26487
    wikivb.ir
    1.چون از id استفاده شده نمیشه از div استفاده کرد و باید از a class استفاده کنیم.راه جلی براش دارید؟
    2.ایا میشه 2تا باکس نام کاربری و رمز عبور زیر هم باشهمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    1 - عزیز چه فرقی داره شما میتونید از div id جای div class استفاده کنید !
    2 - بله میشه ، من آموزش رو گذاشتم با این فرض که طراحان استایل خودشون میتونن خیلی ساده با CSS هرکاریش خواستن بکنن
    برای اینکار کافیه کد زیر رو به انتهای Additional.css اضافه کنید :
    کد:
    #navbar_username {
    display: table;
    }
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  6. #16
    NiNE آنلاین نیست.
    NiNE
    مدير بازنشسته
    1,975نوشته4,462مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    63
    پسندیده است
    7,092 پست
    بلاگ
    1 پست
    میزان امتیاز
    4470
    gilas-web.ir
    ببخشید یه سوال که فک نکنم اینجا جاش باشه اما لازمه که بدونم آیا اگه بجای class از id استفاده کنیم برای مثال میتونم دوتا #idtest بزنیم ؟ منظورم اینه که میشه مثلا میشه یه بار position رو در خط اول داد و وقتی سی اس اس بسته میشه یه بار دیگه position رو با حالت متفاوت در خط هزارم داد ؟
    Different type

  7. #17
    Hose!N آنلاین نیست.
    Hose!N
    کاربر اخراجي
    497نوشته2,246مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1515
    پسندیده است
    2,186 پست
    بلاگ
    2 پست
    میزان امتیاز
    2256
    wikivb.ir
    مشکل 2 حل شد
    ولی مشکل 1
    من اگه div class یا div id بزارم کلا بهم میریزهمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بیمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  8. #18
    WikiVB آنلاین نیست.
    WikiVB
    مديريت کل انجمن
    5,839نوشته26,610مورد پسند

    تاریخ عضویت
    Oct 2012
    شماره عضویت
    1
    پسندیده است
    8,003 پست
    بلاگ
    0 پست
    میزان امتیاز
    26487
    wikivb.ir
    ببخشید یه سوال که فک نکنم اینجا جاش باشه اما لازمه که بدونم آیا اگه بجای class از id استفاده کنیم برای مثال میتونم دوتا #idtest بزنیم ؟ منظورم اینه که میشه مثلا میشه یه بار position رو در خط اول داد و وقتی سی اس اس بسته میشه یه بار دیگه position رو با حالت متفاوت در خط هزارم داد ؟
    منظورتون رو متوجه نشدم
    مشکل 2 حل شد
    ولی مشکل 1
    من اگه div class یا div id بزارم کلا بهم میریزهمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بیمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    اگر قصد تغییر #popupwikione رو دارید باید تو کد هایی هم که به headinclude_bottom اضافه کردید تغییرش بدید !
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  9. #19
    Hose!N آنلاین نیست.
    Hose!N
    کاربر اخراجي
    497نوشته2,246مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1515
    پسندیده است
    2,186 پست
    بلاگ
    2 پست
    میزان امتیاز
    2256
    wikivb.ir
    من 3تا عکس رو گذاشتم درست شد ولی نمیخوام با a class باشه

  10. #20
    WikiVB آنلاین نیست.
    WikiVB
    مديريت کل انجمن
    5,839نوشته26,610مورد پسند

    تاریخ عضویت
    Oct 2012
    شماره عضویت
    1
    پسندیده است
    8,003 پست
    بلاگ
    0 پست
    میزان امتیاز
    26487
    wikivb.ir
    عزیز من اصلا نمیدونم شما قصد دارید چه کاری انجام بدید ، اما فکر نمیکنم تغییر یه سری HTML و CSS کار سختی باشه یا بگید دقیقا میخواید چیکار کنید یا سعی کنید انجامش بدید شما فقط میگید میخوام a class نباشه منم میگم بکنیدش div class بدون اینکه بدونم هدفتون چیه !

    کاربر زیر پست WikiVB را پسندیده است:


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

صفحه 2 از 8 نخستنخست 1234 ... آخرینآخرین

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کلمات کلیدی این موضوع

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
خرید بک لینک
مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی