OpenMW Wiki Theme

Not about OpenMW? Just about Morrowind in general? Have some random babble? Kindly direct it here.
User avatar
Atahualpa
Posts: 1176
Joined: 09 Feb 2016, 20:03

OpenMW Wiki Theme

Post by Atahualpa »

Hello,

a while ago, openmwfan27 posted his custom OpenMW bug tracker theme. Following his lead, I've just created a similar theme for our Wiki page. I've tested it with the latest Firefox update and its Stylish plugin.
I've never worked with CSS before and have done everything from scratch, so please point out any mistakes you encounter.


Updated on 2016/10/07:
- Removed doubled "border-style" lines
- Adjusted layout of headlines and thumbnails as well as elements in Page History and Recent Changes

Updated on 2016/09/10:
- Removed some more unnecessary settings.
- Removed out-commented code.
- Added comments to every block.

Updated on 2016/09/09:
- Changed left navigation links color to black.
- Removed explicit width setting from certain header objects.



Here's the code. Don't forget to include the domain ("wiki.openmw.org") and an appropriate namespace (e.g. "http://www.w3.org/1999/xhtml"):

Code: Select all

/* spans */
div.vectorTabs span{
  background-image:none;
}

/* "More" -> dropdown arrow */
div.vectorMenu h3 a{
  height:30px;
}

div.menu{
  display:inline-block;
}

/* "More" -> dropdown list */
div#mw-head div.vectorMenu h3{
  height:30px;
  background:none;
}

/* make dropdown list working */
div.vectorMenu div.menu{
  background-color:rgba(252,252,252,0.64);
  position:relative;
  top:0px;
  z-index:100;
}

/* text fields */
input[type="text"], textarea{
  background-color:rgba(252,252,252,0.4);
}

/* text fields (cont.) */
input, textarea{
  background-color:rgba(252,252,252,0.4);
}

/* dropdown boxes */
select{
  background-color:rgba(252,252,252,0.4);
}

/* "modern" dropdown boxes */
.oo-ui-dropdownWidget:last-child{
  background-color:rgba(252,252,252,0.4);
}

/* "modern" dropdown boxes (cont.) */
.oo-ui-optionWidget.oo-ui-widget-enabled{
  background:White;
}

/* "modern" dropdown boxes (cont.) */
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected{
  background:#ECECEC;
}

/* "modern" dropdown boxes (cont.) */
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted{
  background:RoyalBlue;
}

/* "modern" dropdown boxes (cont.) */
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted{
  background:RoyalBlue;
}

/* code boxes in articles */
code{
  background-color:rgba(252,252,252,0.4);
}

/* code boxes in articles (cont.) */
pre, .mw-code{
  background-color:rgba(252,252,252,0.4);
}

/* ??? */
option{
  background-color:rgba(252,252,252,0.64);
}

/* buttons */
input[type=submit]
{
  background:url("https://forum.openmw.org/styles/openmw/theme/images/bg.jpg") fixed #c8b9a2;
  font-weight:bold;
  padding:5px;
}

/* "Preferences" -> content box */
.prefsection{
  background:
	 linear-gradient(
		rgba(252,252,252,0.4),
		rgba(252,252,252,0.4)
	 ),
	 linear-gradient(
		rgba(252,252,252,0.4),
		rgba(252,252,252,0.4)
	 ),
	 url("https://forum.openmw.org/styles/openmw/theme/images/bg.jpg") fixed #c8b9a2;
}

/* "Preferences" -> frame of content box */
.client-js #preferences{
  background-color:rgba(252,252,252,0.4);
}

/* "Preferences" -> tab fields */
.client-js #preftoc li{
  background:rgba(252,252,252,0.4);
  border-style:solid;
  border-color:LightGrey;
  border-width:1px;
}

/* "Preferences" -> selected tab field */
.client-js #preftoc li.selected a{
  background-image:none;
  background:rgba(252,252,252,0.4);
}

/* tables in "Page Information" */
.wikitable.mw-page-info{
  background-color:rgba(252,252,252,0.4);
}

/* cells in sortable tables */
.wikitable.sortable.jquery-tablesorter{
  background-color:rgba(252,252,252,0.4);
}

