MC's html

[Marie-ClaireBeaulieu]

Documenting my use of bootstrap, Q&A with @balmas

[Marie-ClaireBeaulieu]

With the paper project, I currently have this ugly thing: http://marie-clairebeaulieu.github.io/mythbootstrap.html

My idea was to use the carousel template (i don't know why i'm so stuck with this) on the cover page, and then use the top navbar to lead to other pages that would have the syllabus for the class and term project instructions. You can see that I have the term project overview filled in and info page.

A few things: -Do I have to put the top navbar on each of those pages? I suppose yes...

You don't have to do anything you don't want to :) But yes, it would generally be considered good practice to keep navigation consistent across the site -What do I do with the "Classical Mythology" nav item? I want this to be the home page, so it should not direct anywhere if you're on the landing page, but direct back to the home page if you're on another page. I think that makes sense and to do that, you should just have its href be set to the url of itself (clicking it when you are on that page will cause the home page to reload but that's fairly normal for that sort of link. If you wanted to have it behave differently when you're on the home page you need to do that with javascript - it can't be accomplished with css only)

-Also, I can't get the carousel to work. I've got two images in there, but no way to make them move. Ah, the Carousel is a javscript component. It will work if you add the following to your HTML head element

(You also need to fix the path to the images ... they are not directly below the html but a sibling directory:

e.g.:

-I wonder about the nav: it has to go to another page, so for the one website, I end up with a lot of pages. Is there a way to consolidate, or is this normal? I think it probably is possible for it to go to sections within the same page, rather than a new page, by using # urls rather than full urls of new pages. Did you try that? That said, modularization is generally considered to be a good thing. -You will see that I tried using some inline CSS. I was wondering if that was going to be better that putting it in the head, if I'm using Bootstrap. Does it matter? My CSS doesn't always work either, I think some of the bootstrap presets override it a lot of the time (or I'm just not doing it correctly)

I think it's best to stay away from inline css if you can. My preference is for it to be in a separate CSS file, included via a style link in the head, because this way you can isolate style changes to the CSS file. Using the browser developer tools can help to see why it isn't working as they show the layers of how the css are applied and where they are overridden.

[Marie-ClaireBeaulieu]

Q: how do I style the bootstrap presets? With this ugly thing http://marie-clairebeaulieu.github.io/InstructionsHypothesis.html , i only have the bootstrap template in, and it doesn't have many colors and such. Do I just add CSS for that? Or am I just supposed to leave it as is?

A: If I understand your question correctly, you're wanting to know how to add styles to Boostrap components. There are various ways you can do this . To make this clearer, take the following examples. Say you wanted to make all the text in a nav sidebar green.

One approach, which I don't recommend, is just defining your own style for the bootstrap class in your own css file, e.g.:

.nav-sidebar { color: green; }

The downside of this approach is that you might not want ALL uses of nav-sidebar to green, just your usage on a particular page. To accomplish that, you might define a class named something like greentext

.greentext { color: green; }

And then add this class to your sidebar element:

...

Note however, that this doesn't actually work as I 've written it above ... this gets to another question you asked, about why sometimes styles you define don't work. In this case, it's because bootstrap defines a default color for link text, on all a elements, to be 337AB7. It's always the most precise style, defined the latest, that applies to an element. So, if you want the greentext class to apply to links in a nav-sidebar, you have to say that's where it should be applied. There are various ways to do this, one would be the following:

.greentext a { color: green; }

Which says to apply the color:green style to all a elements that are descendant elements of an element that has the greentext class on it. In this case, because this is a more precise style rule than one on an a element alone, it has the desired effect.

You could be even more precise about this, and say that you only want this to take effect when the greentext class is applied together with a nav-sidebar element:

.nav-sidebar.greentext a { color: green; }

But then you are tightly coupling your styles with those of bootstrap, which is probably not a great idea. You might decide at some point to switch frameworks, and then you'd have to rework all your styles to match the classes used by that framework.

[Marie-ClaireBeaulieu]

I think the problem you're having is because your text (I'm assuming you mean the div with id=blurb) is not inside a bootstrap container element. This is the top level class for bootstrap, and I think none of their styles will apply unless you have it.

As described here http://getbootstrap.com/css/#overview-container bootstrap has 2 containers, one with a fixed width and one with a fluid width. You had been using the fixed width one (and that's what your navbar is in) and that one sets the width of the page to a fixed size (1170px), which causes it to appear as if it's centered on the page if the viewer is wider than that. The container-fluid will adjust itself to the size of the viewer.

As for the question of fixed versus relative , you probably want it fixed for the navbar, so that it always stays at the top when the page is scrolled. The text you probably want to be relative.

Here are some links to people that probably explain this better than I can:

http://www.w3schools.com/css/css_positioning.asp https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

[Marie-ClaireBeaulieu]

Questions for 1/22:

-For some reason, the files I save in Oxygen won’t open after I close them. I get the error: (saved in text file attached below error message oxygen.txt )

-Still to do: Fix hrefs in navbar for each page.
-couldn't do it because I had to change my github password and that caused source tree to not   be able to push
git -c diff.mnemonicprefix=false -c core.quotepath=false push -v --tags origin master:master
remote: Invalid username or password.

fatal: Authentication failed for 'https://github.com/Marie-ClaireBeaulieu/Marie-    ClaireBeaulieu.github.io/'

Pushing to https://github.com/Marie-ClaireBeaulieu/Marie-ClaireBeaulieu.github.io

Completed with errors, see above.

-Tried an external stylesheet for the contact page, but since I can’t push to github, I couldn’t make it work. The link is in the file, though, so now the page shows without style.

-Still can’t get the carousel to work :-( That’s ok, I can wait until I learn js !

[balmas]

Does this help re git? http://www.codewrecks.com/blog/index.php/2015/06/23/git-for-windows-getting-invalid-username-or-password-with-wincred/

[Marie-ClaireBeaulieu]

as per conversation with @balmas :

• including the right code tends to make things work
• remember not to put spaces in directory file names

[Marie-ClaireBeaulieu]

@balmas : a vexing issue continues: positioning the text with respect to the navbar in here (or anywhere): http://marie-clairebeaulieu.github.io/Hypothes.is%20annotations/InstructionsHypothesis.html

To try and figure out the issue, I copied and pasted the boostrap template into a new document without changing anything. When viewed in the browser from the local file, the elements were positioned wrong too (navbar was on top let of the page, other elements below). So, I'm at a loss.

I looked at this and tried to replicate with very modest success (but remaining issues) http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clear

[balmas]

Here's the link to the grid http://getbootstrap.com/css/#grid

[Marie-ClaireBeaulieu]

:-)

[Marie-ClaireBeaulieu]

Carousel explanation and tutorial: http://www.w3schools.com/bootstrap/bootstrap_carousel.asp http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp

[Marie-ClaireBeaulieu]

boostrap grid system: http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

templates: http://www.w3schools.com/bootstrap/bootstrap_templates.asp

[Marie-ClaireBeaulieu]

footer for hypothes.is instructions:

footer.txt

[Marie-ClaireBeaulieu]

Questions: how can I find the color that appears, e.g. on a font to replicate it? I'm looking in the inspect, styles, and am finding what I think is the color property, but when I open the color picker it's the wrong color

[balmas]

in the inspector, make sure you're looking at the color property closest to the top, and one that's not crossed out.

Or you could just try this tool: http://www.colorzilla.com

[Marie-ClaireBeaulieu]

oh fun :-) thanks so much! Trying it right now!

