emailer changes for both website and emailer

This commit is contained in:
unknown 2011-12-08 12:05:33 -05:00
parent c15902a386
commit b83ef05279
3 changed files with 85 additions and 62 deletions

View File

@ -1,7 +1,6 @@
#wrapperEmailer { #wrapperEmailer {
width:570px; width:570px;
padding:20px;
background:#fff; background:#fff;
} }
@ -18,18 +17,10 @@
} }
#logoItfSmall { #logoItfSmall {
margin-left:10px;
margin-top:16px; margin-top:16px;
} float:right;}
#issueNo, #issueDate { /*#emailerDescription {
font-family:"Century Gothic", Arial, Helvetica, sans-serif;
font-weight:bold;
line-height:14px;
margin-left:10px;
}
#emailerDescription {
font-family:"Century Gothic", Arial, Helvetica, sans-serif; font-family:"Century Gothic", Arial, Helvetica, sans-serif;
font-weight:bold; font-weight:bold;
line-height:14px; line-height:14px;
@ -38,22 +29,32 @@
background-color:#f7bd00; background-color:#f7bd00;
padding:8px; padding:8px;
margin-top:6px; margin-top:6px;
} }*/
#logoImg { #logoImg {
position:absolute; /* position:absolute;
top:10px; top:10px;
right:0px; left:0px;*/
margin-bottom:10px;
float:left;
}
#issueNo, #issueDate {
font-family:"Century Gothic", Arial, Helvetica, sans-serif;
line-height:14px;
}
#issueDate {
margin-left:10px;
}
#issueNo {
float:left;
} }
#navEmailer { #navEmailer {
font-family:"Century Gothic", Arial, Helvetica, sans-serif; font-family:"Century Gothic", Arial, Helvetica, sans-serif;
font-weight:bold; float:right;
margin-left:20px;
margin-right:20px;
margin-top:20px;
border-bottom:2px solid #f7bd00;
padding-bottom:10px;
} }
#navEmailer li { #navEmailer li {
@ -63,8 +64,11 @@
} }
#navEmailer li a { #navEmailer li a {
color:#f7bd00; color:#ffcc00 !important;
text-decoration:none; }
#navEmailer li:hover a {
text-decoration:none !important;
} }
/* HEADER EMAILER CLOSING */ /* HEADER EMAILER CLOSING */
@ -77,6 +81,7 @@
#contentEmailer { #contentEmailer {
width:570px; width:570px;
margin:0 auto; margin:0 auto;
border-top:2px solid #f8c92d;
} }
@ -84,13 +89,13 @@
background-color:#f7bd00; background-color:#f7bd00;
color:#fff; color:#fff;
text-align:center; text-align:center;
width:164px; /* fixed, can be changed*/ width:245px; /* fixed, can be changed*/
height:130px; /* fixed, can be changed, character limit accordingly*/ height:170px; /* fixed, can be changed, character limit accordingly*/
margin-top:10px; margin-top:10px;
margin-left:5px; margin-left:10px;
margin-right:5px; margin-right:10px;
margin-bottom:20px; margin-bottom:10px;
padding:8px; padding:10px;
float:left; float:left;
position:relative; position:relative;
@ -109,8 +114,8 @@
} }
.contentBoxes a { .contentBoxes a {
color:#fff; color:#fff !important;
text-decoration:none; text-decoration:none !important;
} }
.contentBoxesMore { .contentBoxesMore {
@ -122,8 +127,17 @@
.articleTitle { .articleTitle {
font-family:"Century Gothic", Arial, Helvetica, sans-serif; font-family:"Century Gothic", Arial, Helvetica, sans-serif;
font-size:24px; font-size:24px;
color:#f7bd00; color:#ffcc00;
padding-left:8px;
text-transform:uppercase; text-transform:uppercase;
float:left;
}
.articleAuthor {
font-family:"Century Gothic", Arial, Helvetica, sans-serif;
font-size:12px;
padding-right:8px;
float:right;
} }
.articleImg { .articleImg {
@ -132,8 +146,8 @@
.articleImg img { .articleImg img {
display:block; display:block;
border:1px solid #f7bd00; border:1px solid #f7c00c;
max-width:550px; /* SUBJECT TO CHANGE*/ max-width:560px; /* SUBJECT TO CHANGE*/
margin:0 auto; margin:0 auto;
} }
@ -160,11 +174,12 @@
margin-left:20px; margin-left:20px;
margin-right:20px; margin-right:20px;
text-align:center; text-align:center;
color:#999;
} }
#footerEmailer a { #footerEmailer a {
color:#0066ff; color:#0066ff !important;
text-decoration:none; text-decoration:none !important;
} }
#footerEmailer p { #footerEmailer p {
@ -172,11 +187,12 @@
} }
#footerEmailer p:first-child { #footerEmailer p:first-child {
border-bottom:2px solid #f7bd00; border-top:2px solid #f8c92d;
border-bottom:2px solid #f8c92d;
} }
#footerEmailer p:last-child { #footerEmailer p:last-child {
border-top:2px solid #f7bd00; border-top:2px solid #f8c92d;
padding-bottom:30px; padding-bottom:30px;
} /* last child don't work with IE8 also, have added JS libraries; will test when site goes live */ } /* last child don't work with IE8 also, have added JS libraries; will test when site goes live */