/* "View History" -> Page History panel */
ul#pagehistory{
  /*background:url("https://forum.openmw.org/styles/openmw/theme/images/bg.jpg") fixed #c8b9a2;*/
}

/* "View History" -> all entries */
#pagehistory li{
  padding:2px;
  border-style:none;
}

/* "View history" -> newer */
#pagehistory li.selected.before{
  background-color:rgba(252,252,252,0.4);
  border-style:solid;
  border-color:DimGrey;
  border-width:2px;
}

/* "View history" -> older */
#pagehistory li.selected.after{
  background-color:rgba(252,252,252,0.4);
  border-style:solid;
  border-color:DimGrey;
  border-width:2px;
}

/* "View history" -> elements in between */
#pagehistory li.between{
  background-color:rgba(252,252,252,0.4);
  border-style:dashed;
  border-color:DimGrey;
  border-width:1px;
}

/* "Edit" -> options panel */
.editOptions{
  background-color:rgba(252,252,252,0.4);
  border-style:solid;
  border-color:DimGrey;
  border-width:1px;
}

/* thumbnails */
li.gallerybox div.thumb{
  background:url("https://forum.openmw.org/styles/openmw/theme/images/bg.jpg") fixed #c8b9a2;
  border-style:solid;
  border-color:DimGrey;
  border-width:1px;
}

/* list of contents */
.toc{
  background:
	 linear-gradient(
		rgba(252,252,252,0.4),
		rgba(252,252,252,0.4)
	 ),
	 linear-gradient(
		rgba(252,252,252,0.4),
		rgba(252,252,252,0.4)
	 ),
	 url("https://forum.openmw.org/styles/openmw/theme/images/bg.jpg") fixed #c8b9a2;
}

/* -------------- */
/* general layout */
/* -------------- */
body{
  background:url("https://forum.openmw.org/styles/openmw/theme/images/bg.jpg") fixed #c8b9a2;
  width:98%;
}

/* headlines, level 1 */
.mw-body h1{
  border-bottom-color:DimGrey;
}

/* headlines, level 2 */
.mw-body h2{
  border-bottom-color:DimGrey;
}

/* header */
div#mw-head{
  position:absolute;
  left:0;
  width:98%;
}

/* header (cont.) */
#mw-page-base{
  background:url("https://forum.openmw.org/styles/openmw/theme/images/bg.jpg") fixed #c8b9a2;
}

/* header (cont.) */
#mw-head-base{
  background:
	 url(https://forum.openmw.org/styles/openmw/theme/images/logo.png) top 2px left 2px,
	 url(https://forum.openmw.org/styles/openmw/theme/images/header.jpg);
  background-repeat:
	 no-repeat,
	 no-repeat;
  background-size:
	 459px 100px,
	 cover;
  height:150px;
  border-style:solid;
  border-color:DimGrey;
  border-width:1px;
}

/* upper left logo box */
#p-logo a{
  position:relative;
  left:10px;
  height:150px;
  width:150px;
}

/* upper left logo */
#p-logo{
  position:absolute;
  left:0px;
  width:10px;
}

/* content box */
#wrapper,
#main,
#content{
  background:rgba(252,252,252,0.4);
  position:relative;
  z-index:8;
  border-style:solid;
  border-color:DimGrey;
  border-width:1px;
}

/* content box (cont.) */
#content::before{
  content:"";
  z-index:8;
}

/* ----------- */
/* link colors */
/* ----------- */
.mw-body a:link{color:DarkBlue;}            /* normal unvisited links */
.mw-body a:link:visited{color:DarkBlue;}    /* visited links */
.mw-body a:link:active{color:DarkBlue;}     /* active links */
.mw-body a:link.new{color:DarkBlue;}        /* new links */
.mw-body a:link.interwiki{color:DarkBlue;}  /* interwiki links */
.mw-body a:link.external{color:DarkBlue;}   /* external links */
.mw-body a:link.stub{color:DarkBlue;}       /* hovered links */

.mw-body a:link{color:DarkBlue}
.mw-body a:visited{color:DarkBlue}
.mw-body a:hover{color:DarkBlue}
.mw-body a:active{color:DarkBlue}

/* ---------- */
/* left panel */
/* ---------- */
div#mw-panel{
  padding:0;
  width:170px;
}

