I'm running Jekyll on my blog-style website. This is what I have displaying right now:
Each featured post with an excerpt is being displayed in a for-loop.
I am trying to find a way to present the underlined words above depending on the category. This is the code for displaying the category (the underlined text in the screenshot):
<span class="cat">{{ post.category }}</span>
Each should have a different colour background based on the category. Would it possible to implement an if statement in the HTML or CSS?
I have edited the page source to illustrate how I would like the span elements displayed to get an understanding of what I intend to do.
Logic:
If (page.category == "ethical"): css background: red
If (page.category == "writeup"): css background: grey
Any advice or guidance would be extremely helpful.
try this
You need to create CSS classes for all your categories
in css:
/*
.background-<your category> {
background: <color you want>
}
*/
.background-ethical {
background: red
}
.background-writeup {
background: grey
}
inside loop :
<span class="cat background-{{ post.category }}">{{ post.category }}</span>
I'm making a jekyll blog, and this is the link.
https://jinmc.github.io/programmingTips/
You can also look at the code from here : https://github.com/jinmc/programmingTips
Right now I just finished making the sidebars,
and I know how it works, and implemented on just one keyword csharp.
Rest of it doesn't work.
I implemented this by making a csharp.html file and implementing this code on it.
---
layout: default
sidebar: sidebar_nav
---
<h1>C Sharp</h1>
<ul>
{% for posts in site.categories.csharp %}
<li>
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
<span class="post-meta">{{ posts.date | date: date_format }}</span>
<h3>
<a class="post-link" href="{{ posts.url | relative_url }}">{{posts.title}}</a>
</h3>
<p>{{posts.meta}}</p>
</li>
{% endfor %}
</ul>
something like this.
I can make every html regarding the sidebar navigations but I'm starting to wonder
if this is good practice as the content inside it would be almost similar. Plus, I'll have to make every other html files every time I make a new category. But still, can't think of anything that could automate this.
Thanks in advance!
I would recommend writing a JavaScript method that listens for clicks on the navbar elements and selectively hiding or showing the relevant post links.
Modify _layouts/home.html so that it renders a ul containing all post links and a ul for each category that contains all the post links for that category. Add ids to these ul element that identify the category or 'all'. Use jQuery to hide all the category specific ul elements on page load. Use another script in the _layouts/default.html defining a global var initialized to 'all', a click listener that listens for which the different category clicks in the navbar and hides the previously shown ul and shows the desired ul by applying css styles. You can also change text on the page to show what the current category is.
I'm trying to create a Jekyll project on Github, styled with Material Design Components. MDC states that Elements are not natively styled, which means that most (if not all) elements will need to be styled with classes. What this means now is that
<div class="mdc-typography">
<div class="mdc-layout-grid max-width">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-8">
```js
// some js
```
</div>
</div>
</div>
</div>
doesn't actually render the code as expected. Rather it renders as plain text. I guess I'm a little new to this. But what is the proper way to nest fenced code blocks within div tags with classes?
The rule for markdown is that it must be indented at least 4 spaces. I am aware of this.
If you are writing this on your jekyll project use
{% highlight javascript %}
{% endhighlight %}
Jekyll Docs
Here is another stack question similar to yours: link
Alternatively, you can style it like it's code.
I have a smidge of custom code on my Squarespace site. I know this isn't the Squarespace forum, but I'm blanking on how to target just one specific element in my custom CSS.
So here's the site: http://www.roboticsrookie.com/
I've tried putting #main-navigation a.folder {padding: 0px}; in my sitewide CSS, but it's proven to be ineffective. Any tips would be greatly appreciated.
The problem seems to be that Squarespace generates an empty navigation link that has padding, but I figure out how to get rid of the specific element's padding.
Screen shot
It's not "padding" it's an anchor tag, probably designed to hold an icon for drop down menus.
Remove the empty anchor tag there if possible.
<li aria-haspopup="true" class="folder-collection folder">
<!-- < this anchor is the space -->
Reviews
<span class="delimiter">/</span>
<div class="subnav">
<ul>
<li class="page-collection">Robotics Reviews</li>
<li class="page-collection">Book Reviews</li>
<li class="blog-collection">Reviews</li>
</ul>
</div>
</li>
Or add CSS :
li.folder-collection.folder > a:nth-child(1) { display: none;}
This should remove that first empty anchor.
You're css selector was incorrect. #main-navigation a.folder is looking for an anchor tag with the class "folder".
In other words <a class="folder" href="#"></a>.
What you have is a list item with the class folder and an anchor tag within that list item. Or <li class="folder-collection folder"></li>.
You can't (easily) target that specific anchor because there's nothing unique about it. There's no class or id apples to the anchor and there are other anchors within that list item. So you need to use more specific selectors, such as nth-child, to select it.
Sorry if this sounds like a really stupid question, but I need to make a link change colour when you are on the page it links to.
For example, when you are on the "Questions" page of StackOverflow, the link at the top changes colour. How do you do this?
It's a server-side thing -- when rendering the page, add a class like "current-page" to the link. Then you can style it separately from the other links.
For example, StackOverflow renders the links with class="youarehere" when it points to the page you're already on.
It really depends on how your page is constructed. Typically, I would do this using CSS, and assign give the link an id called "active"...
<a id="active" href="thisPage.html">this page</a>
...and in the CSS...
a#active { color: yellow; }
Obviously this is a fairly simplistic example, but it illustrates the general idea.
You can do this without having to actually modify the links themselves for each page.
In the Stack Overflow clone I'm building with Django, I'm doing this:
<!-- base.html -->
...
<body class="{% block bodyclass %}{% endblock %}">
...
<div id="nav">
<ul>
<li id="nav-questions">Questions</li>
<li id="nav-tags">Tags</li>
<li id="nav-users">Users</li>
<li id="nav-badges">Badges</li>
<li id="nav-ask-question">Ask Question</li>
</ul>
</div>
Then filling in the bodyclass like so in page templates:
<!-- questions.html -->
{% extends "base.html" %}
{% block bodyclass %}questions{% endblock %}
...
Then, with the following CSS, the appropriate link is highlighted for each page:
body.questions #nav-questions a,
body.tags #nav-tags a,
body.users #nav-users a,
body.badges #nav-badges a,
body.ask-question #nav-ask-question a { background-color: #f90; }
Set a class on the body tag for each page (manually or server-side). Then in your CSS use that class to identify which page you're on and update the style on the item accordingly.
body.questions #questionsTab
{
color: #f00;
}
Here's a good longer explanation
If for some reason you don't want to handle this on the server-side, you can try this:
// assuming this JS function is called when page loads
onload()
{
if (location.href.indexOf('/questions') > 0)
{
document.getElementById('questionsLink').className = 'questionsStyleOn';
}
}
Server side code is the easiest, by just setting a class on the link on the current page, but this is also possible on the client-side with JavaScript, setting a second class on all elements in a particular class which have an href which matches the current page.
You could use either document.getElementsByTagName() or document.links[] and look only for those in a class denoting your navigation links and then set a second class denoting current if it matches the current URL.
The URLs will be relative, while document.URL will not. But you can sometimes have this same problem with relative vs. absolute on the server-side if you are generating content from a table-driven design and the users can put either absolute or relative URLs anyway.
You need code on the server for this. A simplistic approach is to compare the URL of the current page to the URL in the link; however consider that there are many different URLs in stackoverflow which all result in the 'Questions' tab being highlighted.
A more sophisticated version can either put something in the session when you change pages (not too robust); store a list of pages/URL patterns which are relevant to each menu item; or within the code of the page itself, set a variable to determine which item to highlight.
Then, as John Millikin suggests, put a class on the link or on one of its parent elements such as "current-page" which will control the colour of it.