A New Theme

Forum Attachments

Summary:

This website looks built for the monochrome calculators. Perhaps we can implement a new theme?

A New Theme

Michael2_3B 20 May 2018 23:28

With the rise in popularity of the TI 84+ CE, it seems more and more people are designing programs for the color calculator these days. Of course, the monochrome calculators are still very important and used by many, but I was thinking that perhaps we can implement some new colors on the site that reflects the change from monochrome to color.

Take a look at TI-83 Basic Home - the main color is grey with a small hint of blue grey at the top.
68k TI-Basic Home - a more olive color, but still very monochrome-looking.
TI-Nspire Home - Brown.

These are great, and the color palettes reflect the calculator those pages were made for. But I don't see one that reflects the TI-84+ CE. Now, I know that the CE uses almost all of the same commands as TI-83 Basic, and there doesn't really need to be another Home for the color calculators, but it would be nice to see more colors added to the palette.

Take this suggestion for a grain of salt; it's not important, functionally, but it would be nice.

Re: A New Theme

(account deleted) 21 May 2018 14:11

I agree and disagree for the following reasons:
(If these are invalid reasons, ignore them)

---

I agree:

1. that we should change up some things on the Wiki. Since other websites (ex: Google Chrome) are always updating, this site should too. We can change a few things, and see how users (like me) react and feel to the updates)
2. It would make the site have a better feel when you visit it occasionally. It could attract more members too.

I do not agree:

1. with the new theme, since 2006, the Wiki has been as it always has, and most users have been used to this theme for years, and it may confuse the users with the interface and certain functionalities that are applied to the new updates.
2. The site's theme has a Wiki-feel to it, and It looks like a professional site.

---

I hope none if this offends you in any way Michael2_3B. These are just my thoughts of your idea. Anyways, I do not know if it will be installed to certain pages, but here is a Theme Idea I found on the WikiDot Themes page:

/* ============================= 
Theme: Matalex Dark 1.2
Author: Alexandra Bond
License: CC BY-SA 3.0
 
For more customized Wikidot themes: 
contact [e-mail]
============================= */
 
/* Global
============================= */
 
body {
     background-color: #006F6F;
}
 
body a {
    color: #66B9B9;
    text-decoration: none;
}
 
body a:hover {
    color: #F8F8FF;
    text-decoration: none;
    background-color: black;
}
 
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-family: "Courier New", Courier, monospace;
}
 
/* Container 
============================= */
 
#container {
    margin: 10px auto;
    width: 950px;
    background-color: black;
    font-family: "Courier New", Courier, monospace; 
    border-radius: 5px;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
    color: #F8F8FF;
    font-size: 110%;
    line-height: 170%;
}
 
@media only screen and (max-device-width: 480px) {
  #container {
    width: 100%;
  }
}
 
/* Header
============================= */
 
#header {
    height: 120px; 
}
#header h1 {
    display: block;
    height: 100px;
    padding-top: 30px;
    padding-left: 30px;
    font-family: "Courier New", Courier, monospace;
    font-size: 200%;
    text-shadow: 2px 0px 2px #858585;
    letter-spacing: 2px;
}
#header h1 a:hover {
    background: none;
    text-decoration: none;
}
#header h2 {
    position: absolute;
    top: 80px;
    left: 80px;
    letter-spacing: 2px;
    font-family: "Courier New", Courier, monospace;
    font-size: 120%;
}
 
/* Top Bar 
============================= */
 
#top-bar {
     margin-top: 10px;
     width: 70%;
     height: 30px;
     position: relative;
     left: 0; 
     bottom: 0;
     margin-left: 15px;
}
 
#top-bar a {
    text-decoration: none;
    letter-spacing: 1px;
}
 
#top-bar a:hover {
    color: #F8F8FF;
    text-decoration: none;
    background-color: black; 
    font-weight: bold;
    letter-spacing: 1px;
}
 
#top-bar li ul li a {
    background-color: black; 
}
 
sfhover {
    background-color: black; 
}
 
/* Side Bar
============================= */
 
#side-bar {
     float: right;
     border: 1px solid #DFDFE6;
     width: 200px;
     padding-left: 20px;
     padding-right: 20px;
     border-radius: 5px;
     margin-right: 10px;
}
 
#side-bar a:hover {
    font-weight: bold;
}
 
/* Content
============================= */
 
#main-content {
    margin: 30px 260px 20px 5px;
    padding: 30px;
}
 
#main-content a:hover {
    font-weight: bold;
}
 
/* Page Title 
============================= */
 
#page-title{
    font-size: 120%;
    padding-bottom: 5px;
}
 
/* Table of Content
============================= */
 
