CSS - Login Info Color

Hello,

I am using the standard Outsystems Web UI, but for the Header I have reversed the colours: instead of the standard dark text on a white background, I have white text on a dark background and a third colour for hover, active link, etc.

I am having trouble changing the colour of the text and icons I am using in the LoginInfo area (right portion of the Header) to white without losing the third colour I'm using for hover.  I did this by changing the style properties of the LoginInfo elements, but this has overriden the properties for the hover, etc.

What CSS customisations do I need to use on the application theme style sheet ?

Cheers, Richard

Hi Richard,

You can override base css of Standard Outsystem Web UI-

Look if header class is -


.header-bar-top {

    background-color: #e32501 !important;

}

so you can change more css accroding to you.

Hope this will help.


Thank

Rahul Sahu


Hi Richard,

If you use the Styles tab to set inline style properties, classes can't override these inline properties since inline styles get priority over anything specified in classes. This means that you can't have both a color in the Style tab and a color in a class with :hover, since the inline style color set in the Style tab will still take priority. To solve it, you have to create a new class, attach it to the element, and remove the changes you've made in the Style tab.

You can use this <new class name> class below for the entire header at once if you like, since this way only links get the hover properties. If you want to use it on the link element only, it needs to be set to any parent element for it to work (at least one container above the actual link element you want to change). You can also set the :hover directly after the new class name (remove the ' a') to use it on the same element you set the class on.


<new class name> ,

<new class name>  a {

   color: <white color>;

}

<new class name> a:hover,

<new class name> a:visited {

   color: <third color>;

}


(You only need to set the actual class name (<new class name>) in the Style Classes property.)

Monique de Vos wrote:

Hi Richard,

If you use the Styles tab to set inline style properties, classes can't override these inline properties since inline styles get priority over anything specified in classes. This means that you can't have both a color in the Style tab and a color in a class with :hover, since the inline style color set in the Style tab will still take priority. To solve it, you have to create a new class, attach it to the element, and remove the changes you've made in the Style tab.

You can use this <new class name> class below for the entire header at once if you like, since this way only links get the hover properties. If you want to use it on the link element only, it needs to be set to any parent element for it to work (at least one container above the actual link element you want to change). You can also set the :hover directly after the new class name (remove the ' a') to use it on the same element you set the class on.


<new class name> ,

<new class name>  a {

   color: <white color>;

}

<new class name> a:hover,

<new class name> a:visited {

   color: <third color>;

}


(You only need to set the actual class name (<new class name>) in the Style Classes property.)

Hi Monique,

Thanks so much for your help, I'm a real novice when it comes to CSS.  I have a few questions:

1.  Should there be a period ('.') before the name of the new class when defining it in the style tab ?

2.  I came across ' a' in one of the online courses, but it's usage was not explained.  Please can you explain its purpose for me ?

3.  What is ' a:visited' used for ?

Cheers, Richard.


Hi Richard,

look below details-

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}


And also follow this link

https://www.w3schools.com/css/default.asp


Hope this will help more.

Kind regard,

Rahul

@Rahul please don't take this the wrong way, but you keep posting code and links with little to no context or additional explanations, which is not very helpful to the person who's asking the question. You should really take the time to better understand what's being asked and to make your answers a bit more complete and comprehensive.

@Richard:

  1. Yes. When you define a class in a stylesheet file, the class name should always be preceded by a ".".
  2. "a" in this context refers to the <a> HTML element, which is basically a link. So if you use something like ".className a { }" in your CSS, you're specifying the style that should be applied to an <a> element that occurs inside another element that has the "className" class. Something like this:
    <div class="className">
        <a></a>
    </div>
  3. "a:visited" is used to specify the style that should be applied to links that have already been visited by the user. So you could, for instance, apply a different text color to links that have already been visited.

Aurelio Junior wrote:

@Rahul please don't take this the wrong way, but you keep posting code and links with little to no context or additional explanations, which is not very helpful to the person who's asking the question. You should really take the time to better understand what's being asked and to make your answers a bit more complete and comprehensive.

