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

Header Data

From: Timothy White <ti***8@gmail.com>
Message Hash: 15db8f8007acbc76866370844243633a7baf7ff71f250e533eb7f8e80267afdb
Message ID: <CAESLx0LZbPPyLmFYVTfeqFdQt0Avo2saCPhVAa2sOK1sAF93sA@mail.gmail.com>
Reply To: <ea24a0bd-3fd5-4b54-b7e9-0d5118ba4909@grasehotspot.org>
UTC Datetime: 2014-10-30 13:16:48 UTC
Raw Date: Fri, 31 Oct 2014 06:16:48 +1000

Raw message 

Thanks for the update Bart.

You're now in the hall of fame!
https://github.com/GraseHotspot/grase-www-portal/wiki/Customising-printed-tickets-vouchers

Tim

On Sat, Oct 25, 2014 at 4:35 PM, bartosz <ba***z@miklaszewski.com> wrote:

> small update:
>
> final css edit :)
>
>
> <https://lh4.googleusercontent.com/-vZKBRsT5E8A/VEtC5G70PZI/AAAAAAAAK0c/ooJ0H4bcaRQ/s1600/screenshot.png>
>
> @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
> @import url(http://fonts.googleapis.com/css?family=Oswald);
> #logo {
> position: absolute;
> float: left;
> margin-top: -5px;
> height: 60px;
> width: 97px;
> margin-left: 6px;
>
> }
> #welcomemsg {
> font-family: 'Oswald', sans-serif;
> font-size: 12px;
> position: relative;
> text-align: center;
> font-weight: bold;
> padding-top: 6px;
> padding-bottom: 6px;
> font-weight: 300;
> vertical-align: top;
> -webkit-font-smoothing: antialiased;
> }
> #facebook {
> display: none;
> position: relative;
> z-index: 100;
> top: 6px;
> left: 6px;
> float: left;
> }
> #facebookmsg {
> display: none;
> position: relative;
> z-index: 100;
> top: 6px;
> left: 30px;
> font-size: 12px;
> float: left;
> }
> #cutout_tickets {
> height: 100px;
> }
> 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;
>   padding-left: 5px;
>   z-index: 100;
>   display: inline-block;
>   text-align: left;
>   font-size: 14px;
>   font-family: 'Oswald', sans-serif;
>   -webkit-font-smoothing: antialiased;
> }
>
> .info_username, .info_password {
>   font-weight: bold;
>   text-align: left;
>   padding-right: 20px;
>   font-size: 15px;
>   font-family: 'Roboto Condensed', sans-serif;
>   -webkit-font-smoothing: antialiased;
> }
>
> #generated {
>     display: none;
> }
>
>
> /usr/share/grase/www/radmin/templates$ sudo nano printnewtickets.tpl
>
> <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"><img src="http://192.168.7.13/fb.png">/HarrysBarBistro
> <img src="http://192.168.7.13/tw.png">@harrysbarbistro</div>
> <div id="logo" style="height:60px;width:97px"><img src="
> http://192.168.7.13/wifi.png"></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>
>             {/foreach}
>         {/foreach}
>
>     </div>
>
>     <div id="generated" class="">
>         {php}
>             global $pagestarttime;
>             $mtime = microtime();
>             $mtime = explode(" ",$mtime);
>             $mtime = $mtime[1] + $mtime[0];
>             $endtime = $mtime;
>             $totaltime = round(($endtime - $pagestarttime), 2);
>             echo "Page generated in ".$totaltime." seconds on ";
>         {/php}{$RealHostname} using
>         {php}echo \Grase\Util::formatBytes(memory_get_peak_usage(true))
> ;{/php} mem
>     </div>
>
> </div>
>
>
>
> any question... ask :)
>
>
> Bartosz
>
>
>
>
>
>
> On Wednesday, 22 October 2014 03:03:52 UTC+1, lucas oketch 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***.@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***.@grasehotspot.org.
>>> To post to this group, send email to gr***.@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/ea24a0bd-3fd5-4b54-b7e9-0d5118ba4909%40grasehotspot.org
> <https://groups.google.com/a/grasehotspot.org/d/msgid/grase-hotspot/ea24a0bd-3fd5-4b54-b7e9-0d5118ba4909%40grasehotspot.org?utm_medium=email&utm_source=footer>
> .
>

Thread