Lab 05 Step 02

[mtwelker]

In Step 01, I cloned Claudia Huff's site, as suggested.

Step 02 says "After forking or cloning a site, follow the instructions in the README file to begin customizing your page." In the README file, all it says is "Academic website.," so I assume I can ignore that.

In the _config.yml file, I was able to find and change the website name and description, and some social media stuff, but I don't see anything about colors (or colours). Should I be looking somewhere else for that? I see various bootstrap css files. Should I be working in one of those?

Thank you!

[lecy]

Good question - please use the default README file from Beautiful Jekyll:

https://github.com/DS4PS/beautiful-jekyll/blob/master/README.md

You can copy and paste the markdown text or replace your current README.md file with the one above.

I've added a note to the lab instructions as well.

[lecy]

I don't know the answer to the color question.

Can you check the beautifuljekyll.css file under the assets folder? It will look like this:

https://github.com/DS4PS/beautiful-jekyll/blob/master/assets/css/beautifuljekyll.css

Does it contain liquid variables like this?

{{ site.page-col | default: "#FFFFFF" }}

If so, site in site.page-col refers to any YAML variables defined in the _config.yml file and page-col refers to the variable with that name:

# Personalize the colours in your website. Colour values can be any valid CSS colour

navbar-col: "#EAEAEA"
navbar-text-col: "#404040"
navbar-border-col: "#DDDDDD"
page-col: "#FFFFFF"
text-col: "#404040"
link-col: "#008AFF"
hover-col: "#0085A1"
footer-col: "#EAEAEA"
footer-text-col: "#777777"
footer-link-col: "#404040"

If that's the case, you can probably add this section back to your config file and update colors there. If they simply deleted the fields in the config file then CSS will use the default:

{{ site.page-col | default: "#FFFFFF" }}

If not, the user may have changed the location of the color settings? I'd have to look into that repository specifically.

[mtwelker]