/* links left panel */
div#mw-panel div.portal div.body ul li a{
  color:Black;
}

/* left navigation bar */
#p-navigation{
  font-weight:bold;
  font-size:large;
}

/* left tool box */
#p-tb{
  font-size:large;
}

/* ------------------------- */
/* upper left navigation bar */
/* ------------------------- */
#p-namespaces{
  padding:0;
  position:relative;
  top:80px;
  height:30px;
  border-style:none;
}

/* "Main page" / "Page" */
#ca-nstab-main{
  background:rgba(252,252,252,0.65);
  line-height:0px;
  font-weight:bold;
  border-style:solid;
  border-color:DimGrey;
  border-width:1px;
}

/* "Special page" */
#ca-nstab-special{
  background:rgba(252,252,252,0.65);
  line-height:0px;
  font-weight:bold;
  border-style:solid;
  border-color:DimGrey;
  border-width:1px;
}

/* "User page" */
#ca-nstab-user{
  background:rgba(252,252,252,0.65);
  line-height:0px;
  font-weight:bold;
  border-style:solid;
  border-color:DimGrey;
  border-width:1px;
}

/* "Discussion */
#ca-talk{
  background:rgba(252,252,252,0.65);
  line-height:0px;
  font-weight:bold;
  border-style:solid;
  border-color:DimGrey;
  border-width:1px;
}

/* upper right header */
#right-navigation{
  padding:0;
  position:relative;
  top:80px;
  height:30px;
  border-style:none;
}

/* -------------------------- */
/* upper right navigation bar */
/* -------------------------- */
#p-views{
  padding:0;
  position:relative;
  left:-20px;
  height:30px;
}

/* "Read" */
#ca-view{
  background:rgba(252,252,252,0.65);
  line-height:0px;
  font-weight:bold;
  border-style:solid;
  border-color:DimGrey;
  border-width:1px;
}

/* "View source" */
#ca-viewsource{
  background:rgba(252,252,252,0.65);
  line-height:0px;
  font-weight:bold;
  border-style:solid;
  border-color:DimGrey;
  border-width:1px;
}

/* "Edit" / "Create" */
#ca-edit{
  background:rgba(252,252,252,0.65);
  line-height:0px;
  font-weight:bold;
  border-style:solid;
  border-color:DimGrey;
  border-width:1px;
}

/* "Add topic" */
#ca-addsection{
  background:rgba(252,252,252,0.65);
  line-height:0px;
  font-weight:bold;
  border-style:solid;
  border-color:DimGrey;
  border-width:1px;
}

/* "View history" */
#ca-history{
  background:rgba(252,252,252,0.65);
  line-height:0px;
  font-weight:bold;
  border-style:solid;
  border-color:DimGrey;
  border-width:1px;
}

/* Watchlist box (inactive) */
#ca-watch{
  background:rgba(252,252,252,0.65);
  line-height:20px;
  font-weight:bold;
  border-style:solid;
  border-color:DimGrey;
  border-width:1px;
}

/* Watchlist icon (inactive) */
#ca-watch.icon a{
  position:relative;
  top:-6px;
}

/* Watchlist box (active) */
#ca-unwatch{
  background:rgba(252,252,252,0.65);
  line-height:20px;
  font-weight:bold;
  border-style:solid;
  border-color:DimGrey;
  border-width:1px;
}

/* Watchlist icon (active) */
#ca-unwatch.icon a{
  position:relative;
  top:-6px;
}

/* "More" */
#p-cactions{
  background:rgba(252,252,252,0.65);
  position:relative;
  left:-20px;
  height:30px;
  line-height:0px;
  font-weight:bold;
  border-style:solid;
  border-color:DimGrey;
  border-width:1px;
}

/* -------- */
/* User tab */
/* -------- */
#p-personal{
  position:absolute;
  top:120px;
  left:340px;
  height:30px;
  width:60px;
  font-weight:bold;
  font-size:18px;
}

/* "Log in" */
#pt-login{
  position:relative;
  top:350px;
  right:495px;
  height:30px;
  width:80px;
}

/* "<User name>" */
#pt-userpage{
  position:relative;
  top:350px;
  right:510px;
  height:30px;
  width:80px;
}

