CODEWITHSUNDEEP
phphtmlcssyii2
atze de groot
atze de groot

Reputation: 53

Css and bootstrap in yii2

I'm quite new to Yii2 and I have created a layout page, but my CSS doesn't work fully. It only loads parts of it. Can somebody help me please?

My layout:

<?php
namespace app\views\layouts;

use yii\bootstrap\Alert;
use yii\bootstrap\ActiveForm;
use yii\helpers\Url;
use yii\helpers\Html;
use yii\bootstrap\NavBar;
use yii\bootstrap\Button;
use app\models\Search;
use yii\bootstrap\Nav;
use app\assets\AppAsset;
use app\models\LoginForm;
use yii\web\View;
use Yii;

AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!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="language" content="en" />
    <?= Html::csrfMetaTags() ?>
    <title><?php echo Html::encode($this->title); ?></title>

    <link rel="shortcut icon" href="<?php echo Yii::getAlias('@web/themes/dcu') ?>/assets/images/favicon.png" type="image/x-icon" />


     <link rel="stylesheet" type="text/css" href="<?php echo Yii::getAlias('@web'); ?>/themes/dcu/assets/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo Yii::getAlias('@web'); ?>/themes/dcu/assets/css/bootstrap-responsive.min.css" />
       <link rel="stylesheet" type="text/css" href="<?php echo Yii::getAlias('@web'); ?>/themes/dcu/assets/css/gbu.csss" />
        <link rel="stylesheet" type="text/css" href="<?php echo Yii::getAlias('@web'); ?>/themes/dcu/assets/css/font-awesome.css" />

<?php $this->head()?>
</head>
<body>
    <?php $this->beginBody() ?>
    <span class="striept"></span>
    <div id="wrap">
        <div class="container" id="page">
            <div class="row header">
                <div class="span7">
                    <a href=<?php Yii::$app->homeUrl ?>><img src="<?php echo Yii::getAlias('@web'); ?>/themes/dcu/assets/images/documentatiecentrum-urk.png" /></a>
                </div>
                <div class="span5 login-form">
                    <?php if (Yii::$app->user->isGuest): ?>
                        <div class="form">
                        </div>
                    <?php else: ?>
                        <ul class="inline">
                            <li>Je bent inlogd als: <?php echo Yii::$app->user->identity->username; ?> </li>
                            <li>
                            </li>
                        </ul>
                    <?php endif; ?>
                </div>
            </div>
            <div class="row">
                <div class="span12 zoeken">
                    <div class="input-append">

                    </div>
                </div>
            </div>

        </div>

        <div class="container-fluid dark topmargin">
            <div class="container">
                <div class="row">
                    <div class="span8">
                        <h3>Onze partners</h3>
                        <div class="row-fluid">
                            <div class="span4">

                            </div>
                            <div class="span4">

                            </div>
                            <div class="span4">

                            </div>
                        </div>
                    </div>
                    <div class="span4">
                        <div class="row-fluid">
                            <h3>Ook meehelpen?</h3>
                            <p>Met uw steun zorgt u er samen met ons voor dat ons grote cultuurbezit, 'oenze taol', blijft bestaan!</p><p>Steun ons project en doneer een bedrag op onze bankrekening: 11.40.24.820 Rabobank Urk. Bedankt voor uw hulp!</p>
                            <a class="btn btn-primary" href="https://www.justgiving.nl/nl/charities/83-stichting-%20urker-taol" target="_new">Direct doneren</a>
                            <a class="btn btn-primary" href="<?php echo Yii::$app->basePath; ?>donateursformulier.pdf" target="_new">Donateursformulier</a>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="span12 copyright">
                    </div>
                </div>
            </div>
        </div>
    </div>
   </body>
    <?php $this->endBody() ?>
</html>
<?php $this->endPage() ?>

I think the problem is the bootsrap, because all the other CSS files are all OK.

Upvotes: 0

Views: 3055

Answers (3)

vishuB
vishuB

Reputation: 4261

AssetBundle represents a collection of asset files, such as CSS, JS, etc.

An asset bundle can depend on other asset bundles. When registering an asset bundle with a view, all its dependent asset bundles will be automatically registered.

please refer below link

Yii2 AssetBundle API DOC

AssetBundle Example

First create one ThemeAsset AssetBundule.

<?php

    namespace app\assets;
    use yii\web\AssetBundle;

    class ThemeAsset extends AssetBundle
    {
        public $basePath = '@webroot';
        public $baseUrl = '@web';
        public $css = [
             '/themes/dcu/assets/css/bootstrap.css',
             '/themes/dcu/assets/css/bootstrap-responsive.min.css',
             '/themes/dcu/assets/css/gbu.css',
             '/themes/dcu/assets/css/font-awesome.css',
        ];
        public $js = [      
             .... 
             js file here
             .... 
        ];
        public $jsOptions = [
             ....
             js options here
             ....
        ];
        public $depends = [
             ....
             dependent asset bundles here
             eg: 'yii\bootstrap\BootstrapAsset'
             ....
        ];
    }
?>

Now register the ThemeAsset in your view file

<?php
   use app\assets\ThemeAsset;
   ThemeAsset::register($this);
?>

Upvotes: 2

vijay nathji
vijay nathji

Reputation: 1638

Use registerCssFile Concept 

$this->registerCssFile("http://example.com/css/themes/black-and-white.css", [
    'depends' => [BootstrapAsset::className()],
    'media' => 'print',
], 'css-print-theme');

Upvotes: 0

MacGyer
MacGyer

Reputation: 198

I would recommend creating an AssetBundle for your theme ("dcu") which requires all necessary files.

Look here for details on creating AssetBundles: Assets Key Concept and AssetBundle API doc

Upvotes: 0

Related Questions