View File

@ -22,12 +22,12 @@
<tr> <tr>
<td style="width:290px; padding:0px 10px 0px 10px;border-bottom:2px solid #f8c92d;"> <td style="width:290px; padding:0px 10px 0px 10px;border-bottom:2px solid #f8c92d;">
<p style="font-family:'Century Gothic', Arial, Helvetica, sans-serif; font-size:14px; color:#888; padding-bottom:2px; margin-left:8px;">Issue No: {{ issue.issue_no }} <span>&nbsp;&nbsp; {{ issue.date|date:"d-M-Y" }}</span></p> <p style="font-family:'Century Gothic', Arial, Helvetica, sans-serif; font-size:12px; color:#888; padding-bottom:2px; margin-left:8px;">Issue No: {{ issue.issue_no }} <span>&nbsp;&nbsp; {{ issue.date|date:"d-M-Y" }}</span></p>
</td> </td>
<td style="width:290px; padding:0px 0px 0px 10px; font-size:14px; font-family:'Century Gothic', Arial, Helvetica, sans-serif;border-bottom:2px solid #f8c92d; margin-left:8px"> <td style="width:290px; padding:0px 0px 0px 10px; font-size:12px; font-family:'Century Gothic', Arial, Helvetica, sans-serif;border-bottom:2px solid #f8c92d; margin-left:8px">
<p style="text-align:right;"><a href="" style="color:#ffcc00; text-decoration:none;">SUBSCRIBE |</a> <a href="" style="color:#ffcc00; text-decoration:none;">FEEDBACK </a></p> <p style="text-align:right;"><a href="" style="color:#ffcc00; text-decoration:none;">SUBSCRIBE |</a> <a href="" style="color:#ffcc00; text-decoration:none;">FEEDBACK </a></p>
</td> </td>
@ -43,13 +43,13 @@
<p style="font-size:13px; font-family:Arial, Helvetica, sans-serif; padding-left:6px; padding-right:6px;">Some weblink</p> <p style="font-size:13px; font-family:Arial, Helvetica, sans-serif; padding-left:6px; padding-right:6px;">Some weblink</p>
<p style="font-size:13px; font-family:Arial, Helvetica, sans-serif; padding-left:6px; padding-right:6px;">Some other weblink</p> <p style="font-size:13px; font-family:Arial, Helvetica, sans-serif; padding-left:6px; padding-right:6px;">Some other weblink</p>
<p style="text-align:right;"><a href="" style="color:#fff; text-decoration:none; font-size:14px;">More &#187;</a></p> <p style="text-align:right;"><a href="" style="color:#fff; text-decoration:none; font-size:12px;">More &#187;</a></p>
</td> </td>
<td style="width:240px; height:170px; background-color:#f7bd00; color:#fff; padding:10px;"> <td style="width:240px; height:170px; background-color:#f7bd00; color:#fff; padding:10px;">
<p style="font-size:16px; text-align:center; text-transform:uppercase; font-family:'Century Gothic', Arial, Helvetica, sans-serif;">Bulletin Board</p> <p style="font-size:16px; text-align:center; text-transform:uppercase; font-family:'Century Gothic', Arial, Helvetica, sans-serif;">Bulletin Board</p>
<p style="font-size:13px; font-family:Arial, Helvetica, sans-serif; padding-left:6px; padding-right:6px;">Some bb item</p> <p style="font-size:13px; font-family:Arial, Helvetica, sans-serif; padding-left:6px; padding-right:6px;">Some bb item</p>
<p style="font-size:13px; font-family:Arial, Helvetica, sans-serif; padding-left:6px; padding-right:6px;">Some other bb item</p> <p style="font-size:13px; font-family:Arial, Helvetica, sans-serif; padding-left:6px; padding-right:6px;">Some other bb item</p>
<p style="text-align:right;"><a href="" style="color:#fff; text-decoration:none; font-size:14px;">More &#187;</a></p> <p style="text-align:right;"><a href="" style="color:#fff; text-decoration:none; font-size:12px;">More &#187;</a></p>
</td> </td>
<!-- <!--
@ -85,14 +85,15 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td style="width:580px; padding:10px; color:#888; font-family:Arial, Helvetica, sans-serif; font-size:14px;"><p>{{ article.text|markdown }}</p></td> <td style="width:580px; padding:10px; color:#888; font-family:Arial, Helvetica, sans-serif; font-size:12px;"><p>{{ article.text|markdown }}</p></td>
</tr> </tr>
{% endfor %}
<tr> <tr>
<td style="width:580px; margin:10px 0 10px 0;"> <td style="width:580px; margin:10px 0 10px 0;">
<p style="padding:8px; background-color:#f7bd00; color:#fff; font-size:24px; font-family:'Century Gothic', Arial, Helvetica, sans-serif;">WEB LINKS</p> <p style="padding:8px; background-color:#f7bd00; color:#fff; font-size:24px; font-family:'Century Gothic', Arial, Helvetica, sans-serif;">WEB LINKS</p>
<p style="color:#888; font-family:Arial, Helvetica, sans-serif; font-size:14px; padding:8px;">{{ weblinks.text|markdown }}</p> <p style="color:#888; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:8px;">{{ weblinks.text|markdown }}</p>
</td> </td>
</tr> </tr>
@ -100,7 +101,7 @@
<tr> <tr>
<td style="width:580px; margin:10px 0 10px 0;"> <td style="width:580px; margin:10px 0 10px 0;">
<p style="padding:8px; background-color:#f7bd00; color:#fff; font-size:24px; font-family:'Century Gothic', Arial, Helvetica, sans-serif;">BULLETIN BOARD</p> <p style="padding:8px; background-color:#f7bd00; color:#fff; font-size:24px; font-family:'Century Gothic', Arial, Helvetica, sans-serif;">BULLETIN BOARD</p>
<p style="color:#888; font-family:Arial, Helvetica, sans-serif; font-size:14px; padding:8px;">{{ bulletinboard.text|markdown }}</p> <p style="color:#888; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:8px;">{{ bulletinboard.text|markdown }}</p>
</td> </td>
</tr> </tr>
@ -108,7 +109,7 @@
</table> </table>
{% endfor %}
<table width="600" border="0" cellspacing="6" cellpadding="1"> <table width="600" border="0" cellspacing="6" cellpadding="1">
<tr> <tr>