/* "Talk" */
#pt-mytalk{
  position:relative;
  top:335px;
  right:495px;
  height:30px;
  width:80px;
}

/* "Preferences" */
#pt-preferences{
  position:relative;
  top:320px;
  right:495px;
  height:30px;
  width:80px;
}

/* Watchlist */
#pt-watchlist{
  position:relative;
  top:305px;
  right:495px;
  height:30px;
  width:80px;
}

/* "Contributions */
#pt-mycontris{
  position:relative;
  top:290px;
  right:495px;
  height:30px;
  width:80px;
}

/* Log Out */
#pt-logout{
  position:relative;
  top:275px;
  right:495px;
  height:30px;
  width:80px;
}

/* ---------- */
/* search bar */
/* ---------- */
#p-search{
  position:relative;
  left:-20px;
  height:30px;
  width:200px;
}

/* search form */
#searchform{
  position:relative;
  top:-9px;
  height:30px;
  width:200px;
  border:none;
}

/* search box */
div#simpleSearch{
  height:20px;
  width:200px;
}

/* search field */
#searchInput{
  line-height:15px;
}

/* search field (cont.) */
div#simpleSearch #searchInput{
  background:
	 linear-gradient(
		rgba(252,252,252,0.4),
		rgba(252,252,252,0.4)
	 ),
	 linear-gradient(
		rgba(252,252,252,0.4),
		rgba(252,252,252,0.4)
	 ),
	 url("https://forum.openmw.org/styles/openmw/theme/images/bg.jpg") fixed #c8b9a2;
}

/* search button */
div#simpleSearch #searchButton{
  background:none;
  background-color:#ECECEC;
  background-image:linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2213%22%3E%3Cg%20stroke-width%3D%222%22%20stroke%3D%22%236c6c6c%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M11.29%2011.71l-4-4%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
  background-position: center center;
  background-repeat: no-repeat;
}

/* ------------------- */
/* Recent Changes page */
/* ------------------- */

/* options field */
fieldset{
  border-style:solid;
  border-color:DimGrey;
  border-width:1px;
}

/* legend box */
.mw-changeslist-legend{
  border-style:solid;
  border-color:DimGrey;
  border-width:1px;
}

/* category bar below articles */
#catlinks{
  background: url("https://forum.openmw.org/styles/openmw/theme/images/bg.jpg") fixed #c8b9a2;
  font-weight:bold;
}
And here's the Firefox-ready code:

