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

Header Data

From: Timothy White <ti***8@gmail.com>
Message Hash: 55f131e1e4dbebf4511e4ff1c706b0cba6b719be7c094d098ba5a375aec44d51
Message ID: <CAESLx0KJKfwwjjUw6frHf24nViCmeVdxzZRPJtB0Hr7PkP0izw@mail.gmail.com>
Reply To: <CAEjYZoKhmat1gNr1rGWh3Sh4E7G6eDYto8akGo8-xCcxYyKnUg@mail.gmail.com>
UTC Datetime: 2014-10-25 23:29:41 UTC
Raw Date: Sun, 26 Oct 2014 16:29:41 +1000

Raw message 

You need to use the latest nightly, and currently that will only allow you
to have "free logins", no payment processing.

Tim

On Wed, Oct 22, 2014 at 12:03 PM, lucas oketch <lu***h@gmail.com>
wrote:

> Thank you this is amazing. How do I enable the self provisioning feature.
> A new user needing service can register automatically .possibly make
> payment and have account activated.
>
> Thanks,
> Lucas.
> On 22 Oct 2014 02:53, "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>
>> .
>>
>  --
> 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/CAEjYZoKhmat1gNr1rGWh3Sh4E7G6eDYto8akGo8-xCcxYyKnUg%40mail.gmail.com
> <https://groups.google.com/a/grasehotspot.org/d/msgid/grase-hotspot/CAEjYZoKhmat1gNr1rGWh3Sh4E7G6eDYto8akGo8-xCcxYyKnUg%40mail.gmail.com?utm_medium=email&utm_source=footer>
> .
>

Thread