Laracasts Member Profile

Dec

1 month ago

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.

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

1 month ago

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

2 months ago

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.

gavin_c

Start Your Engines

First Thousand

One Year Member

Two Year Member

Three Year Member

Four Year Member

Five Year Member

School In Session

Welcome To The Community

Full Time Learner

Pay It Forward

Subscriber

Lifer

Laracasts Evangelist

Chatty Cathy

Laracasts Veteran

Ten Thousand Strong

Laracasts Master

Laracasts Tutor

Laracasts Sensei

Top 50

Community Pillar

Want us to email you occasionally with Laracasts news?