Code: Select all

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("wiki.openmw.org"){
   /* spans */
   div.vectorTabs span{
      background-image:none;
   }
   
   /* "More" -> dropdown arrow */
   div.vectorMenu h3 a{
      height:30px;
   }
   
   div.menu{
      display:inline-block;
   }
   
   /* "More" -> dropdown list */
   div#mw-head div.vectorMenu h3{
      height:30px;
      background:none;
   }
   
   /* make dropdown list working */
   div.vectorMenu div.menu{
      background-color:rgba(252,252,252,0.64);
      position:relative;
      top:0px;
      z-index:100;
   }
   
   /* text fields */
   input[type="text"], textarea{
      background-color:rgba(252,252,252,0.4);
   }
   
   /* text fields (cont.) */
   input, textarea{
      background-color:rgba(252,252,252,0.4);
   }
   
   /* dropdown boxes */
   select{
      background-color:rgba(252,252,252,0.4);
   }
   
   /* "modern" dropdown boxes */
   .oo-ui-dropdownWidget:last-child{
      background-color:rgba(252,252,252,0.4);
   }
   
   /* "modern" dropdown boxes (cont.) */
   .oo-ui-optionWidget.oo-ui-widget-enabled{
      background:White;
   }
   
   /* "modern" dropdown boxes (cont.) */
   .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected{
      background:#ECECEC;
   }
   
   /* "modern" dropdown boxes (cont.) */
   .oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted{
      background:RoyalBlue;
   }
   
   /* "modern" dropdown boxes (cont.) */
   .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted{
      background:RoyalBlue;
   }
   
   /* code boxes in articles */
   code{
      background-color:rgba(252,252,252,0.4);
   }
   
   /* code boxes in articles (cont.) */
   pre, .mw-code{
      background-color:rgba(252,252,252,0.4);
   }
   
   /* ??? */
   option{
      background-color:rgba(252,252,252,0.64);
   }
   
   /* buttons */
   input[type=submit]
   {
      background:url("https://forum.openmw.org/styles/openmw/theme/images/bg.jpg") fixed #c8b9a2;
      font-weight:bold;
      padding:5px;
   }
   
   /* "Preferences" -> content box */
   .prefsection{
      background:
         linear-gradient(
            rgba(252,252,252,0.4),
            rgba(252,252,252,0.4)
         ),
         linear-gradient(
            rgba(252,252,252,0.4),
            rgba(252,252,252,0.4)
         ),
         url("https://forum.openmw.org/styles/openmw/theme/images/bg.jpg") fixed #c8b9a2;
   }
   
   /* "Preferences" -> frame of content box */
   .client-js #preferences{
      background-color:rgba(252,252,252,0.4);
   }
   
   /* "Preferences" -> tab fields */
   .client-js #preftoc li{
      background:rgba(252,252,252,0.4);
      border-style:solid;
      border-color:LightGrey;
      border-width:1px;
   }
   
   /* "Preferences" -> selected tab field */
   .client-js #preftoc li.selected a{
      background-image:none;
      background:rgba(252,252,252,0.4);
   }
   
   /* tables in "Page Information" */
   .wikitable.mw-page-info{
      background-color:rgba(252,252,252,0.4);
   }
   
   /* cells in sortable tables */
   .wikitable.sortable.jquery-tablesorter{
      background-color:rgba(252,252,252,0.4);
   }
   
   /* "View History" -> Page History panel */
   ul#pagehistory{
      /*background:url("https://forum.openmw.org/styles/openmw/theme/images/bg.jpg") fixed #c8b9a2;*/
   }
   
   /* "View History" -> all entries */
   #pagehistory li{
      padding:2px;
      border-style:none;
   }
   
   /* "View history" -> newer */
   #pagehistory li.selected.before{
      background-color:rgba(252,252,252,0.4);
      border-style:solid;
      border-color:DimGrey;
      border-width:2px;
   }
   
   /* "View history" -> older */
   #pagehistory li.selected.after{
      background-color:rgba(252,252,252,0.4);
      border-style:solid;
      border-color:DimGrey;
      border-width:2px;
   }
   
   /* "View history" -> elements in between */
   #pagehistory li.between{
      background-color:rgba(252,252,252,0.4);
      border-style:dashed;
      border-color:DimGrey;
      border-width:1px;
   }
   
   /* "Edit" -> options panel */
   .editOptions{
      background-color:rgba(252,252,252,0.4);
      border-style:solid;
      border-color:DimGrey;
      border-width:1px;
   }
   
   /* thumbnails */
   li.gallerybox div.thumb{
      background:url("https://forum.openmw.org/styles/openmw/theme/images/bg.jpg") fixed #c8b9a2;
      border-style:solid;
      border-color:DimGrey;
      border-width:1px;
   }
   
   /* list of contents */
   .toc{
      background:
         linear-gradient(
            rgba(252,252,252,0.4),
            rgba(252,252,252,0.4)
         ),
         linear-gradient(
            rgba(252,252,252,0.4),
            rgba(252,252,252,0.4)
         ),
         url("https://forum.openmw.org/styles/openmw/theme/images/bg.jpg") fixed #c8b9a2;
   }
   
   /* -------------- */
   /* general layout */
   /* -------------- */
   body{
      background:url("https://forum.openmw.org/styles/openmw/theme/images/bg.jpg") fixed #c8b9a2;
      width:98%;
   }

   /* headlines, level 1 */
   .mw-body h1{
      border-bottom-color:DimGrey;
   }

   /* headlines, level 2 */
   .mw-body h2{
      border-bottom-color:DimGrey;
   }
   
   /* header */
   div#mw-head{
      position:absolute;
      left:0;
      width:98%;
   }
   
   /* header (cont.) */
   #mw-page-base{
      background:url("https://forum.openmw.org/styles/openmw/theme/images/bg.jpg") fixed #c8b9a2;
   }
   
   /* header (cont.) */
   #mw-head-base{
      background:
         url(https://forum.openmw.org/styles/openmw/theme/images/logo.png) top 2px left 2px,
         url(https://forum.openmw.org/styles/openmw/theme/images/header.jpg);
      background-repeat:
         no-repeat,
         no-repeat;
      background-size:
         459px 100px,
         cover;
      height:150px;
      border-style:solid;
      border-color:DimGrey;
      border-width:1px;
   }
   
   /* upper left logo box */
   #p-logo a{
      position:relative;
      left:10px;
      height:150px;
      width:150px;
   }
   
   /* upper left logo */
   #p-logo{
      position:absolute;
      left:0px;
      width:10px;
   }
   
   /* content box */
   #wrapper,
   #main,
   #content{
      background:rgba(252,252,252,0.4);
      position:relative;
      z-index:8;
      border-style:solid;
      border-color:DimGrey;
      border-width:1px;
   }
   
   /* content box (cont.) */
   #content::before{
      content:"";
      z-index:8;
   }
   
   /* ----------- */
   /* link colors */
   /* ----------- */
   .mw-body a:link{color:DarkBlue;}            /* normal unvisited links */
   .mw-body a:link:visited{color:DarkBlue;}    /* visited links */
   .mw-body a:link:active{color:DarkBlue;}     /* active links */
   .mw-body a:link.new{color:DarkBlue;}        /* new links */
   .mw-body a:link.interwiki{color:DarkBlue;}  /* interwiki links */
   .mw-body a:link.external{color:DarkBlue;}   /* external links */
   .mw-body a:link.stub{color:DarkBlue;}       /* hovered links */

   .mw-body a:link{color:DarkBlue}
   .mw-body a:visited{color:DarkBlue}
   .mw-body a:hover{color:DarkBlue}
   .mw-body a:active{color:DarkBlue}
   
   /* ---------- */
   /* left panel */
   /* ---------- */
   div#mw-panel{
      padding:0;
      width:170px;
   }
   
   /* links left panel */
   div#mw-panel div.portal div.body ul li a{
      color:Black;
   }
   
   /* left navigation bar */
   #p-navigation{
      font-weight:bold;
      font-size:large;
   }
   
   /* left tool box */
   #p-tb{
      font-size:large;
   }
   
   /* ------------------------- */
   /* upper left navigation bar */
   /* ------------------------- */
   #p-namespaces{
      padding:0;
      position:relative;
      top:80px;
      height:30px;
      border-style:none;
   }

   /* "Main page" / "Page" */
   #ca-nstab-main{
      background:rgba(252,252,252,0.65);
      line-height:0px;
      font-weight:bold;
      border-style:solid;
      border-color:DimGrey;
      border-width:1px;
   }
   
   /* "Special page" */
   #ca-nstab-special{
      background:rgba(252,252,252,0.65);
      line-height:0px;
      font-weight:bold;
      border-style:solid;
      border-color:DimGrey;
      border-width:1px;
   }
   
   /* "User page" */
   #ca-nstab-user{
      background:rgba(252,252,252,0.65);
      line-height:0px;
      font-weight:bold;
      border-style:solid;
      border-color:DimGrey;
      border-width:1px;
   }
   
   /* "Discussion */
   #ca-talk{
      background:rgba(252,252,252,0.65);
      line-height:0px;
      font-weight:bold;
      border-style:solid;
      border-color:DimGrey;
      border-width:1px;
   }
   
   /* upper right header */
   #right-navigation{
      padding:0;
      position:relative;
      top:80px;
      height:30px;
      border-style:none;
   }
   
   /* -------------------------- */
   /* upper right navigation bar */
   /* -------------------------- */
   #p-views{
      padding:0;
      position:relative;
      left:-20px;
      height:30px;
   }
   
   /* "Read" */
   #ca-view{
      background:rgba(252,252,252,0.65);
      line-height:0px;
      font-weight:bold;
      border-style:solid;
      border-color:DimGrey;
      border-width:1px;
   }
   
   /* "View source" */
   #ca-viewsource{
      background:rgba(252,252,252,0.65);
      line-height:0px;
      font-weight:bold;
      border-style:solid;
      border-color:DimGrey;
      border-width:1px;
   }
   
   /* "Edit" / "Create" */
   #ca-edit{
      background:rgba(252,252,252,0.65);
      line-height:0px;
      font-weight:bold;
      border-style:solid;
      border-color:DimGrey;
      border-width:1px;
   }
   
   /* "Add topic" */
   #ca-addsection{
      background:rgba(252,252,252,0.65);
      line-height:0px;
      font-weight:bold;
      border-style:solid;
      border-color:DimGrey;
      border-width:1px;
   }
   
   /* "View history" */
   #ca-history{
      background:rgba(252,252,252,0.65);
      line-height:0px;
      font-weight:bold;
      border-style:solid;
      border-color:DimGrey;
      border-width:1px;
   }
   
   /* Watchlist box (inactive) */
   #ca-watch{
      background:rgba(252,252,252,0.65);
      line-height:20px;
      font-weight:bold;
      border-style:solid;
      border-color:DimGrey;
      border-width:1px;
   }
   
   /* Watchlist icon (inactive) */
   #ca-watch.icon a{
      position:relative;
      top:-6px;
   }
   
   /* Watchlist box (active) */
   #ca-unwatch{
      background:rgba(252,252,252,0.65);
      line-height:20px;
      font-weight:bold;
      border-style:solid;
      border-color:DimGrey;
      border-width:1px;
   }
   
   /* Watchlist icon (active) */
   #ca-unwatch.icon a{
      position:relative;
      top:-6px;
   }
   
   /* "More" */
   #p-cactions{
      background:rgba(252,252,252,0.65);
      position:relative;
      left:-20px;
      height:30px;
      line-height:0px;
      font-weight:bold;
      border-style:solid;
      border-color:DimGrey;
      border-width:1px;
   }
   
   /* -------- */
   /* User tab */
   /* -------- */
   #p-personal{
      position:absolute;
      top:120px;
      left:340px;
      height:30px;
      width:60px;
      font-weight:bold;
      font-size:18px;
   }
   
   /* "Log in" */
   #pt-login{
      position:relative;
      top:350px;
      right:495px;
      height:30px;
      width:80px;
   }
   
   /* "<User name>" */
   #pt-userpage{
      position:relative;
      top:350px;
      right:510px;
      height:30px;
      width:80px;
   }
   
   /* "Talk" */
   #pt-mytalk{
      position:relative;
      top:335px;
      right:495px;
      height:30px;
      width:80px;
   }
   
   /* "Preferences" */
   #pt-preferences{
      position:relative;
      top:320px;
      right:495px;
      height:30px;
      width:80px;
   }
   
   /* Watchlist */
   #pt-watchlist{
      position:relative;
      top:305px;
      right:495px;
      height:30px;
      width:80px;
   }
   
   /* "Contributions */
   #pt-mycontris{
      position:relative;
      top:290px;
      right:495px;
      height:30px;
      width:80px;
   }
   
   /* Log Out */
   #pt-logout{
      position:relative;
      top:275px;
      right:495px;
      height:30px;
      width:80px;
   }
   
   /* ---------- */
   /* search bar */
   /* ---------- */
   #p-search{
      position:relative;
      left:-20px;
      height:30px;
      width:200px;
   }
   
   /* search form */
   #searchform{
      position:relative;
      top:-9px;
      height:30px;
      width:200px;
      border:none;
   }
   
   /* search box */
   div#simpleSearch{
      height:20px;
      width:200px;
   }
   
   /* search field */
   #searchInput{
      line-height:15px;
   }
   
   /* search field (cont.) */
   div#simpleSearch #searchInput{
      background:
         linear-gradient(
            rgba(252,252,252,0.4),
            rgba(252,252,252,0.4)
         ),
         linear-gradient(
            rgba(252,252,252,0.4),
            rgba(252,252,252,0.4)
         ),
         url("https://forum.openmw.org/styles/openmw/theme/images/bg.jpg") fixed #c8b9a2;
   }
   
   /* search button */
   div#simpleSearch #searchButton{
      background:none;
      background-color:#ECECEC;
      background-image:linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2213%22%3E%3Cg%20stroke-width%3D%222%22%20stroke%3D%22%236c6c6c%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M11.29%2011.71l-4-4%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
      background-position: center center;
      background-repeat: no-repeat;
   }
   
   /* ------------------- */
   /* Recent Changes page */
   /* ------------------- */
   
   /* options field */
   fieldset{
      border-style:solid;
      border-color:DimGrey;
      border-width:1px;
   }
   
   /* legend box */
   .mw-changeslist-legend{
      border-style:solid;
      border-color:DimGrey;
      border-width:1px;
   }
   
   /* category bar below articles */
   #catlinks{
      background: url("https://forum.openmw.org/styles/openmw/theme/images/bg.jpg") fixed #c8b9a2;
      font-weight:bold;
   }
}
Last but not least, some screenshots.
Main page (before login)
Main page (before login)
Main page (after login)
Main page (after login)
Edit page
Edit page
View History page
View History page
Screenshots page
Screenshots page
Last edited by Atahualpa on 07 Oct 2016, 10:00, edited 7 times in total.
User avatar
raevol
Posts: 3093
Joined: 07 Aug 2011, 01:12
Location: Caldera

