LOGIN ID Password Auto Login Register Now! Lost Password?
XUGJ Forum

管理画面のテーマをカスタマイズ

  • このフォーラムに新しいトピックを立てることはできません
  • このフォーラムではゲスト投稿が禁止されています

投稿ツリー


前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 .2 | 投稿日時 2016/3/29 18:39 | 最終変更
kamezou  1st Class 居住地: 2013~  投稿数: 49
jQueryによる管理画面のテーマのカスタマイズです。

小さな変更の寄せ集めですが、トータルで画面デザイン崩れがなくなり、無駄に長いスクロールをする必要がなくなります。

・左カラムを固定し、縦スクロール を設定。
・左カラム上部の Go to Bottom を画面右上に固定。他のボタンは削除。
・altsys のメニューバーを、スクロール時に画面上部に固定。
・altsys の diff from ~ に、横スクロール を設定。
・altsys の編集中のテンプレート名を、入力box の直上に追加表示。
・textarea の表示幅を拡大。(親要素の90%)
・Topへ戻る ボタンを画面右下に固定。

あらかじめ altsys の テンプレートの高度な操作 を表示しておきます。
root/modules/legacy/admin/theme フォルダを、root/theme フォルダ内に、admin の名前でコピー。
そのフォルダの中の admin_theme.html の </head>(閉じタグ)直前に、以下のコードを挿入。
コンパイル済テンプレートキャッシュの削除 を実行します。
  <script type="text/javascript">
    jQuery(function (){
      var wdw = jQuery(window);
      var contentBody = jQuery('#contentBody');
      // ------------------------------------------- 左カラムを固定 ----
      var header = jQuery('#header');
      var topnav = jQuery('.topnav');
      var leftcolumn = jQuery('#leftcolumn').removeAttr("id");
      var left_clm_c = jQuery("<div id='leftcolumn'></div>");
      left_clm_c.css({"position":"absolute", "top":topnav.offset().top, "padding":"0 0 0 10px"});
      left_clm_c.append(leftcolumn.children()).insertAfter(header);
      left_clm_c.find('.head,.head2').css("padding","5px 0");
      left_clm_c.find('.submenu').css("background-color","#fff");
      topnav.css("margin-left", left_clm_c.width()+10);
      leftcolumn.width(left_clm_c.width()+10);
      left_clm_s();
      left_clm_fix();
      wdw.scroll(left_clm_fix);
      wdw.resize(left_clm_s);

      function left_clm_fix(){
          if (wdw.scrollTop() > topnav.offset().top) {
            left_clm_c.css({"position":"fixed", "top":"0"});
          } else {
            left_clm_c.css({"position":"absolute", "top":topnav.offset().top});
          }
      }
      function left_clm_s(){
        leftcolumn.css({"height":wdw.height() - header.height() - jQuery('#footer').outerHeight()});
        left_clm_c.height("");
        if (left_clm_c.height() > wdw.height() - 60){
          left_clm_c.css({"overflow-y":"scroll", "height":wdw.height()-60});
        } else {
          left_clm_c.css({"overflow-y":"","height":""});
        }
      }
      // ------------------------------------------- Go to Bottom ----
      jQuery('#toggleall').next().hide();
      jQuery('#toggleall').hide();
      var to_bottom = jQuery('<div />').css({"position":"absolute", "top":contentBody.offset().top+17, "z-index":"99"});
      to_bottom.append(jQuery("[title='Go to Bottom']").parent()).insertBefore(contentBody);
      to_bottom.children().append(" Go to Bottom").css({"background-color":"#fff", "padding":"3px"});
      dsp_btn();
      wdw.scroll(dsp_btn);
      to_btm_s();
      wdw.resize(to_btm_s);

      function dsp_btn(){
        if ( wdw.scrollTop() > contentBody.offset().top) {
          to_bottom.css({"position":"fixed", "top":"12px"})
        } else {
          to_bottom.css({"position":"absolute", "top":contentBody.offset().top+17})
        }
      }
      function to_btm_s(){ to_bottom.css("left",wdw.width() - 160); }
      // ------------------------------------------- altsys メニューバー固定 ----
      var mymenu = jQuery("<div />");
      var menu = jQuery(".altsys_mymenu:first");
      if (menu[0]){
        var hr = contentBody.children('hr');
        mymenu.append(menu.first().clone());
        mymenu.append(hr.first().clone());
        var submenu = contentBody.children('.altsys_mymenusub');
        if (submenu[0]){
          mymenu.append(submenu.clone());
          mymenu.append(hr.eq(1).clone());
        }
        mymenu.css({"position":"fixed", "top":"0", "padding-top":"5px", "background-color":"#fff"})
        mymenu.prependTo(contentBody);
        dsp_nav();
        dsp_nav_s();
        wdw.resize(dsp_nav_s);
        wdw.scroll(dsp_nav);
      }
      function dsp_nav(){
        if ( wdw.scrollTop() > contentBody.offset().top) {
          mymenu.show();
        } else {
          mymenu.hide();
        }
      }
      function dsp_nav_s(){ mymenu.width(contentBody.width()); }
      // ------------------------------------------- diff from ~:横スクロールバー ----
      var diff2_f = jQuery('#diff2file');
      if (diff2_f[0]){
        diff2_f.css("overflow-x","scroll");
        d_f_s();
        wdw.resize(d_f_s);
      }
      var diff2_d = jQuery('#diff2default');
      if (diff2_d[0]){
        diff2_d.css("overflow-x","scroll");
        d_d_s();
        wdw.resize(d_d_s);
      }
      function d_f_s(){ diff2_f.width(wdw.width() - 230); }
      function d_d_s(){ diff2_d.width(wdw.width() - 230); }
      // ------------------------------------------- テンプレート名表示 ----
      var tpl_source = jQuery('#altsys_tpl_source');
      if (tpl_source[0] ) {
        tpl_source.before("&nbsp;&nbsp;&nbsp;"+tpl_source.parent().siblings('h3').text()+"<br />");
      }
      // ------------------------------------------- textarea 拡大(90%) ----
      var txt = jQuery('textarea');
      if (txt.width() > 400 || txt.attr("cols") >= 50){
        txt.css("width","90%");
      }
      // ------------------------------------------- Topへ戻る ボタン ----
      var contentBottom = jQuery('#contentBottom').removeClass("return_top")
      var to_top = jQuery('<div />').css({"position":"fixed", "border-color":"#57b", "z-index":"99"});
      to_top.addClass("return_top").append(contentBottom.children()).insertAfter(contentBody);
      to_top_s();
      wdw.resize(to_top_s);
      function to_top_s(){ to_top.css({"top":wdw.height()-65, "left":wdw.width()-200}); }
      // ------------------------------------------- 横スクロールバー抑止 ----
      contentBody.css("overflow-x","hidden");
    });
  </script>