#toc {
     background-color: black;
     border: 1px solid #DFDFE6;
     padding: 20px;
     border-radius: 5px;
}
 
#toc a:hover {
    font-weight: bold;
}
 
/* Code Block
============================= */
 
.code {
     font-family: "Courier New", Courier, monospace;
     background-color:#DFDFE6;
     color: black; 
     padding: 5px 20px 5 px 20px;
     border-radius: 5px;
}
 
/* Basic Table
============================= */
 
table.wiki-content-table th {
    background-color: black;
    color: #DFDFE6;
}
 
/* Quote
============================= */
 
blockquote {
     font-family: "Courier New", Courier, monospace;
     background-color: black; 
     color: #DFDFE6;
     padding: 5px 20px 5 px 20px;
     border-radius: 5px;
     margin-left: 0px;
     margin-right: 0px;
}

Here is my edited version of the code I posted above:

/* ============================= 
Theme: Matalex Dark 2.3.5 (Edited and improved by Bio_Hazard1282)
Author: Alexandra Bond
License: CC BY-SA 3.0
 
For more customized Wikidot themes: 
contact [e-mail]
============================= */
 
/* Global
============================= */
 
body {
     background-color: #104E8B;
}
 
body a {
    color: #66B9B9;
    text-decoration: none;
}
 
body a:hover {
    color: #F8F8FF;
    text-decoration: none;
    background-color: orange;
}
 
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-family: "Courier New", Courier, monospace;
}
 
/* Container 
============================= */
 
#container {
    margin: 10px auto;
    width: 950px;
    background-color: black;
    font-family: "Courier New", Courier, monospace; 
    border-radius: 5px;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
    color: #FF9A00;
    font-size: 110%;
    line-height: 170%;
}
 
@media only screen and (max-device-width: 480px) {
  #container {
    width: 100%;
  }
}
 
/* Header
============================= */
 
#header {
    height: 120px; 
}
#header h1 {
    display: block;
    height: 100px;
    padding-top: 30px;
    padding-left: 30px;
    font-family: "Courier New", Courier, monospace;
    font-size: 200%;
    text-shadow: 2px 0px 2px #858585;
    letter-spacing: 2px;
}
#header h1 a:hover {
    background: none;
    text-decoration: none;
}
#header h2 {
    position: absolute;
    top: 80px;
    left: 80px;
    letter-spacing: 2px;
    font-family: "Courier New", Courier, monospace;
    font-size: 120%;
}
 
/* Top Bar 
============================= */
 
#top-bar {
     margin-top: 10px;
     width: 70%;
     height: 30px;
     position: relative;
     left: 0; 
     bottom: 0;
     margin-left: 15px;
}
 
#top-bar a {
    text-decoration: none;
    letter-spacing: 1px;
}
 
#top-bar a:hover {
    color: #F8F8FF;
    text-decoration: none;
    background-color: black; 
    font-weight: bold;
    letter-spacing: 1px;
}
 
#top-bar li ul li a {
    background-color: black; 
}
 
sfhover {
    background-color: black; 
}
 
/* Side Bar
============================= */
 
#side-bar {
     float: right;
     border: 1px solid #DFDFE6;
     width: 200px;
     padding-left: 20px;
     padding-right: 20px;
     border-radius: 5px;
     margin-right: 10px;
}
 
#side-bar a:hover {
    font-weight: bold;
}
 
/* Content
============================= */
 
#main-content {
    margin: 30px 260px 20px 5px;
    padding: 30px;
}
 
#main-content a:hover {
    font-weight: bold;
}
 
/* Page Title 
============================= */
 
#page-title{
    font-size: 120%;
    padding-bottom: 5px;
}
 
/* Table of Content
============================= */
 
#toc {
     background-color: black;
     border: 1px solid #DFDFE6;
     padding: 20px;
     border-radius: 5px;
}
 
#toc a:hover {
    font-weight: bold;
}
 
/* Code Block
============================= */
 
.code {
     font-family: "Courier New", Courier, monospace;
     background-color:#DFDFE6;
     color: black; 
     padding: 5px 20px 5 px 20px;
     border-radius: 5px;
}
 
/* Basic Table
============================= */
 
table.wiki-content-table th {
    background-color: black;
    color: #DFDFE6;
}
 
/* Quote
============================= */
 
blockquote {
     font-family: "Courier New", Courier, monospace;
     background-color: black; 
     color: #DFDFE6;
     padding: 5px 20px 5 px 20px;
     border-radius: 5px;
     margin-left: 0px;
     margin-right: 0px;
}

---

Hewwo, my name is Achak Claw. I was formerly BioHazard.

Re: A New Theme