@Richard:

  1. Yes. When you define a class in a stylesheet file, the class name should always be preceded by a ".".
  2. "a" in this context refers to the <a> HTML element, which is basically a link. So if you use something like ".className a { }" in your CSS, you're specifying the style that should be applied to an <a> element that occurs inside another element that has the "className" class. Something like this:
    <div class="className">
        <a></a>
    </div>
  3. "a:visited" is used to specify the style that should be applied to links that have already been visited by the user. So you could, for instance, apply a different text color to links that have already been visited.

Thanks Aurelio, I appreciate the time you have taken to explain this.

Cheers, Richard.


Rahul Sahu wrote:

Hi Richard,

look below details-

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}


And also follow this link

https://www.w3schools.com/css/default.asp


Hope this will help more.

Kind regard,

Rahul

Hi Rahul,

After Aurelio provided a bit of context, I now understand your reply better.  Thank you for taking the time to help me.

Cheers, Richard.


Solution

Richard Pearce wrote:

Monique de Vos wrote:

Hi Richard,

If you use the Styles tab to set inline style properties, classes can't override these inline properties since inline styles get priority over anything specified in classes. This means that you can't have both a color in the Style tab and a color in a class with :hover, since the inline style color set in the Style tab will still take priority. To solve it, you have to create a new class, attach it to the element, and remove the changes you've made in the Style tab.

You can use this <new class name> class below for the entire header at once if you like, since this way only links get the hover properties. If you want to use it on the link element only, it needs to be set to any parent element for it to work (at least one container above the actual link element you want to change). You can also set the :hover directly after the new class name (remove the ' a') to use it on the same element you set the class on.


<new class name> ,

<new class name>  a {

   color: <white color>;

}

<new class name> a:hover,

<new class name> a:visited {

   color: <third color>;

}


(You only need to set the actual class name (<new class name>) in the Style Classes property.)

Hi Monique,

Thanks so much for your help, I'm a real novice when it comes to CSS.  I have a few questions:

1.  Should there be a period ('.') before the name of the new class when defining it in the style tab ?

2.  I came across ' a' in one of the online courses, but it's usage was not explained.  Please can you explain its purpose for me ?

3.  What is ' a:visited' used for ?

Cheers, Richard.


What Aurelio said is true, maybe except for a small misread on point 1. Some more context:

1. A stylesheet declaration with a period refers to a class which has to be added to an element explicitly, while a stylesheet declaration without a period refers to the HTML element with that name. So elements like 'body', 'a' etc. are written without a period ( body{ }, a{ } ), and classes like '.Menu_TopMenu' or your new class have periods before them in a stylesheet ( .Menu_TopMenu{ }, .myClass{ } ). 

However, in the actual HTML document that references the stylesheet, there are no periods before the class names and the elements are within <> brackets. You'll see references to style classes like this in the HTML document: <a class="myClass">link</a> (notice the lack of point). As far as I understand it, writing a Style Class name either in the Style tab or in the Properties tab puts the class into the HTML document and into the relevant generated element and therefore does not need a period, while declaring them in the stylesheet does.

2. An 'a' refers to the <a> element in HTML (no period, see 1), which is a link element. There's a lot more of those that are nice to use in CSS once in a while, so for more information on the different HTML elements, you can check out https://www.learn-html.org/en/Basic_Elements .

.myClass a:hover { } basically means 'for all <a> (link) elements that exist within the element that has the myClass class, if the hover condition applies, apply the following: { }'. You can stack multiple classes like that however you like, for example '.header .Menu_TopMenu { }' ('apply { } to every element that has the Menu_TopMenu class that exists within an element with the header class'). 

Bonus: the more you stack these in your stylesheet, the more priority the CSS rule will have over others (specificity). It's a good thing to know so you have a quick and relatively easy alternative to using the !important override.

3. :hover, :active, and :visited refer to hover, active, and visited before states of an element or link. :visited is link-only, but the :hover and :active pseudo-classes can be used on all elements. 

After reading the question, I see I messed up a bit in the example, both by the order they should be in and by misreading your question. What you wanted was this: 

.myClass ,

.myClass a {

   color: white;

}

.myClass a:hover,

.myClass a:active {

   color: blue;

}


I wrote it as a refresher for myself, too, so hopefully it didn't sound condescending. Hope it helps you on your way!

