Member Since 2 Months Ago
4,040 experience to go until the next level!
In case you were wondering, you earn Laracasts experience when you:
Earned once you have completed your first Laracasts lesson.
Earned once you have earned your first 1000 experience points.
Earned when you have been with Laracasts for 1 year.
Earned when you have been with Laracasts for 2 years.
Earned when you have been with Laracasts for 3 years.
Earned when you have been with Laracasts for 4 years.
Earned when you have been with Laracasts for 5 years.
Earned when at least one Laracasts series has been fully completed.
Earned after your first post on the Laracasts forum.
Earned once 100 Laracasts lessons have been completed.
Earned once you receive your first "Best Reply" award on the Laracasts forum.
Earned if you are a paying Laracasts subscriber.
Earned if you have a lifetime subscription to Laracasts.
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.
Earned once you have achieved 500 forum replies.
Earned once your experience points passes 100,000.
Earned once your experience points hits 10,000.
Earned once 1000 Laracasts lessons have been completed.
Earned once your "Best Reply" award count is 100 or more.
Earned once your experience points passes 1 million.
Earned once your experience points ranks in the top 50 of all Laracasts users.
Earned once your experience points ranks in the top 10 of all Laracasts users.
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?
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.
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.