Trenly 21 May 2018 15:09

Much of the theme for this site is not standard with any you will find on the wikidot themes page. This is because a lot of it is custom due to some of the unique things on this site such as the character box, the code boxes automatically being capped at a certain length and receiving a scrollbar, and many other portions of the site.

I personally think that the theme is fine, and that there is no need to change it.

Re: A New Theme

Michael2_3B 21 May 2018 17:37

I don't know why you think that would offend me; thank you for sharing your opinion! I agree with everything you said, except for when you mentioned new updates and certain functionalities. I am not looking to change any functionalities on this site.

Re: A New Theme

(account deleted) 21 May 2018 17:48

What I meant is, that certain styles and other things is changed that people are not used to see.

---

Hewwo, my name is Achak Claw. I was formerly BioHazard.

Re: A New Theme

Timothy Foster 22 May 2018 02:58

Rather than a new theme, I'd recommend making the site mobile-friendly. Be nice to have a portable command index for that day you have nothing but a calculator and a phone to entertain you.

Or if they invent the T-iPhone. Y'know, a TI calculator that is also a phone : P

---

Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me

Re: A New Theme

Battlesquid 22 May 2018 03:54

Quack.

Saw this on Cemetech, pretty neat project if you ask me :)

---

Last edited on 22 May 2018 03:55 by Battlesquid Show more

Re: A New Theme

(account deleted) 22 May 2018 14:02

I wonder how many TI-Phones they could make, and just think how many people will buy them.

---

That is a really good project though. Impressive Design.

---

Hewwo, my name is Achak Claw. I was formerly BioHazard.

Last edited on 22 May 2018 19:15 by (account deleted) Show more

Re: A New Theme

Trenly 22 May 2018 14:49

A few things:

1. Not many people don't have access to YouTube
2. If they don't have access to YouTube, they won't be able to see an embedded video from YouTube
3. It seems as if you didn't embed it properly, as there is no video there

Re: A New Theme

Myles_Zadok 24 May 2018 02:32

I think the Nspire Home page is purple, actually…

Re: A New Theme

Trenly 24 May 2018 02:56

Appears brown on my iPhone

Re: A New Theme

Myles_Zadok 24 May 2018 03:11

The hex code color is #564a43. It looks purple to me, but HTML Color Picker by W3 Schools put it in a brown spectrum, so I guess I'm slightly color blind :P

Re: A New Theme

(account deleted) 24 May 2018 14:02

The Theme is brown too.

---

Hewwo, my name is Achak Claw. I was formerly BioHazard.

Re: A New Theme

Battlesquid 23 May 2018 05:33

Here's a start to some responsive CSS.

@import url(http://static.wikidot.com/common--theme/co/css/style.css?0);
 
.code {
font-size: 105%;
max-height: 300px;
overflow: auto;
}
 
.hidden-collapsible .collapsible-block-link {
    text-decoration:none;
}
 
.wd-adunits {
  display: none !important;
}
 
.signature {
  display: none !important;
}
 
#search-top-box, #login-status {
  margin-right: 4em !important;
}
 
.chars{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
}
 
.chars2{
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
}
 
.chars, .chars2 {
    text-align: center;
    border: 1px solid #999;
    padding: 0;
    margin: 0 0 0 0;
    background: #f7f7f7;
    font-family: Trebuchet MS, Trebuchet, Verdana, Arial, Helvetica;
}
 
.infos:after {
  float: right;
  content: "→∟→ ∟ ‾ × ÷ ± √ Σ ≠ ≥ ≤ π Δ χ ▶ ¹ ² ³ L₁ L₂ L₃ L₄ L₅ L₆ ≅ ℕ º θ ∠ ∞ ♦ ⇧ ∫ ∏ ©";
}
 
/*div.forum-mini-stat div.item:hover,
div.long:hover {
  background: #f5f5f5;
}*/
div.forum-group table tr:hover,
div.forum-group table tr td:hover,
div.forum-category-box table tr:hover,
div.forum-category-box table tr td:hover {
  background: #eee;
}
 
div.forum-mini-stat div.item {
  padding-left: 5px;
}
 
div.forum-mini-stat div.item div.title a {
  display: block;
}
 
div.forum-mini-stat div.item div.info a {
  display: inline;
}
 
div.forum-mini-stat div.item div.title a:hover {
  background: #f5f5f5;
}
 
.post .long .content p {
  padding-left: 1em;
}
 
div#np-editor-panel.wd-editor-toolbar-panel:before {
  content: "NOTE: TI-Basic characters are available in CHAR box at top right screen, just copy & paste."
  font-weight: normal;
  font-size: 1em;
  color: #434f43;
  background: #f5f5f5;
  display: block;
  width: auto;
  margin: .5em 0;
  padding: .5em;
  sfont-family: Arial;
}
 
