cleanup: moved more CSS into the stylesheet

started separating the CSS from the templates.

Signed-off-by: Arun Persaud <arun@nubati.net>

5 files changed, 58 insertions, 21 deletions

diff --git a/themes/default/stylesheet.css b/themes/default/stylesheet.css
index 7771736..8fbee2f 100644
--- a/themes/default/stylesheet.css
+++ b/themes/default/stylesheet.css
@@ -55,6 +55,10 @@ div.searchfor {
    border-bottom:          solid 1px #000000;
 }
 
+div.searchfor td.nowrap { 
+   white-space:            nowrap;
+}
+
 .menu {
    position:               absolute;
    left:                   0px;
@@ -81,6 +85,7 @@ div.header {
    padding:                10px;
    vertical-align:         middle;
    white-space:            nowrap;
+   text-align:             left;
 }
 
 div.subheader {
@@ -90,6 +95,19 @@ div.subheader {
    white-space:            nowrap;
 }
 
+div.welcome { 
+   padding:                10px; 
+   margin-left:            10px;  
+   margin-right:           10px;
+}
+
+div.welcome div { 
+   float:                  left; 
+   padding-right:          10px;
+   width:                  150px; 
+   text-align:             center;
+}
+
 img {
    border:                none;
 }
@@ -192,6 +210,11 @@ div.thumb a.thumblink:hover {
    line-height:            21px;
 }
 
+span.tags {
+   vertical-align:         middle; 
+   text-decoration:        underline;
+}
+
 table.calendar tr td {
    border:                 solid 1px #ffffff;
    padding:                1px;
@@ -225,6 +248,16 @@ table.calendar tr td {
    vertical-align:         middle;
 }
 
+#slide_close { 
+   margin:                 0 auto; 
+   padding:                10px;
+}
+
+#slide_close img { 
+   padding:                15px; 
+   background-color:       #000000;
+}
+
 input.submit,input.checkbox {
    background-color:       transparent;
    border:                 0px;
@@ -236,3 +269,7 @@ input, select, textarea {
    border:                 1px solid #888888;
    border-collapse:        collapse;
 }
+
+#slider-1{ 
+   margin:                 0 auto;
+}
\ No newline at end of file
diff --git a/themes/default/templates/search.tpl b/themes/default/templates/search.tpl
index f983c40..18d1f40 100644
--- a/themes/default/templates/search.tpl
+++ b/themes/default/templates/search.tpl
@@ -1,4 +1,4 @@
-<span style="vertical-align: middle; text-decoration: underline;">
+<span class="tags">
  <img src="resources/loupe.png" alt="loupe" />Search:
 </span>
 <form action="" onsubmit="startSearch(); return false;">
@@ -39,7 +39,7 @@
  </tr>
  <tr>
   <td>Date:</td>
-  <td style="white-space: nowrap;">
+  <td class="nowarp">
    { if ! $date_search_enabled }
     <input type="checkbox" class="checkbox" name="consider_date" value="Y" onclick="datesearch();">
    { else }
diff --git a/themes/default/templates/slideshow.tpl b/themes/default/templates/slideshow.tpl
index c5e8ba5..22c86a8 100644
--- a/themes/default/templates/slideshow.tpl
+++ b/themes/default/templates/slideshow.tpl
@@ -10,13 +10,13 @@
    <a href="javascript:startSlideShow();" onclick="click(this);" title="stop and revert slideshow"><img id="stop_ico" src="resources/32_stop.png" /></a>
    <a href="javascript:nextSlide();" onclick="click(this);" title="slide to next photo"><img id="fwd_ico" src="resources/32_fwd.png" /></a>
   </div>
-  <div style="margin: 0 auto; padding: 10px;">
+  <div id="slide_close">
    <a href="javascript:window.close();" title="click to close slideshow">
-    <img id="slide_img" alt="slideshow_img" style="padding: 15px; background-color: #000000;" />
+    <img id="slide_img" alt="slideshow_img" />
    </a>
   </div>
   <form>
-   <div id="slider-1" tabIndex="1" style="margin: 0 auto;" onclick="if(this.blur)this.blur();">
+   <div id="slider-1" tabIndex="1" onclick="if(this.blur)this.blur();">
    <input id="slider-input-1" name="slider-input-1" onclick="if(this.blur)this.blur();" />
    </div>
   </form>
diff --git a/themes/default/templates/tags.tpl b/themes/default/templates/tags.tpl
index 326c095..e4b04a8 100644
--- a/themes/default/templates/tags.tpl
+++ b/themes/default/templates/tags.tpl
@@ -1,8 +1,8 @@
-<span style="vertical-align: middle; text-decoration: underline;">
+<span class="tags">
  <img src="resources/available_tags.png" alt="available tags" />Available Tags:
 </span>
 <div id="available_tags"></div>
-<span style="vertical-align: middle; text-decoration: underline;">
+<span class="tags">
  <img src="resources/selected_tags.png" alt="selected tags" />Selected Tags:
 </span>
  &nbsp;
diff --git a/themes/default/templates/welcome.tpl b/themes/default/templates/welcome.tpl
index 4629fda..7edda55 100644
--- a/themes/default/templates/welcome.tpl
+++ b/themes/default/templates/welcome.tpl
@@ -1,35 +1,35 @@
 <!-- welcome -->
-<div class="header" style="text-align: left;">
+<div class="header">
  phpfspot welcomes you to a dynamic photo gallery for <a href="http://f-spot.org" target="_blank">F-Spot</a><br />
 </div>
-<div style="padding: 10px; margin-left: 10px; margin-right: 10px;">
+<div class="welcome">
 
- <div style="float: left; padding-right: 10px; width: 150px; text-align: center;">
-  <img src="phpfspot_img.php?idx=rand&width=150&i=1">
- </div>
+ <p>
  <div>
+   <img src="phpfspot_img.php?idx=rand&width=150&i=1">
+ </div>
   This application targets to provide an easy way, to presentate your F-Spot<br />
   pictures in the web, in a way where you do not need any of the current<br />
   web2.0 providers or setup complex apps like gallery
- </div>
+ </p>
 
  <br class="clearboth">
 
- <div style="float: left; padding-right: 10px; width: 150px; text-align: center;">
-  <img src="phpfspot_img.php?idx=rand&width=150&i=2">
- </div>
+ <p>
  <div>
+   <img src="phpfspot_img.php?idx=rand&width=150&i=2">
+ </div>
   You can adapt this welcome page in the file "welcome.tpl" in the template<br />
   directory of your current theme.
- </div>
+ </p>
 
  <br class="clearboth">
 
- <div style="float: left; padding-right: 10px; width: 150px; text-align: center;">
-  <img src="phpfspot_img.php?idx=rand&width=150&i=3">
- </div>
+ <p>
  <div>
- <a href="javascript:showPhotoIndex();">[ Click here to take a look at your photo index or select a tag from the list on the left ]</a>
+   <img src="phpfspot_img.php?idx=rand&width=150&i=3">
  </div>
+ <a href="javascript:showPhotoIndex();">[ Click here to take a look at your photo index or select a tag from the list on the left ]</a>
+ </p>
 </div>
 <!-- /welcome -->