or Connect
AVS › AVS Forum › AVS Forum Information › Forum Operations Center › AVS Custom User-Styles
New Posts  All Forums:Forum Nav:

AVS Custom User-Styles

post #1 of 45
Thread Starter 
AVS CUSTOM USER-STYLES

How to install the custom user-styles :
  1. Install the "Stylish" extension/add-on for Firefox or Chrome (don't know about IE)
  2. Create a new style
  3. If using Firefox :
    1. Insert the following code :
      Code:
      @namespace url(http://www.w3.org/1999/xhtml);
      @-moz-document domain("avsforum.com")
      {
          /* ----------------------------- */
      
          /* User-styles go here! */
      
          /* ----------------------------- */
      }
      
  4. If using Chrome :
    1. Set "Applies to" to "URLs starting with" : "http://www.avsforum.com"
    2. Put user-styles directly in the "Code" text area
  5. Add one or many of the user-style codes given below
  6. Save and enjoy!

User-styles :

For a taste of the past, see the all new New-Retro Theme V0.1.
Code:
/* Make posted-in-threads more visible (blue theme) */
tr.mod-select-parent.viewer-has-replied td.thread-col {
  border-left: 6px solid #005194 !important;
}
Code:
/* Make posted-in-threads more visible (black theme) */
tr.mod-select-parent.viewer-has-replied td.thread-col {
  border-left: 6px solid #FCDC63 !important;
}
Code:
/* Make min-width smaller */
#main-container {
  min-width: 600px !important;
  max-width: none !important;
}
Code:
/* Hide the right sidebar */
#sidebar {
  display: none;
}
Code:
/* Make signatures, post buttons and post header less visible */
div.btn-grp { opacity: 0.4; }
div.post-header * { opacity: 0.4; }
div.post-content-area div.floatb div.signature div.post-sig {
  opacity: 0.4;
}
Code:
/* Make post-text grey */
div.post-content-area {
  color: #DDDDDD !important;
}
Code:
/* Compact header */
header div#header-area {
  min-height: 90px !important;
  height: 90px !important;
}
a.logo { margin: 10px 0 0 10px !important; }
nav { height: 85px; }
nav div#main-menu-area { top: 5px; }
header div.ad { display: none; }
div.search-bar-outer { top: 50px; }
div.search-bar-inner { display: block !important; }
a#advanced-search-submit { display: block; }
Code:
/* Horizontal thread view */
div.postbit-underlay { display: None; }
div.post-container-inner2 div.post-content-area {
  margin-left: 0px !important;
}
div.post-container-inner2 div.post-info-stat-cont {
  display: block;
  width: 95% !important;
  margin: 0 auto !important;
  padding: 10px !important;
  position: relative;
  float: none;
}
div.post-info-stat-cont div {
  margin: 0 !important;
  padding: 0 !important;
  width: 50% !important;
}
div.post-info-stat-cont ul.post-user-info li span {
  display: inline !important;
}
div.post-content-area div.wiki_markup {
  width: 95% !important;
  margin: 0 auto !important;
  padding: 10px;
}
div.post-content-area div.sig_buffer {
  display: none;
}
div.post-content-area div.floatb {
  width: 95% !important;
  margin: 0 auto !important;
  padding: 10px;
  position: relative
}
div.post-content-area div.floatb div.signature {
  border: 0;
}
div.post-content-area div.floatb div.signature div.post-sig {
  padding-top: 10px;
  border-top: 1px solid;
}
div.post-info-stat-cont ul li { display: none; }
div.post-info-stat-cont ul li.post-username { display: block; }

Enjoy!!
Edited by KevBel - 6/19/12 at 7:49am
post #2 of 45
Thank you so much for all your effort.

Someone in another thread was asking about changing the text color. They were using the Black skin & did not care for the white text as it was too bright. How would you change the text color?
post #3 of 45
Thread Starter 
Try this :
Code:
/* Make post-text grey */
div.post-content-area {
  color: #DDDDDD !important;
}