div.edit-help-34 {
  display: none;
}
 
.pages-list {
  margin: 0.5em 0;
  padding: 0;
  display: block;
}
.pages-list div.pages-list-item {
  margin: 0;
  padding: 0;
  display: block;
}
.pages-list-item div.title {
  margin: 0;
  padding: 0;
}
.pages-list div.pages-list-item a {
  margin: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 1em;
  color: #1E2B31;
  display: block;
  border-bottom: 1px solid #BBBEAB;
  border-top: 1px solid #D2D3C6;
  text-decoration: none;
}
.pages-list div.pages-list-item a:hover {
  background: #D1D3C3;
}
 
.infobox{
    color: #FFFFFF;
}
 
.infobox a{
    color: #FFFFFF;
}
 
#header {
    background: #OC141B;
    width:expression(document.body.clientWidth < 800? "800px" : "auto");
}
#header h1 {
  padding: 0;
  margin: 0;
  width: 800px; //735px; //789px;
  height: 69px;
  background: #OC141B;
  background-image: url(http://tibasicdev.wikidot.com/local--files/logo/Logo10B.PNG);
}
#header h1 a {
  padding: 0;
  margin: 0 320px 0 8px;
  width: 472px; //721px; //735px; //789px;
  height: 69px;
  display: block;
}
#header h1 span {
  display: none;
}
#top-bar {
  top: 69px;
  height: 21px;
  padding: 0;
  background-color: #4D5C63;
  border-bottom: 2px solid #4D5C63;
}
#top-bar  a, #top-bar li ul li a {
    background-color:#4D5C63;
}
#top-bar a:hover, #top-bar li ul li a:hover {
    background-color:#4D5C63;
}
#side-bar {
  min-width: 185px;
}
#header h2 {
  display: none;
}
 
#license-area {
  display: none !important;
}
 
table.charmap {
  background: white;
  border: #999 solid 1px;
  border-spacing: 2px;
  padding: .3em;
  table-collapse: collapse;
}
table.charmap tr td {
  text-align: center;
}
 
.wd-editor-toolbar-panel li.hseparator {
  background: url('http://tibasicdev.wikidot.com/local--files/home/toolbar-separator.png');
  width: 22px;
  height: 22px;
  margin: 1px;
}
 
@media print {
 
#print-head,#page-info,
#license-area,#print-footer {
  display: none !important;
}
 
div#page-content:after {
  text-align: center;
  width: auto !important;
  display: block !important;
  margin: 2em 0 0;
  clear: both !important;
  padding-top: .5em;
  border-top: 1px solid #000;
  content: "TI-Basic Developer © 2006-2016 — \"A wiki for the TI-Basic beginner and advanced alike!\"";
}
}
 
.werecode{
    font-family: 'Andale Mono', 'Courier New', Courier, monospace;
    font-size: 9pt;
    color: #11119C;
}
 
.ti83{
    font-family: Ti83pc,'Andale Mono','Courier New',Courier,monospace;
    border-left:3px dotted #000;
    background:#EEE;
    padding-left:3px;
    color:#367A4B;
    margin:3px 2em 5px 1em;
}
.nspire{
    background: #FFF;
    border: 1px dashed #DDD;
    padding-left:1em;
    margin: 1em 0 1em 0;
    font-family:'Arial Unicode MS',verdana,arial,helvetica,sans-serif;
    color: #222;
    letter-spacing:1.2pt;
}
@media only screen and (max-width: 800px) {
  #side-bar {
    display: none;
  }
  #main-content {
    margin-left: 0%;
  }
  a#my-account {
    display: none;
  }
  #header h1 {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 69px;
    background: #OC141B;
    background-image: url(http://tibasicdev.wikidot.com/local--files/logo/Logo10B.PNG);
  }
  #header {
    background: #OC141B;
    width: 100%;
  }
  #top-bar {
    top: 69px;
    height: 21px;
    width: 100%;
    padding: 0;
    background-color: #4D5C63;
    border-bottom: 2px solid #4D5C63;
  }
}

---

Re: A New Theme

Trenly 27 May 2018 17:17

I haven’t started changing much of the CSS, but I did make it so that images wider than the post body they are in will now match the width of the post body. This should be responsive to whichever browser and device is being used

Re: A New Theme

Myles_Zadok 28 May 2018 20:00

Thank you so much! That was driving me crazy :P

Re: A New Theme

Trenly 01 Jun 2018 01:38

Also fixed an issue where long hyperlinks would not wrap the text properly, and would overflow the width of the post body