ウインドウリサイズには対応していません。サイズ変更後にリロードしてください。(修正 3/30 )
投票数:0 平均点:0.00
前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2016/4/15 17:25 | 最終変更
kamezou  1st Class 居住地: 2013~  投稿数: 49
Adelie Debug に対応しました。
背景色の指定を追加しました。

  <script type="text/javascript">
    jQuery(function (){
      var wdw = jQuery(window);
      var footer = jQuery('#footer');
      var bg_color = "#eeffee";	    // ------------- 背景色の指定 ----
      var contentBody = jQuery('#contentBody').css("background-color",bg_color);
      jQuery('#centercolumn').css("background-color",bg_color);
      // ------------------------------------------- 左カラムを固定 ----
      var header = jQuery('#header');
      var topnav = jQuery('.topnav');
      var leftcolumn = jQuery('#leftcolumn').removeAttr("id").css("background-color",bg_color);
      var left_clm_c = jQuery("<div id='leftcolumn'></div>");
      left_clm_c.css({"position":"absolute", "top":topnav.offset().top, "padding":"0 0 0 10px"});
      left_clm_c.append(leftcolumn.children()).insertAfter(header);
      left_clm_c.find('.head,.head2').css("padding","5px 0");
      left_clm_c.find('.submenu').css("background-color","#fff");
      topnav.css("margin-left", left_clm_c.width()+10);
      leftcolumn.width(left_clm_c.width()+10);
      left_clm_s();
      left_clm_fix();
      wdw.scroll(left_clm_fix);
      wdw.resize(left_clm_s);

      function left_clm_fix(){
          if (wdw.scrollTop() > topnav.offset().top) {
            var ft = footer.offset().top + footer.outerHeight() - wdw.height() + 50;
            if (wdw.scrollTop() > ft ){
              left_clm_c.css({"position":"absolute", "top":ft});
            } else {
              left_clm_c.css({"position":"fixed", "top":"0"});
            }
          } else {
            left_clm_c.css({"position":"absolute", "top":topnav.offset().top});
          }
      }
      function left_clm_s(){
        leftcolumn.css({"height":wdw.height() - header.height() - jQuery('#footer').outerHeight() + 3});
        left_clm_c.height("");
        if (left_clm_c.height() > wdw.height() - 60){
          left_clm_c.css({"overflow-y":"scroll", "height":wdw.height()-60});
        } else {
          left_clm_c.css({"overflow-y":"","height":""});
        }
      }
      // ------------------------------------------- Go to Bottom ----
      jQuery('#toggleall').next().hide();
      jQuery('#toggleall').hide();
      var to_bottom = jQuery('<div />').css({"position":"absolute", "top":contentBody.offset().top+17, "z-index":"99"});
      to_bottom.append(jQuery("[title='Go to Bottom']").parent()).insertBefore(contentBody);
      to_bottom.children().append(" Go to Bottom").css({"background-color":"#fff", "padding":"3px"});
      dsp_btn();
      wdw.scroll(dsp_btn);
      to_btm_s();
      wdw.resize(to_btm_s);

      function dsp_btn(){
        if ( wdw.scrollTop() > contentBody.offset().top) {
          to_bottom.css({"position":"fixed", "top":"12px"})
        } else {
          to_bottom.css({"position":"absolute", "top":contentBody.offset().top+17})
        }
      }
      function to_btm_s(){ to_bottom.css("left",wdw.width() - 160); }
      // ------------------------------------------- altsys メニューバー固定 ----
      var mymenu = jQuery("<div />");
      var menu = jQuery(".altsys_mymenu:first");
      if (menu[0]){
        var hr = contentBody.children('hr');
        mymenu.append(menu.first().clone());
        mymenu.append(hr.first().clone());
        var submenu = contentBody.children('.altsys_mymenusub');
        if (submenu[0]){
          mymenu.append(submenu.clone());
          mymenu.append(hr.eq(1).clone());
        }
        mymenu.css({"position":"fixed", "top":"0", "padding-top":"5px", "background-color":bg_color})
        mymenu.prependTo(contentBody);
        dsp_nav();
        dsp_nav_s();
        wdw.resize(dsp_nav_s);
        wdw.scroll(dsp_nav);
      }
      function dsp_nav(){
        if ( wdw.scrollTop() > contentBody.offset().top) {
          if (wdw.scrollTop() > footer.offset().top){
            mymenu.hide();
          } else {
            mymenu.show();
          }
        } else {
          mymenu.hide();
        }
      }
      function dsp_nav_s(){ mymenu.width(contentBody.width()); }
      // ------------------------------------------- diff from ~:横スクロールバー ----
      var diff2_f = jQuery('#diff2file');
      if (diff2_f[0]){
        diff2_f.css("overflow-x","scroll");
        d_f_s();
        wdw.resize(d_f_s);
      }
      var diff2_d = jQuery('#diff2default');
      if (diff2_d[0]){
        diff2_d.css("overflow-x","scroll");
        d_d_s();
        wdw.resize(d_d_s);
      }
      function d_f_s(){ diff2_f.width(wdw.width() - 230); }
      function d_d_s(){ diff2_d.width(wdw.width() - 230); }
      // ------------------------------------------- テンプレート名表示 ----
      var tpl_source = jQuery('#altsys_tpl_source');
      if (tpl_source[0] ) {
        tpl_source.before("&nbsp;&nbsp;&nbsp;"+tpl_source.parent().siblings('h3').text()+"<br />");
      }
      // ------------------------------------------- textarea 拡大(90%) ----
      var txt = jQuery('textarea');
      if (txt.width() > 400 || txt.attr("cols") >= 50){
        txt.css("width","90%");
      }
      // ------------------------------------------- Topへ戻る ボタン ----
      var contentBottom = jQuery('#contentBottom').removeClass("return_top")
      var to_top = jQuery('<div />').css({"position":"fixed", "border-color":"#57b", "z-index":"99"});
      to_top.addClass("return_top").append(contentBottom.children()).insertAfter(contentBody);
      to_top_s();
      wdw.resize(to_top_s);
      function to_top_s(){ to_top.css({"top":wdw.height()-65, "left":wdw.width()-200}); }
      // ------------------------------------------- 横スクロールバー抑止 ----
      contentBody.css("overflow-x","hidden");
    });
  </script>