Solution

Monique de Vos wrote:

Richard Pearce wrote:

Monique de Vos wrote:

Hi Richard,

If you use the Styles tab to set inline style properties, classes can't override these inline properties since inline styles get priority over anything specified in classes. This means that you can't have both a color in the Style tab and a color in a class with :hover, since the inline style color set in the Style tab will still take priority. To solve it, you have to create a new class, attach it to the element, and remove the changes you've made in the Style tab.

You can use this <new class name> class below for the entire header at once if you like, since this way only links get the hover properties. If you want to use it on the link element only, it needs to be set to any parent element for it to work (at least one container above the actual link element you want to change). You can also set the :hover directly after the new class name (remove the ' a') to use it on the same element you set the class on.


<new class name> ,

<new class name>  a {

   color: <white color>;

}

<new class name> a:hover,

<new class name> a:visited {

   color: <third color>;

}


(You only need to set the actual class name (<new class name>) in the Style Classes property.)

Hi Monique,

Thanks so much for your help, I'm a real novice when it comes to CSS.  I have a few questions:

1.  Should there be a period ('.') before the name of the new class when defining it in the style tab ?

2.  I came across ' a' in one of the online courses, but it's usage was not explained.  Please can you explain its purpose for me ?

3.  What is ' a:visited' used for ?

Cheers, Richard.


What Aurelio said is true, maybe except for a small misread on point 1. Some more context:

1. A stylesheet declaration with a period refers to a class which has to be added to an element explicitly, while a stylesheet declaration without a period refers to the HTML element with that name. So elements like 'body', 'a' etc. are written without a period ( body{ }, a{ } ), and classes like '.Menu_TopMenu' or your new class have periods before them in a stylesheet ( .Menu_TopMenu{ }, .myClass{ } ). 

However, in the actual HTML document that references the stylesheet, there are no periods before the class names and the elements are within <> brackets. You'll see references to style classes like this in the HTML document: <a class="myClass">link</a> (notice the lack of point). As far as I understand it, writing a Style Class name either in the Style tab or in the Properties tab puts the class into the HTML document and into the relevant generated element and therefore does not need a period, while declaring them in the stylesheet does.

2. An 'a' refers to the <a> element in HTML (no period, see 1), which is a link element. There's a lot more of those that are nice to use in CSS once in a while, so for more information on the different HTML elements, you can check out https://www.learn-html.org/en/Basic_Elements .

.myClass a:hover { } basically means 'for all <a> (link) elements that exist within the element that has the myClass class, if the hover condition applies, apply the following: { }'. You can stack multiple classes like that however you like, for example '.header .Menu_TopMenu { }' ('apply { } to every element that has the Menu_TopMenu class that exists within an element with the header class'). 

Bonus: the more you stack these in your stylesheet, the more priority the CSS rule will have over others (specificity). It's a good thing to know so you have a quick and relatively easy alternative to using the !important override.

3. :hover, :active, and :visited refer to hover, active, and visited before states of an element or link. :visited is link-only, but the :hover and :active pseudo-classes can be used on all elements. 

After reading the question, I see I messed up a bit in the example, both by the order they should be in and by misreading your question. What you wanted was this: 

.myClass ,

.myClass a {

   color: white;

}

.myClass a:hover,

.myClass a:active {

   color: blue;

}


I wrote it as a refresher for myself, too, so hopefully it didn't sound condescending. Hope it helps you on your way!

Hi Monique,

Awesome !  I'm learning a lot about the basics of CSS in a very short time.  A couple more questions if I may:

1.  How do I work out what classes (e.g. .header .Menu_TopMenu) are being used on the standard web UI and where ?  Is there a list somewhere because it appears very difficult to work out just by looking at the properties and style tabs for the elements ?

2.  On balance is it better to customise the standard classes (e.g. .header .Menu_TopMenu) within the application style sheet, or is it better to leave them as they are and define my own style classes and apply them where required ?

Cheers, Richard


Richard Pearce wrote:

Monique de Vos wrote:

Richard Pearce wrote:

Monique de Vos wrote:

Hi Richard,

