gavin_c

Member Since 2 Months Ago

Experience Points
960
Total
Experience

4,040 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
8
Lessons
Completed
Best Reply Awards
0
Best Reply
Awards
  • start your engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-in-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • evangelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

  • Community Pillar

    Earned once your experience points ranks in the top 10 of all Laracasts users.

Level 1
960 XP
Dec
18
1 month ago
Activity icon

Started a new Conversation Css Theme Switcher From The Backend... Please Help.

Hi folks, hey, how would you create a theme switcher for the frontend ,controlled from the backend? I'm currently testing with four files at the moment. Where I have put comments, is where I need help with.

theme.blade.php:

@extends('admin.index')

@section('content')

<h4>CSS Themes</h4>
<div class="container-fluid" id="theme">
 

  
    <!-- Card --><!-- DO THIS ONE FIRST TO GET IT WORKING -->
    <div class="card border-dark mb-3" style="width: 18rem;">
      <div class="card-header text-center h5">
        Default
      </div>
      <img src="img/card-image-placeholder.png" class="card-img-top" alt="...">
      <div class="card-footer">
        {!! Form::open(['action' => '[email protected]', 'method' => 'POST']) !!}
        {{ csrf_field() }}
          <div class="form-check-inline">
            <label class="form-check-label" for="check1">
              <input type="checkbox" name="front" value="frontend"> Frontend
            </label>
          </div>
          <div class="form-check-inline">
            <label class="form-check-label" for="check2">
              <input type="checkbox" name="back" value="backend"> Backend
            </label> 
          </div>
          <button class="btn btn-primary btn-sm float-right" type="submit">Set</button>
        <!-- How to set the new theme selection ?? -->       
          {!! Form::close() !!}
      </div>
    </div>
    
@endsection

front.blade.php:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Some help here: how to load (Selected theme from controller).css into here? -->
    <link rel="stylesheet" href="css/default.css">
    <title>Front</title>

</head>
<body>
<h1>Front End</h1>
        <div class="main-content">
        
<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    Vero, libero soluta? Doloremque amet non officiis molestiae ratione commodi placeat voluptates animi, 
    necessitatibus voluptas quos laborum atque repellat blanditiis, maxime vitae.
</p>
</body>
</html>

themeController.php:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class themeController extends Controller
{
    public function default() {
        // Is this the correct syntax?
        if (Request::get('front')) {
        
            // some help here: how to load "default.css" into header section of "front.blade.php"?
            
            return view('theme');
        } else {
             // Some help here: If 'frontend' checkbox NOT clicked, keep current saved selection ???
            
            return view('theme');
        }
    }
}

default.css:

body {
    background: #fff;
    padding: 10px;
    font-family: sans-serif;
}
h1 {
    color: #000;
}

.main-content {
    padding: 1em;
    border: 1px solid  #33BBAA;
    background: #fff;
}

I’m kinda new to laravel so I’m still learning to get familiar with it.

Here’s what I’m trying to do. I’m trying to get a test going where I load a css file into the header section of 'front' view using the controller to handle the load functionality, before expanding the test to include the backend, then include other themes. I'm hitting a brick wall as to how to script the initial loading functionality... Am I on the right track with this? Do I need to include a model and database table? How to save the selected theme with the set button?

Also, How to convert query script (below) to Laravel format:

theme.php:

<h1>Style Sheet Tinkering</h1>
<div class="main-content">
<form action="front.php">
    <input type="checkbox" id="xx" onclick="front();"/>
    <label for="xx">FrontEnd</label>
</form>
    
</div> 
<script src="jquery.min.js"></script>
<script>
    function front() {
        if(document.getElementById("xx").checked) {
            var link = document.createElement("link");
            link.rel = "stylesheet";
            link.type = "text/css";
            link.href = "css/blue.css";
            document.getElementsByTagName("head")[0].appendChild(link);
            localStorage.setItem("link");
            return false;
        }else{
            var link = document.createElement("link");
            link.rel = "stylesheet";
            link.type = "text/css";
            link.href = "css/default.css";
            document.getElementsByTagName("head")[0].appendChild(link);
            localStorage.setItem("link");
            return false;
        }
    }
</script>
</body>
</html>

This seems to work, but only on the same page as the script.

I've been at this for ages and really want it to work. any tips would be great. cheers.

Activity icon

Replied to CSS Theme Switcher From The Backend? Another Try...

what file do I put this code into? I'm kinda new to laravel, so I'm getting a little confused and frustrated. also how to save and set the theme with the set button?

Nov
28
1 month ago
Activity icon

Started a new Conversation CSS Theme Switcher From The Backend? Another Try...

Hi folks, hey, how would you create a theme switcher for the frontend ,controlled from the backend? I'm currently testing with four files at the moment.

theme.blade.php:

@extends('admin.index')

@section('content')

