2014-10-25 - Re: [GRASE-Hotspot] Custom CSS for Tickets - Advanced users only !!!

Header Data

From: Timothy White <ti***8@gmail.com>
Message Hash: 4abcd8eabc46308130fe9346fa6a57bd46660299400d0fca70bf87b2d7893bc6
Message ID: <CAESLx0LBGgPMN+J_E65Tnw_sjFx6kwsjKOW4_MHUx_NVF9kd3Q@mail.gmail.com>
Reply To: <bd6f41a7-4cab-45ae-87b1-e0edbf9685ee@grasehotspot.org>
UTC Datetime: 2014-10-25 23:29:05 UTC
Raw Date: Sun, 26 Oct 2014 16:29:05 +1000

Raw message 

Hi Bart (and anyone else trying this)

I've just pushed a new nightly that will remove the need to edit these
template files! You still need to get your images uploaded yourself, but
you can now put pre/post content before the tickets! I've also moved all
settings relating to the printing of tickets to a new settings page.

Tim

On Wed, Oct 22, 2014 at 9:53 AM, bartosz <ba***z@miklaszewski.com> wrote:

> Hi!
>
> I understand that work on project like GRASE is hard, and takes so much
> time... Tim, big thank you for you on work you have done...
> Hotspot is amazing and I can only imagine how awesome will be in the
> future :)
>
>
> as advanced ticket editing will not be available any time soon... as I
> work on my hotspot, I decided to share with you all guys as I know
>
> how important is custom ticket editing, I was thinking about it for last
> year working with old GRASE...
>
>
> by custom editing i meant:
>
> - add logo
> - add custom text
> - maybe twitter of fb
> etc.
>
> at the very end I will add my final result of ticket editing...
>
>
>
> !!!! This ticket CSS editing - is for ADVANCED users only !!!!
>
> !!!! You can break GRASE if you do something wrong !!!!
>
> !!!! Do it on your own risk !!!!
>
>
> Lets Start !!!
>
> *Add Logo, Welcome msg, facebook and twitter links*. - to do that you
> have to edit file in grase from command line:
>
> cd /usr/share/grase/www/radmin/templates
> sudo nano printnewtickets.tpl
>
>
> as we would like to add custom fields like logo, text etc. we need to
> create custom div's, so edit this file above and add custom div's, in blue,
> original code, and in red code ive added for: Text msg and pictures.
> First 2 lines will appear above username and password, and 2 bottom lines
> appear under.
> <div class="container">
>
>     <div id="cutout_tickets">
>         {foreach from=$users_groups item=group name=grouploop key=groupid}
>             {foreach from=$group item=user key=userid name=usersloop}
>                 <div class="cutout_ticket">
> <div id="welcomemsg">Wi-Fi Settings</div>
> <div id="logo"><img src="http://192.168.7.13/harry_logo.jpg"></div>
>                     {if $networksettings.printSSID}
>                         <span class="ticket_item_label">{t}Wireless
> Network{/t}:</span>
>                         <span class='info_username
>  last'>{$networksettings.printSSID}</span>
>                         <br/>
>                     {/if}
>                     <span class="ticket_item_label
> ">{t}Username{/t}:</span> <span
>                             class='info_username
>  last'>{$user.Username}</span><br/>
>                     <span class="ticket_item_label
> ">{t}Password{/t}:</span> <span
>                             class='info_password
>  last'>{$user.Password}</span><br/>
>                     {if $networksettings.printGroup}
>                         <span class="ticket_item_label ">{t}Voucher
> Type{/t}:</span>
>                         <span class='info_username
>  last'>{$groupsettings.$groupid.GroupLabel}</span>
>                         <br/>
>                     {/if}
>                     {if $networksettings.printExpiry &&
> $user.FormatExpiration != '--'}
>                         <span class="ticket_item_label
> ">{t}Expiry{/t}:</span>
>                         <span class='info_expiry
>  last'>{$user.FormatExpiration}</span>
>                         <br/>
>                     {/if}
> <div id="facebook"><img src="http://192.168.7.13/fb.gif"></div>
> <div id="facebookmsg">/HarrysBarBistro</div>
>                 </div>
>             {/foreach}
>         {/foreach}
>
>     </div>
>
>
>
> *How to upload pictures..., *well... they are many ways to do that, what
> i did is, upload pictures to my website, and use wget to download, and then
> move to html folder.
>
> sudo wget http://yourwebsite.address/picture_you_like_to_download.jpg -
> when its done, move to html folder so its visible by server
> sudo mv picture_you_like_to_download.jpg /var/www/html
>
> as you can see above to access pictures you can go:
> http://192.168.7.13/harry_logo.jpg (as 192.167.7.13) is a local network
> address and can access grase radmin from this IP
>
>
> Now some styling CSS, to do that just go to your admin panel, portal
> customization and scroooool down :) to *Ticket Printing CSS. *Ok, so we
> added some divs now we can edit some CSS
>
> @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed); /*
> importing some google fonts styles */
> @import url(http://fonts.googleapis.com/css?family=Oswald); /* importing
> some google fonts styles */
> #logo { /* as we create div id="logo" now we can style here */
> position: absolute;
> width: 130px;
> height: 69px;
> float: left;
> margin-left: auto;
> margin-right: auto;
> z-index: -100;
> margin-bottom: 10px;
> }
> #welcomemsg { /* div's msg */
> font-family: 'Oswald', sans-serif; /* force google font */
> font-size: 14px;
> position: relative;
> text-align: center;
> font-weight: bold;
> padding-top: 6px;
> padding-bottom: 6px;
> font-weight: 300;
> -webkit-font-smoothing: antialiased; /* fonts looks better, smove */
> }
> #facebook { /* as my logo is big, i didnt have space to add fb */
> display: none; /* hide the div */
> position: relative;
> z-index: 100;
> top: 6px;
> left: 6px;
> float: left;
> }
> #facebookmsg { /* same as above */
> display: none; /* hide the div */
> position: relative;
> z-index: 100;
> top: 6px;
> left: 30px;
> font-size: 12px;
> float: left;
> }
> #cutout_tickets {
> height: 100px; /* ticket height */
> }
> body {
>     line-height: 1.5;
>     color: black;
>     background-color : white;
>     font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
>     padding: 0;
>     margin: 0;
> }
> .cutout_ticket {
>     outline: solid 1px black;
>     margin: 0.1cm;
>     width: 5.9cm;
>     height: 100px;
>     float: left;
>     text-align: right;
>     font-size: 10pt;
>     page-break-inside: avoid;
> }
>
> .ticket_item_label {
>   float: left;
>   position: relative;
>   left: 100px;
>   padding-right: 10px;
>   z-index: 100;
>   display: inline-block;
>   text-align: left;
>   font-family: 'Oswald', sans-serif; /* google fonts as above */
>   -webkit-font-smoothing: antialiased; /* makes fonts smove */
> }
>
> .info_username, .info_password {
>     font-weight: bold;
>   text-align: center;
>   padding-right: 20px;
>   font-size: 15px;
>   font-family: 'Roboto Condensed', sans-serif; /* google fonts as above */
>   -webkit-font-smoothing: antialiased; /* makes fonts smove */
> }
>
> #generated { /* hide date time, etc. */
>     display: none;
> }
>
>
> it still needs to be change a little bit, but you can have a hint... as a
> result, my tickets looks like this:
>
>
> <https://lh5.googleusercontent.com/-X_mr2Gk-DJE/VEbxbHWqsyI/AAAAAAAAK0E/I6hiPzyfFWY/s1600/tickets.png>
>
> if you have any question, please msg here :)
>
>
>
> Bartosz
>
>
>
>
>
>  --
> This mailing list is for the Grase Hotspot Project http://grasehotspot.org
> ---
> You received this message because you are subscribed to the Google Groups
> "Grase Hotspot" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to gr***e@grasehotspot.org.
> To post to this group, send email to gr***t@grasehotspot.org.
> Visit this group at
> http://groups.google.com/a/grasehotspot.org/group/grase-hotspot/.
> To view this discussion on the web visit
> https://groups.google.com/a/grasehotspot.org/d/msgid/grase-hotspot/bd6f41a7-4cab-45ae-87b1-e0edbf9685ee%40grasehotspot.org
> <https://groups.google.com/a/grasehotspot.org/d/msgid/grase-hotspot/bd6f41a7-4cab-45ae-87b1-e0edbf9685ee%40grasehotspot.org?utm_medium=email&utm_source=footer>
> .
>

Thread