Alternative style.

Tell us how we can improve the night ops forum. Your suggestions and complaints are welcome.
Post Reply
noone
Member
Posts: 20
Joined: Sun Aug 04, 2013 5:31 am
Contact:

Alternative style.

Post by noone » Tue Mar 18, 2014 5:43 pm

I've made custom website style, for use with Stylish (Firefox/Chrome plugin). Which, imo makes NONET look much nicer. :)

Before:
before.png
before2.png
After:
after.png
after2.png
Main changes:
-Removed not needed links (like members, faq, register)
-Removed ugly phpbb icons
-Removed phpbb footer
-Removed "remember me" link
-Removed text decoration from control links
-Removed moon image from header (it caused menu to drop into 2nd line on smaller screens)
-Replaced website image logo with simple text one
-Replaced Advanced search link with nice&compact Adv button
-Changed way in which unread posts are indicated (topic color: white, font weight: bold)
-Changed width of profile info in posts to 100 px
-Changed search in forums/topic making it look more like post button.

Code: Select all

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

@-moz-document domain("nightops.net") {

#page-header {
margin-bottom:10px !important;
}

.icon-home, .icon-logout, .icon-ucp {
background:none !important;
margin-left:-15px !important;
}

li.header dl.icon dt {
margin-left:15px !important;
margin-right:-15px !important;
}

.icon-register, .icon-faq, .icon-members {
display:none !important;
}

input.search {
background:none !important;
padding-left:3px !important;
}

#page-body .linklist {
margin-bottom:10px !important;
margin-top:10px !important;
}



form#search fieldset br {
display:none;
}

form#search fieldset a:before{
content:"Adv";
visibility: visible;
display:inline-block;
border:1px solid #999;
padding-left:5px;
padding-right:5px;
margin-bottom:-1px !important;
margin-top: 0px !important;
height:20px;
}

form#search fieldset a:hover:before{
border-color: #02D21E;
color: #02D21E;
}

form#search fieldset a{
visibility: hidden;
margin-right:-94px !important;
}

form#search input#keywords {
margin-top:-3px !important;
}

form#search input.button2 {
margin-top:-2px !important;
margin-bottom:1px !important;
}


div.navbar ul.navlinks.linklist {
padding-top:3px !important;
border-bottom:0 !important;
}

li.icon-home {
font-size:11pt !important;
margin-top:1px !important;
font-weight:normal !important;
}

label[for="autologin"] {
display:none !important;
}

fieldset.quick-login .button2 {
margin-left:-6px !important;
}

ul.linklist a:hover {
text-decoration:none !important;
}


div.navbar ul.leftside.linklist, 
div.navbar ul.rightside.linklist {
margin-top:5px !important;
margin-bottom:1px !important;

}

#page-body p.right {
display:none;
}


div#navbar img[src="http://nightops.net/forum/../img/moon.png"],div#navbar img[src="img/moon.png"] {
display:none;
}

.forabg {
border-radius:0px !important;
margin-bottom:-5px !important;
}

.forabg .corners-top {
display:none;
}

dd{
margin-bottom: -6px !important;
padding-bottom:6px !important;
height:100% !important;
}

dl.icon{
height:100% !important;
padding-bottom:10px !important;
padding-top:10px !important;
}


li.row {
border-bottom: 0 !important;
}

.navbar ul.linklist li.rightside:last-of-type {
margin-top:3px !important;
}

.navbar:last-of-type {
padding-bottom:3px !important;
}

div#navbar {
margin-bottom:25px  !important;
height:auto !important;
}

div#navbar .image img {
display:none;
}

div#navbar .image:before {

vertical-align:middle;
content:"Night Ops";
font-weight:700;
font-size:25pt;
color:#02D21E;
margin-left:25px !important;
}

div#navbar ul {
margin-left:-50px !important;
}
div#navbar ul li:first-child {
margin-left:-250px !important;
}


div#navbar a.image:hover {
text-decoration:none !important;
}

div#navbar ul {
padding-bottom:0.9em !important;
}

div.copyright {
display:none !important;
}

dl.postprofile {
width:100px !important;
}

#topic-search input#search_keywords, #forum-search input#search_keywords{
border-color:#222 !important;
background:#000 !important;
height:19px !important;
margin-top:-3px !important;
border-radius:5px;
}

dt[title="Unread posts"] {
font-weight:700 !important;
}

dt[title="Unread posts"] a.topictitle,
dt[title="Unread posts"] a.forumtitle {
font-weight:700 !important;
color:#fff !important;
}


#topic-search input.button2, #forum-search input.button2 {
border-color:#222 !important;
background:#000 !important;
height:25px !important;
margin-top:-3px !important;
margin-left:5px !important;
border-radius:5px;
padding-left:10px !important;
padding-right:10px !important;
}

.postbody ul.profile-icons {
padding: 0px 15px 0px 0px !important;
}

a.print, a.sendemail {
display:none !important;
}

#topic-search input.button2:hover {
border-color:#02D21E !important;

}

.signature {
margin-left: 110px !important;
}

@media print {
#main-content a[href]:after { 
content:" (" attr(href) ") "; 
}
}
}

User avatar
Secant
Admin
Posts: 491
Joined: Tue Aug 23, 2005 6:54 am
Contact:

Re: Alternative style.

Post by Secant » Fri Mar 21, 2014 12:59 am

Nice! I'd like to work some of these into the actual phpbb style. Mind if I steal your CSS?

Also, what browser did you test on?

noone
Member
Posts: 20
Joined: Sun Aug 04, 2013 5:31 am
Contact:

Re: Alternative style.

Post by noone » Fri Mar 21, 2014 1:19 am

Thanks!
Seems fine to me - that's mostly, why i'm posting it here. :)

Tested on Firefox 28 / Win7 x64

In chrome afair, you have to replace

Code: Select all

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

@-moz-document domain("nightops.net") {

(...)

}
with

Code: Select all

(...)
url: http://nightops.net
Although, that's not really needed for anything, unless someone is using it with stylish.

User avatar
Xanatos
Moderator
Posts: 2675
Joined: Sun Jun 21, 2009 2:51 am
Location: The last place you look.
Contact:

Re: Alternative style.

Post by Xanatos » Fri Mar 21, 2014 7:54 am

I prefer the current title bar with the moon in the corner. Could be a bit more polished, I suppose. I might have a crack at it if it's bothering you.
We are all books containing thousands of pages and within each lies an irreparable truth.
What is locked, can be opened. What is hidden, can be found. What is yours... can be mine.

noone
Member
Posts: 20
Joined: Sun Aug 04, 2013 5:31 am
Contact:

Re: Alternative style.

Post by noone » Fri Mar 21, 2014 5:41 pm

It's fine like that for me - i don't see it anymore. :P
Still, if you'd want to change it, You can get rid of img tag, and set background-image with css:

Code: Select all

background-image:url('smthing.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right top; 

User avatar
Lynx
Member
Posts: 216
Joined: Mon Dec 02, 2013 7:30 pm
Contact:

Re: Alternative style.

Post by Lynx » Mon Mar 24, 2014 8:05 pm

Xanatos wrote:I prefer the current title bar with the moon in the corner. Could be a bit more polished, I suppose. I might have a crack at it if it's bothering you.
I like it the way it is right now.
Don't take it too seriously, you're not coming out of it alive.

noone
Member
Posts: 20
Joined: Sun Aug 04, 2013 5:31 am
Contact:

Re: Alternative style.

Post by noone » Sat Mar 29, 2014 4:52 pm

Btw., that's how do the new posts look like:
Bez tytułu.png

Post Reply