Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Shading Array Headers

boshra.m
Topic Author
Offline
Premium Member

More

2 years 8 months ago - 2 years 8 months ago #228207 by boshra.m

Shading Array Headers was created by boshra.m

Please help us help you and fill where relevant:
Your LimeSurvey version: LimeSurvey Cloud Version 5.3.13
Own server or LimeSurvey hosting: LimeSurvey hosting
Survey theme/template: Fruity
==================
Hello,

I have used this in my custom.css:

.sub-header-row th { background-color: #547599; color: #FFFFFF !important; text-align: center; }

and I also tried this: <style type="text/css">.sub-header-row th { background-color: #547599; color: #FFFFFF !important; text-align: center; }
</style>

As I am trying to have the headers and subheaders of my array questions have a grey coloured background. I had used "grey" to replace 547599 also, and this did not work. I am wondering, what am I missing?

Thank you!

Last edit: 2 years 8 months ago by boshra.m.

Please Log in to join the conversation.

Joffm
Offline
LimeSurvey Community Team

More

2 years 8 months ago #228213 by Joffm

Replied by Joffm on topic Shading Array Headers

I had used "grey" to replace 547599 also, and this did not work.

Maybe because this color is named "gray"?

[url] www.w3schools.com/tags/ref_colornames.asp [/url]

Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

boshra.m
Topic Author
Offline
Premium Member

More

2 years 8 months ago - 2 years 8 months ago #228214 by boshra.m

Replied by boshra.m on topic Shading Array Headers

Hello,

But even if I use "gray" or any other html colour name (or #), the header background does not change colour at all.

Last edit: 2 years 8 months ago by boshra.m.

Please Log in to join the conversation.

Joffm
Offline
LimeSurvey Community Team

More

2 years 8 months ago #228218 by Joffm

Replied by Joffm on topic Shading Array Headers

As always recommended, use a webdevelopment tool to investigate the classes involved.

So the class is ".ls-heading"
Either you may color everything in the same color with

Code:

<style type="text/css">
  ls-heading {
  background-color:green;
  }
</style>

Or you distinguish between the parts like

Code:

<style type="text/css">
/* the left empty square */
  ls-heading td {
  background-color:green;
  }
/* the default header */
  ls-heading th {
  background-color:blue;
  }
/* the inserted header */
  ls-heading th.inserted-header {
  background-color:yellow;
  }
 
</style>

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

Joffm
Offline
LimeSurvey Community Team

More

2 years 8 months ago #228219 by Joffm

Replied by Joffm on topic Shading Array Headers

Hm, the editor has its own will, as often.

Either

Code:

<style type="text/css">
.ls-heading {
  background-color:green;
  }
</style>

Or

Code:

<style type="text/css">
.ls-heading td {
  background-color:green;
  }
.ls-heading th {
  background-color:blue;
  }
.ls-heading th.inserted-header {
  background-color:yellow;
  }
</style>

Joffm

/* the left empty square */
.ls-heading td {
background-color:green;
}
/* the default header */
.ls-heading th {
background-color:blue;
}
/* the inserted header */
.ls-heading th.inserted-header {
background-color:yellow;
}

Volunteers are not paid.
Not because they are worthless, but because they are priceless

The following user(s) said Thank You: boshra.m

Please Log in to join the conversation.

boshra.m
Topic Author
Offline
Premium Member

More

2 years 8 months ago #228223 by boshra.m

Replied by boshra.m on topic Shading Array Headers

Hi Joffm,

Ah okay, I see - this works great. Thank you very much. I have another subquestion:

With the image I attached, the lines (or borders) that separate the columns and rows get hidden by the background colour. Would the only solution be to lighten the shade of the background colour of my choice or is there an alternative way to ensure that there is no "blend"?

I hope I am making sense.

Thank you again.

The following user(s) said Thank You: Joffm

Please Log in to join the conversation.

Joffm
Offline
LimeSurvey Community Team

More

2 years 8 months ago #228224 by Joffm

Replied by Joffm on topic Shading Array Headers

Hm,
if you set the color of the background to the same or nearly the same as the borders, you won't see them.
Obviously you have to change one of the colors, either the background or the borders

Volunteers are not paid.
Not because they are worthless, but because they are priceless

The following user(s) said Thank You: boshra.m

Please Log in to join the conversation.

boshra.m
Topic Author
Offline
Premium Member

More

2 years 8 months ago #228232 by boshra.m

Replied by boshra.m on topic Shading Array Headers

Makes sense. And how would I go about thickening and/or changing the colours of the borders?

Please Log in to join the conversation.

Joffm
Offline
LimeSurvey Community Team

More

2 years 8 months ago #228269 by Joffm

Replied by Joffm on topic Shading Array Headers

Set the background for all parts separately

Code:

<style type="text/css">
.ls-heading th, .ls-heading td , .ls-heading th.inserted-header {
background-color: xxx;
border: yyy !important;
</style>

And to address the left upper border, add

Code:

.table-bordered {
    border-top: yyy !important;
}

xxx and yyy: your desired values.

Volunteers are not paid.
Not because they are worthless, but because they are priceless

The following user(s) said Thank You: boshra.m

Please Log in to join the conversation.

Moderators: holch, tpartner

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

Shading Array Headers

Lime-years ahead

Legal

About Us

Open Source