Как вставить цвета в строки и столбцы

Я работаю над фрагментом кода, который отображает таблицу, которая показывает различные данные о наркотиках. У меня есть система цветовой кодировки, красный = опасность, желтый = предупреждение, зеленый = безопасно.

Однако я не доволен цветами, которые я использую. Есть ли способ вставить более яркие цвета в этот код ниже?

  <?php $row_class = "";
while($row = mysql_fetch_assoc($dbResult1))
{
if($row['total_mai'] <= 2)
$row_class = "success";
else if($row['total_mai'] >= 5)
$row_class = "danger";
else if($row['total_mai'] >= 3 and $row['total_mai'] < 5)
$row_class = "warning";

// echo $row_class;
?>

2

Решение

Цвета на самом деле не в вашем коде здесь. цвета определены в классах в вашем CSS. Где-то в заголовке вашего файла вам нужно найти ссылку на файл CSS:

<link rel="stylesheet" type="text/css" href="mystyle.css">

Это также может быть на фактической странице HTML между <style> теги.

<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

Хотя там будет много, вы, вероятно, ищете разделы, которые выглядят примерно так:

.success {
color: green;
}

.danger {
color: red;
}
.warning {
color: yellow;
}

Также может быть определено много других атрибутов, но .word «селектор» говорит браузеру визуализировать цвета текста с этими классами, которые вы добавляете. Чтобы изменить цвета, измените атрибуты. Возможно, вы не видите названия цветов выше. Вы могли видеть шестнадцатеричные цвета (что-то вроде #d0e4fe;). Страница W3Schools в CSS хорошее место для начала. У них также есть хороший цветовой эталон для имен цветов:
введите описание изображения здесь

Есть и другие способы, которыми CSS может ссылаться на классы, поэтому вы можете посмотреть учебник по Селекторы. Например, они могут использовать tr.danger { ... } ссылаться только на классы опасности, которые применяются к строкам таблицы.

При использовании Bootstrap

Тогда я не эксперт, поэтому я могу только сильно помочь, но Bootstrap заранее определил некоторые из этих стилей для вас. Вы можете создавать новые классы и использовать !important переопределить классы новыми цветами. Важно, что это может сбить с толку, так как это «не имеет значения» для предыдущего CSS, но вам это нужно здесь, если начальная загрузка применяет фон к ячейкам индивидуально. Я только что нашел код на другой ответ здесь о том, как сделать это в Bootstrap:

.table tbody tr > td.success {
background-color: #dff0d8 !important;
}

.table tbody tr > td.error {
background-color: #f2dede !important;
}

.table tbody tr > td.warning {
background-color: #fcf8e3 !important;
}

.table tbody tr > td.info {
background-color: #d9edf7 !important;
}

.table-hover tbody tr:hover > td.success {
background-color: #d0e9c6 !important;
}

.table-hover tbody tr:hover > td.error {
background-color: #ebcccc !important;
}

.table-hover tbody tr:hover > td.warning {
background-color: #faf2cc !important;
}

.table-hover tbody tr:hover > td.info {
background-color: #c4e3f3 !important;
}

Желательно, чтобы это было в вашем собственном файле CSS. Если вы начнете изменять файл Bootstrap css, он может расстроиться, если вам потребуется обновить Bootstrap до новой версии. «Важно» заботится о том, чтобы ваши настройки были более, ну … важными.

Вы также можете использовать ссылки, которые я добавил выше, чтобы узнать, как создавать свои собственные классы, а затем добавлять свои собственные классы вместо Bootstraps.

3

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector