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

Header Data

From: bartosz <ba***z@miklaszewski.com>
Message Hash: f82a2fb09e6596deab31a8fc0e35d37b070158d6e642f91fab7199c6475ca1aa
Message ID: <ea24a0bd-3fd5-4b54-b7e9-0d5118ba4909@grasehotspot.org>
Reply To: <CAEjYZoKhmat1gNr1rGWh3Sh4E7G6eDYto8akGo8-xCcxYyKnUg@mail.gmail.com>
UTC Datetime: 2014-10-24 23:35:33 UTC
Raw Date: Fri, 24 Oct 2014 23:35:33 -0700

Raw message 

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 <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>
>> .
>>
>

Thread