It's perfect!

[Marie-ClaireBeaulieu]

Questions for our next session: -There must be a way to do batch changes, like if you have many pages with the same layout, and you want to add a button on all the navbars at once. -Oxygen is giving me errors with unordered lists nested within ordered lists. Looking around the web, I'm guessing I'm missing the finer points. Also, bullets display in different styles. I will play around with this some more before Friday. -I added style for each image to fit it to size. Is this OK or is there a better way? -The whole page does not fit in my screen, though, the browser adds a scrollbar. Is this normal or am I doing something wrong? From the inspector, everything seems to fit into the grid, but what do I know?

-I don't really understand the grid system when it's not in columns, as here: http://marie-clairebeaulieu.github.io/ClassicalMyth/carouselcover.html -I'm having trouble with defining the width of images. Even using an image that is 1200X 400 px, which seems to be the size the carousel wants (the image I tried with is Runners in my repo) , the image does not cover the full width of the page as in the example. For the square images, I just defined a width of 500px in CSS. It looks OK, but once again I don't really understand how this works.

-The page looks different when viewed online than from the local file. In particular, it doesn't fit the browser window online, but fits neatly when viewed locally.See screenshots.

[Marie-ClaireBeaulieu]

Alright coach, check it out: http://marie-clairebeaulieu.github.io/Hypothes.is%20annotations/InstructionsHypothesis.html

[balmas]

It's awesome! I especially love the image accompanying the instructions for loading into Perseids :)

[Marie-ClaireBeaulieu]

Thanks! I really enjoyed doing it!

That image was especially for you :-)

Moving on to my other site, the one with the carousel....

[balmas]

re: "-There must be a way to do batch changes, like if you have many pages with the same layout, and you want to add a button on all the navbars at once."

the normal way to do this is with javascript and/or a server-side web application frameworks. With these approaches you would define a template to contain the common parts of the site, such as the nav bar, and then use code to import it into the page everywhere you want it. I'm not aware of any way to use templates like with just plain html and css. It looks like it's getting closer with HTML 5 imports which require very minimal javascript to use, but I don't think that's supported in all browsers yet. We can talk more about this on Friday!

[balmas]

Lists:

• use CSS to style the bullets -- see http://www.w3schools.com/css/css_list.asp
• unordered lists within ordered lists are valid, if oXygen is giving you trouble I would guess the a tag somewhere isn't being properly closed. You also need to make sure your ul tag is inside an li. the following should work:

     <ol>
            <li>item 1</li>
            <li> new list
                <ul>
                    <li>unordered item 1</li>
                </ul>
            </li>
        </ol>

[balmas]

re: -The whole page does not fit in my screen, though, the browser adds a scrollbar.

The browser will normally add a scrollbar if the width (or height) of the element being displayed is larger than it can display. This happens most often if an element is styled to have a fixed width. We can look at this together.

[balmas]

Image sizing:

using a style to set the width and height of an image is perfectly reasonable. if you set only one of width or height, the image will scale accordingly. If you set both, you might get some distortion of the image.

this link might also be helpful: https://wpbeaches.com/make-images-scale-responsive-web-design/

[Marie-ClaireBeaulieu]

[Marie-ClaireBeaulieu]

[1/29/16, 9:39 AM] Bridget Almas (balmas@gmail.com): https://git-scm.com/download/gui/windows

[Marie-ClaireBeaulieu]

https://tortoisegit.org/

[balmas]

testing github locally http://kbroman.org/simple_site/pages/local_test.html

[Marie-ClaireBeaulieu]

[1/29/16, 10:20 AM] Bridget Almas (balmas@gmail.com): http://benschmidt.org/2015/06/12/buying-a-computer-for-digital-humanities-work/