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

MIGX install "System" menu not found

    • 49515
    • 184 Posts
    eiger3970 Reply #21, 11 years, 1 month ago
    I notice with http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h that there is a class in the head, which is not in my MODX head.
    .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: 20px;
  }


    When I put this Css class in my MODX style css file, the slide show breaks up into a webpage with all the images showing down the page?

    I'm just trying to make the slide carousel centre the images, rather than sitting the images on the far left?
      • 49515
      • 184 Posts
      eiger3970 Reply #22, 11 years, 1 month ago
      Also, I'm confused about the Bootstrap on MODX.
      I have the code on http://getbootstrap.com/getting-started/

      I have the code on http://modx.com/extras/package/theme.bootstrap

      I have the code on http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

      I have the code on https://rtfm.modx.com/extras/revo/migx

      Currently, my MODX has Templates: Bootstrap carousel, Bootstrap3Skeleton, Bootstrap Template, then lots of Chunks and Snippets referring to Bootstrap and MIGX.

      I think I might need to totally uninstall MODX and reinstall fresh, as all the files are mixed up and confusing?
      Should I then install the MODX Bootstrap or pull code from somewhere else?
        • 4172
        • 5,888 Posts
        Bruno17 Reply #23, 11 years, 1 month ago
        you don't need a special Bootstrap - Extra.
        Do it, as you would do it with a static page.
        Use the files from CDN, create your custom css-file.
        And create your code in your template.

        As soon as that's working, start with replacing the dynamic parts with getImageList - calls.

        That's it.
          -------------------------------

          you can buy me a beer, if you like MIGX

          http://webcmsolutions.de/migx.html

          Thanks!
          • 49515
          • 184 Posts
          eiger3970 Reply #24, 11 years, 1 month ago
          Well, I added a css link, as per Reply #12, but the images just don't change.
          Structure:
          1. Website (HTML document/resource)
          2. Bootstrap carousel (Template)
          3. Head (Chunk)
          4. Style (CSS document/resource).

          1.
          MODX > Dashboard > Resources > Website > Home > Uses Template: Bootstrap carousel.
          No code in here.


          2.
          MODX > Dashboard > Elements > Templates > Bootstrap carousel > (code from http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h)
          <!DOCTYPE html>
<html lang="en">
[[$Head]] <!--I added this and moved the Head code to the below Head code.-->
<body>

<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">

		<img class="preset" src="test.png" alt="test" width="100" height="100">
      </div>
		<!--<img src="Sponsors.png" alt="Sponsors" width="460" height="345">
      </div>-->

      <div class="item">
        <img src="img_chania2.jpg" alt="Chania" width="460" height="345">
      </div>
    
      <div class="item">
        <img src="img_flower.jpg" alt="Flower" width="460" height="345">
      </div>

      <div class="item">
        <img src="img_flower2.jpg" alt="Flower" width="460" height="345">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>