You can put any hex color code in place of #DDDDDD.
post #4 of 45
Thanks,

I'll pass the info along.
post #5 of 45
When reading about how style sheets work I found this list of colors that can be used. You can also use the color name instead of the hexcode.
http://www.w3schools.com/cssref/css_colornames.asp

I'm using DarkOrchid for my visited threads along with the default skin. BlueViolet also looked pretty good.

I'm also using KevBel's scripts for and hiding the right sidebar and making posted-in-threads more visible & changed the color to DarkOrchid in order to match the visited threads color.

Thank you again KevBel
post #6 of 45
These are very nice, thank you!

BTW, is there a way to increase the default size of the text when creating a post? The default is smaller than it used to be, and is smaller than the current preview size and actual posted size. Or is that a setting that can changed some other way?
Edited by keenan - 6/14/12 at 3:52pm
post #7 of 45
Sorry to keep bugging you. Could you tell me how to change the default black background color? If I know how to do that, I can have the forum back to it's original colors; or, at least pretty close.
Quote:
Originally Posted by KevBel View Post

Try this :
Code:
/* Make post-text grey */
div.post-content-area {
  color: #DDDDDD !important;
}
You can put any hex color code in place of #DDDDDD.
post #8 of 45
This is what I added in order to make a visited thread text a different color, whether you posted or not. You can change the color to your liking.

a:visited {
color:darkorchid !important;
}
post #9 of 45
These Custom Style Sheets are really neat.

There's another forum I look at and it also does not have a different color for text visited. But it does now!
post #10 of 45
Thread Starter 
Quote:
Originally Posted by keenan View Post

These are very nice, thank you!
BTW, is there a way to increase the default size of the text when creating a post? The default is smaller than it used to be, and is smaller than the current preview size and actual posted size. Or is that a setting that can changed some other way?

Try this :
Code:
/* Make post-text larger */
div.post-content-area div.wiki_markup {
  font-size: 12pt !important;
}
You can set the size to whatever you want.
post #11 of 45
Quote:
Originally Posted by KevBel View Post

Try this :
Code:
/* Make post-text larger */
div.post-content-area div.wiki_markup {
  font-size: 12pt !important;
}
You can set the size to whatever you want.
Actually, what I was looking for was to be able to increase the size of the font in the post creation box. Notice in the image below how the font is larger in the actual posted text versus the text in the creation box. I don't know about anyone else, but that is a bit hard on my old eyes, and it was not like that pre-forum changeover.



359


