this is my first question, so i'm a bit nervous. I'm trying to learn Laravel and using 5.6 version. I got a HTML theme from themeforest.net and build a master layout. I include header and footer codes from another blade.php file. In header, there is a menu called 'Browse Categories'. On the home page the menu contains a CSS class that called 'show'. But on the other pages the menu shouldn't be in it. Here is my header.blade.php file
<div class="col-md-5 order-3 order-md-2">
<nav class="category-nav primary-nav show"><!--this is where i stuck-->
<div>
<a href="javascript:void(0)" class="category-trigger">
<i class="fa fa-bars"></i>Kategoriler
</a>
<ul class="category-menu">
<li class="cat-item has-children">
Arts & Photography
<ul class="sub-menu">
<li>Bags & Cases</li>
<li>Binoculars & Scopes</li>
<li>Digital Cameras</li>
<li>Film Photography</li>
<li>Lighting & Studio</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
and that particular class is here
.category-nav.show .category-menu {
visibility: visible;
opacity: 1;
pointer-events: visible;
}
I need the 'show' class passive except for the home page. how can I do that? My master layout is here
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>#yield('title', config('app.name'))</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Use Minified Plugins Version For Fast Page Load -->
<link rel="stylesheet" type="text/css" media="screen" href="css/plugins.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<link rel="shortcut icon" type="image/x-icon" href="image/favicon.ico">
</head>
<body>
<div class="site-wrapper" id="top">
#include('includes.header')
#yield('content')
</div>
<!--=================================
Footer Area
===================================== -->
#include('includes.footer')
<!-- Use Minified Plugins Version For Fast Page Load -->
<script src="js/plugins.js"></script>
<script src="js/ajax-mail.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
For named routes you can do as suggested in this answer like so:
<a class="nav-link {{ Route::currentRouteNamed('home') ? 'active' : '' }}" href="#">
Home
</a>
Or check the current route action if you don't use named routes
<a class="nav-link {{ Route::currentRouteUses('App\Http\Controdllers\HomeController#index') ? 'active' : '' }}" href="#">
Home
</a>
You can also not include the file at all:
#if(Route::currentRouteUses('App\Http\Controdllers\HomeController#index'))
#include('includes.header')
#endif
Or
#if(Route::currentRouteNamed('home'))
#include('includes.header')
#endif
When you render the homepage from your controller, include a variable like this:
return view('home', ['site' => 'home'])
then in your home.blade.php
<nav class="category-nav primary-nav #isset($site) show #endisset">
In your other views just don't include that variable.
Related
I'm trying to add a custom UI to my Laravel 9 app. So I'm adding extra CSS and JS files to my app.blade.php But looks like its not loading properly.
As you can see http://127.0.0.1:8000/css/tailwind.output.css and http://127.0.0.1:8000/js/init-alpine.js files not loaded. But when i check default http://127.0.0.1:8000/css/app.css file. Its working. But both of these files resides in the same location, which is resources/css/ and resources/js/ folders. Why those custom css and js files not loaded.
<!DOCTYPE html>
<html :class="{ 'theme-dark': dark }" x-data="data()" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('css/tailwind.output.css') }}">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js"defer></script>
<script src="{{ asset('js/init-alpine.js') }}" defer></script>
#livewireStyles
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased">
<x-jet-banner />
<div class="min-h-screen bg-gray-100">
#livewire('navigation-menu')
<!-- Page Heading -->
#if (isset($header))
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
#endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
#stack('modals')
#livewireScripts
</body>
</html>
I'm using tailwind CSS, livewire, jetstream and Laravel 9
I'll start off with saying that I am brand new to PhP, but am trying to use it to set load my header from 1 file into all of my website pages. I have successfully accomplished this and with that have also been able to set a .active class to whichever page is currently active.
My question is, if there is anyway I can make the active page not reload when it is clicked in the navbar out of personal preference. I have so far accomplished this by just setting the href link to "#" but I can't really do that if I am loading the same header from every file. Is there some way else I can do this possibly with PhP in my header.php file? Please let me know, be kind, again I'm brand new, here is my code...
INDEX.PHP
<html>
<head>
<!-- Meta & Other -->
<title>Infamous | Home</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Infamous official website">
<meta name="keywords" content ="Infamous, Minecraft, Server, Game, Gaming">
<meta name="author" content="MrWardy">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="Stylesheets/header.css">
<!-- Fonts -->
<script src="https://kit.fontawesome.com/35fad75205.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">
</head>
<body>
<?php $page = 'home'; include('header.php'); ?>
<!-- JavsScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
APPLY.PHP
<html>
<head>
<!-- Meta & Other -->
<title>Infamous | Apply</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Infamous official website">
<meta name="keywords" content ="Infamous, Minecraft, Server, Game, Gaming, Apply, Application, Staff">
<meta name="author" content="MrWardy">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="Stylesheets/default.css">
<link rel="stylesheet" href="Stylesheets/header.css">
<!-- Fonts -->
<script src="https://kit.fontawesome.com/35fad75205.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">
</head>
<body>
<?php $page = 'apply'; include('header.php'); ?>
<!-- JavsScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
HEADER.PHP
<nav id="header-nav" class="navbar-nav">
<div class="container grid-container">
<a class="<?php echo ($page == 'home') ? "active" : ""; ?> navlink" href="#"><i class="fas fa-home"></i> Home</a>
<a class="navlink" href="#rules"><i class="fas fa-book"></i> Rules</a>
<a class="<?php echo ($page == 'apply') ? "active" : ""; ?> navlink" href="./apply.php"><i class="fas fa-user"></i> Apply</a>
<a class="navlink" href="#store"><i class="fas fa-tags"></i> Store</a>
<a class="navlink" href="https://discord.gg/ZnN3f4P" target="_blank"><i class="fab fa-discord"></i> Discord</a>
<a class="navlink" href="https://www.youtube.com/channel/UCFvs3IZNgziCe0WARpJpYVw" target="_blank"><i class="fab fa-youtube"></i> YouTube</a>
</div>
</nav>
<img class="heading-banner mx-auto d-block" src="./Images/banner.png" alt="Infamous banner">
</header>
This way you can add many pages you want by using
array('page'=>'IDENTIFIER','title'=>'TITLE','link'=>'link','icon'=>'icon') separated by comma.
Header.php
<nav id="header-nav" class="navbar-nav">
<div class="container grid-container">
<?php
$pages=array(
array('page'=>'home','title'=>'Home','link'=>'./home.php','icon'=>'fas fa-home'),
array('page'=>'apply','title'=>'Apply','link'=>'./apply.php','icon'=>'fa-user'),
array('page'=>'other','title'=>'Other page','link'=>'./other_page.php','icon'=>'fa-user'),
array('page'=>'youtube','title'=>'Watch video','link'=>'https://www.youtube.com/channel/UCFvs3IZNgziCe0WARpJpYVw','icon'=>'fab fa-youtube','newtarget'=>1)
);
foreach($pages as $pg){
echo $pg['page']==$page?
'<a class="navlink active"><i class="'.$pg['icon'].'"></i> '.$pg['title'].'</a>':
'<a class="navlink" href="'.$pg['link'].'" '(.isset($pg['newtarget'])?' target="_blank"':'').'><i class="'.$pg['icon'].'"></i> '.$pg['title'].'</a>';
}
?>
</div>
</nav>
<img class="heading-banner mx-auto d-block" src="./Images/banner.png" alt="Infamous banner" />
</header>
If you want you can add a cursor style to navlink class, this way, even without a href your will have a nice cursor.
I just installed bootstrap 3 via composer composer require twbs/bootstrap and I'm thinking how can I call the bootstrap library in my master page default.blade.php instead of calling via href like these : <link rel="stylesheet" href="too many to mention"> so I can apply some style in my navigation.
<!doctype html>
<html>
<head>
<title>Home</title>
</head>
<body>
#include ('templates.partials.navigation')
<div class = "container">
#yield('content') {{-- #yield is always used to get content from a child page into master page. So this page will be master page. --}}
</div>
</body>
</html>
navigation.blade.php
<div class = "navbar navbar-inverse">
<ul>
<li>
Login
Register
</li>
</ul>
</div>
How can I put apply the style in my navigation without importing the style link library in my master page?
You can just use url()
<link rel = "stylesheet" href= "{{ url('css/bootstrap.min.css')}}">
<div class = "navbar navbar-default">
<ul>
<li>
Login
Register
</li>
</ul>
</div>
Just found a solution on my question.
<link rel = "stylesheet" href= "{{ URL::asset('css/bootstrap.min.css')}}">
<div class = "navbar navbar-default">
<ul>
<li>
Login
Register
</li>
</ul>
</div>
The CSS for my index page located in the root directory isn't working. I am using php to include a header that contains a navigation bar, but the css for the navigation bar isn't working. It works on other pages fine, but any page located in the root index doesn't have the css.
Edit: Solved by changing the path to the url and then the file directory of the css.
Solved
<link rel="stylesheet" type="text/css" href="/bootstrapwebsite/CSS/main.css">
Index.php
<html>
<?php
include '/includes/header.php';
?>
</html>
header.php
<html>
<title>Bootstrap Basics</title>
<!-- Gather all Required CSS -->
<link rel="stylesheet" type="text/css" href="../CSS/main.css">
<link rel="stylesheet" type="text/css" href="../CSS/header.css">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- End the css get -->
<!-- Gather the jquery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- End the jquery get -->
<div>
<header id="navigationHeader" class="navbar" role="banner">
<div class="container">
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-left mainnav-menu">
<li>
<a id="logo" href="#"><img src=""></img></a>
</li>
</ul>
<ul id="navbar" class="nav navbar-nav navbar-right">
<li>
<h4><i class="fa fa-group"></i> Players </h4>
</li>
<li>
<h4><i class="fa fa-shopping-cart"></i> Shop </h4>
</li>
<li>
<h4><i class="fa fa-list-ol"></i> Leaderboards </h4>
</li>
<li>
<h4><i class="fa fa-phone"></i> Support </h4>
</li>
<li>
<h4>
<i class="fa fa-user"></i> Guest
</h4>
</li>
</ul>
</nav>
</div> <!-- /.container -->
</header>
</div>
</html>
<!-- javascript to determine current page and set it as active -->
<script>
$(document).ready(function () {
//Get CurrentUrl variable by combining origin with pathname, this ensures that any url appendings (e.g. ?RecordId=100) are removed from the URL
var CurrentUrl = window.location.origin+window.location.pathname;
//Check which menu item is 'active' and adjust apply 'active' class so the item gets highlighted in the menu
//Loop over each <a> element of the NavMenu container
$('#navbar a').each(function(Key,Value)
{
//Check if the current url
if(Value['href'] === CurrentUrl)
{
//We have a match, add the 'active' class to the parent item (li element).
$(Value).parent().addClass('active');
}
});
});
</script>
<!-- end javascript -->
The problem is here:
<link rel="stylesheet" type="text/css" href="../CSS/main.css">
<link rel="stylesheet" type="text/css" href="../CSS/header.css">
If the PHP file is in the root directory, It can´t access to ".." because It doesn´t exist. Just change the href from "../CSS/main.css" to "CSS/main.css" and It should work fine.
If your file is in ROOT directory than this must be the case that your CSS files are inside the folder called "CSS" which lies in ROOT directory so modify your code as:
<link type="text/css" rel="stylesheet" href="CSS/main.css" />
<link type="text/css" rel="stylesheet" href="CSS/header.css" />
I think the use of the base tag might help here.
<head>
<base href="websiterootdirectorypath/or/baseurl/" />
</head>
This should go within the head before any of your css or script links. Then in the paths for your css or scripts you just reference their paths going in from the root. So
<link rel="stylesheet" type="text/css" href="CSS/main.css">
<link rel="stylesheet" type="text/css" href="CSS/header.css">
And the paths won't break for the pages no matter where they sit within your site structure.
So i'm trying to get the category filter on my Expression Engine blog to stay within the same layout when a category is clicked...but everytime i click on a category it jumps me over to a blank white page (so seems like its not getting any styles from anywhere for some reason). Which is odd because my header is included w/ all my styles, etc.
I'VE GOT MY INITIAL TEMPLATE GROUP: "PAGE-COMPS" (w/ two templates):
(1) index
(2) blog - which is as follows
{embed="embeds/header-inner" my_body_class="blog" my_page_title="Blog"}
<div class="mid-wrapper">
<div class="row blog">
<div class="span9">
{embed="posts/index"}
</div>
<div class="span2">
{snp_blog_sidebar}
</div>
</div><!-- end of row -->
</div> <!-- end of mid-wrapper -->
{snp_footer}
THEN I'VE GOT MY 2ND TEMPLATE GROUP: "EMBEDS"
I'VE GOT MY HEADER FILE: "HEADER-INNER" SEEN IN THE FILE ABOVE CODE AS FOLLOWS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{site_name} | {embed:my_page_title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Carousel jscrollpane Styles -->
<link rel="stylesheet" type="text/css" href="../assets/css/jquery.jscrollpane.css" media="all" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Load jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<!-- Load ScrollTo -->
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.3.1-min.js"></script>
<!-- Load LocalScroll -->
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript">// <![CDATA[
// When the document is loaded...
$(document).ready(function()
{
// Scroll the whole document
$('#section-links').localScroll({
target:'body'
});
});
// ]]>
</script>
</head>
<body class="{embed:my_body_class}">
<header>
</header>
<div class="container">
<div class="hero-unit">
<img class="the" src="../assets/img/the.png">
<p><a class="logo" href="{site_url}">Site Name<span> More Name</span><img class="image" src="{site_url}assets/img/image.png" alt="{site_name}"></a></p>
<nav id="section-links">
Return to the Home Page
</nav>
</div>
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<div class="slogan">
<h1>blog name</h1>
<p>more description...</p>
</div>
</div>
THEN I'VE GOT A LAST TEMPLATE GROUP FOR BLOG ENTRIES: CALLED "POSTS"
POSTS HAS ONE TEMPLATE:
"INDEX" WHICH IS AS FOLLOWS:
<!-- posts list -->
<div id="posts-list" class="cf">
<!-- THIS ONLY KICKS IN WHEN CATEGORY IS SELECTED (CATEGORY MODE) -->
{exp:channel:category_heading}
<h1>{category_name}</h1>
{if category_description}
<p>{category_description}</p>
{/if}
{/exp:channel:category_heading}
{exp:channel:entries channel="blog_audio|blog_video|blog_link|blog_quote|blog_post|blog_image" limit="10"}
{!-- Choose appropriate snippet based on source channel --}
{if channel_short_name == "blog_audio"}
{snp_blog_audio}
{/if}
{if channel_short_name == "blog_video"}
{snp_blog_video}
{/if}
{if channel_short_name == "blog_link"}
{snp_blog_link}
{/if}
{if channel_short_name == "blog_quote"}
{snp_blog_quote}
{/if}
{if channel_short_name == "blog_post"}
{snp_blog_post}
{/if}
{if channel_short_name == "blog_image"}
{snp_blog_image}
{/if}
{!-- Commenting out for now, we'll come back to it
<!-- page-navigation -->
<div class="page-navigation cf">
<div class="nav-next">← Older Entries </div>
<div class="nav-previous">Newer Entries →</div>
</div>
<!--ENDS page-navigation -->
--}
{/exp:channel:entries}
</div>
<!-- ENDS posts list -->
LASTLY I'VE GOT A SNIPPET FOR MY SIDEBAR W/ THE CATEGORIES AS FOLLOWS:
SNP_BLOG_SIDEBAR
<!-- sidebar -->
<aside id="sidebar">
<ul>
<li class="block">
<h4>Our Blog</h4>
Description of our blog goes here
</li>
<li class="block">
<h4>Categories</h4>
<ul>
{exp:channel:categories channel="blog_audio|blog_video|blog_link|blog_quote|blog_post|blog_image" style="linear" show_empty="no"}
<li class="cat-item">{category_name}</li>
{/exp:channel:categories}
</ul>
</li>
<li class="block">
<h4>Archives</h4>
<ul>
{exp:channel:month_links channel="blog_audio|blog_video|blog_link|blog_quote|blog_post|blog_image" limit="50"}
<li class="cat-item"> {month}, {year}</li>
{/exp:channel:month_links}
</ul>
</li>
</ul>
</aside>
<!-- ENDS sidebar -->
I'D GREATLY APPRECIATE ANY HELP AS TO WHAT MIGHT BE GOING WRONG...AGAIN WHEN I CLICK A CATEGORY IT TAKES ME TO A BLANK WHITE PAGE LISTING THE BLOG POSTS OF THAT CATEGORY RATHER THAN KEEPING ME ON THE CURRENT BLOG DESIGN...
THANKS A TON!
It's the ../assets/[...] relative link to your styles in embeds/header-inner. That'd work from http://localhost/index.php/whatever/you-want/ or from http://localhost/blog, but not from anything that looks to the browser like a deeper folder structure (http://localhost/blog/categories/[something]) those wouldn't work.
Try something from the site root if you can, like <link rel="stylesheet" href="/assets/css/file.css">.