Re: OpenMW Wiki Theme

Post by raevol »

Looks awesome, great work! My only suggestion would be, if it's even possible, to change the color of the links on the left side navigation. The black or grey would look better on top of the cloth texture. But I'm not sure if you can even pick those links out specifically...
User avatar
Atahualpa
Posts: 1176
Joined: 09 Feb 2016, 20:03

Re: OpenMW Wiki Theme

Post by Atahualpa »

Thanks for the feedback, raevol. Gonna give it a try.
User avatar
Svetomech
Posts: 69
Joined: 01 Jun 2014, 12:51
Location: Moscow
Contact:

Re: OpenMW Wiki Theme

Post by Svetomech »

This should be official! (:
User avatar
lgromanowski
Site Admin
Posts: 1193
Joined: 05 Aug 2011, 22:21
Location: Wroclaw, Poland
Contact:

Re: OpenMW Wiki Theme

Post by lgromanowski »

Svetomech wrote:This should be official! (:
It will be at this weekend :)
User avatar
Atahualpa
Posts: 1176
Joined: 09 Feb 2016, 20:03

Re: OpenMW Wiki Theme

Post by Atahualpa »

OP updated.

Has anyone tested this with Chrome/IE/Edge/... ? And what about different screen resolutions? I've only tested the theme in 1920x1080.
lgromanowski wrote:It will be at this weekend :)
Nice! :)
raevol wrote:Looks awesome, great work! My only suggestion would be, if it's even possible, to change the color of the links on the left side navigation. The black or grey would look better on top of the cloth texture. But I'm not sure if you can even pick those links out specifically...
Turns out this is possible. I chose a black text color although it isn't the best option for links. Anyway, the user options panel below remains blue/red.
Chris
Posts: 1625
Joined: 04 Sep 2011, 08:33

