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

Header Data

From: bartosz <ba***z@miklaszewski.com>
Message Hash: 9d5bf89efacbac3500c094ea9ae3b4eff3ab28427ac59dc1fce4112bff114483
Message ID: <a30fd7e5-2c25-4405-be2c-41e37fc1a5de@grasehotspot.org>
Reply To: <CAESLx0KJKfwwjjUw6frHf24nViCmeVdxzZRPJtB0Hr7PkP0izw@mail.gmail.com>
UTC Datetime: 2014-10-25 23:39:23 UTC
Raw Date: Sat, 25 Oct 2014 23:39:23 -0700

Raw message 

lol :) this is good :)))))

will test it today :)))))

thx Tim ! :)

p.s.
i was going to ask you, about another future :), is it possible to have 
 grase user which will have only access to
- usuers
- new users
- batch users
- computer account
?

i am working on one hotspot and i dont want people to have to much access 
to settings and etc... :)





On Sunday, 26 October 2014 06:29:43 UTC, timwhite88 wrote:
>
> 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***.@gmail.com 
> <javascript:>> 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 <javascript:>> 
>> 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 <javascript:>.
>>> To post to this group, send email to gr***.@grasehotspot.org 
>>> <javascript:>.
>>> 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***.@grasehotspot.org <javascript:>.
>> To post to this group, send email to gr***.@grasehotspot.org 
>> <javascript:>.
>> 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