i'm newbie to yii & i'm trying to install booster as well described in the home page but without sucess.
the extension works, i generated CRUDs using 'bootstrap.gii' but i steel having the classic blueprint theme. there is my view output :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="language" content="en" />
<!-- blueprint CSS framework -->
<link rel="stylesheet" type="text/css" href="/thouraya_booster/css/screen.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="/thouraya_booster/css/print.css" media="print" />
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="/thouraya_booster/css/ie.css" media="screen, projection" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="/thouraya_booster/css/main.css" />
<link rel="stylesheet" type="text/css" href="/thouraya_booster/css/form.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="/thouraya_booster/assets/b50f179f/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/thouraya_booster/assets/b50f179f/css/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="/thouraya_booster/assets/b50f179f/css/bootstrap-yii.css" />
<link rel="stylesheet" type="text/css" href="/thouraya_booster/assets/b50f179f/css/jquery-ui-bootstrap.css" />
<script type="text/javascript" src="/thouraya_booster/assets/f74bdb93/jquery.js"></script>
<script type="text/javascript" src="/thouraya_booster/assets/b50f179f/js/bootstrap.bootbox.min.js"></script>
<script type="text/javascript" src="/thouraya_booster/assets/b50f179f/js/bootstrap.js"></script>
<title>My Web Application</title>
</head>
i tried to add manually the bootsrtap theme as it use to be with chris's bootstrap extention but i'm getting this error message Bootstrap and its behaviors do not have a method or closure named "register".
i tried to manually modify the layouts/main.php exchanging the blueprint loading css by <?php echo Yii::app()->bootstrap->registerCoreCss(); ?> but it dosn't work
i even tried a chmod777 for if access is denied to some css file and the extension is then replacing it by the yii's default one.
here is how my config file looks like:
...
// preloading 'log' component
'preload'=>array(
'log',
'bootstrap',
),
// autoloading model and component classes
'import'=>array(
'application.models.*',
'application.components.*',
),
'modules'=>array(
'gii'=>array(
'class'=>'system.gii.GiiModule',
'password'=>'root',
// If removed, Gii defaults to localhost only. Edit carefully to taste.
'ipFilters'=>array('127.0.0.1','::1'),
'generatorPaths' => array(
'bootstrap.gii'
),
),
),
// application components
'components'=>array(
'bootstrap' => array(
'class' => 'ext.bootstrap.components.Bootstrap',
'responsiveCss' => true,
),
...
I don't know if i'm missing something somewhere.
I had the exact same problem, here is how I solved it:
I created a new clean webapp (using yiic webapp) and installed YiiBooster as you have
Get YiiBoilerplate and unzip it somewhere
Go to {unzipped}backend/views/layouts/ and grab main.php, column1.php and column2.php
create a new theme in your webapp under the /themes folder (I called it 'booster')
Copy the three files from (3) into themes/booster/views/layouts
In your main.php add 'theme' => 'booster' as a top-level entry of the array (I put it first)
P.S. Love your Avatar...
In file views/layouts/main.php delete in HEAD Yii::app()->bootstrap->register();
I got simpler, step-by-step method:
Extract yiibooster to extensions folder and rename the folder into "yiibooster"
Add the following code in /protected/config/main.php
Yii::setPathOfAlias('booster', dirname(__FILE__) . DIRECTORY_SEPARATOR . '../extensions/yiibooster');
Still in the /protected/config/main.php components add:
'bootstrap' => array(
'class' => 'booster.components.Bootstrap',
),
In any controller I want to use YiiBooster widgets, just put the following code:
public function filters()
{
return array(
array('booster.filters.BootstrapFilter - delete')
);
}
And thats it! Now Try to put some button in your view, for example:
$this->widget(
'booster.widgets.TbButton',
array(
'label' => 'Primary',
'context' => 'primary',
)
);
Trust me, this really works. I've applied it to my project.
Source:
http://www.yiiframework.com/forum/index.php/topic/52918-yiibooster-installation-steps/
Related
I'm trying to decrease the bundle size of my Vue project, which scaffolded by the vue-cli, by using CDN of firebase, Vue, and Vuetify.
So, I've added links of these CDN in public/index.html as follow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>magiclabel</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.css" />
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but t4v4 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Add config.externals to vue.config.js as follow:
module.exports = {
"transpileDependencies": [
"vuetify"
],
chainWebpack: (config) => {
config.externals({
firebase: 'firebase',
'firebase/auth': 'firebase',
firebaseui: 'firebaseui',
vue: 'Vue',
vuetify: 'Vuetify',
'vuetify/lib': 'Vuetify',
})
}
}
Then, the report.html created by issueing yarn build --report indicated that the Vuetify is still in the bundle even other firebase and Vue is going away as follow:
Is there any wrong or insufficient steps?
If you are using vuetify from vue-cli-plugin-vuetify (vue add vuetify), treeshaking and auto component import is enabled by default, by using vuetify-loader.
If you look into the source code of vue-cli-plugin-vuetify, it only uses vuetify-loader if it is present in your package.json. So removing vuetify-loader from package.json should disable this behavior.
I have this PDO object called "dbv". I initialize it in my config.php included file. It gives the error:
"Fatal error : Call to a member function prepare() on null".
After a few refreshes, it also said:
"Notice: Undefined variable: dbv"
But it would not say something like
"failed to open stream config.php"
If I cut all inside the config.php file and paste it directly above my $dbv->prepare() function, inside drawHeader() from sections.php, it works fine.
How can I make it work initializing my PDO inside config.php?
I have 3 files:
php/config.php (where I initialize the PDO)
php/sections.php (where I have my drawHeader() with the pdo->prepare() function that fails)
main.php (my main page that I open in the browser)
Here is my code:
config.php:
<?php
$database="dbname";
$username="dbuser";
$password="dbpass";
$dbv=new PDO("mysql:host=localhost;port=3308;dbname=".$database,$username,$password);
?>
sections.php:
<?php
function drawHeader() {
if (!isset($_SESSION["LIMBA"])) {
$_SESSION["LIMBA"]="ro";
}
$limba=$_SESSION["LIMBA"];
echo '
<!DOCTYPE html>
<html lang="'.$limba.'">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>My title</title>';
$query="SELECT * FROM pagini_statice WHERE URL=?";
$stmt=$dbv->prepare($query);
$stmt->bindValue(1, $_SESSION['URL']);;
$stmt->execute();
$pag=$stmt->fetch();
echo $pag["CSS"];
//the rest of the code .....
main.php:
<?php
include("php/config.php");
include_once("php/sections.php");
session_start();
$_SESSION["URL"]="pagina.php";
drawHeader();
drawFooter();
?>
You need to require/include the config.php file, like:
<?php
require_once 'your/path/to/config.php';
function drawHeader() {
if (!isset($_SESSION["LIMBA"])) {
$_SESSION["LIMBA"]="ro";
}
$limba=$_SESSION["LIMBA"];
echo '
<!DOCTYPE html>
<html lang="'.$limba.'">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>My title</title>';
$query="SELECT * FROM pagini_statice WHERE URL=?";
$stmt=$dbv->prepare($query);
$stmt->bindValue(1, $_SESSION['URL']);;
$stmt->execute();
$pag=$stmt->fetch();
echo $pag["CSS"];
While trying to use Twilio TaskRouter JS SDK on Vue JS, that you have load through CDN.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://sdk.twilio.com/js/taskrouter/v1.21/taskrouter.min.js" integrity="sha384-5fq+0qjayReAreRyHy38VpD3Gr9R2OYIzonwIkoGI4M9dhfKW6RWeRnZjfwSrpN8" crossorigin="anonymous"></script>
</body>
</html>
I want to init my worker like this:
export const initWorker = (token) => {
return new Twilio.TaskRouter.Worker(token);
}
but it's giving me this error: 'Twilio' is not defined. but it's actually working and returning the Worker object. is there way to ignore or to say Vue js that I'm expecting Twilio?
Found a fix, you have to tell eslint that you'll have this as global, there are two ways to go:
add this before your variable call:
/* global Twilio */
or edit your eslint config:
'globals': {
'Twilio': 'readable'
},
I think a lot of you know about twitter-bootstrap which makes it so easy to design "pretty" websites. I'm recently developing a JSF web application in Netbeans.
Everything except of the glyphicons.
In the header part of your website you will include bootstrap via
<h:outputStylesheet library="css" name="bootstrap.min.css"></h:outputStylesheet>
if you use jsf or
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.min.css"/>
if don't use jsf.
The weird think is that the glyphicons are empty squares like in this question:
Glyphicons rendering as empty box
I already checked with view-source with my browser and both rendered CSS have the same content.
<head id="j_idt2">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="/WWHY/faces/javax.faces.resource/bootstrap.min.css?ln=css" />
<link type="text/css" rel="stylesheet" href="/WWHY/faces/javax.faces.resource/styles.css?ln=css" />
<title>WWHY IT Support Center</title>
<script src="resources/js/ie-emulation-modes-warning.js"></script>
</head>
Maybe you guys know why doesn't work for the glyphicons.
Thanks !
Most likely the same as with font-awesome. Check How to use Font Awesome from webjars.org with JSF
Although in th FA case there already was a jsf specific css
I feel a little obscure in understanding the Guide to install spree_bootstrap_theme (https://github.com/Andrewmp1/spree_bootstrap_theme) . Do you have any suggesions for me? Thanks a lot!
Below is what I have done:
Create a new sandbox for spree.
Add to Gemfile:
gem 'spree_bootstrap_theme', :git => 'git://github.com/Andrewmp1/spree_bootstrap_theme.git'
Rename application.css inside stylesheets to application.css.scss
Create a new file: bootstrap_and_overrides.css.scss inside stylesheets folder.
Add to bootstrap_and_overrides.css.scss this below line:
#import 'store/spree_bootstrap_theme';
Open application.js, add:
//= require bootstrap
Run rails server
Result I received: http://imageshack.us/f/405/spreet.png/
As you can see, the layout was broken.
I view source the file and do not see anything about bootstrap. What I got is here:
<meta content="Spree demo site" name="description" />
<link href="/assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link href="/assets/normalize.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/skeleton.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/store/screen.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/store/spree_core.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/store/spree_promo.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/store/all.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<meta content="authenticity_token" name="csrf-param" />
<meta content="BoSR3FtvQBjqF68s7amtXGMVypmaW68e7tHhRzYvqzw=" name="csrf-token" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.validate/jquery.validate.min.js?body=1" type="text/javascript"> </script>
<script src="/assets/store/checkout.js?body=1" type="text/javascript"></script>
<script src="/assets/store/product.js?body=1" type="text/javascript"></script>
<script src="/assets/store/cart.js?body=1" type="text/javascript"></script>
<script src="/assets/store/spree_core.js?body=1" type="text/javascript"></script>
<script src="/assets/store/spree_promo.js?body=1" type="text/javascript"></script>
<script src="/assets/store/all.js?body=1" type="text/javascript"></script>
I TRIED TO ADD gem 'bootstrap-sass' to the Gemfile too but the result in both case is THE SAME as above.
I've just created a file, inside stylesheets/store, named "spree_bootstrap.scss" with the content:
#import 'store/spree_bootstrap_theme'
After that, i removed the code below from stylesheets/store/all.css
*= require store/spree_core
*= require store/spree_promo
And the same for javascripts/store/all.js:
//= require store/spree_core
//= require store/spree_promo
And i included the following, in javascripts/store/all.js::
//= require bootstrap
Start your server and you'll see the correct style of spree_bootstrap_theme.
I think you should not rename application.css to application.css.scss . The file application.css is a special purpose file . Here you can read about its format and syntax .