2014-10-21 - Custom CSS for Tickets - Advanced users only !!!

Header Data

From: bartosz <ba***z@miklaszewski.com>
Message Hash: ce6bbe22cbd97a539130607b48166b609b4324272ab2491e8668999d45b9eeaf
Message ID: <bd6f41a7-4cab-45ae-87b1-e0edbf9685ee@grasehotspot.org>
Reply To: N/A
UTC Datetime: 2014-10-21 16:53:51 UTC
Raw Date: Tue, 21 Oct 2014 16:53:51 -0700

Raw message 

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

Thread