投票数:0 平均点:0.00
前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2017/7/13 15:24
kamezou  1st Class 居住地: 2013~  投稿数: 49
しばらく離れていましたが、少しずつ再開したいと思います。

altsysのメニューバーの幅が設定できていないケースがあり、修正しました。(ブラウザの最大化の解除後など)
Go to Bottomは、右下にあったほうが使いやすく感じたので、移動しました。
  <script type="text/javascript">
    jQuery(function (){
      var wdw = jQuery(window);
      var footer = jQuery('#footer');
      var bg_color = "#eeffee";	    // ------------- 背景色の指定 ----
      var contentBody = jQuery('#contentBody').css("background-color",bg_color);
      jQuery('#centercolumn').css("background-color",bg_color);
      // ------------------------------------------- 左カラムを固定 ----
      var header = jQuery('#header');
      var topnav = jQuery('.topnav');
      var leftcolumn = jQuery('#leftcolumn').removeAttr("id").css("background-color",bg_color);
      var left_clm_c = jQuery("<div id='leftcolumn'></div>");
      left_clm_c.css({"position":"absolute", "top":topnav.offset().top, "padding":"0 0 0 10px"});
      left_clm_c.append(leftcolumn.children()).insertAfter(header);
      left_clm_c.find('.head,.head2').css("padding","5px 0");
      left_clm_c.find('.submenu').css("background-color","#fff");
      topnav.css("margin-left", left_clm_c.width()+10);
      leftcolumn.width(left_clm_c.width()+10);
      left_clm_s();
      left_clm_fix();
      wdw.scroll(left_clm_fix);
      wdw.resize(left_clm_s);

      function left_clm_fix(){
          if (wdw.scrollTop() > topnav.offset().top) {
            var ft = footer.offset().top + footer.outerHeight() - wdw.height() + 50;
            if (wdw.scrollTop() > ft ){
              left_clm_c.css({"position":"absolute", "top":ft});
            } else {
              left_clm_c.css({"position":"fixed", "top":"0"});
            }
          } else {
            left_clm_c.css({"position":"absolute", "top":topnav.offset().top});
          }
      }
      function left_clm_s(){
        leftcolumn.css({"height":wdw.height() - header.height() - jQuery('#footer').outerHeight() + 3});
        left_clm_c.height("");
        if (left_clm_c.height() > wdw.height() - 60){
          left_clm_c.css({"overflow-y":"scroll", "height":wdw.height()-60});
        } else {
          left_clm_c.css({"overflow-y":"","height":""});
        }
      }
      // ------------------------------------------- Go to Bottom ----
      jQuery('#toggleall').next().hide();
      jQuery('#toggleall').hide();
      var to_bottom = jQuery('<div />').css({"position":"fixed", "z-index":"99"});
      to_bottom.append(jQuery("[title='Go to Bottom']").parent()).insertBefore(contentBody);
      to_bottom.children().append(" Go to Bottom").css({"background-color":"#fff", "padding":"3px"});
      wdw.resize(to_btm_s);
      function to_btm_s(){ to_bottom.css({"top":wdw.height()-75, "left":wdw.width()-135}); }
      // ------------------------------------------- altsys メニューバー固定 ----
      var mymenu = jQuery("<div />");
      var menu = jQuery(".altsys_mymenu:first");
      if (menu[0]){
        var hr = contentBody.children('hr');
        mymenu.append(menu.first().clone());
        mymenu.append(hr.first().clone());
        var submenu = contentBody.children('.altsys_mymenusub');
        if (submenu[0]){
          mymenu.append(submenu.clone());
          mymenu.append(hr.eq(1).clone());
        }
        mymenu.css({"position":"fixed", "top":"0", "padding-top":"5px", "background-color":bg_color})
        mymenu.prependTo(contentBody);
        dsp_nav();
        wdw.resize(dsp_nav_s);
        wdw.scroll(dsp_nav);
      }

      function dsp_nav(){
        if ( wdw.scrollTop() > contentBody.offset().top) {
          if (wdw.scrollTop() > footer.offset().top){
            mymenu.hide();
          } else {
            mymenu.show();
          }
        } else {
          mymenu.hide();
        }
      }
      function dsp_nav_s(){ mymenu.width(contentBody.width()); }
      // ------------------------------------------- diff from ~:横スクロールバー ----
      var diff2_f = jQuery('#diff2file');
      if (diff2_f[0]){
        diff2_f.css("overflow-x","scroll");
        d_f_s();
        wdw.resize(d_f_s);
      }
      var diff2_d = jQuery('#diff2default');
      if (diff2_d[0]){
        diff2_d.css("overflow-x","scroll");
        d_d_s();
        wdw.resize(d_d_s);
      }

      function d_f_s(){ diff2_f.width(wdw.width() - 230); }
      function d_d_s(){ diff2_d.width(wdw.width() - 230); }
      // ------------------------------------------- テンプレート名表示 ----
      var tpl_source = jQuery('#altsys_tpl_source');
      if (tpl_source[0] ) {
        tpl_source.before("&nbsp;&nbsp;&nbsp;"+tpl_source.parent().siblings('h3').text()+"<br />");
      }
      // ------------------------------------------- textarea 拡大(90%) ----
      var txt = jQuery('textarea');
      if (txt.width() > 400 || txt.attr("cols") >= 50){
        txt.css("width","90%");
      }
      // ------------------------------------------- Topへ戻る ボタン ----
      var contentBottom = jQuery('#contentBottom').removeClass("return_top")
      var to_top = jQuery('<div />').css({"position":"fixed", "border-color":"#57b", "z-index":"99"});
      to_top.addClass("return_top").append(contentBottom.children()).insertAfter(contentBody);
      to_top_s();
      wdw.resize(to_top_s);

      function to_top_s(){ to_top.css({"top":wdw.height()-65, "left":wdw.width()-200}); }
      // ------------------------------------------- 横スクロールバー抑止 ----
      contentBody.css("overflow-x","hidden");
      // ------------------------------------------- altsys メニューバーの幅設定 ----
      dsp_nav_s();
      // ------------------------------------------- Go to Bottom 表示 ----
      to_btm_s();
    });
  </script>
投票数:1 平均点:10.00
  条件検索へ

Back to Page Top
MainMenu
Manuals
Search
XOOPS Official & Dev.
XOOPS Communities