YAFLogo

tecman
  • tecman
  • 100% (Exalted)
  • YAF All-the-Time Topic Starter
2020-02-03T13:49:33Z
Category and forum icons look differently in different browsers.

Edge & Firefox in Windows 10:

YAF 2.3 Icons Firefox.png

Click to View Image28 View(s)

Opera :

YAF 2.3 Icons Opera.png

Click to View Image28 View(s)

Is it a bug?

And I need to change the color of the folder and balloon icons on the screenshots above. How to do that properly? As I see from CSSs, there are many classes that affect the color of these and other items. For example, the CSS class named 'text-warning' specifies the color of the folder icon, but is it safe to change it to another color value? As the name implies, we can change the color of warning texts too.

tha_watcha
  • tha_watcha
  • 100% (Exalted)
  • YAF.NET Project Lead 🤴 YAF Version: 3.0.0 RC 2
2020-02-03T14:15:13Z
Quote:

Is it a bug?

No, its a feature. Look at the icon legend at the bottom of the page!

iconlegend.png

Click to View Image25 View(s)

UserPostedImage
tecman
  • tecman
  • 100% (Exalted)
  • YAF All-the-Time Topic Starter
2020-02-03T14:54:46Z
Oops! I completely forgot that I was not logged in in Opera and all forums are marked as 'unread'...

Sorry for disturbing you.

How about my question related to the 'text-warning' color?

tha_watcha
  • tha_watcha
  • 100% (Exalted)
  • YAF.NET Project Lead 🤴 YAF Version: 3.0.0 RC 2
2020-02-03T15:20:49Z
Change the text-warning class would of course change it for all texts. but you can use the folder class

.fa-folder {color:yourcolor!important;}
UserPostedImage
tecman
  • tecman
  • 100% (Exalted)
  • YAF All-the-Time Topic Starter
2020-02-03T17:15:58Z
I implied that 'text-warning' affects some messages, but actually the question was about those messages. Is there a good documentation that explains how the used CSS styles affects UI items? I would rather read it instead of bothering you with many small questions related to colors or fonts like this one.

And if I do not like that default violet color specified in 'text-warning', why don't change it for all text messages too?

tha_watcha
  • tha_watcha
  • 100% (Exalted)
  • YAF.NET Project Lead 🤴 YAF Version: 3.0.0 RC 2
2020-02-03T17:40:52Z
Originally Posted by: tecman 

I implied that 'text-warning' affects some messages, but actually the question was about those messages. Is there a good documentation that explains how the used CSS styles affects UI items? I would rather read it instead of bothering you with many small questions related to colors or fonts like this one.

The documentation is here..

https://getbootstrap.com/docs/4.4/getting-started/introduction/ 

Originally Posted by: tecman 

And if I do not like that default violet color specified in 'text-warning', why don't change it for all text messages too?

Of course you can do that.

UserPostedImage
tecman
  • tecman
  • 100% (Exalted)
  • YAF All-the-Time Topic Starter
2020-02-05T14:45:07Z
Do you think that link to the general Bootstrap documentation can help me?? At least, I could not find a list of CSS classes or styles used to configure particular theme items...
tha_watcha
  • tha_watcha
  • 100% (Exalted)
  • YAF.NET Project Lead 🤴 YAF Version: 3.0.0 RC 2
2020-02-05T15:03:36Z
Originally Posted by: tecman 

Do you think that link to the general Bootstrap documentation can help me?? At least, I could not find a list of CSS classes or styles used to configure particular theme items...

Sorry but then i dont know how can i help you.

UserPostedImage
tecman
  • tecman
  • 100% (Exalted)
  • YAF All-the-Time Topic Starter
2020-02-05T15:23:53Z
What about the RSS feed button?

RSS Feed button.png

Click to View Image27 View(s)

It looks like the whole theme is based on several basic colors used in various items. And I would like to replace that violet color disharmonious with other colors of the theme with another color by changing just one setting. Is it possible? That's why I thought that changing 'text-warning' could help me to solve my problem at one go.

tha_watcha
  • tha_watcha
  • 100% (Exalted)
  • YAF.NET Project Lead 🤴 YAF Version: 3.0.0 RC 2
2020-02-05T15:32:08Z
Originally Posted by: tecman 

What about the RSS feed button?

RSS Feed button.png

Click to View Image27 View(s)

It looks like the whole theme is based on several basic colors used in various items. And I would like to replace that violet color disharmonious with other colors of the theme with another color by changing just one setting. Is it possible? That's why I thought that changing 'text-warning' could help me to solve my problem at one go.

Sorry now i understand your problem. Yes you can do that. But you need to use an Sass compiler. The colors are defined in the _variables.scss file which can be overriden by any theme. If you download the source package you can see that every theme has its own _variables.scss file

$yellow:  #ffc107 !default;

UserPostedImage
+1
tecman
  • tecman
  • 100% (Exalted)
  • YAF All-the-Time Topic Starter
2020-02-05T16:25:26Z
Yes, I also understood after skimming through the Bootstrap documentation, the Theme topic, that what I need can be done. However, this is not an easy task for me (at least, now) because I need to learn and understand how to compile Bootstrap themes with the Sass compiler.

Can you provide a quick guide?

tha_watcha
  • tha_watcha
  • 100% (Exalted)
  • YAF.NET Project Lead 🤴 YAF Version: 3.0.0 RC 2
2020-02-05T17:32:03Z
if you use visual studio, then you only need the webCompiler extension. That's what I use and that's the easiest way. Otherwise I find a different way if needed
UserPostedImage
tecman
  • tecman
  • 100% (Exalted)
  • YAF All-the-Time Topic Starter
2020-02-06T08:49:37Z
Yes, VS is ok But the problem is that I need to learn the whole infrastructure before I find the right place to change one of the basic theme color. Can you tell me in a couple of sentences what file I need to amend to solve my problem? And what files will be actually changed so I need to replace them on the server? Is it just bootstrap-forum.min.css in the theme folder or are there other related files?

If you can also tell me how to replace that purple/violet color with another one for the Folder and RSS Feed icons, that would work as a quick temporary solution at the moment. TIA for all your help.

tha_watcha
  • tha_watcha
  • 100% (Exalted)
  • YAF.NET Project Lead 🤴 YAF Version: 3.0.0 RC 2
2020-02-07T11:14:21Z
Originally Posted by: tecman 

Yes, VS is ok But the problem is that I need to learn the whole infrastructure before I find the right place to change one of the basic theme color. Can you tell me in a couple of sentences what file I need to amend to solve my problem? And what files will be actually changed so I need to replace them on the server? Is it just bootstrap-forum.min.css in the theme folder or are there other related files?

It relativly easy you need to change the color for the warning classes in the _variables.scss of the theme you are using. When you save that file the bootrap-forum.min.css is automatically updated and you only need to replace that file on the server.

If you want to change the warning class you could use the existing purple class for example.

so just replace..

$warning:       $yellow !default;

with

$warning:       $purple !default
UserPostedImage
tecman
  • tecman
  • 100% (Exalted)
  • YAF All-the-Time Topic Starter
2020-02-11T13:32:19Z
I installed the Web Compiler VS extension by Mads Kristensen. Opened the YAF source code solution, found the required _variables.scss and changed the $warning parameter to what I want. Then re-built the solution but the bootstrap-forum.css/bootstrap-forum.min.css didn't change. Obviously, I am doing something wrong. How to re-generate the CSS's I need?
Similar Topics
Users browsing this topic