(I'm just blowing off steam here, and certainly not at anyone in particular, but why does that creation box have to be so freaking big? Are we writing novels every time we post something???)
post #12 of 45
Thread Starter 
Quote:
Originally Posted by keenan View Post

Actually, what I was looking for was to be able to increase the size of the font in the post creation box. Notice in the image below how the font is larger in the actual posted text versus the text in the creation box. I don't know about anyone else, but that is a bit hard on my old eyes, and it was not like that pre-forum changeover.

Here you go :
Code:
/* Make input text-area font larger */
div.editor_input textarea {
  font-size: 12pt !important;
}
post #13 of 45
Quote:
Originally Posted by KevBel View Post

Here you go :
Code:
/* Make input text-area font larger */
div.editor_input textarea {
  font-size: 12pt !important;
}
That looks like it did it! Thanks!

Am I the only one that's been bothered by that?
post #14 of 45
Thread Starter 
Quote:
Originally Posted by MKANET View Post

Sorry to keep bugging you. Could you tell me how to change the default black background color? If I know how to do that, I can have the forum back to it's original colors; or, at least pretty close.

Do you have a screenshot of the forum's "original" colors ??
post #15 of 45
Quote:
Originally Posted by keenan View Post

That looks like it did it! Thanks!
Am I the only one that's been bothered by that?

I am also bothered by the small fonts that you mentioned.
But I won't be after I include another one of KevBels wonderful scripts.
post #16 of 45
Quote:
Originally Posted by KevBel View Post

Here you go :
Code:
/* Make input text-area font larger */
div.editor_input textarea {
  font-size: 12pt !important;
}

Bravo! That solved a real problem.
post #17 of 45
Quote:
Originally Posted by KevBel View Post


Here you go :
Code:
/* Make input text-area font larger */
div.editor_input textarea {
  font-size: 12pt !important;
}

 

 Works good with BB Code Editor, but not with Rich Text Editor.

post #18 of 45
Quote:
Originally Posted by Mike99 View Post

I am also bothered by the small fonts that you mentioned.
But I won't be after I include another one of KevBels wonderful scripts.

Indeed, it's a shame though that these modifications are even needed to fix things that weren't broken before they moved over to this Huddler platform.

There is still a boatload of problems left to fix, I'm still highly annoyed with the broken forum daily update subscription email, all we get now is a disorganized mess of posts for all forums you are subscribed to, not individual emails for the separate forums, how hard can that really be?rolleyes.gif
post #19 of 45

Huddler AVS Forum Styles Accessible in Firefox

 

I've been trying to work with the great Stylish suggestions posted here and ran across something others might be interested in.

 

There's a Style Editor in Firefox (Shift+F7) that shows what styles are being applied to a website. Listed there for AVS are 5 style sheets, including 2 named Huddler.

 

I copied the 1st Huddler style text into Word Pad, changed all instances of "font-size:11px" to 14px, shanged "small:11px" to 14px, and pasted it into Stylish (takes a few sec). I used 14px just to see a diff.

 

It didn't do what I hoped it would, but the point is, it might be a way for some style expert to work miracles for all of us who want some changes right away?

 

I guess the same text could be used in Stylish for Chrome and IE as well?


Edited by wajo - 6/16/12 at 10:45am
post #20 of 45
Thread Starter 
Make "Edited by" line less intrusive...
Code:
/* Make edited-by line less intrusive */
span.edited-by {
  opacity: 0.5;
  font-size: 8pt !important;
  margin: 10px 0 -10px 0;
  text-align: right;
}
post #21 of 45
Thread Starter 
Quote:
Originally Posted by wajo View Post

 Works good with BB Code Editor, but not with Rich Text Editor.

The rich text editor is (or at least, tries to be) a WYSIWYG (What You See Is What You Get) editor, so it makes your text the same size as it will appear in the post. You can't make it show up larger in the editor.
post #22 of 45
Quote:
Originally Posted by KevBel View Post


The rich text editor is (or at least, tries to be) a WYSIWYG (What You See Is What You Get) editor, so it makes your text the same size as it will appear in the post. You can't make it show up larger in the editor.

 

When you open Rich Text editor, there is a default font size set that the user can't see. You start typing in that default font size and can only make it bigger or smaller by applying the size tag. The Source code never shows a font-size unless the user creates a diff. size, i.e., only those tags show in the Source code as a font size that you changed from the default.

 

The default size is the one I think people might want a little larger w/o having to specify a font size at the beginning, then have to change in next para. for something diff.

 

I'm guessing the default font size is the same one set by stylesheet for all posts, so since *everyone* seems to want the font size a wee bit larger, maybe that should be something "global"?

 

Apparently, that default font size is set somewhere diff. from your style since it works on the BB Code editor but not the RT editor???

post #23 of 45
Quote:
Originally Posted by KevBel View Post

Do you have a screenshot of the forum's "original" colors ??

Did you ever find a screen shot?

I recall seeing something a few days ago & tried to find it. I'm not sure if this was it, but take a look here, especially at messages 20, 24 & 25.
http://www.avsforum.com/t/1413952/really-miss-the-retro-skin
post #24 of 45
Quote:
Originally Posted by Mike99 View Post


Did you ever find a screen shot?
I recall seeing something a few days ago & tried to find it. I'm not sure if this was it, but take a look here, especially at messages 20, 24 & 25.
http://www.avsforum.com/t/1413952/really-miss-the-retro-skin

 

Here's a portion of a page in Retro skin (click to see clearer pic).

 

AVS Retro Skin.jpg

 

Here's another Retro page.

 

AVS Forum Attachments Menu.jpg


Edited by wajo - 6/17/12 at 12:56pm
post #25 of 45
Look below. There are basically only three primary colors. I just want them to replace the three primary colors on the forum currently; or, as close to that as possible. For some reason the picture below shows text as white. However, the text was always yellow (FFFF00) for me on all forum post text.

Basically, purple/dark blue (2F304F) replacing the black forum post background, blue (Blue: 000082) replacing current dark grey , yellow (FFFF00) replacing forum post text color
Thanks so much!!!

Quote:
Originally Posted by KevBel View Post

Do you have a screenshot of the forum's "original" colors ??

392
Edited by MKANET - 6/16/12 at 8:35pm
post #26 of 45
Quote:
Originally Posted by KevBel View Post

Make "Edited by" line less intrusive...
Code:
/* Make edited-by line less intrusive */
span.edited-by {
  opacity: 0.5;
  font-size: 8pt !important;
  margin: 10px 0 -10px 0;
  text-align: right;
}

Outstanding!biggrin.gif

All of these changes are great in Chrome. I may have to play around and see what I prefer but good stuff in giving us the option.

works like a charm cool.gif
Edited by Kosty - 6/16/12 at 10:14pm
post #27 of 45
Quote:
Originally Posted by KevBel View Post

AVS CUSTOM USER-STYLES

How to install the custom user-styles :
  1. Install the "Stylish" extension/add-on for Firefox or Chrome (don't know about IE)
  2. Create a new style
  3. If using Firefox :
    1. Insert the following code :
      Code:
      @namespace url(http://www.w3.org/1999/xhtml);
      @-moz-document domain("avsforum.com")
      {
          /* ----------------------------- */
          /* User-styles go here! */
          /* ----------------------------- */
      }
      
  4. If using Chrome :
    1. Set "Applies to" to "URLs starting with" : "http://www.avsforum.com"
    2. Put user-styles directly in the "Code" text area
  5. Add one or many of the user-style codes given below
  6. Save and enjoy!
User-styles :
Code:
/* Make posted-in-threads more visible (blue theme) */
tr.mod-select-parent.viewer-has-replied td.thread-col {
  border-left: 6px solid #005194 !important;
}
Code:
/* Make posted-in-threads more visible (black theme) */
tr.mod-select-parent.viewer-has-replied td.thread-col {
  border-left: 6px solid #FCDC63 !important;
}

Enjoy!!

Instead of "posted-in-threads" is there a way to make it currently subscribed to threads? As it is, it will include threads that I have posted to in the past, but no longer subscribed to currently.
post #28 of 45
Thread Starter 
Quote:
Originally Posted by keenan View Post

Instead of "posted-in-threads" is there a way to make it currently subscribed to threads? As it is, it will include threads that I have posted to in the past, but no longer subscribed to currently.

No, I don't believe it is possible.
I can only use information which is already in the page, and I don't think subscribed-to threads are displayed any differently...
post #29 of 45
Quote:
Originally Posted by KevBel View Post

No, I don't believe it is possible.
I can only use information which is already in the page, and I don't think subscribed-to threads are displayed any differently...

Thanks for looking though, what you've done so far has been fantastic and I know many of us here appreciate the time and effort you've put in on this!


(Maybe it might require access to the member's profile to determine what threads the user is currently subscribed to?)
post #30 of 45
Quote:
Originally Posted by keenan View Post

Thanks for looking though, what you've done so far has been fantastic and I know many of us here appreciate the time and effort you've put in on this!
(Maybe it might require access to the member's profile to determine what threads the user is currently subscribed to?)

I never subscribed to a thread before so I'm not sure how that worked in this forum. But I did change the text color of visited threads. This indicates the ones I've been in, whether I posted or not.
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Forum Operations Center
AVS › AVS Forum › AVS Forum Information › Forum Operations Center › AVS Custom User-Styles