Insert CSS elements when sending an email using laravel 5.6

Navigation
1

Hello good morning companions, my doubt is that as I can send CSS styles by email, I have my images and CSS styles on a server but at the time of sending them, only the images appear and not the styles, somehow to do this? This is the body of the message I sent 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <title>Hello México</title>
            <link rel="icon" type="image/png" href="http://www.hellomexico.mx/assets/img/fabicon.png" />
            <link rel="stylesheet" href="http://www.hellomexico.mx/assets/css/style.css">
            <link rel="stylesheet" href="http://miservidor/assets/css/resset.css">
            <link rel="stylesheet" href="http://miservidor/assets/css/bootstrap.css">


        <meta name="description" content="Hello México Agencia de Contenidos Digitales">
        <meta name="keywords" content="HelloMéxico,HelloMx,Hello,México,Agencia,Contenidos,Digitales,HelloWord,App,Mobile,Aplicaciones,Móviles,Desarrollo,Software,Android,Java,
         iOS,Swift,C#,.NET,Unity,UNITY,Angular,AngularJS,JS,JSON,Ajax,Javascript,HTML5,CSS3,PHP,MySQL,SQL,Oculus,VR,OculusVr,OculusRift,Rift,Leap,Motion,LeapMotion,Digital,Experience,
         DigitalExperience,Experiencias,Digitales,Activaciones,Instagram,Facebook,Twitter,Landing,Page,LandingPage,Aplicaciones,Web,Sitios,Google,Server,Desarrolladores,Servicios,Services
         Consumo,Push,Notificaction,Interfaces,Gráfica,Interfaz,Mockups,Wireframes,Servicio,Social,Becarios,Practicas,Profesionales,Ultra,Plus,sdasdasd">
        <meta name="author" content="Hello México">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body style="font-family: 'glight', sans-serif;">
        <nav class="navbar navbar-inverse fixed-top-inverse">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Navega</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <ul class="nav navbar-yellow">
                         <a class="navbar-brand" href="#"><img src="http://www.hellomexico.mx/assets/img/images/logo_menu.png" width="50px"></a>
                    </ul>

                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="#"><h4>¿Cómo tener un <strong>Office Garden</strong>?</h4></a></li>
                    </ul>
                </div>
            </div>
        </nav>
    <br><br><br>
        <div>
            <img id="ninoHello" src="http://miservidor/assets/img/INFOGRAFIA_OFFICE_GARDEN_V01.jpg">
        </div>
        <div id="foooter" align="center">
            <p id="txtLight3">Para ver el artículo completo, da click <a href="#">aquí</a>.</p>
            <p id="txtLight3">Si ya no quieres recibir nuestros mensajes o deseas cancelar tu suscripción de nuesta lista de correos, da click <a href="http://127.0.0.1:8000/rechazar/{{$correos->id_cor}}">aquí</a>.</p>
            <!--<p id="txtLight3">Tel: 55 7095 6397</p>-->
        </div>
                </div>
            </div>
        </div>
    </body>

    <footer>
    </footer>
</html>

and This is on my controller 

 public function mandarCorreos()
{
    $aceptados = DB::table('correos_automaticos')
    ->where('rechazar', '=', 0)
    ->get();

    foreach ($aceptados as $a) {
        $correos = CorreosAutomaticos::findOrFail($a->id_cor);
         Mail::to($a->correo)->send(new MandarCorreosMail($correos));
    }

    $aceptados = DB::table('correos_automaticos')
    ->where('rechazar', '=', 0)
    ->get();

    $rechazados = DB::table('correos_automaticos')
    ->where('rechazar', '=', 1)
    ->get();

    return view('Correos.correos', ['aceptados'=>$aceptados, 'rechazados'=>$rechazados]);
}

I appreciate your help

    
asked by Dohko19 13.07.2018 в 21:36
source

3 answers

2

Well what I do is put all the CSS content in the same file. In your case you have to put all the content of: 

        <link rel="icon" type="image/png" href="http://www.hellomexico.mx/assets/img/fabicon.png" />
        <link rel="stylesheet" href="http://www.hellomexico.mx/assets/css/style.css">
        <link rel="stylesheet" href="http://miservidor/assets/css/resset.css">
        <link rel="stylesheet" href="http://miservidor/assets/css/bootstrap.css">
    
answered by 15.07.2018 / 23:08
source
2

what you have to do is place the css styles within the html content as it is the following way, you can place the external links, but the server email system what you do is eliminate that links or block them by issue of security, that's the same with the images, svg, if you use google as the stmp system is not going to send the images, you have to find a way to send the images as an attachment 

 <button style="
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
   display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;


    " type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
    
answered by 14.07.2018 в 15:56
1

Not many email clients support external stylesheet. What I recommend is that you place the styles within the style tag     

answered by 14.07.2018 в 15:27
Autoplay does not play the video Disable the dates in fullcalendar