Changing textcolor in Yii2 with material bootstrap library doesnt work

Question

I'm trying to change the color of texts or even the background of the footer (for example) but after add this library, everything is changed and i can't even change the color of a text.

This is my MaterialAsset:

<?php
/**
 * @link http://www.yiiframework.com/
 * @copyright Copyright (c) 2008 Yii Software LLC
 * @license http://www.yiiframework.com/license/
 */

namespace frontend\assets;

use yii\web\AssetBundle;

/**
 * @author Qiang Xue <qiang.xue@gmail.com>
 * @since 2.0
 */
class MaterialAsset extends AssetBundle
{
    public $sourcePath = '@themes/material';
    public $baseUrl = '@web';
    public $css = [
        'css/material.min.css',
        'css/material-fullpalette.min.css',
        'css/ripples.min.css',
        'css/roboto.min.css',
        'css/site.css',
    ];
    public $js = [
        'js/material.min.js',
        'js/ripples.min.js',
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

And i'm trying to use this in my site.css:

html,
.footer {
    height: 180px;
    background-color: #222222;
    border-top: 1px solid #eeeeee;
    padding-top: 20px;
}

.customtext {

    color: white;
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.wrap > .container {
    padding: 70px 15px 20px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings', fantasy;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

about this line or even that footer.

.customtext {

    color: white;
}

and after adding in my index:

<p class="text-success customtext">News</p>

But this doesn't work at all.

How can i change the color of this text or the footer color in this application?

Answer 1

If you can't in other way you can only try with an inline style like this

 <p style="color: white;">News</p>