Skip to content

Updates Email Template Styles #193

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
betsyecastro wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

Updates Email Template Styles #193

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
90c1ed0
Updates bg colors and styles footer
betsyecastro Apr 14, 2025
2634d1d
Updates purify config and adds custom setting for email sections edit…
betsyecastro Apr 21, 2025
5ec746d
Adjusts styles for MS Outlook on Windows
betsyecastro Apr 21, 2025
a1b567d
Fixes styling for the "Review Undergraduate Student Research Applicat…
betsyecastro Apr 22, 2025
8ad91a2
Adds PNG logo to ensure correct display in Windows Outlook clients
betsyecastro Apr 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
207 changes: 80 additions & 127 deletions config/purify.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,148 +1,101 @@
<?php

use Stevebauman\Purify\Definitions\Html5Definition;

return [

/*
|--------------------------------------------------------------------------
| Settings
| Default Config
|--------------------------------------------------------------------------
|
| The configuration settings array is passed directly to HTMLPurifier.
| This option defines the default config that is provided to HTMLPurifier.
|
*/

'default' => 'default',

/*
|--------------------------------------------------------------------------
| Config sets
|--------------------------------------------------------------------------
|
| Feel free to add / remove / customize these attributes as you wish.
| Here you may configure various sets of configuration for differentiated use of HTMLPurifier.
| A specific set of configuration can be applied by calling the "config($name)" method on
| a Purify instance. Feel free to add/remove/customize these attributes as you wish.
|
| Documentation: http://htmlpurifier.org/live/configdoc/plain.html
|
| Core.Encoding The encoding to convert input to.
| HTML.Doctype Doctype to use during filtering.
| HTML.Allowed The allowed HTML Elements with their allowed attributes.
| HTML.ForbiddenElements The forbidden HTML elements. Elements that are listed in this
| string will be removed, however their content will remain.
| CSS.AllowedProperties The Allowed CSS properties.
| AutoFormat.AutoParagraph Newlines are converted in to paragraphs whenever possible.
| AutoFormat.RemoveEmpty Remove empty elements that contribute no semantic information to the document.
|
*/

'settings' => [

/*
|--------------------------------------------------------------------------
| Core.Encoding
|--------------------------------------------------------------------------
|
| The encoding to convert input to.
|
| http://htmlpurifier.org/live/configdoc/plain.html#Core.Encoding
|
*/

'Core.Encoding' => 'utf-8',

/*
|--------------------------------------------------------------------------
| Cache.SerializerPath
|--------------------------------------------------------------------------
|
| The HTML purifier serializer cache path.
|
| http://htmlpurifier.org/live/configdoc/plain.html#Cache.SerializerPath
|
*/

'Cache.SerializerPath' => storage_path('app/purify'),

/*
|--------------------------------------------------------------------------
| Cache.SerializerPermissions
|--------------------------------------------------------------------------
|
| The HTML purifier serializer cache path.
|
| http://htmlpurifier.org/live/configdoc/plain.html#Cache.SerializerPermissions
|
*/

'Cache.SerializerPermissions' => env('PURIFY_CACHE_PERMISSIONS', null),

/*
|--------------------------------------------------------------------------
| HTML.Doctype
|--------------------------------------------------------------------------
|
| Doctype to use during filtering.
|
| http://htmlpurifier.org/live/configdoc/plain.html#HTML.Doctype
|
*/

'HTML.Doctype' => 'XHTML 1.0 Strict',

/*
|--------------------------------------------------------------------------
| HTML.Allowed
|--------------------------------------------------------------------------
|
| The allowed HTML Elements with their allowed attributes.
|
| http://htmlpurifier.org/live/configdoc/plain.html#HTML.Allowed
|
*/

'HTML.Allowed' => 'h1,h2,h3,h4,h5,h6,b,strong,i,em,a[href|title],ul,ol,li,p[style],br,span,sup,sub,img[width|height|alt|src]',

/*
|--------------------------------------------------------------------------
| HTML.ForbiddenElements
|--------------------------------------------------------------------------
|
| The forbidden HTML elements. Elements that are listed in
| this string will be removed, however their content will remain.
|
| For example if 'p' is inside the string, the string: '<p>Test</p>',
|
| Will be cleaned to: 'Test'
|
| http://htmlpurifier.org/live/configdoc/plain.html#HTML.ForbiddenElements
|
*/
'configs' => [

'default' => [
'Core.Encoding' => 'utf-8',
'HTML.Doctype' => 'HTML 4.01 Transitional',
'Cache.SerializerPermissions' => env('PURIFY_CACHE_PERMISSIONS', null),
'HTML.Allowed' => 'h1,h2,h3,h4,h5,h6,b,strong,i,em,a[href|title],ul,ol,li,p[style],br,span,sup,sub,img[width|height|alt|src]',
'HTML.ForbiddenElements' => '',
'CSS.AllowedProperties' => 'font,font-size,font-weight,font-style,font-family,text-decoration,padding-left,color,background-color,text-align',
'AutoFormat.AutoParagraph' => false,
'AutoFormat.RemoveEmpty' => false,
],

'trix_email' => [
'HTML.Doctype' => 'HTML 4.01 Transitional',
'HTML.AllowedElements' => 'a,span',
'HTML.AllowedAttributes' => 'a.href,a.style,span.style',
'AutoFormat.RemoveEmpty' => true,
'AutoFormat.RemoveEmpty.RemoveNbsp' => true,
'CSS.AllowedProperties' => 'color,text-decoration',
'Output.TidyFormat' => true,
'HTML.Nofollow' => false,
'Core.NormalizeNewlines' => true,
'AutoFormat.AutoParagraph' => false,
'AutoFormat.RemoveSpansWithoutAttributes' => true,
],

'HTML.ForbiddenElements' => '',

/*
|--------------------------------------------------------------------------
| CSS.AllowedProperties
|--------------------------------------------------------------------------
|
| The Allowed CSS properties.
|
| http://htmlpurifier.org/live/configdoc/plain.html#CSS.AllowedProperties
|
*/

'CSS.AllowedProperties' => 'font,font-size,font-weight,font-style,font-family,text-decoration,padding-left,color,background-color,text-align',

/*
|--------------------------------------------------------------------------
| AutoFormat.AutoParagraph
|--------------------------------------------------------------------------
|
| The Allowed CSS properties.
|
| This directive turns on auto-paragraphing, where double
| newlines are converted in to paragraphs whenever possible.
|
| http://htmlpurifier.org/live/configdoc/plain.html#AutoFormat.AutoParagraph
|
*/
],

'AutoFormat.AutoParagraph' => false,
/*
|--------------------------------------------------------------------------
| HTMLPurifier definitions
|--------------------------------------------------------------------------
|
| Here you may specify a class that augments the HTML definitions used by
| HTMLPurifier. Additional HTML5 definitions are provided out of the box.
| When specifying a custom class, make sure it implements the interface:
|
| \Stevebauman\Purify\Definitions\Definition
|
| Note that these definitions are applied to every Purifier instance.
|
| Documentation: http://htmlpurifier.org/docs/enduser-customize.html
|
*/

/*
|--------------------------------------------------------------------------
| AutoFormat.RemoveEmpty
|--------------------------------------------------------------------------
|
| When enabled, HTML Purifier will attempt to remove empty
| elements that contribute no semantic information to the document.
|
| http://htmlpurifier.org/live/configdoc/plain.html#AutoFormat.RemoveEmpty
|
*/
'definitions' => Html5Definition::class,

'AutoFormat.RemoveEmpty' => false,
/*
|--------------------------------------------------------------------------
| Serializer location
|--------------------------------------------------------------------------
|
| The location where HTMLPurifier can store its temporary serializer files.
| The filepath should be accessible and writable by the web server.
| A good place for this is in the framework's own storage path.
|
*/

],
'serializer' => storage_path('app/purify'),

];
Binary file added public/img/monogram-solid-rgb-full.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 21 additions & 9 deletions resources/views/emails/reviewstudents.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@extends('emails.template')

