2. PHPRunner General questions
  3. [SOLVED]  Custom CSS - For Grid Rows Background Color and font co
This topic is locked
[SOLVED]

 Custom CSS - For Grid Rows Background Color and font co

 		2/4/2020 5:26:38 AM
PHPRunner General questions
lefty author

I am using Slate - Bootstrap 3 and want to keep all formatting except the Grid color and font color. I can change it by entering the background and font in each cell but rather tedious for 20 pages and hundreds of cells.

Is there any way with custom css on each page , to change the whole Grid table class only ( background and font's ? ) using the custom css button in editor? Looked at examples but only shows how to change size of font, which

I tried to convert background and font color using same property , but seems don't work.
I believe .r-grid is correct although I also see in developer mode div.r-row as the correct element and r-gridrow but that does seems to get overridden as well and it is listed per row and each row has a different id.

I tried this for background but seems to get overridden by bootstrap class. I get a strike through for background color and font color in chrome developer but not if I change font size that works fine.
div.r-grid {

background:white !important;

}
Any ideas would be appreciated?
Admin 2/4/2020

div.r-grid can be too generic. Most likely you need to dig deeper specifying CSS for TABLE or TR or TD tags.
Check this:

https://www.youtube.com/watch?v=yFnD38oslIc
lefty author 2/4/2020



div.r-grid can be too generic. Most likely you need to dig deeper specifying CSS for TABLE or TR or TD tags.
Check this:

https://www.youtube....h?v=yFnD38oslIc


Yes that is as deep as you can go other than digging into the JavaScript - Bootstrap. It is between those tags and the inner most portion of the tags, actually in thevideo example is exactly the same as where I need to change but you can only change font size not background color or font color . These two properties are being inherited from somewhere else. I assume jquery bootstrap . It looks like I will unfortunately have to change themes. It's too bad as most of the other themes with white grid have white on left, color top or vice versa. Was looking to just change grid so guess it is not possible. Any idea when support for bootstrap 4 will be available?
Admin 2/5/2020

There are some many misconceptions here, I don't know where to start.

  1. Yes, you can dig deeper with CSS. Rewatch the video and find the correct CSS selectors to apply your changes to. Most likely you need to apply CSS to TABLE or to TR or to TD tags.
  2. There is no such thing as "jquery bootstrap". jQuery is a Javascript framework, Bootstrap is a CSS framework. These two have nothing in common.
    Initial CSS properties are set in the core Bootstrap code, overwritten in the selected theme CSS code and can be also overwritten in your Custom CSS, you just need to find correct CSS selectors.
lefty author 2/5/2020



There are some many misconceptions here, I don't know where to start.

  1. Yes, you can dig deeper with CSS. Rewatch the video and find the correct CSS selectors to apply your changes to. Most likely you need to apply CSS to TABLE or to TR or to TD tags.
  2. There is no such thing as "jquery bootstrap". jQuery is a Javascript framework, Bootstrap is a CSS framework. These two have nothing in common.
    Initial CSS properties are set in the core Bootstrap code, overwritten in the selected theme CSS code and can be also overwritten in your Custom CSS, you just need to find correct CSS selectors.


Yes I understand the jquery part I meant Javascript anyway not jquery , as it seemed like a .js file was interfering with my changes.
The video works fine for font-size but not for background color in the grid row .

Try it and you will see why. When you dig deeper in to the styles/boostrap/slate/small/style.CSS file ? The odd rows are changeable but not the even ones.





There was no even rows listed in the css file to even change so it has to be coming from somewhere else.


I went to Boostrap Customizer 3 and did a whole new theme with .Less theme ( installed as bootswatch ) and .Less variables for the grid and changed the grid to white. So It is solved although a lot of work just to get the grid white.

Excuse me for the jquery confusion as in developer mode it looked like a .js file was the culprit.
All set . Thanks