<h4>CSS Themes</h4>
<div class="container-fluid" id="theme">
 

  
    <!-- Card --><!-- DO THIS ONE FIRST TO GET IT WORKING -->
    <div class="card border-dark mb-3" style="width: 18rem;">
      <div class="card-header text-center h5">
        Default
      </div>
      <img src="img/card-image-placeholder.png" class="card-img-top" alt="...">
      <div class="card-footer">
        {!! Form::open(['action' => '[email protected]', 'method' => 'POST']) !!}
        {{ csrf_field() }}
          <div class="form-check-inline">
            <label class="form-check-label" for="check1">
              <input type="checkbox" name="front" value="frontend"> Frontend
            </label>
          </div>
          <div class="form-check-inline">
            <label class="form-check-label" for="check2">
              <input type="checkbox" name="back" value="backend"> Backend
            </label> 
          </div>
          <button class="btn btn-primary btn-sm float-right" type="submit">Set</button>
          {!! Form::close() !!}
      </div>
    </div>
    <!-- DO THIS ONE FIRST TO GET IT WORKING -->
      

@endsection

front.blade.php:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS File that gets switched goes here -->
    <link rel="stylesheet" href="css/default.css">
    <title>Front</title>

</head>
<body>
<h1>Front End</h1>
        <div class="main-content">
        
<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    Vero, libero soluta? Doloremque amet non officiis molestiae ratione commodi placeat voluptates animi, 
    necessitatibus voluptas quos laborum atque repellat blanditiis, maxime vitae.
</p>
</body>
</html>

themeController.php:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class themeController extends Controller
{
    public function default() {
        // If 'frontend' checkbox clicked
        if (Request::get('front')) {
            // load 'default.css' into header section of 'front.blade.php'
            // some help, here...
            //return to 'theme.blade.php'
            return view('theme');
        } else {
             // If 'frontend' checkbox NOT clicked, do nothing
            
            //return to 'theme.blade.php'
            return view('theme');
        }
    }
}

default.css:

body {
    background: #fff;
    padding: 10px;
    font-family: sans-serif;
}
h1 {
    color: #000;
}

.main-content {
    padding: 1em;
    border: 1px solid  #33BBAA;
    background: #fff;
}

I'm trying to get a test going where I load a css file into the header section of 'front' view using the controller to handle the load functionality, before expanding the test to include the backend, then include other themes. I'm hitting a brick wall as to how to script the initial loading functionality... Am I on the right track with this? It looks a bit "dogs-breakfast'y" at the moment. any tips would be great. cheers.

Nov
01
2 months ago
Activity icon

Started a new Conversation Theme Switcher From The Backend?

Hi folks, hey, how would you create a theme switcher for the frontend ,controlled from the backend? I'm currently testing with four files at the moment.

theme.php

        <link rel="stylesheet" href="css/default.css">
</head>
<body>
<h1>Style Sheet Tinkering</h1>
<div class="main-content">
<form action="front.php">
    <input type="checkbox" id="xx" onclick="front();"/>
    <label for="xx">FrontEnd</label>
</form>
    
</div> 
<script src="jquery.min.js"></script>
<script>
    function front() {
        if(document.getElementById("xx").checked) {
            var link = document.createElement("link");
            link.rel = "stylesheet";
            link.type = "text/css";
            link.href = "css/blue.css";
            document.getElementsByTagName("head")[0].appendChild(link);
            localStorage.setItem("link");
            return false;
        }else{
            var link = document.createElement("link");
            link.rel = "stylesheet";
            link.type = "text/css";
            link.href = "css/default.css";
            document.getElementsByTagName("head")[0].appendChild(link);
            localStorage.setItem("link");
            return false;
        }
    }

    </script>

front.php

<head id="result">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Front</title>

</head>
<body>
<h1>Front End</h1>
        <div class="main-content">
        
<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    Vero, libero soluta? Doloremque amet non officiis molestiae ratione commodi placeat voluptates animi, 
    necessitatibus voluptas quos laborum atque repellat blanditiis, maxime vitae.
</p>
<script>
    function front() {
        if(document.getElementById("xx").checked) {
            var link = document.createElement("link");
            link.rel = "stylesheet";
            link.type = "text/css";
            link.href = "css/blue.css";
            document.getElementsByTagName("head")[0].appendChild(link);
            document.getElementById("result") = localStorage.getItem("link");
            return false;
        }else{
            var link = document.createElement("link");
            link.rel = "stylesheet";
            link.type = "text/css";
            link.href = "css/default.css";
            document.getElementsByTagName("head")[0].appendChild(link);
            document.getElementById("result") = localStorage.getItem("link");
            return false;
        }
    }

</script>

default.css,

body {
    background: #fff;
    padding: 10px;
    font-family: sans-serif;
}
h1 {
    color: #000;
}

.main-content {
    padding: 1em;
    border: 1px solid  #33BBAA;
    background: #fff;
}

blue.css.

body {
    background: blue;
    padding: 10px;
    font-family: sans-serif;
}
h1 {
    color: #FFF;
}

.main-content {
    padding: 1em;
    border: 1px solid  #33BBAA;
    background: #fff;
}

Currently, I have a checkbox in theme.php. when checked ,it switches the css theme from default to blue - in theme.php

How I'm wanting things to behave, before I expand on the scope of the test: I'm trying to figure out how to link the checkbox event to trigger the change of css theme I want happening in front.php. (yes, remotely..)

Once I have that working, I want to add a checkbox to have a similar functionality for the backend, then add more themes.

I've tried various methods and techniques using jQuery, but it's not working. I'm thinking of making a theme controller with routing attached to the checkbox event (???), but I'm scratching my head as to where to start...is this possible? any tips would be great!! cheers.