I have installed Yii2 advanced application, and now I want to change backend theme.
How can I do this?
Is there any file where I need to tell Yii2 that use my custom theme?
I established my theme under backend/web/themes/mytheme.
I just replaced this code in advanced/backend/config/main.php, but nothing happened!
'view' => [
'theme' => [
'pathMap' => ['#app/views' => '#app/themes/mytheme'],
'baseUrl' => '#web/themes/mytheme',
],
],
Then I replaced this code under common/config/main.php but nothing changed!
Yet another approach to change theme in Yii2 is:
Create a themes directory in web folder in frontend or backend where you want to change theme.
place your theme folder inside themes directory.
change $css and $js variables in AppAsset.php in assets folder in frontend or backend like:
public $css = [
//'css/site.css',
'themes/theme_folder/css/font-awesome.min.css',
'themes/theme_folder/css/slicknav.css',
'themes/theme_folder/css/style.css',
'themes/theme_folder/css/responsive.css',
'themes/theme_folder/css/animate.css',
'themes/theme_folder/css/colors/red.css',
//'themes/margo/asset/css/bootstrap.min.css',
];
public $js = [
'themes/theme_folder/js/jquery.migrate.js',
'themes/theme_folder/js/modernizrr.js',
'themes/theme_folder/js/jquery.fitvids.js',
'themes/theme_folder/js/owl.carousel.min.js',
'themes/theme_folder/js/nivo-lightbox.min.js',
//'themes/theme_folder/js/jquery-2.1.4.min.js',
//'themes/theme_folder/asset/js/bootstrap.min.js'
];
Do not include core bootstrap css, bootstrap js and jquery js as these are core APIs that are provided by Yii2. I have commented them above.
Use the below code to reference theme resources (css, js, images etc) in your main.php layout file or other site pages:
<?= Yii::getAlias('#web/themes/theme_folder') ?>/images/margo.png
There is no need to include css or js files in layouts->main.php file :)
Create a view folder in your themes/mytheme and move all view files like main.php into it and other layouts needed.
Also you can set your basic layout in the backend\config\main.php like
return [
'id' => 'app-backend',
'layout'=>'yourtheme', //your `themes/mytheme/views/` contain yourtheme.php in this case
...
Also change pathmap to
'pathMap' => ['#app/views' => '#app/themes/mytheme/views'],
In the backend folder make a theme folder .In file backend/config/main.php the components section add the code given below ,files in this folder will behave like the view folder in backend .
'view' => [
'theme' => [
'basePath' => '#backend/themes/demo',
'baseUrl' => '#backend/themes/demo',
'pathMap' => [
'#backend/views' => '#backend/themes/demo',
],
],
],
To install a new backend or frontend theme ( I did one page Bootstrap theme), please follow the below steps:
Copy the theme content i.e. directories like js, css, images, fonts etc to for instance backend->web folder.
Change your backend->assets->AppAsset.php class i.e. modify $css and $js arrays like
public $css = [
//'css/site.css',
'css/font-awesome.min.css',
'css/main.css',
'css/prettyPhoto.css',
'css/bootstrap.min.css',
];
public $js = [
//'js/bootstrap.min.js',
'js/html5shiv.js',
'js/jquery.isotope.min.js',
//'js/jquery.js',
'js/jquery.prettyPhoto.js',
'js/main.js',
'js/respond.min.js',
];
Please keep in mind to comment out core JQuery and Bootstrap JS files as they are provided by Yii2 by default.
Modify the backend->views->layouts->main.php file as under:
<?php
/* #var $this \yii\web\View */
/* #var $content string */
use backend\assets\AppAsset;
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use common\widgets\Alert;
use webvimark\modules\UserManagement\models\User;
use webvimark\modules\UserManagement\UserManagementModule;
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<!--[if lt IE 9]>
<script src="<?= Yii::$app->request->baseUrl ?>/js/html5shiv.js"></script>
<script src="<?= Yii::$app->request->baseUrl ?>/js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="<?= Yii::$app->request->baseUrl ?>/images/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?= Yii::$app->request->baseUrl ?>/images/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?= Yii::$app->request->baseUrl ?>/images/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?= Yii::$app->request->baseUrl ?>/images/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="<?= Yii::$app->request->baseUrl ?>/images/ico/apple-touch-icon-57-precomposed.png">
<?php $this->head() ?>
</head><!--/head-->
<body data-spy="scroll" data-target="#navbar" data-offset="0">
<?php $this->beginBody() ?>
<header id="header" role="banner">
<div class="container">
<div id="navbar" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><i class="icon-home"></i></li>
<li>Services</li>
<li>Portfolio</li>
<li>Pricing</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</header><!--/#header-->
<?= $content ?>
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-sm-6">
© 2013 <a target="_blank" href="http://shapebootstrap.net/" title="Free Twitter Bootstrap WordPress Themes and HTML templates">ShapeBootstrap</a>. All Rights Reserved.
</div>
<div class="col-sm-6">
<img class="pull-right" src="<?= Yii::$app->request->baseUrl ?>/images/shapebootstrap.png" alt="ShapeBootstrap" title="ShapeBootstrap">
</div>
</div>
</div>
</footer><!--/#footer-->
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
Now adjust your other content pages according to theme, place sections of the theme on your pages that suits you :)
Let me know if anyone comes across any difficulty :)
try this:
'components' => [
'view' => [
'theme' => [
'pathMap' => ['#backend/views' => '#backend/themes/mytheme'],
'baseUrl' => '#backend/themes/mytheme',
],
],
],
just put all your view folder in themes\mytheme
Related
I am new to ext.js and I need some explaination.
I wanto to use the ext.js features in a base html, without any use of html tags
I put the ext.js script tags in the html and I created an Application.js file which I reference in the html itself and which contains a simple Ext.application (....) (taken from a sencha blog).
My question is, can I simply use ext.js by inserting the script libraries references in the html, or should I do something else beforehand ?
I saw the sencha cmd on the sencha site, but i suspect its just used to create the structre of the application itself , putting the right files in the right places.
Since I can't visualize anything (apart from a js "alert" which I put at the beginning to seeif i call the right file), what am I doing wrong ?
This is my html :
#{
ViewData["Title"] = "Home Page";
}
<link href='~/ExtJS/Content/Css/prova.css' rel='stylesheet' />
<link rel="stylesheet" href="~/ExtJs/Content/Css/ext-all.css" />
<link rel="stylesheet" href="~/ExtJs/Content/Css/ext-all-debug.css" />
<script src="~/ExtJS/Scripts/ext-all-dev.js"></script>
<script src="~/ExtJS/Scripts/ext-all.js"></script>
<script src="~/ExtJS/Scripts/ext-lang-it.js"></script>
<script src="~/ExtJS/Src/Application.js"></script>
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about building Web apps with ASP.NET Core.</p>
</div>
This is my MVC layout file :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - ExtJSApplication1</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
#*<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">ExtJSApplication1</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>*#
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - ExtJSApplication1 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
and this is my Application.js file :
alert('launch');
Ext.application({
launch: function () {
Ext.Viewport.add({
xtype: 'grid',
title: 'Users',
columns: [
{ text: 'Name', width: 100, dataIndex: 'name' },
{ text: 'Email Address', flex: 1, dataIndex: 'email' },
{ text: 'Phone Number', width: 200, dataIndex: 'phone' }
],
data: data,
listeners: {
select: onSelect
},
});
}
}
);
function onSelect(sender, record) {
var r = record[0].data;
var text = r.name + ' - ' + r.email + ' - ' + r.phone;
Ext.Msg.alert('Row Clicked', text);
};
var data = [
{ name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart#simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' }
]
If you are planning to add ExtJS as a library instead of using it as a framework, you should do a build of the ExtJS abb beforehand and include the build files into your html.
Framework Approach
Install Sencha CMD
Start Windows PowerShell (or command line on your system)
follow this documentation to generate a workspace and an app
Run sencha app build production
Use the index.html from the build
If you need additional sources you can add them into the app.json file, that way all is loaded into the html file using ExtJS.
Library Approach
same as above, but instead of using the ExtJS html...
copy the js file and the css files into your own html (folder)
how I did was:
use ExtJS gpl cdn. OR down load and store it locally
in extjs use renderTo: your_div_id ,// to render ext component on particular div
note: I have extjs license.
I am facing an issue. I have custom Module in which i am trying to load CSS and JS by AppAsset but its not loading.
In my Module i have layouts folder in which i am trying to access the appasset and registering the view but its not loading. Even the asset bundle shows that assests are being loaded
Tell me what i am doing wrong. The code is as follows
namespace app\assets;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/site.css',
'css/bootstrap-reset.css',
'css/style.css',
'css/style-responsive.css',
];
public $js = [
'js/jquery.js',
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}
my view file is as follows
<?php
use yii\helpers\Html;
use app\assets\AppAsset;
AppAsset::register($this);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="ThemeBucket">
<link rel="shortcut icon" href="images/favicon.png">
<?php $this->registerCsrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
<!--Core CSS -->
</head>
<body class="login-body">
<?php $this->beginBody() ?>
<?php $this->endBody() ?>
</body>
</html>
But the css is not loaded at all and i cant see any of the css which i defined in Asset Bundle
Function <?php $this->head() ?> just adds a placeholder where all head meta tags, styles, scripts must be placed.
When <?php $this->endPage() ?> is called it replaces placeholder with registered meta tags, styles, scripts, etc.
I had created a testasset.php as follows :
<?php
namespace app\assets;
use yii\web\AssetBundle;
class TestAsset extends AssetBundle {
/*public $basePath = '#webroot';
public $baseUrl = '#web'; */
public $sourcePath = '#app/assets';
public $css = [
'/css/test.css',
];
public $js = [];
public $depends = [
/* 'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset', */
];
}
In controller i am simply rendering view file which register above asset.
view :
<?php
use app\assets\TestAsset;
TestAsset::register($this);
$this->beginPage(); ?>
<html>
<head>
<title>Register JS and CSS</title> <?php
//Yii::$app->view->registerCssFile('/css/style.css');?>
<!-- <link rel="stylesheet" href="/css/test.css" type="text/css" /> -->
</head>
<body>
<div id="page">
<div id="logo">
<h1>Register JS and CSS Test</h1>
</div>
<div id="nav">
<ul>
<li>!</li>
<li>#</li>
<li>#</li>
</ul>
</div>
<div id="content">
<h2>Test</h2>
<p> XYZ...!!! </p>
<p> ABC...!!! </p>
</div>
<div id="footer">
<p> Webpage made by XYZ </p>
</div>
</div>
</body>
</html>
But my test.css file is not getting registered.
I had tried using basepath and baseurl as well and registerCss Yii2 function but with no success.
Anyone Please suggest where i am lacking in my code.
You need to add
<?php $this->head() ?>
preferably somewhere between <head> and </head> for the header asset files to be rendered.
Simply add this in view file
<?php
$this->registerCssFile('PATH_TO_FILE');
?>
I have had the same issue on one of my advanced application template projects.
I've compared my layout/main.php file with the same on the Yii2 advanced application template and found missing $this->endPage() at the end of file.
It was removed by mistake and without it no js, ccs assets worked.
I'm using html2pdf bundle to generate pdf File. I followed the documentation. The bundle works fine my pdf is generate. But the css is ignored. I've my css in an external file and bootstrap cdn. But there is not changes.
However I create a route to the view supposed to be converted in PDF, and the css works fine in the HTML view.
My controller :
public function invoicPdfAction($id){
$em = $this->getDoctrine()->getManager() ;
$invoic = $em->getRepository('EcommerceBundle:Orders')->findOneBy(
array(
'user' => $this->getUser(),
'validate' => 1,
'id' => $id
));
if(!$invoic){
$this->addFlash('danger', 'La facture n\'existe pas ');
return $this->redirect($this->generateUrl('_invoic_user'));
}
$html = $this->renderView('UsersBundle:Public:User/invoicPDF.html.twig', array('invoic'=>$invoic));
$html2pdf = $this->get('html2pdf_factory')->create();
$html2pdf->pdf->SetDisplayMode('real');
$html2pdf->pdf->setSubject('Facture : My E-Commerce');
$html2pdf->pdf->setTitle('Facture : n°'. $invoic->getReference());
$html2pdf->writeHTML($html);
$html2pdf->Output('invoic.pdf') ;
return new Response($html2pdf->Output('invoic.pdf'), 200, array('Content-Type' => 'application/pdf'));
}
My view invoicPDF.html.twig
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Facture</title>
<link rel="stylesheet" href="{{ asset('css/style_invoic.css') }}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahauwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<h1> Facture de la commande n° : {{ invoic.reference }} </h1>
</div>
....
</div>
</body>
</html>
config.yml
ensepar_html2pdf:
orientation: P
format: A4
lang: fr
unicode: true
encoding: UTF-8
margin: [10,15,10,15]
What I missed ?
Thanks in advance
html2pdf ignore the extern files
You must do write your css in your pdf thanks to : /* css */
I have a simple website, in which I've written the code that's about the header.
This is included in the index.html. Now that I want to add another .html file, how can I have the header related code, included into all the HTML files?
A simple copy paste will surely do the job, but is it a correct solution?
Developing in Ubuntu, using Sublime Text with H5BP and Compass.
I would use PHP:
// header.php
<?php
date_default_timezone_set('America/Los_Angeles');
function https(){
$sv = $_SERVER;
if(!isset($sv['HTTPS'])){
header("LOCATION:https://{$sv['SERVER_NAME']}{$sv['PHP_SELF']}"); die();
}
}
function http(){
$sv = $_SERVER;
if(isset($sv['HTTPS'])){
unset($_SERVER['HTTPS']);
header("LOCATION:http://{$sv['SERVER_NAME']}{$sv['PHP_SELF']}"); die();
}
}
$doc = "<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='keywords' content='put your site keywords here' />";
$main = " </head>
<body class='njs'>
<div id='head'>
<div id='menu'>
<nav class='tabs'>
<a href='index.php' id='hm'>Home</a>
<a href='page2.php' id='p2'>Page 2</a>
<a href='page3.php' id='p3'>Page 3</a>
<a href='page4.php' id='p4'>Page 4</a>
<a href='page5.php' id='p5'>Page 5</a>
<a href='page6.php' id='p6'>Page 6</a>
<a href='page7.php' id='p7'>Page 7</a>
</nav>
</div>
<div id='content'>";
?>
Now, put header.php in a restricted folder, in the same location as index.html for added security, then change index.html to index.php. Now index.php:
// index.php
<?php
include_once 'restricted/header.php'; http(); // could be https() for SSL
echo "$doc
<title>Whatever - Home</title>
<meta name='description' content='Whatever - Home' />
<style type='text/css'>
#import 'common.css'; #import 'index.css';
</style>
$main";
?>
<!-- put your content here -->
<!-- don't forget to close the `id='content'` div -->
</div>
</body>
</html>
You could also ajax to load in the header into the separate pages, if you didn't want to deal with php. Just have the header html in a separate file and do an ajax call on dom load and then apply the response to the container of the header in the page you are using.