Using Stylish to Make Changes to Tatoeba.org

About this Page

1. Fix Link Colors

Current: Links = Light Green; Hover = Orange

New: Links = Navy Blue; Hover = Blue and Underlined

CSS- Get More Readable Link Colors

body {
color: #000;
background: #fff;
}

/* Get near standard link colors */

a {color:navy;}

//a:visited {color: purple;}
// show different visited color, so you know which pages you've seen before
// perhaps not all members will like this one, so I commented it out.

a:hover {
cursor:default;
color:blue;
text-decoration:underline
}

/* links in nav bar need to be lighter blue */
.search-bar-extra a{color:#cff;}

/* « previous next » random */
.options .active a{color:navy;}
.options .active a:hover{color:blue;text-decoration:underline}

/* Fix link color for sentenceId */

.sentenceId a{color:navy}
.sentenceId a:hover{color: blue;text-decoration: underline}

/* Fix link color for sentence stats shwon on home page */
.sentencesStats .stat a{color:navy}
.sentencesStats .stat a:hover{color: blue;text-decoration: underline}
/* not completely fixed, since underline doesn't show on hover
Maybe the following class is needed

.total
*/

/* ==== Fix link colors when USERNAME is displayed */

/* Fix link color for user on Latest Contributions / Logs*/

.user a{color:navy}
.user a:hover{color: blue;text-decoration: underline}

/* Fix link color for ownerName in Comments (after sentence) */

a.ownerName{color:navy}
a.ownerName:hover{color: blue;text-decoration: underline}

/* Fix link color for username above comments and in Wall Postings */

.ususernamee a{color:navy}
.username a:hover{color: blue;text-decoration: underline}

/* Fix link color for user on Wall "Preview" on Home Page */

.lastWallMessages .header a{color:navy}
.lastWallMessages .header a:hover{color: blue;text-decoration: underline}

/* Fix link color for username in "belongs to" when shown on browse sentences and on sentences' pages */

a.adopt-item{color:navy}
a.adopt-item:hover{color: blue;text-decoration: underline}

/* ==== END Fix link colors when USERNAME is displayed */

/* Fix link color for sentenceText */

.sentence a.sentenceText:visited, .sentence a.sentenceText:link{color:navy}
.sentence a.sentenceText:hover{color: blue;text-decoration: underline}

/* colors in comments */
.comments a {
color: navy ! important
}

/*   doesn't work ? */
.comments a:hover {color: blue;text-decoration: underline}

/* Change the color of the sentence text (link)
   in the comments, so it's more readable 
   
   I think this part didn't work, so maybe this can be
   deleted.
*/

.body .sentence .sentenceText a{color:black}

/* links in dark coloreed buttons need to be lighter blue
   Perhaps this one isn't neeeded anymore.    
*/
    
.titleAnnexeLink.a{color:#cff ! important}

Notes

  • Green is often a difficult color to read on a computer screen, especially if you are colorblind or partially colorblind.
  • The light color of the current links may be difficult to read for older eyes since the contrast with the white background is low.
  • This CSS changes the link colors to something that is easier to read, and also standardizes the link color used in the sentence in the "comments" feed.
  • Since blue is a very traditional color for links, that's the color I chose. I did choose the more subdued "navy blue", since I suspect that TRANG would prefer that over the more (glaring) blue.
  • Link = Navy (Blue)
  • Hover = Blue and underlined (This is kind of thing is done fairly often, so people on the Web are familiar with this.)
  • Visited = ignored (commented out, but in the code) I prefer having a different color for "visited links", but perhaps it's not appropriate for everybody.
  • If you find these colors difficult to read, you can fairly easily edit this CSS to suit your needs.

2. Collapse "Latest Contributions" and Logs

The Above Fix on the Right for Comparison

New: Collapsed, Less Vertical Space

CSS - Latest Contributions and Logs


/* Latest Contributions & Logs? */

/* see complete one at http://tatoeba.org/css/elements/logs.css */

/* Revert to color-coding */

.added{background: #e7ffe7 !important;}
.deleted{background: #fcc !important;}
.edited{background: #ffffe7 !important;}

/* added 2 new color-codings */

.obsolete{background: #eee !important;}
.linkLog{background: #efffff !important;}


/* get rid of the line */

#logs .sentenceLog.obsolete .contribution,
#logs .linkLog.deleted .contribution,
#logs .linkLog.added .contribution,
#logs .sentenceLog.deleted .contribution,
#logs .sentenceLog.added .contribution,
#logs .sentenceLog.edited .contribution {
    border-left: none;
}

/* get rid of the extra padding */

#main_content #logs .contribution {
    padding: 0px 2px 4px 0px ! important;
    margin-left: 0px;
}
#logs .contribution {
    max-width: 585px;
}

/* add in solid colors on the right and left sides of contributions, just for fun and emphasis */

.added {
    border-left: 9px solid #CAE2AA;
        border-top: 1px solid #CAE2AA;
}
.edited {
    border-left: 9px solid yellow;
        border-top: 1px solid yellow;
}
.deleted {
    border-left: 9px solid red;
        border-top: 1px solid red;
}
.obsolete {
    border-left: 9px solid #000;
        border-top: 1px solid #000;
}
.linkLog {
    border-left: 9px solid SkyBlue;
        border-top: 1px solid SkyBlue;
}
.linkLog .date, .sentenceLog .date {
    font-size: 6pt;
}

/* USERNAMES on LATEST - marked "added by etc. smaller */

.sentenceLog .user {
    font-size: 6pt;
}
.sentenceLog .user a {
    font-size: 10pt;
}
.sentenceLog .user a {
    padding: 1px
}

/* pretty much hides the word "Sentence #" */

.sentenceLog .sentenceId {
    font-size: .1pt;
}

.linkLog .sentenceId {
    font-size: .1pt;
}

/* reverts the link part to bigger */

.sentenceLog .sentenceId a {
    font-size: 12pt;
}

.linkLog .sentenceId a {
    font-size: 12pt;
}

/* 14-11-16 additions  - gets whole area around the sentence the same lighter colors */

#logs .sentenceLog.added .content {
    background:#e7ffe7 ! important;
}

#logs .sentenceLog.deleted .content {
    background:#fcc ! important;
}

#logs .sentenceLog.edited .content {
    background:#ffffe7 ! important;
}

#logs .linkLog.added .content{
    background:#efffff ! important;
}

