←
→

CSS Selectors in questfox

Posted: 24. April 2021 | Author: | Filed under: Uncategorized |Leave a comment
  • There are two ways to affect the text layout of questfox projects

A) Definition of CSS on client area level (-> Branding)

B) Definition of CSS on project level (-> Project characteristics)

  • All text elements in questfox can be modified via CSS
  • There are certain CSS selectors for the various text elements in questfox
  • Some text elements share the same CSS selectors
  • Various properties can be applied
  • A typical questfox project with different question types and decision trees demands up to 16 different CSS selectors

How to format the text underneath indicating Imprint and Data Security Rules

CSS selector: .branding_sub_text
Effect: Defines the small branding text on the down right side of the project window
CSS code example
.branding_sub_text
{
color: #022D61;
font-size: 1.2em;
font-weight: bold;
text-align: left;
}

CSS for Analytic Hierarchy Process (AHP) / Decision Tree

The AHP is a very specific idea inside of questfox. Following the algorithms of Thomas L. Saaty we developed out own approach of how to ask questions in the pairwise way.

CSS selector: .ahp_context
Effect: Defines the title text of a decision tree question		CSS code example
.ahp_context
{
color: #022D61;
font-size: 1.2em;
font-weight: bold;
text-align: left;
}
.ahp_context
CSS selector: .ahp_contextDetail
Effect: Defines the description text underneath the title of a decision tree question		CSS code example
.ahp_context
{
color: #022D61;
font-size: 1.2em;
font-weight: bold;
text-align: left;
}
.ahp_contextDetail
CSS selector: .ahp_question
Effect: Defines the question text of a decision tree question		CSS code example
.ahp_question
{
color: #022D61;
font-size: 1.2em;
font-weight: bold;
text-align: left;
}
.ahp_question

CSS selector: .ahp_versusText
Effect: Defines the versus text of a decision tree question		CSS code example
.ahp_versusText
{
color: #022D61;
font-size: 1.2em;
font-weight: bold;
text-align: left;
}

.ahp_versusText
CSS Selectors #ahp_option_left #ahp_option_right
Effect: Defines the versus text of a decision tree question		CSS code example
#ahp_option_left
{
color: #1d537f;
font-size: 1.4em;
font-weight: bold;
text-align: right;
}
#ahp_option_right
{
color: #1d537f;
font-size: 1.4em;
font-weight: bold;
text-align: left;
}

Leave a comment

←
→