</html>


          3.
          MODX > Dashboard > Elements > Chunks > Head > 
          <head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="style"> <!--I added this to call the style.css file I made in MODX > Dashboard > Resources > Website > style.-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>


          4.
          MODX > Dashboard > Resources > Website > style > (I saved content type as CSS)
          .preset /*Class to preset the CSS style.*/
{
height:100px;
width:100px;
}
          [ed. note: eiger3970 last edited this post 11 years, 1 month ago.]
            • 4172
            • 5,888 Posts
            Bruno17 Reply #25, 11 years, 1 month ago
            why don't you just create a css-file and call that?

            you forgot also to add the 

            <base href="[[++site_url]]">


            before calling any relative links
            and you can call your css-resource with:

            <link rel="stylesheet" type="text/css" href="[[~XXX]]">


            where XXX should be the id of your css-resource
              -------------------------------

              you can buy me a beer, if you like MIGX

              http://webcmsolutions.de/migx.html

              Thanks!
              • 49515
              • 184 Posts
              eiger3970 Reply #26, 11 years, 1 month ago
              Thank you.
              I believe I have already created a CSS file?
              MODX > Dashboard > Resources > Website > style > (I saved content type as CSS)
              .preset /*Class to preset the CSS style.*/
{
height:100px;
width:100px;
}

              This file is not named in MODX as style.css per se. The file says Style, which is a Document saved as a CSS content type in MODX > Resources > Website.

              Okay, I added 
              <base href="[[++site_url]]">
              to Head (line 5) and updated the CSS link (line 7).
              <head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <base href="[[++site_url]]"> <!--20150826: Not sure what this calls or does?-->
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="[[~3]]">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>


              The slide carousel still doesn't change after these edits in MODX? [ed. note: eiger3970 last edited this post 11 years, 1 month ago.]
                • 49515
                • 184 Posts
                eiger3970 Reply #27, 11 years, 1 month ago
                Okay, so found some code which centres the images within the carousel.
                However, now someone has mentioned I should clear out all the Bootstrap code from w3schools and pull the files directly from Bootstrap, to ensure other files will work.

                So, I can easily add the css, fonts and js files into normal website files, however I am confused on how to insert these css, fonts and js files into MODX?

                These are the files to be inserted http://getbootstrap.com/getting-started/#whats-included:
                bootstrap/
                ├── css/
                │ ├── bootstrap.css
                │ ├── bootstrap.css.map
                │ ├── bootstrap.min.css
                │ ├── bootstrap-theme.css
                │ ├── bootstrap-theme.css.map
                │ └── bootstrap-theme.min.css
                ├── js/
                │ ├── bootstrap.js
                │ └── bootstrap.min.js
                └── fonts/
                ├── glyphicons-halflings-regular.eot
                ├── glyphicons-halflings-regular.svg
                ├── glyphicons-halflings-regular.ttf
                ├── glyphicons-halflings-regular.woff
                └── glyphicons-halflings-regular.woff2

                Any suggestions please? [ed. note: eiger3970 last edited this post 11 years, 1 month ago.]
                  • 4172
                  • 5,888 Posts
                  Bruno17 Reply #28, 11 years, 1 month ago
                  you can upload them, where ever you want.

                  For example to

                  assets/bootstrap/

                  then include them within your template with

                  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/bootstrap.min.js"></script>

                    -------------------------------

                    you can buy me a beer, if you like MIGX

                    http://webcmsolutions.de/migx.html

                    Thanks!
                    • 10208 ☆ A M B ☆
                    • 1,780 Posts
                    Frogabog Reply #29, 11 years, 1 month ago
                    <base href="[[++site_url]]"> <!--20150826: Not sure what this calls or does?-->

                    This is primarily for FURLs. It provides the base url for the site which is commonly what would be written out in any link on a non-MODX or static site such as http://domain.com/

                    If you'll notice, all the links shown in the example code in this thread don't show the http://domain.com portion of the link. The <base href="[[++site_url]]"> does this for us throughout the site for any link to files or images in the filesystem. It's quite handy.

                    As Bruno showed above (see, no http://domain.com/):
                    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/bootstrap.min.js"></script>


                    Read this:
                    https://rtfm.modx.com/revolution/2.x/administering-your-site/using-friendly-urls

                    It is better to use the CDN version of Bootstrap than the files you've downloaded from Bootstrap. Including them is no different than including files uploaded to whatever path in the filesystem, except for the fact that you'll need to use the full url from the CDN rather than the shortened path that you can with site files as Bruno showed above (with the base url).

                    Additionally, when debugging CSS not applying to your elements... you are using your browser's inspect tool, right?

                    Can you see that the CSS file (either in the resource or in a file) is even loading? Chrome's inspector is better at showing all the http requests and their status than Firefox. And if the file is readable, when you inspect the element that needs to be affected by your styles, which CSS selectors are applying? Just because your CSS doesn't apply visually, doesn't mean the file is not being read. It could be that the CSS selector is incorrect, or your trying to apply a value to the wrong selector, or the value is invalid for that particular property or element, etc. Inspecting is your friend, use it whenever you want to see what's actually applying to your elements.

                    FWIW, all the packages that you downloaded and installed from Package Management aren't going to mess with your site, but if you're learning Bootstrap and MODX at the same time there will be some chunks and perhaps TVs, snippet calls, etc. in there that you can use as examples. I'd keep them around for a bit to reference if you're struggling much with MODX and Bootstrap. For the menus alone, what is coded up and working from those packages can come in quite handy.
                      Frogabog- MODX Websites in Portland Oregon
                      "Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
                      Having server issues? These guys have MODX Hosting perfected - SkyToaster
                      • 49515
                      • 184 Posts
                      eiger3970 Reply #30, 11 years, 1 month ago
                      Thanks, that helped me understand the structure of the set up.
                      However, MODX won't allow the .map and font files to upload.

                      This means the slide carousel won't show the left and right arrows (glyphicons from the font file).
                      Also, only the 1st image shows and doesn't slide to the next 3 images? [ed. note: eiger3970 last edited this post 11 years, 1 month ago.]