View File

@ -4,21 +4,23 @@
<div id="headerEmailer"> <div id="headerEmailer">
<img src="logoItfSmall.jpg" width="125" height="34" alt="logo-itf-small" id="logoItfSmall"><!-- LOGO ITF SMALL --> <img src="/static/images/emailer/logo-erang.jpg" width="151" height="127" alt="logo-erang" id="logoImg"><!-- LOGO IMG -->
<p id="issueNo">Issue No: {{ issue.issue_no }}</p><!-- ISSUE NO CLOSING --> <img src="/static/images/emailer/logoItfSmall.jpg" width="125" height="34" alt="logo-itf-small" id="logoItfSmall"><!-- LOGO ITF SMALL -->
<p id="issueDate">{{ issue.issue_date }}</p><!-- ISSUE DATE CLOSING --> <div class="clear"></div>
<p id="emailerDescription">A fortnightly theatre e-journal from the India Theatre Forum<br>Co-Editors: Vikram Iyengar, Joyoti Roy</p><!-- EMAILER DESCRIPTION CLOSING --> <p id="issueNo">Issue No: {{ issue.issue_no }}<span id="issueDate">{{ issue.date|date:"d-M-Y" }}</span></p><!-- ISSUE NO CLOSING -->
<img src="logo-erang.jpg" width="151" height="127" alt="logo-erang" id="logoImg"><!-- LOGO IMG --> <!--<p id="emailerDescription">A fortnightly theatre e-journal from the India Theatre Forum<br>Co-Editors: Vikram Iyengar, Joyoti Roy</p><!-- EMAILER DESCRIPTION CLOSING -->
<div id="navEmailer"> <div id="navEmailer">
<li><a href="">Subscribe |</a></li> <li><a href="">Subscribe |</a></li>
<li><a href="">Feedback |</a></li> <li><a href="">Feedback </a></li>
<li><a href="">Bulletin Board |</a></li> <!--<li><a href="">Bulletin Board |</a></li>
<li><a href="">Links</a></li> <li><a href="">Links</a></li>-->
</div><!--NAV EMAILER CLOSING --> </div><!--NAV EMAILER CLOSING -->
<div class="clear"></div>
</div><!-- HEADER EMAILER CLOSING --> </div><!-- HEADER EMAILER CLOSING -->
<div id="contentEmailer"> <div id="contentEmailer">
@ -35,28 +37,32 @@
<p class="contentBoxesMore"><a href="">More &#187;</a></p> <p class="contentBoxesMore"><a href="">More &#187;</a></p>
</div><!-- CONTENT BOXES CLOSING --> </div><!-- CONTENT BOXES CLOSING -->
<div class="contentBoxes">
<h1>{{ box_title }}</h1>
<p>{{ box_text }}</p>
<p class="contentBoxesMore"><a href="">More &#187; </a></p>
</div><!-- CONTENT BOXES CLOSING --> </div><!-- CONTENT BOXES CLOSING -->
<div class="clear"></div> <div class="clear"></div>
<div class="articleEmailer"> <div class="articleEmailer">
{% for article in articles %} {% for article in articles %}
<div class="articleTitle">{{ article.title }}</div><!-- ARTICLE TITLE CLOSING --> <div class="articleTitle">{{ article.title }}</div>
<div class="articleAuthor">by: {{ article.author }}</div><!-- ARTICLE TITLE CLOSING -->
<div class="clear"></div>
<div class="articleImg"><img src="logo-erang.jpg" width="151" height="127"></div><!-- ARTICLE IMAGE CLOSING --> <div class="articleImg"><img src="logo-erang.jpg" width="151" height="127"></div><!-- ARTICLE IMAGE CLOSING -->
<div class="articleCaption">{{ article.subtitle }}</div><!-- ARTICLE CAPTION CLOSING --> <div class="articleCaption">{{ article.subtitle }}</div><!-- ARTICLE CAPTION CLOSING -->
<div class="articleText">{{ article.text|markdown }}</div> <div class="articleText">{{ article.text|markdown }}</div>
{% endfor %} {% endfor %}
</div><!-- ARTICLE EMAILER CLOSING --> </div><!-- ARTICLE EMAILER CLOSING -->
</div><!-- CONTENT EMAILER CLOSING --> </div><!-- CONTENT EMAILER CLOSING -->
<div id="footerEmailer"> <div id="footerEmailer">
<p>A fortnightly theatre e-journal from the India Theatre Forum<br>
Co-Editors: Vikram Iyengar, Joyoti Roy</p>
<p>Views expressed in the articles in e-Rang are personal.<br>
e-Rang does not hold copyright of any piece.<br>
Any enquiry for re-use of articles should be addressed to the authors.</p>
<p>Contribute your articles to e-Rang and become part of this theatre community! Email us at <a href="">erang@theatreforum.in</a> to know <p>Contribute your articles to e-Rang and become part of this theatre community! Email us at <a href="">erang@theatreforum.in</a> to know
more about how to contribute..</p> more about how to contribute..</p>
<p>The India Theatre Forum (ITF), a Prithvi Theatre initiative, was formed in 2006 as a loose <p>The India Theatre Forum (ITF), a Prithvi Theatre initiative, was formed in 2006 as a loose