If you use the Styles tab to set inline style properties, classes can't override these inline properties since inline styles get priority over anything specified in classes. This means that you can't have both a color in the Style tab and a color in a class with :hover, since the inline style color set in the Style tab will still take priority. To solve it, you have to create a new class, attach it to the element, and remove the changes you've made in the Style tab.

You can use this <new class name> class below for the entire header at once if you like, since this way only links get the hover properties. If you want to use it on the link element only, it needs to be set to any parent element for it to work (at least one container above the actual link element you want to change). You can also set the :hover directly after the new class name (remove the ' a') to use it on the same element you set the class on.


<new class name> ,

<new class name>  a {

   color: <white color>;

}

<new class name> a:hover,

<new class name> a:visited {

   color: <third color>;

}


(You only need to set the actual class name (<new class name>) in the Style Classes property.)

Hi Monique,

Thanks so much for your help, I'm a real novice when it comes to CSS.  I have a few questions:

1.  Should there be a period ('.') before the name of the new class when defining it in the style tab ?

2.  I came across ' a' in one of the online courses, but it's usage was not explained.  Please can you explain its purpose for me ?

3.  What is ' a:visited' used for ?

Cheers, Richard.


What Aurelio said is true, maybe except for a small misread on point 1. Some more context:

1. A stylesheet declaration with a period refers to a class which has to be added to an element explicitly, while a stylesheet declaration without a period refers to the HTML element with that name. So elements like 'body', 'a' etc. are written without a period ( body{ }, a{ } ), and classes like '.Menu_TopMenu' or your new class have periods before them in a stylesheet ( .Menu_TopMenu{ }, .myClass{ } ). 

However, in the actual HTML document that references the stylesheet, there are no periods before the class names and the elements are within <> brackets. You'll see references to style classes like this in the HTML document: <a class="myClass">link</a> (notice the lack of point). As far as I understand it, writing a Style Class name either in the Style tab or in the Properties tab puts the class into the HTML document and into the relevant generated element and therefore does not need a period, while declaring them in the stylesheet does.

2. An 'a' refers to the <a> element in HTML (no period, see 1), which is a link element. There's a lot more of those that are nice to use in CSS once in a while, so for more information on the different HTML elements, you can check out https://www.learn-html.org/en/Basic_Elements .

.myClass a:hover { } basically means 'for all <a> (link) elements that exist within the element that has the myClass class, if the hover condition applies, apply the following: { }'. You can stack multiple classes like that however you like, for example '.header .Menu_TopMenu { }' ('apply { } to every element that has the Menu_TopMenu class that exists within an element with the header class'). 

Bonus: the more you stack these in your stylesheet, the more priority the CSS rule will have over others (specificity). It's a good thing to know so you have a quick and relatively easy alternative to using the !important override.

3. :hover, :active, and :visited refer to hover, active, and visited before states of an element or link. :visited is link-only, but the :hover and :active pseudo-classes can be used on all elements. 

After reading the question, I see I messed up a bit in the example, both by the order they should be in and by misreading your question. What you wanted was this: 

.myClass ,

.myClass a {

   color: white;

}

.myClass a:hover,

.myClass a:active {

   color: blue;

}


I wrote it as a refresher for myself, too, so hopefully it didn't sound condescending. Hope it helps you on your way!

Hi Monique,

Awesome !  I'm learning a lot about the basics of CSS in a very short time.  A couple more questions if I may:

1.  How do I work out what classes (e.g. .header .Menu_TopMenu) are being used on the standard web UI and where ?  Is there a list somewhere because it appears very difficult to work out just by looking at the properties and style tabs for the elements ?

2.  On balance is it better to customise the standard classes (e.g. .header .Menu_TopMenu) within the application style sheet, or is it better to leave them as they are and define my own style classes and apply them where required ?

Cheers, Richard


Hi Richard,

1. As of yet I have been unable to find a comprehensive overview of standard elements and classes from OutSystems. There are many, many classes which you can find in the BaseTheme CSS, but that style sheet is about 9999 lines long. There are some CSS structures which are documented on specific widgets, though, particularly SilkUI ones (iirc). The styles tab does show a bit of the underlying CSS that you can use for customizations, but it's not always everything I need.

