MIGX install "System" menu not found

I found this in the HTML file for the Bootstrap Carousel code: <head><href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></head>

So, to add the following CSS code
to adjust the sizes of my images, do I add the code to
maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css (don't think I can edit this code) or
some file in MODX dashboard (what is the path? (I made a CSS file in MODX > Dashboard > Resources > Website > style (2)) or
in some path from my Shell (What is the path? Normally I would navigate to /home/domain.com/public_html/css). [ed. note: eiger3970 last edited this post 11 years, 1 month ago.]

create your custom css - file, where ever you want.

for example your-root/style/style.css

OK, let's back up.

The dashboard of MODX and it's path is the very least that you need to worry about.

Bootstrap is a framework, it is not reliant upon MODX, but within MODX you can build your site using standard techniques calling up the Bootstrap files that you need to make it work.

Do not, ever modify the Bootstrap CSS or Javascript files. To override or add styles to your site, create a style.css file and use it as you likely always have. All you want to do is load the CSS files into your <head>, which can be either a full template with the <head> coded directly into the template, or (a common technique) a chunk within MODX that contains the <head> markup.

Best practice is to use a CDN to load the Bootstrap files as you are already doing. This allows you to switch versions easily, as well as take the load off of your own server and pass it to a CDN which improves performance and also makes Google happy.

Go ahead and junk the resource you made with the CSS. Resources are typically reserved to "pages" of your website, or rather any "content" your website may need to call up and display, even if it's not a real "page". This is not to say that you can't put your CSS into a resource, but in my opinion that's way more convoluted and difficult to manage than just loading up a CSS file that can be edited and saved to the filesystem.

Your CSS file, should in most cases be an actual CSS file that you call up in the <head> of your template. Again, this can be placed directly into the template, or as is commonly done a chunk that you call up template. In the chunk would be the entire <head> section as HTML.

i.e.


in your "head" chunk do something like this:


Note that all the files you need are referenced either with a path to your filesystem or a CDN. Often typically the files are stored in assets/templates/yourCurrentTemplate/fileName.fileExtension

Note as well that there is a stylesheet loading that is completely separate from the bootstrap files. Call it style.css, stylesheet.css, or whateverYouWant.css. Override Bootstrap here and add any styles for your site in this file.

In your chunks or in the template, add classes or IDs to the markup and style them within the CSS file itself.

The Bootstrap documentation, and specifically the CSS bits are found here http://getbootstrap.com/css/ [ed. note: frogabog last edited this post 11 years, 1 month ago.]

@Frogabog

I think, you want to say:

Oh boy... &duh! Thank you for noticing. I'm gonna edit now.

Darn update was gonna happen in seconds whether I wanted it or not. Did not proof, just sent. Bad frog!

Ok, thanks for the information.
So, I think I have worked out the structure of MODX and Bootstrap carousel now. Something like this: Home website > Bootstrap carousel template > Header chunk > CSS chunk.
However, the sliding carousel only shows 1 static image and doesn't slide, unlike the example at http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h

Also, I added [[$Style]] under the line of your Head code, but this doesn't effect the 1 showing slide. [ed. note: eiger3970 last edited this post 11 years, 1 month ago.]

FWIW, I'd suggest putting your CSS into a yourChoiceFilename.css file and referencing that in the head rather than using a chunk for CSS. Chances are you'll need to style more on the site than just the carousel.

The reason why it doesn't work is because you need need it to be a CSS file in some way. Chunks are actually just raw html. They can be used for CSS, but not in the way you're thinking.

So either you use the standard full link element and reference the CSS file,
i.e.


Or if you really want it to remain in a chunk, then you'd actually need to put your CSS into a resource, set none as the template, set the content type to CSS, turn off the rich text, place your chunk call into the content area of the resource, and then use the alias of that resource in a link element just like normal:
(The following assumes the CSS resource is ID 2.)


Overall, I'd say this is way more complicated than it needs to be and a simple style.css file will do the trick. Unless you're inserting CSS dynamically here and there, or doing style changes based on filtering and TVs (within the CSS resource), CSS in a resource is less fun than it seems.

For the carousel to work, you need to link to jquery. Make sure to link to the jquery ahead of the bootstrap.js or it won't work. To help with performance, I usually put all the scripts in the bottom of the template, just before the closing body tag as opposed to the head.

Which brings me to... another mistake in my example. I meant to pull out the bootstrap-select.css out and add the jquery there with the js, but it appears I only added the js. If you used that portion of the example, go ahead and remove this line:


Replace it with:


Or put them both in the bottom just before the closing body tag. Either way, keep the jquery ahead of the bootstrap javascript.

Thank you.
The CSS file still doesn't seem to affect the Slide Carousel.

I added the link in my Header file (I can't name the Header file Head):

I made a new document in MODX > Dashboard > Resources > style. This is saved as a CSS file.
My CSS file named style has:


The structure is now:
Bootstrap carousel (calling Head with code [[$Header]]:
Header file calling Css with above code:
Css code which is supposed to size the images to 100px wide and set the images to centre in the carousel (or stop at a left margin, rather than 0 margin).

Quote from: eiger3970 at Aug 24, 2015, 02:18 PM

Thank you.
The CSS file still doesn't seem to affect the Slide Carousel.

I added the link in my Head file:

<link href="[[++assets_url]]templates/currentTemplate/style.css" rel="stylesheet" media="screen" type="text/css">

I made a new document in MODX > Dashboard > Resources > style. This is saved as a CSS file.
My CSS file named style has:

.pred // Class to predefine the CSS style.
{
width:100px;
height:100px;
}

.carousel-inner
{
margin: 0 auto;
}

The structure is now:
Bootstrap carousel: (calling Head with code [[$Header]].
Header file: calling Css with above code.
Css: code which is supposed to size the images to 100px wide and set the images to centre in the carousel (or stop at a left margin, rather than 0 margin).

[ed. note: eiger3970 last edited this post 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.


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?