Fixed 2 bugs in Fruity theme - option color and dropshadow placement

[flar]

I've been using the fruity theme as it fits in fairly well with the rest of my web site.  Unfortunately I ran into 2 bugs in the theme, one problematic, and the other minor.

The first bug is that the color used for the radio button options in forms matches the background color behind it on the admin tools screen.  The result is that you see the radio buttons, but no text for the options.  The color chosen (green) works OK on the backgrounds used on the other screens with radio buttons, but the admin tools section has some options appearing on the same green background.  It would be nice if the util.php file used a different style for these options since they appear in a different context than the other options used elsewhere, but I wanted to isolate my changes to the theme so I chose the following modification (in "diff -u" format):

Code Select Expand


--- ../fruity.orig/style.css       Sat Apr 22 00:22:56 2006
+++ ./style.css Sat Apr 22 01:00:38 2006
@@ -22,6 +22,7 @@
/* #000000 = RBG   0,  0,  0 = (black)         */
/* #FFA600 = RGB 255,166,  0 = (orange)        */
/* #6BBE10 = RGB 107,190, 16 = (green)         */
+/* #1B2D04 = RGB  27, 45,  4 = (dark green)    */
/* #FFFF00 = RGB 255,255,  0 = (yellow)        */
/* #D1D7DC = RGB 209,215,220 = (light grey)    */
/* #F7F37B = RGB 247,243,123 = (light yellow)  */
@@ -589,7 +590,7 @@
}

.clickable_option {
-        color: #6BBE10;
+        color: #1B2D04;
         font-weight: bold;
}



The other problem was that the dropshadow of the border was not lining up on all screens.  Some of the screens seemed to allow the bottom left corner of the border decorations to abbreviate the curvy border images.  The following changes to the template file (again in diff -u format) fixed the problem:

Code Select Expand


--- ../fruity.orig/template.html   Sat Apr 22 00:22:56 2006
+++ ./template.html     Sat Apr 22 01:01:14 2006
@@ -78,34 +78,20 @@
       <td id="m41">
         <table border="0" cellspacing="0" cellpadding="0" width="100%">
           <tr>
-            <td style="background-color:#6BBE10">&nbsp;
-            </td>
+            <td style="background-color:#6BBE10">&nbsp;</td>
             <td style="background-image:url(themes/fruity/images/lb_left.gif);background-repeat:no-repeat" width="126">
-              <img src="themes/fruity/images/blind.gif" width="1" height="55" border="0" alt="" />&nbsp;
-            </td>
+              <img src="themes/fruity/images/blind.gif" width="126" height="59" border="0" alt="" /></td>
           </tr>
-        </table>
-      </td>
-      <td id="m42" style="background-image:url(themes/fruity/images/lb_right.gif);background-repeat:no-repeat">
-      </td>
-      <td id="m43">
-      </td>
-    </tr>
-    <tr>
-      <td id="m51">
-        <table border="0" cellspacing="0" cellpadding="0" width="100%">
           <tr>
-            <td style="background-image:url(themes/fruity/images/left_bottom_left.gif);background-repeat:repeat-x">&nbsp;
-            </td>
+            <td style="background-image:url(themes/fruity/images/left_bottom_left.gif);background-repeat:repeat-x">&nbsp;</td>
             <td style="background-image:url(themes/fruity/images/lb_bottom.gif);background-repeat:no-repeat" width="126">
-              <img src="themes/fruity/images/blind.gif" width="1" height="6" border="0" alt="" />&nbsp;
-            </td>
+              <img src="themes/fruity/images/blind.gif" width="126" height="6" border="0" alt="" /></td>
           </tr>
         </table>
       </td>
-      <td id="m52">
+      <td id="m42" style="background-image:url(themes/fruity/images/lb_right.gif);background-repeat:no-repeat">
       </td>
-      <td id="m53">
+      <td id="m43">
       </td>
     </tr>
   </table>


Hope that helps others.  Let me know if I can express these modifications in a better format...

[flar]

Here is the first fix in the style that is used in other fixes found on this forum:

In themes/fruity/style.css, find (near line 590):

Code Select Expand


.clickable_option {
        color: #6BBE10;
        font-weight: bold;
}

and replace it with:

Code Select Expand


.clickable_option {
        color: #1B2D04;
        font-weight: bold;
}

(note that only the "color:" line changed)

You may or may not want to also add the following line near the top of the file in the "Colors used" section (near line 25):

Code Select Expand


/* #1B2D04 = RGB  27, 45,  4 = (dark green)    */


[flar]

Here is the second fix also in the format used elsewhere on this forum:

Find these lines near line 78 in themes/fruity/template.html:

Code Select Expand


      <td id="m41">
        <table border="0" cellspacing="0" cellpadding="0" width="100%">
          <tr>
            <td style="background-color:#6BBE10">&nbsp;
            </td>
            <td style="background-image:url(themes/fruity/images/lb_left.gif);background-repeat:no-repeat" width="126">
              <img src="themes/fruity/images/blind.gif" width="1" height="55" border="0" alt="" />&nbsp;
            </td>
          </tr>
        </table>
      </td>
      <td id="m42" style="background-image:url(themes/fruity/images/lb_right.gif);background-repeat:no-repeat">
      </td>
      <td id="m43">
      </td>
    </tr>
    <tr>
      <td id="m51">
        <table border="0" cellspacing="0" cellpadding="0" width="100%">
          <tr>
            <td style="background-image:url(themes/fruity/images/left_bottom_left.gif);background-repeat:repeat-x">&nbsp;
            </td>
            <td style="background-image:url(themes/fruity/images/lb_bottom.gif);background-repeat:no-repeat" width="126">
              <img src="themes/fruity/images/blind.gif" width="1" height="6" border="0" alt="" />&nbsp;
            </td>
          </tr>
        </table>
      </td>
      <td id="m52">
      </td>
      <td id="m53">
      </td>


and replace them with:

Code Select Expand


      <td id="m41">
        <table border="0" cellspacing="0" cellpadding="0" width="100%">
          <tr>
            <td style="background-color:#6BBE10">&nbsp;</td>
            <td style="background-image:url(themes/fruity/images/lb_left.gif);background-repeat:no-repeat" width="126">
              <img src="themes/fruity/images/blind.gif" width="126" height="59" border="0" alt="" /></td>
          </tr>
          <tr>
            <td style="background-image:url(themes/fruity/images/left_bottom_left.gif);background-repeat:repeat-x">&nbsp;</td>
            <td style="background-image:url(themes/fruity/images/lb_bottom.gif);background-repeat:no-repeat" width="126">
              <img src="themes/fruity/images/blind.gif" width="126" height="6" border="0" alt="" /></td>
          </tr>
        </table>
      </td>
      <td id="m42" style="background-image:url(themes/fruity/images/lb_right.gif);background-repeat:no-repeat">
      </td>
      <td id="m43">
      </td>


[Joachim Müller]

thanks for posting this in alternative notation as well - most end users are not familiar with diffs, so the second one is better for this board. Will look into this asap.

[Joachim Müller]

applied suggested fixes to stable and devel branch of svn. Thanks for spotting.