Re: OpenMW Wiki Theme

Post by Chris »

Works for me in Firefox at 1440x900, mostly. Only issue I see is that the "tabs" along the top (Main page, Discussion, etc) have text that run out of the box they're in. The 'e' in "Main page" hits the right side and gets cut in half, for example.
User avatar
Atahualpa
Posts: 1176
Joined: 09 Feb 2016, 20:03

Re: OpenMW Wiki Theme

Post by Atahualpa »

Unfortunately, I can't reproduce this issue when I set my (1920x1080) display to 1440x900. Do these issues occur when you use the original theme?
I know that there are a lot of problems with boxes floating around when you make your browser window very small -- but these are present in the original version too.
Chris
Posts: 1625
Joined: 04 Sep 2011, 08:33

Re: OpenMW Wiki Theme

Post by Chris »

Atahualpa wrote:Unfortunately, I can't reproduce this issue when I set my (1920x1080) display to 1440x900. Do these issues occur when you use the original theme?
They look fine in the original theme, properly centered and fitting in their boxes.
User avatar
Atahualpa
Posts: 1176
Joined: 09 Feb 2016, 20:03

Re: OpenMW Wiki Theme

Post by Atahualpa »

Well, my code works a lot on pixel level, e.g., width and height of objects are often set to a specific number. Maybe I can find a more elegant solution.

Can you, please, provide me a screenshot of said behaviour?

Edit: I've just commented out some of the explicit width settings for header objects (anyway, those values weren't needed anymore). Does this fix your issue?
Post Reply