We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

How does modx knows which css to pick?

    • 44891
    • 35 Posts
    strooman Reply #1, 12 years, 4 months ago
    I have multiple stylesheets in the assets/components/css/ folder and made a reference in the base template. How does modx knows which css to pick to display things properly?

    <!-- CSS
  ================================================== -->
	<link rel="stylesheet" type="text/css" href="assets/components/css/base.css">
	<link rel="stylesheet" type="text/css" href="assets/components/css/skeleton.css">
	<link rel="stylesheet" type="text/css" href="assets/components/css/layout.css">
	<link rel="stylesheet" type="text/css" href="assets/components/css/kickstart.css" media="all" />
	<link rel="stylesheet" type="text/css" href="assets/components/style.css" media="all" /> 

	================================================== -->


    Thanks in advance
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      sottwell Reply #2, 12 years, 4 months ago
      MODX doesn't pick anything. The browser loads them one after the other, just like in any HTML page.
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 9995
        • 1,613 Posts
        fourroses666 Reply #3, 12 years, 4 months ago
        The last one (with the same classes or id's) overwrites the highest ones, if you mean that..
          Evolution user, I like the back-end speed and simplicity smiley
          • 44891
          • 35 Posts
          strooman Reply #4, 12 years, 4 months ago
          Quote from: fourroses666 at May 12, 2014, 08:16 AM
          The last one (with the same classes or id's) overwrites the highest ones, if you mean that..

          Ok, this make sense to me. So when I place the following style in my template, it will override what's in the loaded stylesheet:
          <style>
pre
{
font-family:Courier;
font-size:12px;
}
</style>
            • 3722
            • 171 Posts
            BobbyG66 Reply #5, 12 years, 4 months ago
            Quote from: strooman at May 12, 2014, 11:20 AM
            Quote from: fourroses666 at May 12, 2014, 08:16 AM
            The last one (with the same classes or id's) overwrites the highest ones, if you mean that..

            Ok, this make sense to me. So when I place the following style in my template, it will override what's in the loaded stylesheet:
            <style>
pre
{
font-family:Courier;
font-size:12px;
}
</style>
            Yes, and this inline style will override the stylesheets in the header.
            But, it's much better practice to edit a custom CSS.
            Use the style.css. or add another one.

            BG66
              • 9995
              • 1,613 Posts
              fourroses666 Reply #6, 12 years, 4 months ago
              The nicest would be that you add a custom style below the last one: (like Bobby says)
              <link rel="stylesheet" type="text/css" href="assets/components/style.css" media="all" />
<link rel="stylesheet" type="text/css" href="assets/components/mycustom.css" media="all" />


              In the mycustom.css you can add;
              pre
              {
              font-family:Courier;
              font-size:12px;
              }

              you can always override styles, even inline styles by adding !important:
              font-family:Courier!important;

                Evolution user, I like the back-end speed and simplicity smiley