@php
$primary_color = $settings['primary_color'] ?? '#008542';
$primary_color = $settings['primary_color'] ?? '#154734';
@endphp

@section('message')
Expand All @@ -15,12 +15,24 @@

<p>If you would like to review these undergraduate student research applications, please visit the following page. On this page, you will also be able to delegate review of the applications to another person or indicate if you're not accepting students.</p>

<p style="text-align: center; margin: 2rem;">
<a
href="{{ route('profiles.students', ['profile' => $faculty, 'semester' => $semester]) }}"
style="color: white; background-color: {{ $primary_color }}; border: 1px solid {{ $primary_color }}; text-align: center; padding: 0.5rem 1.25rem; line-height: 1.5; font-weight: normal; text-decoration: none; box-shadow: 2px 2px 3px #ccc;"
>
Review Undergraduate Student Research Applications →
</a>
</p>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" style="margin: 2rem auto;">
<tr>
<td align="center" bgcolor="{{ $primary_color }}" style="
background-color: {{ $primary_color }};
border: 1px solid {{ $primary_color }};
padding: 10px 20px;
">
<a href="{{ route('profiles.students', ['profile' => $faculty, 'semester' => $semester]) }}"
style="
color: white;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 16px;
display: inline-block;
">
Review Undergraduate Student Research Applications →
</a>
</td>
</tr>
</table>
@stop
106 changes: 59 additions & 47 deletions resources/views/emails/template.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@
<html lang="en-US">

@php
$bg_primary = $settings['primary_color'] ?? '#008542';
$bg_secondary = $settings['secondary_color'] ?? '#008542';
$bg_tertiary = $settings['tertiary_color'] ?? '#69BE28';
use Stevebauman\Purify\Facades\Purify;