#logs .linkLog.deleted .content {
    background:#fcc ! important;
}

#logs .sentenceLog.obsolete .contribution .content {
    background:#eee ! important;
}

.deleted{background:#fcc ! important}

Notes

  • I prefer it this way since I don't have to scroll as much to see the rest of the page.
  • The clickable sentence number link is larger and a bit easier to click.
  • I also changed the background colors to a bit lighter, so there is a better contrast with the sentence text.

3. Revert Navigation Bar

Current: Larger with Logo

New: Reverted to the older, smaller one

CSS - Smaller Top Nav Bar

/* Revert to the original smaller top navigation bar */

#top_menu {
    padding: 0px;
}
#logo .tatoeba-name {
    vertical-align: top;
    margin: 0 2px;
}
#languageSelectionContainer,
#user_menu {
    line-height: 32px;
}
#languageSelection {
    margin-top: 0px;
}
#profile img,
#log_out img,
#inbox img {
    top: 0px;
}
/* logo hidden, since I couldn't easily resize it */

#logo img {
    display: none;
}

Notes

  • This reverts the top nav bar to what it was before the logo was inserted into it.
  • This is mostly a personal preference.
  • It does, however, more efficiently use the screen space which probably only matters on smaller screens.

4. Require Less Scrolling on Comments Feed

Current:

New: Slightly Closer Together Plus an Extra Line

CSS - Less Scrolling Through Comments

/* make comments so you don't need to scroll so much */

.message{
 margin:5px ! important; border-bottom:8px solid #CAE2AA;
}

.message .content{padding:10px ! important}

Notes

  • The space between comments has been reduced.
  • Some of the padding was removed.
  • To ensure that comments are separated, I inserted an extra bottom border that matches the left border.

5. Smaller TextArea for Comments and Wall Posts

Current: More Space Than What's Usually Needed

New: Smaller

CSS - Smaller TextArea for Comments

#SentenceCommentText,#WallContent{height:6em}

Notes

  • This affects both the comments and the Wall.
  • Using this will mean you can read more of the Wall before you need to start scrolling.
  • The size of this input area doesn't affect how much text can be input.

6. More Easily Scan the Wall

Current: Sometimes it's hard to easily find the next "thread."

New: Items in a thread are grouped together

CSS - More Easily Scan the Wall

/* Make wall posts so it is easier to find next topic.
 * A black line surrounds each topic.
 * Extra space is inserted between topics */

.topThread{
border:4px solid #000;
margin-bottom:200px;
}

Notes

  • Extra space is inserted between threads.
  • All items within a thread are grouped together inside a black box.

7. Show Only Selected Languages in the Selection Menu

Current: Many Languages I Never Need to Use

New: Just the Languages I'm Interested In

CSS - Show Only Selected Languages

/* Limit languages on drop-down menus for search & flags */

.language-selector option {display:none;}
option[value*="eng"],
option[value*="epo"],
option[value*="tur"],
option[value*="ita"],
option[value*="rus"],
option[value*="deu"],
option[value*="fra"],
option[value*="spa"],
option[value*="por"],
option[value*="jpn"],
option[value*="hun"],
option[value*="heb"],
option[value*="ber"],
option[value*="pol"],
option[value*="mkd"],
option[value*="fin"],
option[value*="nld"],
option[value*="cmn"],
option[value*="mar"],
option[value*="ukr"],
option[value*="swe"],
option[value*="dan"],
option[value*="srp"],
option[value*="bul"],
option[value*="ces"],
option[value*="lat"],
option[value*="ara"],
option[value*="nds"]
{display:block !important;}

Notes

  • This "demo" CSS has only the top 28 languages on tatoeba.org listed.
  • All you need to do is delete the ones you don't want and add others that you may want to include.
  • Notice that the last one on the list should not be followed by a comma.