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

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Main Menu

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

Started by flar, April 22, 2006, 10:15:42 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

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):


--- ../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:


--- ../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):

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

and replace it with:

.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):

/* #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:

      <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:


      <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.