CodeIgniter Forums
CSS questions - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: General Help (https://forum.codeigniter.com/forumdisplay.php?fid=24)
+--- Thread: CSS questions (/showthread.php?tid=66063)

CSS questions - planteg - 08-30-2016

Hi,

I am new to PHP and CodeIgniter, I have quite a lot to learn  Smile.

I started using CSS, but I fell I can make better use. Here is what I am talking about:

Code:
           .row_col1{
              background-color: red;
              text-align: center;
              width: 200px;
              font-family: verdana;              
              color: black;
              font-size: xx-large;
              font-weight: bold;
           }

           .row_col2{
              background-color: yellow;
              text-align: center;
              width: 200px;
              font-family: verdana;
              color: black;
              font-size: xx-large;
              font-weight: bold;                
           }

           .row_col3{
               background-color: yellowgreen;
               text-align: center;
               width: 200px;
               font-family: verdana;
               color: black;
               font-size: xx-large;
               font-weight: bold;
           }  

As you can see, the only difference between the three is the color.

I would like to create only one style and add the color when I add rows, but that doesn't work unfortunately. I tried something like this:
Code:
$row1 = [
  'data' => 'Some text',
  'class' => 'row_without_color',
  'background-color' => 'yellow'
]

The generated code was like this:

... <class = 'row_without_color' background-color = yellow ...

Thing is the background-color was not applied.

What am I doing wrong ?

Thanks

RE: CSS questions - StratoKyke - 08-30-2016

<div class = "row_without_color" style="background-color = yellow; ..."></div>

RE: CSS questions - Joel Catantan - 08-30-2016

Try

$row1 = [
'data' => 'Some text',
'class' => 'row_without_color',
'style' => 'background-color: yellow;'
];

RE: CSS questions - Wouter60 - 08-30-2016

You can also try this:

Code:
.row_col1, .row_col2, .row_col3 {
  text-align: center;
  width: 200px;
  font-family: verdana;              
  color: black;
  font-size: xx-large;
  font-weight: bold;
}

.row_col1 { background-color: red; }
.row_col2 { background-color: yellow; }
.row_col3 { background-color: yellowgreen; }


RE: CSS questions - planteg - 08-31-2016

Hi Joel and Wouter60,

my mistake was:

Code:
$row1 = [
 'data' => 'Some text',
 'class' => 'row_without_color',
 'background-color' => 'yellow'      // CSS property
]

But that worked:

Code:
$row1 = [
 'data' => 'Some text',
 'class' => 'row_without_color',
 'bgcolor' => 'yellow'      // HTML property
]

Joel suggestion works fine also. This is what I implemented, because as far as I know it is recommended to use css (and css properties) over HTML.

Thanks

RE: CSS questions - Wouter60 - 08-31-2016

You can also combine multiple css classes, seperated by a space character.
E.g.

css file:
Code:
.row_without_color {
  text-align: center;
  width: 200px;
  font-family: verdana;              
  color: black;
  font-size: xx-large;
  font-weight: bold;
}

.row_red { background-color: red; }
.row_yellow { background-color: yellow; }
.row_yellowgreen { background-color: yellowgreen; }

controller (or view)
PHP Code:
$row1 = array(
  'data' => 'Some text',
  'class' => 'row_without_color row_yellow'
 ); 


RE: CSS questions - planteg - 08-31-2016

Wouter 60,

another interesting way to do it  Exclamation. I was wondering if it's possible to define row_red  as row_without_color plus the color, something like row_red  would inherit from row_without_color. I googled but didn't find something I can understand. I have questions about CSS like:
  • why the dot '.' before the name
  • why one sometime sees name_1 name_2 { ... }
Thanks

RE: CSS questions - Wouter60 - 08-31-2016

class = "row_without_color{space}row_red" combines the two!

The dot before the name tells css to define a class. You can use the name of the class to implement the corresponding style.
If you put a # before the name (in css), then you can assign the style to an element with that id. Keep in mind that you can only have one element with a unique id on a web page, where classes can be applied many times.

You can find tons of information about css here:
http://www.w3schools.com/css/default.asp

RE: CSS questions - Joel Catantan - 09-05-2016

(08-31-2016, 06:32 AM)planteg Wrote: Hi Joel and Wouter60,

my mistake was:

Code:
$row1 = [
 'data' => 'Some text',
 'class' => 'row_without_color',
 'background-color' => 'yellow'      // CSS property
]

But that worked:

Code:
$row1 = [
 'data' => 'Some text',
 'class' => 'row_without_color',
 'bgcolor' => 'yellow'      // HTML property
]

Joel suggestion works fine also. This is what I implemented, because as far as I know it is recommended to use css (and css properties) over HTML.

Thanks


Woah! That's nice. I don't have any idea about bgcolor attribute (it's because I'm more on backend Smile ). I googled bgcolor if it has a compatibility issue but seems that there is no problem of using it. It is very simple instead of using style="background~~" attribute. Thanks for the share!