Fossil

Check-in [5840fdd7]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:The new skin editing is working, minimally. Still needs lots of work, though.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | skin-setup-refactor
Files: files | file ages | folders
SHA3-256:5840fdd73299f9da71f8c9b18720ca5b3a58bd52574e08ae5dd51b5830d8d0ac
User & Date: drh 2017-12-02 21:24:59
Context
2017-12-02
21:48
Improvements to the skin file editing. check-in: 2179ffd4 user: drh tags: skin-setup-refactor
21:24
The new skin editing is working, minimally. Still needs lots of work, though. check-in: 5840fdd7 user: drh tags: skin-setup-refactor
16:22
The URL parser now understands the /draftN/ prefix. Draft skins can now be initialized from built-ins. Another incremental check-in. check-in: 0cba37ec user: drh tags: skin-setup-refactor
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to src/skins.c.

51
52
53
54
55
56
57





58
59
60
61
62
63
64
...
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
...
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
...
599
600
601
602
603
604
605
606
607
608

609
610
611
612
613
614
615
...
617
618
619
620
621
622
623


624
625
626
627






628





629
630
631





632
633


634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650

651
652
653
654
655
656
657
658
659
...
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711

712
713
714
715
716
717











































718
719
720
721
722
723
724
725
726
727
728

729
730
731
732
733
734
735
...
739
740
741
742
743
744
745

746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762








763
764
765
766
767
768
769
...
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794

























795
796
797
798
799
800
801
802
803
804
805
806

807
808
809
810
811
812
813
814
815
816
817

818
819
820
821
















822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838







839
840

841
842
843
844



845
846









847
848
849



850
851
  { "Shadow boxes & Rounded Corners",    "rounded1",          0 },
  { "Eagle",                             "eagle",             0 },
  { "Black & White, Menu on Left",       "black_and_white",   0 },
  { "Plain Gray, No Logo",               "plain_gray",        0 },
  { "Khaki, No Logo",                    "khaki",             0 },
};






/*
** Alternative skins can be specified in the CGI script or by options
** on the "http", "ui", and "server" commands.  The alternative skin
** name must be one of the aBuiltinSkin[].zLabel names.  If there is
** a match, that alternative is used.
**
** The following static variable holds the name of the alternative skin,
................................................................................
** by zName.
**
** Memory to hold the returned string is obtained from malloc.
*/
static char *getSkin(const char *zName){
  const char *z;
  char *zLabel;
  static const char *azType[] = { "css", "header", "footer", "details" };
  int i;
  Blob val;
  blob_zero(&val);
  for(i=0; i<count(azType); i++){
    if( zName ){
      zLabel = mprintf("skins/%s/%s.txt", zName, azType[i]);
      z = builtin_text(zLabel);
      fossil_free(zLabel);
    }else{
      z = db_get(azType[i], 0);
      if( z==0 ){
        zLabel = mprintf("skins/default/%s.txt", azType[i]);
        z = builtin_text(zLabel);
        fossil_free(zLabel);
      }
    }
    blob_appendf(&val,
       "REPLACE INTO config(name,value,mtime) VALUES(%Q,%Q,now());\n",
       azType[i], z
    );
  }
  return blob_str(&val);
}

/*
** Respond to a Rename button press.  Return TRUE if a dialog was painted.
................................................................................
  return 0;
}

/*
** WEBPAGE: setup_skin_old
**
** Show a list of available skins with buttons for selecting which
** skin to use.  Requires Admin privilege.
*/
void setup_skin_old(void){
  const char *z;
  char *zName;
  char *zErr = 0;
  const char *zCurrent = 0;  /* Current skin */
  int i;                     /* Loop counter */
................................................................................
}


