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.
Related
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.
I have following html/css theme and trying to convert it to cake php theme.
I was reading through tutorials but I just don't understand it. Either css file is not working or the content is not displaying.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Shedule Me</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/styles.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="framework/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-custom">
<div class="container header">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span><i class="fa fa-bars"></i>
</button>
<a class="navbar-brand logo-text" href="#page-top">New Theme</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll">
Home
</li>
<li class="page-scroll">
About
</li>
<li class="page-scroll">
Services
</li>
<li class="page-scroll">
Contact Us
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<section>
<div class="container">
<div class="row">
<div class="col-md-7">
<img src="img/benner.png" alt="Banner" class="img-responsive" />
</div>
<div class="col-md-5">
<div class="card">
<h3 class="title-log">Already a Member?</h3>
<label>
Email
<input style="display:block;margin:0 auto;" type="text"/>
</label>
<label>
Password
<input style="display:block;margin:0 auto;" type="password"/>
</label>
<input type="button" value="Log in" class="elevator"/>
<h3>Not a Member?</h3>
Sign up
</div>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="framework/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="framework/bootstrap/js/bootstrap.min.js"></script>
webroot/
custom/ <-- custom css/js plugin folder, for example datepicker plugin
css/
js/
css/
img/
js/
CSS
// load css from css folder, example.com/css/bootstrap.min.css
<?= $this->Html->css('bootstrap.min') ?>
// load css from custom folder, example.com/custom/bootstrap.min.css
<?= $this->Html->css('/custom/bootstrap.min') ?>
// load remote / cdn css file, note without http or https
<?= $this->Html->css('//fonts.googleapis.com/css?family=Montserrat:400,700') ?>
JS / jQuery
// load js file from js folder, example.com/js/bootstrap.min.js
<?= $this->Html->js('bootstrap.min') ?>
// load js file from custom folder, example.com/custom/bootstrap.min.js
<?= $this->Html->js('/custom/bootstrap.min') ?>
// load remote / cdn js file, note without http or https
<?= $this->Html->js('//code.jquery.com/jquery-2.2.4.min.js') ?>
read more http://book.cakephp.org/3.0/en/views/helpers/html.html
I'm working with CodeIgniter and I'm trying to use some stylesheets.
In my autoload.php I have $autoload['helper'] = array('html','url');
and on my view page I have
<link rel="stylesheet" src="<?php echo base_url('assets/css/bootstrap.css')?>"/>
<link rel="stylesheet" src="<?php echo base_url('assets/css/bootstrap-theme.css')?>"/>
<script src="<?php echo base_url('assets/js/jquery-2.2.4.js')?>"></script>
<script src="<?php echo base_url('assets/js/bootstrap.js')?>"></script>
I'm attempting to use stylesheets from Bootstrap, to make a nav bar appear.
Here is my navbar:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
The problem is the CSS doesn't seem to be working at all.
When I look at the page source, the proper links are included to the stylesheets in my <head></head> tags, but I get no change on the page itself.
src should be href.read more
don't use src for link tag
<link rel="stylesheet" href="<?php echo base_url('assets/css/bootstrap.css')?>"/>
Basically, I have a header.php file located inside my INC folder.
header.php
<!DOCTYPE html>
<html lang="EN">
<head>
<title> <?php echo $pageTitle; ?> </title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--Boostrap's CDN-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!--Custom CSS Styling-->
<link rel="stylesheet" href="CSS/custom.css" type="text/css" />
</head>
<body onload="Slider();">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php"> Vomica </a>
</div>
<ul class="nav navbar-nav">
<li class="<?php if($section == "home") {echo "active";} ?>"> Home </li>
<li class="<?php if($section == "buy") {echo "active";} ?>"> Buy </li>
<li class="<?php if($section == "sell") {echo "active";} ?>"> Sell </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="<?php if($section == "register") {echo "active";} ?>"> Register </li>
<li class="<?php if($section == "login") {echo "active";} ?>"> Login </li>
<li> Logout </li>
</ul>
</div>
</nav>
As you can see I have a body for my header file meaning I can't call body inside another file. So, I want a function inside JQuery as soon as the body loads in.
How would I come about solving this?
I realize that I could just put this in the header but, it's extremely inefficient to call that function to every single page that doesn't need it.
you can use jquery to load specific page
$( "#Body" ).load( "ajax/slider.html", function() {
alert( "Load was performed." );
});
where Body is id of body tag and slider is page that we want to load on body
Slider may come only into the home page, not in the other pages. So you no need to call the Slider(); function into the body tag.
Use this code after <nav> tag or where would you like to add slider
<?php if($pageTitle=="home") { ?> //$pageTitle is some identifier to is this home page ;
<script type="text/javascript">
jQuery(document).ready(function($){
Slider();
});
</script>
<?php } ?>
You can use this way. It may help you.
I have been trying to create a WordPress theme but linking to style.css within header.php doesn't seems to work, the header just doesn't appear. Used more than 30 codes even the ones provided by WordPress and people with similar errors but it seems like the solutions are outdated.
<link href="<?php bloginfo('stylesheet_url'); ?>" rel = "stylesheet">
This is my PHP script
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="container"> Logo
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>Contact
</li>
<li class="dropdown"> Social Media<b class = "caret"></b>
<ul class="dropdown-menu">
<li>Facebook
</li>
<li>Instagram
</li>
<li>Twitter
</li>
<li>Google Plus
</li>
</ul>
</li> Add
</ul>
</div>
</div>
</div>
<div class="container">
Your theme style.css is included by default by the WordPress by wp_head() function. Before you end your HEAD tag add this function.
<?php wp_head(); ?>
If you want to add additional stylesheets then use this function in your functions.php file.
function additional_custom_styles() {
/*Enqueue The Styles*/
wp_enqueue_style( 'uniquestylesheetid', get_template_directory_uri() . '/css/custom.css' );
}
add_action( 'wp_enqueue_scripts', 'additional_custom_styles' );
Have you tried:
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(). '/style.css' ?>">
And have that file (I usually place it in a header.php file) in the same directory as the style.css file?
This is what I do.
For me this works great:
<link rel="stylesheet" type="text/css" href="<?php bloginfo("template_directory"); ?>/style.css" />
you can try this one
<?php echo get_stylesheet_uri(); ?>
instead of this
<?php bloginfo('stylesheet_url'); ?>
from here
make sure your style.css file is in your theme's directory
refer to https://wordpress.stackexchange.com/a/220719
update the fuction.php file through the Wordpress Dashboard > Appearance > Theme Editor theme files are listed on the right.
add the following to your function.php file
wp_enqueue_style ('style-name', get_template_directory_uri().'/mystylefile.css');
flush your word press cache and make sure you FTP the file up to the root of the theme.
Use the following code
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
Hope that helps
Put the following under wp_head();
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
You can include css in header.php file as follow:
<link rel="stylesheet" href="<?php echo bloginfo('template_url').'/custom.css'; ?>">
Just include this in the header, don't put style.css here
<?php wp_enqueue_style( 'style', get_stylesheet_uri() ); ?>
if you are adding Bootstrap CDN then use that like this
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">