Making the CEO forum a bit more clean to the eyes...

In this forum you can write about anything that does not fit in other forums.
This includes generic Oric talkings and things that are totaly unrelated but want to share with people here :)
Godzil
Squad Leader
Posts: 774
Joined: Sat May 21, 2011 7:21 pm
Location: Between UK and France
Contact:

Making the CEO forum a bit more clean to the eyes...

Post by Godzil »

Quite simple, install an extention on your webbrowser to apply CSS to specific website ( for exemple Stylish for Chrome )

Create an entry for http://forums.oric.org

Add this CSS Code:

Code: Select all

body
{
  background-color: #222;
  background-image: none;
}

span.corners-top
{
  display: none;
}
span.corners-bottom
{
  display: none;
}

#search-box #keywords, input.inputbox, input.button1, input.button2
{
  background-color: #aaa;
  border: 1px #fff solid;
  color: black;
  background-image: none;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
}

#search-box #keywords, input.inputbox:hover, input.button1:hover, input.button2:hover
{
  background-color: #aaa;
  border: 1px #222 solid;
  color: #222
}
a:hover, a.topictitle:hover
{
  color: #C2C9DB;
  text-decoration: none;
}

.row1
{
  background-color: #333;
}
.row2
{
  background-color: #333;
}

.dterm img
{
    max-width:30px;
    max-height:30px;
    width: auto;
    height: auto;
}

.postbody
{
  padding-top: 5px;
}
.topic-title a
{
  display: block;
}
.author
{
  display: block;
  width: 100%;
  border-bottom: 1px solid #777;
  text-align: right;
  top: -10px;
}

.postprofile 
{
  width: 200px;
}

.postprofile dt img
{
  max-width: 100px;
  max-height: 100px;
  width: auto;
  height: auto;
}

blockquote
{
  background-color: #bbb;
  border: none;
  border-left: 5px solid #fcc;
}

div#logo-desc img
{
  margin-top: 20px;
}
div#logo-desc p
{
  text-transform: capitalize;
  font-weight: bolder;
  margin-top: -7px;
}
and Tada!

It's not perfect, but will at least remove all of this nasty red thingy, and force those bigs images to be more smaller.

Feel free to help me improve this CSS overide ^^
Last edited by Godzil on Fri Sep 26, 2014 6:04 pm, edited 1 time in total.
User avatar
Dbug
Site Admin
Posts: 4444
Joined: Fri Jan 06, 2006 10:00 pm
Location: Oslo, Norway
Contact:

Re: Making the CEO forum a bit more clean to the eyes...

Post by Dbug »

If you have one for defence force, you can share as well :)
Godzil
Squad Leader
Posts: 774
Joined: Sat May 21, 2011 7:21 pm
Location: Between UK and France
Contact:

Re: Making the CEO forum a bit more clean to the eyes...

Post by Godzil »

Made a small update for the header

_DBug_: I've looked and it won't be easy with just CSS override on this forum as most of the CSS are embedded directly in the HTML, and directly use image instead of CSS background..

I think it would be better to create a (new) skin than changing just some bits of the CSS
Godzil
Squad Leader
Posts: 774
Joined: Sat May 21, 2011 7:21 pm
Location: Between UK and France
Contact:

Re: Making the CEO forum a bit more clean to the eyes...

Post by Godzil »

An (more complete) update on the CSS overrider for oric.org forum:

Code: Select all

body, body#phpbb
{
  background-color: #111;
  background-image: none;
}

span.corners-top
{
  display: none;
}

span.corners-bottom
{
  display: none;
}

p.path
{
   padding-top: 10px;   
}

div.buttons
{
    display: inline-block;
    margin-top: 5px;
}

#search-box #keywords, input.inputbox, input.button1, input.button2, select
{
  background-color: #aaa;
  border: 1px #fff solid;
  color: black;
  background-image: none;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  min-height: 19px;
}

input.button1, input.button2, select
{
	min-height: 25px;
}

#search-box #keywords, input.inputbox:hover, input.button1:hover, input.button2:hover, select:hover
{
  background-color: #aaa;
  border: 1px #222 solid;
  color: #222
}

a:hover, a.topictitle:hover
{
  color: #C2C9DB;
  text-decoration: none;
}

.row1
{
  background-color: #333;
}
.row2
{
  background-color: #333;
}

.dterm img
{
    max-width:30px;
    max-height:30px;
    width: auto;
    height: auto;
}

#container, #wrap
{
    background-color: #222;
}

.postbody
{
  padding-top: 5px;
}

.topic-title a
{
  display: block;
}

.author
{
  display: block;
  width: 100%;
  border-bottom: 1px solid #777;
  text-align: right;
  top: -10px;
}

li.header dd, li.header dt, .table-title, .table-title h2
{
 	color: #faa;
	font-weight: bolder;
}

.postprofile 
{
  width: 200px;
}

.postprofile dt img
{
  max-width: 100px;
  max-height: 100px;
  width: auto;
  height: auto;
}

blockquote
{
  background-color: #bbb;
  border: none;
  border-left: 5px solid #fcc;
}

.pagination span strong
{
    background-color: #fff;
  	color: #777;
}

.pagination span a, .pagination span a:active, .pagination span a:link, .pagination span a:visited
{
	background-color: #777;
  	color: #fff;
}

#main-content > div:first-of-type	
{
    display: none;
}

a:visited
{
    color: #f07070;
}
a:link
{
    color: #F0B5B5;
}
a:active, a:hover, a.topictitle:hover
{
 	color: #f00;   
}

#chatbox_popup, .panel.row3
{
    display: none;
}
Enjoy :)

Just for comparison:
Before:
oric_forum_before.png
After:
oric_forum_after.png
User avatar
Dbug
Site Admin
Posts: 4444
Joined: Fri Jan 06, 2006 10:00 pm
Location: Oslo, Norway
Contact:

Re: Making the CEO forum a bit more clean to the eyes...

Post by Dbug »

That definitely looks nicer to the eyes :)
User avatar
Chema
Game master
Posts: 3014
Joined: Tue Jan 17, 2006 10:55 am
Location: Gijón, SPAIN
Contact:

Re: Making the CEO forum a bit more clean to the eyes...

Post by Chema »

Indeed!
Godzil
Squad Leader
Posts: 774
Joined: Sat May 21, 2011 7:21 pm
Location: Between UK and France
Contact:

Re: Making the CEO forum a bit more clean to the eyes...

Post by Godzil »

Chema wrote:Indeed!
There are still a lots of things to do, like the forum icons are too small, but I'm doing that at work, not the best place.. :D
Post Reply