We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 49515
    • 184 Posts
    Hello, using just the MODX GUI/Dashboard, I can't find the CSS file?
    I entered some new text on my webpage with <h1>TextNew</h1> and its smaller than the regular <h1>TextHeader1</h1> and <h1>TextHeader2</h1>.

    Weird.
    I guess I have to pull the whole MODX site to have some directory control using CLI?

    I think the problem could be a css child selector, if I have a parent div and there's some rule in the css that changes font-size based on % or em?
      • 3749
      • 24,544 Posts
      I you do a View Source on the page, you should see the paths to any CSS files.

      Is this a front-end page?

      Does the header font size look wrong in the front end, or just when editing with the RTE?

      MODX doesn't supply a CSS file for front-end pages. You need to do that yourself in the page Template or in a snippet or plugin.

        Did I help you? Buy me a beer
        Get my Book: MODX:The Official Guide
        MODX info for everyone: http://bobsguides.com/modx.html
        My MODX Extras
        Bob's Guides is now hosted at A2 MODX Hosting
        • 49515
        • 184 Posts
        Hmm, I changed the css file which was in /www/file.css, but didnt' fix the issue.
        So, now I'm trying to check if the <span>s are out.
        I can't find the webPage.html?
        I pulled the website, ran a $ grep -r webPage.html and no location.
        Just a few results in files, but not the actual location of the webPage.html?

        How does the MODX file structure work, so I can find the webPage.html?
          • 28042 ☆ A M B ☆
          • 24,524 Posts
          The "pages" are built on-demand from Resources. If you edit a Resource, you can see what Template it is assigned to use. Edit the Template; it is basically just an HTML structure with MODX tags in it. Some Templates have a lot of Chunks, so you may have to look at a Chunk that contains the HTML head section. In any case, that HTML head will have link tags like any HTML document. They will have the path (usually relative) where the .css files can be found.

          Which .css file needs to be edited is purely up to the theme that the original developer/designer set up, MODX itself doesn't care how it's designed or where the files for it are stored.

          In some cases, the Template (or Chunk) will have a style block, or it may even have inline styling in the HTML elements in the Template, or Chunk, or even in the Resource. Again, just like any HTML document.
            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
            • 49515
            • 184 Posts
            Hello, thank you for the reply.

            The View Source doesn't display the css file path, however I have found the css file after pulling the website files to edit with CLI.

            Yes, this is a front end page.

            The header font size looks wrong in the front end.
            Using a Rich Text Editor (RTE), the fonts don't work as there's some mysterious 6 year old deprecated sIFR code I cannot find anywhere in MODX to throw out and replace with maybe OWL or Bootstrap for a new slide carousel and fonts. (that's another project all on its own).

            Yes, I found the css files and edited them, but this didn't fix the <h1> header font size issue?



            Well, it seems Base Template is used as per MODX > Dashboard > Resources > web > webPage > Document > Uses Template > Base Template.
            In MODX > Dashboard > Elements > Templates > Base Template > Create/edit template > Template code (HTML): >
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
              <head>
                [[$htmlheader]]
              </head>
              <body>
                <div id="background">
                  <div id="container">
                    <div id="head">
                      <div id="toplink">
                        [[$toplink]]
                      </div>
                      <div id="logo">
                        <h1>[[++site_name]]</h1>
                      </div>
                    </div><!--/head-->
                    <div id="photopanel">
                      [[$photopanel]]
                    </div>
                    <div id="nav">
                      <div class="menu">
                        [[!Wayfinder? &startId=`0` &level=`1` &rowIdPrefix=`menu`]]
                      </div>
                    </div><!--/nav-->
                    <div id="upcomingevent">
                      [[$upcomingevent]]
                    </div>
                    <div id="chbg">
                      <div id="contentholder">
                        <div id="content">
                          <div class="contentbox">
                            <h2>[[*longtitle]]</h2>
                            [[*content]]
                          </div>
                        </div><!-- End Content -->
                        <div id="contentnews">
                          [[*sidebar]]
                        </div><!-- End Sidebar Content -->
                      </div><!--/contentholder-->
                    </div>
                    <div id="footer">
                      <p class="right">[[$footercopy]] 
                        <a href="[[~10]]">Contact us
                        </a> | Web Design by 
                        <a href="http://www.domain.com" target="_blank">domain.com
                        </a>
                      </p>
                    </div><!--/footer-->
                  </div><!--/container-->
                </div><!--/background-->
              </body>
            </html>
            

            > line 33 > handles the content.

            I can't see how this line 33 could effect the <h1> tags in the webPage.html?
            Does MODX has some kind of link diagram or something to 'reverse engineer' the links to work out what is effecting the <h1> tag to not show the correct font size like the other 2 <h1> tags? [ed. note: eiger3970 last edited this post 11 years, 6 months ago.]
              • 28042 ☆ A M B ☆
              • 24,524 Posts
              As I said, the actual HTML head may be in a chunk, and in this case it is.
                <head>
                  [[$htmlheader]]
                </head>

              So you need to look at the "htmlheader" Chunk.
                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
                • 49515
                • 184 Posts
                Thank you.
                I checked the chunk in MODX > Dashboard > Elements > Chunks > Site Essentials > htmlheader > Create/edit chunk > Chunk code (html): > lines 8-13 >
                <title>
                  [[*pagetitle]] - [[++site_name]]
                </title>
                <meta name="robots" content="index,follow" />
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
                <link href='//fonts.googleapis.com/css?family=Titillium+Web:400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css' />
                <link href="css/screen.css" rel="stylesheet" type="text/css" />
                <link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen" />
                <link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print" />
                <link rel="stylesheet" href="css/ui.tabs.css" type="text/css" media="print, projection, screen">
                  <link rel="stylesheet" type="text/css" href="css/carousel.css">
                    <script src="js/sifr.js" type="text/javascript">
                    </script>
                    [[$jquery]]
                    [[$analytics]]
                

                The css files didn't effect the webPage.html's <h1> tag?
                  • 49515
                  • 184 Posts
                  Ok, well I think it's the same old problematic flash code, so I will try to disable the flash code somehow.
                  I think I need a plugin of some sort to show the MODX/website heirarchy so I can find what links to what a bit easier.
                    • 28042 ☆ A M B ☆
                    • 24,524 Posts
                    If your browser has an "inspect element" feature, you should be able to right-click the offending H1 element, and see exactly what directives in what .css files are affecting it. For example in Safari...




                      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
                      • 49515
                      • 184 Posts
                      Thank you, yes I'm fine with the Inspect Element and View Source tools.
                      It's the MODX management that is unclear.
                      I think I may have found why the <h1> tag is playing up, as it's using some old flash code for fonts.
                      So, I think disabling some js code might stop the deprecated flash code loading.
                      I'm now looking for the syntax for MODX to comment out some HTML.
                      I found http://rtfm.modx.com/revolution/2.x/making-sites-with-modx/tag-syntax, but I have no clear syntax.
                      I could guess and comment with <!--commentOutHTML-->, but I'm surprised MODX has no clear documentation to be found...yet.