I am new to django and I'm trying a simple web application where I am using CSS with static tag.
I have configured settings.py as
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR,"static")
STATICFILES_DIR = [
os.path.join(BASE_DIR,"static"),
]
This is my navigation bar file which I included in my home page
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'CreditCardNumberValidator/css/main.css' %}">
<div class="topnav">
<a class="active" href="#home">Home</a>
......
</div>
Everytime I load the home page I get "GET /static/CreditCardNumberValidator/css/main.css HTTP/1.1" 404
Attached the project structure
CreditCardValidator
CreditCardNumberValidator
CreditCardValidator
templates
index.html
navbar.html
static
CreditCardNumberValidator
css
main.css
I am not able to find what I've missed.
Related
I have working stylesheet in my codeigniter homepage but if i click on another page the file path also change. that's one reason why my stylsheet not working on other page
the filepath loke like this:
localhost/foldernam/controller_name/stylesheet.css
is there any way that if i visit on other page filepath be remain?
i just want the filepath should be like this
localhost/foldernam/stylesheet.css
in my config.php
$config['base_url'] = 'http://localhost/systems/';
add base_url variabel when you include stylesheet.css, for example
<link rel="stylesheet" type="text/css" href="<?= base_url() . "stylesheet.css" ?>">
Add this code on header your html layout
Problem: Favicon Icon is not loading.
I have a folder 'Assets' in the root directory of codeigniter framework.
Assets/images/favicon.png is the path for the favicon icon image.
The image is present at the above mentioned location.
Controller code:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class homeController extends CI_Controller {
public function index()
{
$this->load->helper('url');
$this->load->view('header');
}
}
View: header.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>My-site</title>
<link rel="icon" href="<?php base_url();?>assets/images/favicon.png" type="image/png">
</head>
But the image is not coming.
I tried: How to set Favicon in Codeigniter
i.e moved the favicon.png in the root folder. But still it is not working.
I tried below as well:
In controller
$this->load->helper('html');
In view:
<?php echo link_tag('favicon.ico', 'shortcut icon', 'image/ico');?>
still it is not working.
Can anyone please help me out with this??
View source of your page in browser and check if the link tag of favicon is present . Check if favicon image path is proper and try favicon url in browser .
In the interest of DRY, I have 3 page types in my SPA: (1)Layout, (2)Index, and (3)XXXX (view).
Layout has the body related tags, Index the nav system, and XXXX the relative content. Here is the code:
Layout.ejs:
<!DOCTYPE>
<html>
<head>
<title>Index Page</title>
<% include ../includes/styles%>
<script type="text/javascript" src="/vendor/jquery/dist/jquery.min.js" ></script>
</head>
<body>
</body>
<% include ../includes/scripts%>
</html>
Index.ejs:
<% include ../includes/layout %>
<h1>This is where the nav bar goes</h1>
<div data-ng-view></div>
View pages not important for this problem.
What I noticed is that my sccript tags from layout are above the body's children DOMs, not at all what I wanted.
What I wanted is:
----- body
--- content
----- scripts
What must I do in layout.ejs to keep the script tags at the bottom of the final html page?
ejs-locals does not support Express 4.x.
I opted for creating a custom engine.
I am new to coding and playing around with the Bakery template in WebMatrix. I have implemented LightBox, and it seems to be working, however, it doesn't seem to be pulling the correct image. On my page, I have thumbnails displayed on the screen. When you click, I am trying to open the 'non-Thumbnail' sized pictures to you can see more detail. However, it still looks like the Thumbnail size. I have a File Directory structure for my pictures of ~\Images\Products This is where the large images reside. Then I have ~\Images\Products\Thumbnails for the small images. Here is my code where I am displaying the LightBox.
<a href="~/Images/Products/#p.ImageName" data-lightbox="Images" title="#p.Name">
<img class="product-image" src="~/Images/Products/#p.ImageName" />
</a>
Thanks in advance for your help
The correct code for the Bakery template, that I have suggested to you in the previous question deleted by you was
#foreach (var p in products) {
<li class="product">
<a href="~/Images/Products/#p.ImageName" data-lightbox="Images" title="#p.Name">
<img class="product-image" src="~/Images/Products/Thumbnails/#p.ImageName" />
</a>
</li>
}
It works fine for me.
In future don't erase your question with an answer, but add a comment.
Edited
Try this:
download from the Lightbox 2 site Lightbox v2.6
in Webmatrix 3 create a new site from the Bakery template
copy lightbox-2.6.min.js from the js folder of your Lightbox download into the Scripts folder of your new site
copy lightbox.css from the css folder of your Lightbox download into the Content folder of your new site
create a new img folder in the root of your new site and copy into it close.png, loading.gif, prev.png, and next.png from the img folder of your Lightbox download
modify as follows the head section of the _SiteLayout.cshtml of your new site
<head>
<meta charset="utf-8" />
<title>Fourth Coffee - #Page.Title</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/lightbox.css" rel="stylesheet" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/lightbox-2.6.min.js"></script>
#RenderSection("Scripts", required: false)
</head>
replace the Default.cshtml content of your new site with
#{
Page.Title = "Home";
var db = Database.Open("bakery");
var products = db.Query("SELECT * FROM PRODUCTS").ToList();
}
<h1>Welcome to Fourth Coffee!</h1>
<div id="productsWrapper">
<ul id="products" data-role="listview" data-inset="true">
#foreach (var p in products) {
<li class="product">
<a href="~/Images/Products/#p.ImageName" data-lightbox="Images" title="#p.Name">
<img class="product-image" src="~/Images/Products/Thumbnails/#p.ImageName" alt="Image of #p.Name" />
</a>
</li>
}
</ul>
</div>
Now, if you run your new site you should see something like this:
I'm learning Perl and using Dancer as a web framework.
I've got two views (tt files) which should share the same navigation.
So, it would be great to start learning how to manage templates for navigation and footers.
I've read the documentation for the Template Toolkit and I've done the following:
I've changed the config.yml file to:
#template: "simple"
template: "template_toolkit"
engines:
template_toolkit:
start_tag: '[%'
end_tag: '%]'
I've defined the templates in the .pm file:
package proyecto;
use Dancer ':syntax';
our $VERSION = '0.1';
get '/' => sub {
template 'index';
};
get '/menu' => sub {
template 'menu';
};
true;
There is a link in the index template directing the visitor to the menu template:
<li class="active">< a href="/menu">Menu <span class="sr-only"></span></a></li>
I would like to reuse the navigation code from index.tt into menu.tt, so I've wrapped the navigation code in index.tt with the following:
[% BLOCK navigation %]
#my nav code
[% END %]
To finally include that code in the menu.tt file, I've written the following (where the navigation code should be):
[% navigation = 'index.tt' %]
[% INCLUDE navigation %]
The files index.tt and menu.tt are located in the folder views. But it seems it's not that easy! =( Any suggestion on how to reuse code from one file to another which is located in the same directory?
This is what layouts are for. The idea is that content common to all pages (e.g. header, footer, navbar) goes in the layout and content specific to each page goes in templates called views. Views are called "partials" in other frameworks because they only contain the content for part of the page.
If you use the dancer command line utility to set up your application, the default layout is views/layouts/main.tt and looks something like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=<% settings.charset %>" />
<title>Foo</title>
<link rel="stylesheet" href="<% request.uri_base %>/css/style.css" />
</head>
<body>
<% content %>
<div id="footer">
Powered by Dancer <% dancer_version %>
</div>
</body>
</html>
The <% content %> section is replaced with the specified view when you call template 'view';. (In your case, you'll need to change <% and %> to [% and %] since you're using the Template Toolkit-style delimiters.)
For example, if views/index.tt is:
<h1>Hello, World!</h1>
calling template 'index'; in a route renders the following:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Foo</title>
<link rel="stylesheet" href="http://www.example.com/css/style.css" />
</head>
<body>
<h1>Hello, World!</h1>
<div id="footer">
Powered by Dancer 1.3202
</div>
</body>
</html>
Note that there's already a footer section; you just have to add elements for a header and navbar.
If this is new development, you should really be using Dancer2 instead of Dancer (fortunately, layouts and views are the same in both).
The [% INCLUDE %] directive's argument can be interpreted in one of two ways.
The name of another template file
The name of a block that is defined in the current template file (or in another template file which has included the current template file).
All of which means that your current plan won't work. menu.tt won't see any block defined inside index.tt.
There are a couple of better solutions though.
Firstly, consider moving the navigation code into a third, separate, template file. You can then INCLUDE this template into both index.tt and menu.tt.
Secondly, you can use Dancer's "layout" feature. This is a template that is wrapped around your view templates. Typically the layout template contains the navigation and all standard page furniture (like headers and footers). It also contains a [% content %] directive. When a view is rendered, the rendered version is dropped into the layout template in the location of the [% content %] directive. See the Layouts section in Dancer::Tutorial for more information.
p.s. I see you're using Dancer. I'd highly recommend switching to Dancer2.