What I do is look at the page I deployed with the Developer tools available in my browser (F12) to figure out which classes affect the element I want to restyle, then experiment a bit. (You can temporarily adjust CSS classes using the Developer tools in your browser. You can experiment there and transfer your changes to your style sheet afterwards, so you don't have to re-deploy at every test.)

2. OutSystems standard classes affect OutSystems standard elements. There's a lot of elements that we don't get to see or adjust in Service Studio (they are added by OutSystems itself), so the only way we can adjust those is by altering the style classes that are already assigned to them (.header and .TopMenu are some examples of those). When you start using the Developer tools (F12) you can see just how many 'hidden' elements there are in any standard page. 

I typically customize the standard classes whenever there's a case for it (e.g. when all Input widgets need to be customized, or when there's no other way I can apply a different class to an auto-generated element, like the header). Customizing standard classes saves me from accidentally forgetting to assign a class to a widget I've just added, since the standard class is applied to it automatically. It feels cleaner, too, since you're not duplicating code in any way, and there can be no conflict between your class and the standard class (even though OutSystems itself prevents many of these conflicts in a way, too).

For elements that have not much to do with the standard OutSystems structure (custom elements) or which have to be styled differently on special occasions only, I create a new class. 

For your current use case, I've got no definitive answer. You can set the text color to white in the header class, but I don't know how many links there are in the header, if there's a difference in expected behaviour between the links, if the color is re-defined in any subclasses, what the specificity should be to make it work etc. That's why it was easier for me to describe a new class.

Hope it helps!

Monique de Vos wrote:

Hi Richard,

1. As of yet I have been unable to find a comprehensive overview of standard elements and classes from OutSystems. There are many, many classes which you can find in the BaseTheme CSS, but that style sheet is about 9999 lines long. There are some CSS structures which are documented on specific widgets, though, particularly SilkUI ones (iirc). The styles tab does show a bit of the underlying CSS that you can use for customizations, but it's not always everything I need.

What I do is look at the page I deployed with the Developer tools available in my browser (F12) to figure out which classes affect the element I want to restyle, then experiment a bit. (You can temporarily adjust CSS classes using the Developer tools in your browser. You can experiment there and transfer your changes to your style sheet afterwards, so you don't have to re-deploy at every test.)

2. OutSystems standard classes affect OutSystems standard elements. There's a lot of elements that we don't get to see or adjust in Service Studio (they are added by OutSystems itself), so the only way we can adjust those is by altering the style classes that are already assigned to them (.header and .TopMenu are some examples of those). When you start using the Developer tools (F12) you can see just how many 'hidden' elements there are in any standard page. 

I typically customize the standard classes whenever there's a case for it (e.g. when all Input widgets need to be customized, or when there's no other way I can apply a different class to an auto-generated element, like the header). Customizing standard classes saves me from accidentally forgetting to assign a class to a widget I've just added, since the standard class is applied to it automatically. It feels cleaner, too, since you're not duplicating code in any way, and there can be no conflict between your class and the standard class (even though OutSystems itself prevents many of these conflicts in a way, too).

For elements that have not much to do with the standard OutSystems structure (custom elements) or which have to be styled differently on special occasions only, I create a new class. 

For your current use case, I've got no definitive answer. You can set the text color to white in the header class, but I don't know how many links there are in the header, if there's a difference in expected behaviour between the links, if the color is re-defined in any subclasses, what the specificity should be to make it work etc. That's why it was easier for me to describe a new class.

Hope it helps!

Hi Monique,

I think that describes very well the basic understanding that I have arrived at from your information and a bit of trial and error.  For my original question I created a new style class because the standard classes being used are obscure and since the headers are repeated on every page it is minimal work / re-work.  The information you had provided also helped me with styling other elements on my pages, using standard classes where I could to ensure consistency across pages and minimise re-work over the long run, but using new classes where appropriate and in some instance making minor changes on the element property tabs.  The latter is the one that I am most wary of because it is very easy to start getting inconsistencies across different pages if you start using it too much.

So thanks for helping me along my journey to a greater understanding of CSS and how best to use it !

Cheers, Richard.


Hi Richard,

No problem at all, it's awesome to hear you make so much progress (in so little time). Cheers!