Thank you--I was able to copy that README markdown into my file. I don't see anything like {{ site.page-col | default: "#FFFFFF" }} in the _config.yml. I'm using Visual Studio, and I also searched "page-col:", "navbar-col:", and "footer-text-col:" but it found no matches in any of the files that are part of the repo I cloned (if I'm using that term correctly).

[lecy]

The liquid variable {{ site.page-col | default: "#FFFFFF" }} would be in the CSS file, not the config file.

You define the variable in the config file. The value is used in the CSS file.

Location of the CSS file:

assets/css/beautifuljekyll.css

[lecy]

Try copying this section into your config file and changing settings:

# Personalize the colours in your website. Colour values can be any valid CSS colour

navbar-col: "#EAEAEA"
navbar-text-col: "#404040"
navbar-border-col: "#DDDDDD"
page-col: "#FFFFFF"
text-col: "#404040"
link-col: "#008AFF"
hover-col: "#0085A1"
footer-col: "#EAEAEA"
footer-text-col: "#777777"
footer-link-col: "#404040"

For example:

navbar-col: "blue"

[mtwelker]

Okay, I copied that section into my _config.yml file.
But how will I know if it worked or how it will look when I change colors? I'm new to GitHub and I feel like I'm missing something very basic and important here. Am I supposed to be doing this from the GitHub website? I'm working in Visual Studio, but I don't know how to "run" or "view" the changes I'm making. Normally I would make a change and then run it to make sure I didn't break anything, but I don't know how to do that here.
I've looked forward at the next few steps in the instructions for this lab, and I'm having a hard time making sense of them too. Hopefully you'll be covering some of this at the review session today, because I felt like I understood the Lecture Notes, but I'm pretty lost with this lab. Thanks for your help!

[lecy]

@mtwelker did we answer these questions in the review session?

I will update the instruction to be clear it's not either-or (basic github page or use a fancy template), but either-both (basic page or template plus github page activated).

[mtwelker]

I cloned Claudia Hauff's page, instead of forking the Beautiful Jekyll page. Perhaps that was a mistake, but I thought that was what the instructions suggested. Since there were no color settings in the config.yml, I added the section you suggested above:

# Personalize the colours in your website. Colour values can be any valid CSS colour

navbar-col: "#EAEAEA"
navbar-text-col: "#404040"
navbar-border-col: "#DDDDDD"
page-col: "#FFFFFF"
text-col: "#404040"
link-col: "#008AFF"
hover-col: "#0085A1"
footer-col: "#EAEAEA"
footer-text-col: "#777777"
footer-link-col: "#404040"

But when I change those colors, it has no effect on the pages' appearance.

Also, there is no css file called "Beautiful Jekyll" in this repo. These are the CSS files:

[mtwelker]

How do I know which of those 8 css files is where the liquid variable should be? And what is the purpose of that liquid variable?

[lecy]

@mtwelker I'm looking through the CSS folder right now... give me one second.

[mtwelker]

Actually, I must have copied the color section from somewhere else because it's slightly different than above. Here's how it looks in my repo after changing several of the colors:

# Personalize the colors in your website. Colour values can be any valid CSS colour
navbar-col: "#ff6666"
navbar-text-col: "#404040"
navbar-children-col: "#ff6666"
page-col: "#F0F8FF"
link-col: "#008AFF"
hover-col: "#008080"
footer-col: "#00CED1"
footer-text-col: "#777777"
footer-link-col: "#008080"

But the pages look exactly the same as they did before I added the color section.

[lecy]

It looks like the variables have been stripped out.

I did suggest her page as a clean adaptation of Beautiful Jekyll, but when I vetted it she still had all of the elements needed for the assignment.

You have two options:

Copy and paste the variable sections from the Beautiful Jekyll CSS file (I can show you which), add them to your current CSS.

Or start over by forking the regular Beautiful Jekyll site.

Sorry! I was trying to find a couple examples to simplify the project on your end and I think it made it harder.

[mtwelker]

I've done quite a lot on this, so I think the first option is better.

Copy and paste the variable sections from the Beautiful Jekyll CSS file (I can show you which), add them to your current CSS.

That would be great if you could show me what to copy and which CSS I should add them to. Thank you for your help!

[lecy]

Just pick a variable:

navbar-col: "#ff6666"

Then search for it here:

https://github.com/DS4PS/beautiful-jekyll/blob/master/assets/css/beautifuljekyll.css

Find the CSS element, and you will copy and paste to replace your current .navbar-custom in main.css:

.navbar-custom {
  background-color: {{ site.navbar-col | default: "#EAEAEA" }};
  border-bottom: 1px solid {{ site.navbar-border-col | default: "#DDDDDD" }};
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  {% if site.navbar-img %}
    background-image: url({{ site.navbar-img | relative_url }});
    background-attachment: fixed;
  {% endif %}
  -webkit-transition: padding .5s ease-in-out;
  -moz-transition: padding .5s ease-in-out;
  transition: padding .5s ease-in-out;
}

Your current version:

https://github.com/mtwelker/mtwelker.github.io/blob/master/css/main.css

.navbar-custom {
  background: #FFDD4A;
  border-bottom: 1px solid #EAEAEA;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

I would try to not change too much, so you could do something like:

.navbar-custom {
  background:  {{ site.navbar-col }};
  border-bottom: 1px solid #EAEAEA;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Does that make sense? You don't have to change a lot - just enough that I can see you understand how CSS elements work as generic YAML variables in the config file.

[lecy]

This might not make perfect sense, but if .navbar-custom settings aren't changing the colors you can right-click on your current navigation bar and select "inspect". You will get something like this:

This will show you the CSS element that currently controls the colors of that element. That's the CSS element you need to change:

In this case it does appear to be .navbar-custom, so hopefully that option above works.

[mtwelker]

I replaced the background color with {{ site.navbar-col }} in the main.css, as you suggested. And it changed the appearance of the navbar (turned it gray and changed the font), but didn't change it to the color I selected. What was it supposed to do?

[lecy]

Yeah it should have. What did you use as your color?

[lecy]

That CSS element is not showing up on the page. I suspect it is because of the comment you added:

# mtwelker modified this section per suggestion of Dr. Lecy
.navbar-custom {
  background:  {{ site.navbar-col }};
  border-bottom: 1px solid #EAEAEA;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Comments in CSS files are like this:

/* --- mtwelker modified this section per suggestion of Dr. Lecy --- */

.navbar-custom {
  background: {{ site.navbar-col }};
  border-bottom: 1px solid #EAEAEA;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

[lecy]

You have an extra space after the colon after background too. I don't think that matters but try removing it.

[mtwelker]

Thanks for noticing those. I made those corrections. The color I chose, if I did it correctly, is a medium light red

# Personalize the colors in your website. Colour values can be any valid CSS colour
navbar-col: "#ff6666"
navbar-text-col: "#404040"
navbar-children-col: "#ff6666"

[mtwelker]

By the way, fixing those errors in the css file did change the font in the navigation bar back to what it originally was.

[lecy]

It's fine for the assignment. You got a bum template - I can see that you understand the link between the YAML variables in the config file and the CSS elements now.

The only thing that I can think of is the Beautiful Jekyll CSS file has a YAML header:

---
layout: null
---

That might trigger Jekyll to render that page, which means it would convert the liquid tags to their values in the new CSS file on the server-side.

You can try adding it to your main.css file. But otherwise I'm out of ideas without playing with the repo some. Call it good enough!

[lecy]

On your new page I can see that the liquid tags were not converted to the color you entered as the value, which is why I think that might be the issue:

[mtwelker]

That did the trick! Thanks so much for all your help! I really appreciate it!

[lecy]

I learned something too!

Congratulations on tenure. Your CV looks great.

[mtwelker]

Yes, thank you! I am quite impressive! (I should probably clean up those pages before someone stumbles across them and I get accused of identity theft!)

[lecy]

Forking a repo is almost like citing the source because you can trace it back to the original.

But yes, after the class ends you might delete the repo. It would show up in Google searches eventually.