$bg_primary = $settings['primary_color'] ?? '#154734';
$bg_secondary = $settings['secondary_color'] ?? '#C95100';
$bg_tertiary = $settings['tertiary_color'] ?? '#34827A';
@endphp

<head>
Expand All @@ -18,58 +20,68 @@
<!--<![endif]-->
a[href], a[href]:visited { color: {{ $bg_primary }}; }
.footer a[href], .footer a[href]:visited { color: #fff; }
td.footer-cell a[href] { color: #fff !important; font-size: 16px; text-decoration: underline; }
</style>
</head>

<body style="font-family:Helvetica,Arial,sans-serif;box-sizing: border-box;">

<table style="margin:auto;padding:0;max-width:800px;border-collapse: collapse;">
<tbody>

<!-- Header -->
<tr style="margin:0;padding:0;width:100%;background:{{ $bg_primary }};">
<td colspan="6" style="text-align:center;margin:0;padding:20px 15px;width:100%;color:#fff;">
<a style="display:flex; align-items: center; justify-content: center; color:#fff;text-decoration:none;" title="{{ $settings['site_title'] ?? 'Profiles' }}" href="{{ url('/') }}">
@if(isset($settings['logo']))
<img style="height:70px; margin-right:1rem;" class="profiles-logo" src="{{ $settings['logo'] }}" alt="Logo">
@endif
<span style="font-size:1.25rem; white-space:nowrap;">{{ $settings['site_title'] ?? 'Profiles' }}</span>
</a>
</td>
</tr>

<!-- Body -->

<tr style="margin:0;padding:0;width:100%;">
<td colspan="6" style="background:#fff;margin:0;padding:5%;width:100%;">

<!-- Message -->

@yield('message')

<hr style="margin-top: 4em;">

<p>This is an automated message from the <a href="{{ url('/') }}" title="{{ $settings['site_title'] ?? 'Profiles' }}">{{ $settings['site_title'] ?? 'Profiles' }}</a> website.</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<table width="800" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; margin:0 auto; border-collapse:collapse;">

</td>
</tr>
<!-- Header -->
<tr style="height: 70px !important;">
<td align="center" style="background-color: {{ $bg_primary }}; padding: 20px 15px;">
<a href="{{ url('/') }}" style="text-decoration: none;">
<table cellpadding="0" cellspacing="0" border="0" align="center" role="presentation">
<tr>
@if(isset($settings['logo']))
<td style="padding-right: 10px;">
<img src="{{ asset('img/monogram-solid-rgb-full.png') }}" alt="UT Dallas logo" width="70" height="70">
</td>
@endif
<td style="color: #ffffff; font-size: 20px; white-space: nowrap; font-family: Helvetica, Arial, sans-serif;">
{{ $settings['site_title'] ?? 'Profiles' }}
</td>
</tr>
</table>
</a>
</td>
</tr>

<!-- Body -->
<tr>
<td style="padding: 30px; color: #333333; font-size: 16px; line-height: 1.6;">
<!-- Message -->
@yield('message')
<hr style="margin-top: 4em;">
<p>This is an automated message from the <a href="{{ url('/') }}" title="{{ $settings['site_title'] ?? 'Profiles' }}">{{ $settings['site_title'] ?? 'Profiles' }}</a> website.</p>
</td>
</tr>

<!-- Footer -->
<!-- Footer -->
<tr style="background-color: {{ $bg_tertiary }};">
<td colspan="6" style="text-align:center;padding-top:12px"></td>
</tr>
<tr style="background-color: #919191; padding: 40px; color: #ffffff; font-size: 14px; text-align: center;">
<td colspan="6" style="text-align:center;padding:40px 40px;">

<tr style="color:#fff;margin:0;padding:0;width:100%;font-size:12px;background:{{ $bg_tertiary }};">
<td colspan="6" style="width:100%;text-align:center;padding-top:12px">
</td>
</tr>
<tr style="color:#fff;margin:0;padding:0;width:100%;font-size:16px;background:#8B8178;" class="footer">
<td colspan="6" style="width:100%;text-align:center;padding:40px 40px;">
@if(isset($settings['footer']))
{!! $settings['footer'] !!}
@else
Questions? <a href="{{ url('/faq') }}">Check our FAQ</a> or <a href="mailto:{{ config('mail.from.address') }}?subject=Profiles">contact us.</a>
@endif
</td>
</tr>
</tbody>
@if(isset($settings['footer']))
@php
$footer = Purify::config('trix_email')->clean($settings['footer']);
$footer = str_replace('<a ', '<a style="color:#ffffff; text-decoration:underline;" ', $footer);
@endphp
{!! $footer !!}
@else
Questions? <a href="{{ url('/faq') }}">Check our FAQ</a> or <a href="mailto:{{ config('mail.from.address') }}?subject=Profiles">contact us.</a>
@endif
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

Expand Down
Loading