/*
** WEBPAGE: setup_skinedit
**
** Edit aspects of a skin determined by the w= query parameter.
** Requires Admin privileges.
**
**    w=N     -- 0=CSS, 1=footer, 2=header, 3=details

*/
void setup_skinedit(void){
  static const struct sSkinAddr {
    const char *zFile;
    const char *zTitle;
    const char *zSubmenu;
  } aSkinAttr[] = {
................................................................................
    /* 1 */ { "footer",  "Page Footer",     "Footer",  },
    /* 2 */ { "header",  "Page Header",     "Header",  },
    /* 3 */ { "details", "Display Details", "Details", },
  };
  const char *zBasis;
  const char *zContent;
  char *zDflt;


  int ii;
  int j;

  login_check_credentials();






  if( !g.perm.Setup ){





    login_needed(0);
    return;
  }





  ii = atoi(PD("w","0"));
  if( ii<0 || ii>count(aSkinAttr) ) ii = 0;


  zBasis = PD("basis","default");
  zDflt = mprintf("skins/%s/%s.txt", zBasis, aSkinAttr[ii].zFile);
  db_begin_transaction();
  if( P("revert")!=0 ){
    db_multi_exec("DELETE FROM config WHERE name=%Q", aSkinAttr[ii].zFile);
    cgi_replace_parameter(aSkinAttr[ii].zFile, builtin_text(zDflt));
  }
  style_header("%s", aSkinAttr[ii].zTitle);
  for(j=0; j<count(aSkinAttr); j++){
    if( j==ii ) continue;
    style_submenu_element(aSkinAttr[j].zSubmenu,
          "%R/setup_skinedit?w=%d&basis=%h",j,zBasis);
  }
  style_submenu_element("Skins", "%R/setup_skin_old");
  @ <form action="%s(g.zTop)/setup_skinedit" method="post"><div>
  login_insert_csrf_secret();
  @ <input type='hidden' name='w' value='%d(ii)'>

  @ <h2>Edit %s(aSkinAttr[ii].zTitle):</h2>
  zContent  = textarea_attribute("", 10, 80, aSkinAttr[ii].zFile,
                        aSkinAttr[ii].zFile, builtin_text(zDflt), 0);
  @ <br />
  @ <input type="submit" name="submit" value="Apply Changes" />
  @ <hr />
  @ Baseline: <select size='1' name='basis'>
  for(j=0; j<count(aBuiltinSkin); j++){
    cgi_printf("<option value='%h'%s>%h</option>\n",
................................................................................

/*
** Try to initialize draft skin iSkin to the built-in or preexisting
** skin named by zTemplate.
*/
static void skin_initialize_draft(int iSkin, const char *zTemplate){
  int i;
  const char *azWhat[] = { "css", "header", "footer", "detail" };
  if( zTemplate==0 ) return;
  if( strcmp(zTemplate, "current")==0 ){
    for(i=0; i<count(azWhat); i++){
      db_unset_mprintf("draft%d-%s", 0, iSkin, azWhat[i]);
    }
  }else{
    for(i=0; i<count(aBuiltinSkin); i++){
      if( strcmp(zTemplate, aBuiltinSkin[i].zLabel)==0 ){
        for(i=0; i<count(azWhat); i++){
          char *zKey = mprintf("skins/%s/%s.txt", zTemplate, azWhat[i]);
          db_set_mprintf("draft%d-%s", builtin_text(zKey), 0, iSkin, azWhat[i]);

        }
        break;
      }
    }
  }
}












































/*
** WEBPAGE: setup_skin
**
** Generate a page showing the steps needed to customize a skin.
*/
void setup_skin(void){
  int i;          /* Loop counter */
  int iSkin;      /* Which draft skin is being edited */
  int isAdmin;    /* True for an administrator */
  int isEditor;   /* Others authorized to make edits */

  static const char *azTestPages[] = {
     "home",
     "timeline",
     "dir?ci=tip",
     "dir?ci=tip&type=tree",
     "brlist",
     "info/trunk",
................................................................................
  iSkin = atoi(PD("sk","1"));
  if( iSkin<1 || iSkin>9 ) iSkin = 1;

  /* Figure out if the current user is allowed to make administrative
  ** changes and/or edits
  */
  login_check_credentials();

  if( g.perm.Admin ){
    isAdmin = isEditor = 1;
  }else{
    char *zAllowedEditors;
    Glob *pAllowedEditors;
    isAdmin = isEditor = 0;
    zAllowedEditors = db_get_mprintf("draft%d-users", 0, iSkin);
    if( zAllowedEditors ){
      pAllowedEditors = glob_create(zAllowedEditors);
      isEditor = glob_match(pAllowedEditors, zAllowedEditors);
      glob_free(pAllowedEditors);
    }
  }

  /* Initialize the skin, if requested and authorized. */
  if( P("init3")!=0 && isEditor ){
    skin_initialize_draft(iSkin, P("initskin"));








  }

  style_header("Customize Skin");

  @ <p>Customize the look of this Fossil repository by making changes
  @ to the CSS, Header, Footer, and Detail Settings in one of nine "draft"
  @ configurations.  Then, after verifying that all is working correctly,
................................................................................
  @
  @ <p>The main skin of Fossil cannot be edited directly.  Instead,
  @ edits are made to one of nine draft skins.  A draft skin can then
  @ be published to become the default skin.
  @ Nine separate drafts are available to facilitate A/B testing.</p>
  @
  @ <form method='POST' action='%R/setup_skin#step2' id='f01'>
  @ <p>Skin to edit:
  @ <select size='1' name='sk' onchange='gebi("f01").submit()'>
  for(i=1; i<=9; i++){
    if( i==iSkin ){
      @ <option value='%d(i)' selected>draft%d(i)</option>
    }else{
      @ <option value='%d(i)'>draft%d(i)</option>
    }
  }
  @ </select>
  @ </p>
  @
  @ <a name='step2'></a>
  @ <h1>Step 2: Authenticate

























  @
  @ <a name='step3'></a>
  @ <h1>Step 3: Initialize The Draft</h1>
  @
  if( !isEditor ){
    @ <p>You are not allowed to initialize draft%(iSkin).  Contact
    @ the administrator for this repository for more information.
  }else{
    @ <p>Initialize the draft%d(iSkin) skin to one of the built-in skins
    @ or a preexisting skin, to use as a baseline.</p>
    @
    @ <p><form method='POST' action='%R/setup_skin#stop4' id='f03'>

    @ <input type='hidden' name='sk' value='%d(iSkin)'>
    @ Initialize <b>draft%d(iSkin)</b> to
    @ <select size='1' name='initskin'>
    @ <option value='current'>Currently In Use</option>
    for(i=0; i<count(aBuiltinSkin); i++){
      @ <option value='%s(aBuiltinSkin[i].zLabel)'>\
      @ %h(aBuiltinSkin[i].zDesc) (built-in)</option>
    }
    @ </select>
    @ <input type='submit' name='init3' value='Go'>
    @ </p>

  }
  @
  @ <a name='step4'></a>
  @ <h1>Step 4: Make Edits</h1>
















  @
  @ <a name='step5'></a>
  @ <h1>Step 5: Verify The Draft Skin</h1>
  @
  @ <p>To test this draft skin, insert text "/draft%d(iSkin)/" just before the
  @ operation name in the URL.  Here are a few links to try:
  @ <ul>
  for(i=0; i<count(azTestPages); i++){
    @ <li><a href='%s(g.zBaseURL)/draft%d(iSkin)/%s(azTestPages[i])'>\
    @ %s(g.zBaseURL)/draft%d(iSkin)/%s(azTestPages[i])</a>
  }
  @ </ul>
  @
  @ <p><b>Important:</b> After CSS changes, you will probably need to
  @ press the "Reload" button on your browser for those changes
  @ to take effect.</p>
  @







  @ <a name='step6'></a>
  @ <h1>Step 6: Publish The Draft</h1>

  if( !g.perm.Setup ){
    @ <p>Only administrators are allowed to publish draft skins.  Contact
    @ an administrator to get this "draft%d(iSkin)" skin published.</p>
  }else{



    
  }









  @
  @ <a name='step7'></a>
  @ <h1>Step 7: Cleanup</h1>



  style_footer();
}







>
>
>
>
>







 







<



|

|



|

|






|







 







|







 







|

|
>







 







>
>




>
>
>
>
>
>

>
>
>
>
>
|
|
|
>
>
>
>
>


>
>













<



>

|







 







<


|
|




|
|
|
>






>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>









|

>







 







>
|
|

<

|
<
|









>
>
>
>
>
>
>
>







 







|












|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>











|
>

|









>




>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>








|
|



|
<
|

>
>
>
>
>
>
>

|
>




>
>
>
|
<
>
>
>
>
>
>
>
>
>
|
<
<
>
>
>


51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
...
334
335
336
337
338
339
340

341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
...
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
...
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
...
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671

672
673
674
675
676
677
678
679
680
681
682
683
684
...
718
719
720
721
722
723
724

725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
...
808
809
810
811
812
813
814
815
816
817
818

819
820

821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
...
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954

955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974

975
976
977
978
979
980
981
982
983
984


985
986
987
988
989
  { "Shadow boxes & Rounded Corners",    "rounded1",          0 },
  { "Eagle",                             "eagle",             0 },
  { "Black & White, Menu on Left",       "black_and_white",   0 },
  { "Plain Gray, No Logo",               "plain_gray",        0 },
  { "Khaki, No Logo",                    "khaki",             0 },
};

/*
** A skin consists of four "files" named here:
*/
static const char *azSkinFile[] = { "css", "header", "footer", "details" };

/*
** Alternative skins can be specified in the CGI script or by options
** on the "http", "ui", and "server" commands.  The alternative skin
** name must be one of the aBuiltinSkin[].zLabel names.  If there is
** a match, that alternative is used.
**
** The following static variable holds the name of the alternative skin,
................................................................................
** by zName.
**
** Memory to hold the returned string is obtained from malloc.
*/
static char *getSkin(const char *zName){
  const char *z;
  char *zLabel;

  int i;
  Blob val;
  blob_zero(&val);
  for(i=0; i<count(azSkinFile); i++){
    if( zName ){
      zLabel = mprintf("skins/%s/%s.txt", zName, azSkinFile[i]);
      z = builtin_text(zLabel);
      fossil_free(zLabel);
    }else{
      z = db_get(azSkinFile[i], 0);
      if( z==0 ){
        zLabel = mprintf("skins/default/%s.txt", azSkinFile[i]);
        z = builtin_text(zLabel);
        fossil_free(zLabel);
      }
    }
    blob_appendf(&val,
       "REPLACE INTO config(name,value,mtime) VALUES(%Q,%Q,now());\n",
       azSkinFile[i], z
    );
  }
  return blob_str(&val);
}

/*
** Respond to a Rename button press.  Return TRUE if a dialog was painted.
................................................................................
  return 0;
}

/*
** WEBPAGE: setup_skin_old
**
** Show a list of available skins with buttons for selecting which
** skin to use.  Requires Setup privilege.
*/
void setup_skin_old(void){
  const char *z;
  char *zName;
  char *zErr = 0;
  const char *zCurrent = 0;  /* Current skin */
  int i;                     /* Loop counter */
................................................................................
}


/*
** WEBPAGE: setup_skinedit
**
** Edit aspects of a skin determined by the w= query parameter.
** Requires Setup privileges.
**
**    w=NUM     -- 0=CSS, 1=footer, 2=header, 3=details
**    sk=NUM    -- the draft skin number
*/
void setup_skinedit(void){
  static const struct sSkinAddr {
    const char *zFile;
    const char *zTitle;
    const char *zSubmenu;
  } aSkinAttr[] = {
................................................................................
    /* 1 */ { "footer",  "Page Footer",     "Footer",  },
    /* 2 */ { "header",  "Page Header",     "Header",  },
    /* 3 */ { "details", "Display Details", "Details", },
  };
  const char *zBasis;
  const char *zContent;
  char *zDflt;
  char *zKey;
  int iSkin;
  int ii;
  int j;

  login_check_credentials();

  /* Figure out which skin we are editing */
  iSkin = atoi(PD("sk","1"));
  if( iSkin<1 || iSkin>9 ) iSkin = 1;

  /* Check that the user is authorized to edit this skin. */
  if( !g.perm.Setup ){
    char *zAllowedEditors = db_get_mprintf("draft%d-users", "", iSkin);
    Glob *pAllowedEditors;
    if( zAllowedEditors[0] ){
      pAllowedEditors = glob_create(zAllowedEditors);
      if( !glob_match(pAllowedEditors, zAllowedEditors) ){
        login_needed(0);
        return;
      }
      glob_free(pAllowedEditors);
    }
  }

  /* figure out which file is to be edited */
  ii = atoi(PD("w","0"));
  if( ii<0 || ii>count(aSkinAttr) ) ii = 0;
  zKey = mprintf("draft%d-%s", iSkin, aSkinAttr[ii].zFile);

  zBasis = PD("basis","default");
  zDflt = mprintf("skins/%s/%s.txt", zBasis, aSkinAttr[ii].zFile);
  db_begin_transaction();
  if( P("revert")!=0 ){
    db_multi_exec("DELETE FROM config WHERE name=%Q", aSkinAttr[ii].zFile);
    cgi_replace_parameter(aSkinAttr[ii].zFile, builtin_text(zDflt));
  }
  style_header("%s", aSkinAttr[ii].zTitle);
  for(j=0; j<count(aSkinAttr); j++){
    if( j==ii ) continue;
    style_submenu_element(aSkinAttr[j].zSubmenu,
          "%R/setup_skinedit?w=%d&basis=%h",j,zBasis);
  }

  @ <form action="%s(g.zTop)/setup_skinedit" method="post"><div>
  login_insert_csrf_secret();
  @ <input type='hidden' name='w' value='%d(ii)'>
  @ <input type='hidden' name='sk' value='%d(iSkin)'>
  @ <h2>Edit %s(aSkinAttr[ii].zTitle):</h2>
  zContent = textarea_attribute("", 10, 80, zKey,
                        aSkinAttr[ii].zFile, builtin_text(zDflt), 0);
  @ <br />
  @ <input type="submit" name="submit" value="Apply Changes" />
  @ <hr />
  @ Baseline: <select size='1' name='basis'>
  for(j=0; j<count(aBuiltinSkin); j++){
    cgi_printf("<option value='%h'%s>%h</option>\n",
................................................................................

/*
** Try to initialize draft skin iSkin to the built-in or preexisting
** skin named by zTemplate.
*/
static void skin_initialize_draft(int iSkin, const char *zTemplate){
  int i;

  if( zTemplate==0 ) return;
  if( strcmp(zTemplate, "current")==0 ){
    for(i=0; i<count(azSkinFile); i++){
      db_unset_mprintf("draft%d-%s", 0, iSkin, azSkinFile[i]);
    }
  }else{
    for(i=0; i<count(aBuiltinSkin); i++){
      if( strcmp(zTemplate, aBuiltinSkin[i].zLabel)==0 ){
        for(i=0; i<count(azSkinFile); i++){
          char *zKey = mprintf("skins/%s/%s.txt", zTemplate, azSkinFile[i]);
          db_set_mprintf("draft%d-%s", builtin_text(zKey), 0,
                         iSkin, azSkinFile[i]);
        }
        break;
      }
    }
  }
}

/*
** Publish the draft skin iSkin as the new default.
*/
static void skin_publish(int iSkin){
  char *zCurrent;    /* SQL description of the current skin */
  char *zBuiltin;    /* SQL description of a built-in skin */
  int i;
  int seen = 0;      /* True if no need to make a backup */

  /* Check to see if the current skin is already saved.  If it is, there
  ** is no need to create a backup */
  zCurrent = getSkin(0);
  for(i=0; i<count(aBuiltinSkin); i++){
    zBuiltin = getSkin(aBuiltinSkin[i].zLabel);
    if( fossil_strcmp(aBuiltinSkin[i].zSQL, zCurrent)==0 ){
      seen = 1;
      break;
    }
  }
  if( !seen ){
    seen = db_exists("SELECT 1 FROM config WHERE name GLOB 'skin:*'"
                       " AND value=%Q", zCurrent);
  }
  if( !seen ){
    db_multi_exec(
      "INSERT INTO config(name,value,mtime) VALUES("
      "  strftime('skin:Backup On %%Y-%%m-%%d %%H:%%M:%%S'),"
      "  %Q,now())", zCurrent
    );
  }

  /* Publish draft iSkin */
  for(i=0; i<count(azSkinFile); i++){
    db_multi_exec(
      "UPDATE config"
      " SET value=(SELECT value FROM config AS x"
                  " WHERE x.name = printf('draft%d-%%s',config.name)),"
      "     mtime=now()"
      " WHERE name IN ('css','header','footer','details')", iSkin
    );
  }
}

/*
** WEBPAGE: setup_skin
**
** Generate a page showing the steps needed to customize a skin.
*/
void setup_skin(void){
  int i;          /* Loop counter */
  int iSkin;      /* Which draft skin is being edited */
  int isSetup;    /* True for an administrator */
  int isEditor;   /* Others authorized to make edits */
  char *zAllowedEditors;   /* Who may edit the draft skin */
  static const char *azTestPages[] = {
     "home",
     "timeline",
     "dir?ci=tip",
     "dir?ci=tip&type=tree",
     "brlist",
     "info/trunk",
................................................................................
  iSkin = atoi(PD("sk","1"));
  if( iSkin<1 || iSkin>9 ) iSkin = 1;

  /* Figure out if the current user is allowed to make administrative
  ** changes and/or edits
  */
  login_check_credentials();
  zAllowedEditors = db_get_mprintf("draft%d-users", "", iSkin);
  if( g.perm.Setup ){
    isSetup = isEditor = 1;
  }else{

    Glob *pAllowedEditors;
    isSetup = isEditor = 0;

    if( zAllowedEditors[0] ){
      pAllowedEditors = glob_create(zAllowedEditors);
      isEditor = glob_match(pAllowedEditors, zAllowedEditors);
      glob_free(pAllowedEditors);
    }
  }

  /* Initialize the skin, if requested and authorized. */
  if( P("init3")!=0 && isEditor ){
    skin_initialize_draft(iSkin, P("initskin"));
  }
  if( P("e3")!=0 && isSetup ){
    db_set_mprintf("draft%d-users", PD("editors",""), 0, iSkin);
  }

  /* Publish the draft skin */
  if( P("pub7")!=0 && PB("pub7ck1") && PB("pub7ck2") ){
    skin_publish(iSkin);
  }

  style_header("Customize Skin");

  @ <p>Customize the look of this Fossil repository by making changes
  @ to the CSS, Header, Footer, and Detail Settings in one of nine "draft"
  @ configurations.  Then, after verifying that all is working correctly,
................................................................................
  @
  @ <p>The main skin of Fossil cannot be edited directly.  Instead,
  @ edits are made to one of nine draft skins.  A draft skin can then
  @ be published to become the default skin.
  @ Nine separate drafts are available to facilitate A/B testing.</p>
  @
  @ <form method='POST' action='%R/setup_skin#step2' id='f01'>
  @ <p class='skinInput'>Draft skin to edit:
  @ <select size='1' name='sk' onchange='gebi("f01").submit()'>
  for(i=1; i<=9; i++){
    if( i==iSkin ){
      @ <option value='%d(i)' selected>draft%d(i)</option>
    }else{
      @ <option value='%d(i)'>draft%d(i)</option>
    }
  }
  @ </select>
  @ </p>
  @
  @ <a name='step2'></a>
  @ <h1>Step 2: Authenticate</h1>
  @
  if( isSetup ){
    @ <p>As an administrator, you can make any edits you like to this or
    @ any other skin.  You can also authorized other users to edit this
    @ skin.  Any user whose login name matches the comma-separate list
    @ of GLOB expressions below is given special permission to edit
    @ the draft%d(iSkin) skin:
    @
    @ <form method='POST' action='%R/setup_skin#step2' id='f02'>
    @ <p class='skinInput'>
    @ <input type='hidden' name='sk' value='%d(iSkin)'>
    @ Authorized editors for skin draft%d(iSkin):
    @ <input type='text' name='editors' value='%h(zAllowedEditors)'\
    @  width='40'>
    @ <input type='submit' name='submit2' value='Change'>
    @ </p>
    @ </form>
  }else if( isEditor ){
    @ <p>You are authorized to make changes to the draft%d(iSkin) skin.
    @ Continue to the <a href='#step3'>next step</a>.</p>
  }else{
    @ <p>You are not authorized to make changes to the draft%d(iSkin)
    @ skin.  Contact the administrator of this Fossil repository for
    @ further information.</p>
  }
  @
  @ <a name='step3'></a>
  @ <h1>Step 3: Initialize The Draft</h1>
  @
  if( !isEditor ){
    @ <p>You are not allowed to initialize draft%(iSkin).  Contact
    @ the administrator for this repository for more information.
  }else{
    @ <p>Initialize the draft%d(iSkin) skin to one of the built-in skins
    @ or a preexisting skin, to use as a baseline.</p>
    @
    @ <form method='POST' action='%R/setup_skin#step4' id='f03'>
    @ <p class='skinInput'>
    @ <input type='hidden' name='sk' value='%d(iSkin)'>
    @ Initialize skin <b>draft%d(iSkin)</b> using
    @ <select size='1' name='initskin'>
    @ <option value='current'>Currently In Use</option>
    for(i=0; i<count(aBuiltinSkin); i++){
      @ <option value='%s(aBuiltinSkin[i].zLabel)'>\
      @ %h(aBuiltinSkin[i].zDesc) (built-in)</option>
    }
    @ </select>
    @ <input type='submit' name='init3' value='Go'>
    @ </p>
    @ </form>
  }
  @
  @ <a name='step4'></a>
  @ <h1>Step 4: Make Edits</h1>
  @
  if( !isEditor ){
    @ <p>You are not authorized to make edits to the draft%d(iSkin) skin.
    @ Contact the administrator of this Fossil repository for help.</p>
  }else{
    @ <p>Edit the components of the draft%d(iSkin) skin:
    @ <ul>
    @ <li><a href='%R/setup_skinedit?w=0&sk=%d(iSkin)' target='_blank'>CSS</a>
    @ <li><a href='%R/setup_skinedit?w=1&sk=%d(iSkin)' target='_blank'>\
    @ Header</a>
    @ <li><a href='%R/setup_skinedit?w=2&sk=%d(iSkin)' target='_blank'>\
    @ Footer</a>
    @ <li><a href='%R/setup_skinedit?w=3&sk=%d(iSkin)' target='_blank'>\
    @ Details</a>
    @ </ul>
  }
  @
  @ <a name='step5'></a>
  @ <h1>Step 5: Verify The Draft Skin</h1>
  @
  @ <p>To test this draft skin, insert text "/draft%d(iSkin)/" just before the
  @ operation name in the URL.  Here are a few links to try:
  @ <ul>
  for(i=0; i<count(azTestPages); i++){
    @ <li><a href='%s(g.zBaseURL)/draft%d(iSkin)/%s(azTestPages[i])' \
    @ target='_blank'>%s(g.zBaseURL)/draft%d(iSkin)/%s(azTestPages[i])</a>
  }
  @ </ul>
  @
  @ <p>You will probably need to press Reload on your browser before any

  @ CSS changes will take effect.</p>
  @
  @ <a hame='step6'></a>
  @ <h1>Step 6: Interate</h1>
  @
  @ <p>Repeat <a href='#step4'>step 4</a> and
  @ <a href='#step5'>step 5</a> as many times as necessary to create
  @ a production-ready skin.
  @
  @ <a name='step6'></a>
  @ <h1>Step 7: Publish The Draft</h1>
  @
  if( !g.perm.Setup ){
    @ <p>Only administrators are allowed to publish draft skins.  Contact
    @ an administrator to get this "draft%d(iSkin)" skin published.</p>
  }else{
    @ <p>When the draft%d(iSkin) skin is ready for production use,
    @ make it the default scan by clicking the acknowledgements and
    @ pressing the button below:</p>
    @

    @ <form method='POST' action='%R/setup_skin#step7'>
    @ <p class='skinInput'>
    @ <input type='hidden' name='sk' value='%d(iSkin)'>
    @ <input type='checkbox' name='pub7ck1' value='yes'>\
    @ Skin draft%d(iSkin) has been testing and found ready for production.<br>
    @ <input type='checkbox' name='pub7ck2' value='yes'>\
    @ The current skin should be overwritten with draft%d(iSkin).<br>
    @ <input type='submit' name='pub7' value='Publish Draft%d(iSkin)'>
    @ </p></form>
    @


    @ <p>You will probably need to press Reload on your browser after
    @ publishing the new skin.</p>
  }
  style_footer();
}