Neko Neko - 29 days ago 16
CSS Question

Editing tag explorer.js

I'd like to remove the letters that are displayed at the left of the tags produced by

. How can I achieve this?

Here's the live website: https://ewelinawoloszyn.github.io/Research/research_03.html

Here's the script:

// The container to hold the tags.
tagContainer = document.querySelector('.tag-container');
// An array of objects where the `'element'` property is the article element (to
// be hidden), and the `'tags'` attribute is an array of tags on this article.
// Articles do not necessarily have to be the <article> element.
articles = [].slice.call(document.querySelectorAll('article')).map(function (article) {
return {
'element': article,
'tags': [].slice.call(article.querySelectorAll('.tags li')).map(function (tag) {
return tag.textContent;
})
};
});
// Create an array of tag names to be available for filtering.
tagNames = ['Public Finance', 'Access', 'Data','Money','Open Source'];
// Initialise tag-explorer.
tagExplorer(tagContainer, articles, tagNames);


Here's the desired output -- I'd like the red crossed letters to be removed:
Here's the desired output

Any advice much appreciated.

Answer

You can hide these letters by altering some styles in your file style.css:

Change this:

.tag-container .letter-header {
  display: inline-block;
  padding: 0 1em;
}
.tag-container button {
  background-color: #AAA;
  color: #fff;
    -moz-border-radius: 0 3px 3px 0;
    -webkit-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
    border: 0px;
    padding: 1px 6px;
}

to this (changes are marked with /* .. */):

.tag-container .letter-header {
  display: none;  /* <!-- modified */
  padding: 0 1em;
}
.tag-container button {
  margin: 0 5px;       /* <!-- added */
  background-color: #AAA;
  color: #fff;
  -moz-border-radius: 0 3px 3px 0;
  -webkit-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
  border: 0px;
  padding: 1px 6px;
}

The first change causes the letters not being rendered. Without further change this would make the tags (buttons) stick to each other. The second change deals with this, and introduces an empty space between them.

Comments