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
6/14/12 at 9:13am
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
Reply
Reply

AVS Top Picks

post #2 of 45
6/14/12 at 9:27am
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?
Reply
Reply
post #3 of 45
6/14/12 at 9:35am
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.
Reply
Reply
post #4 of 45
6/14/12 at 11:03am
Thanks,

I'll pass the info along.
Reply
Reply
post #5 of 45
6/14/12 at 11:28am
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
Reply
Reply
post #6 of 45
6/14/12 at 12:05pm
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
Reply
Reply
post #7 of 45
6/14/12 at 4:20pm
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.
Reply
Reply
post #8 of 45
6/15/12 at 2:57am
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;
}
Reply
Reply
post #9 of 45
6/15/12 at 5:10am
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!
Reply
Reply
post #10 of 45
6/15/12 at 9:58am
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.
Reply
Reply
post #11 of 45
6/15/12 at 10:40am
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???)
Reply
Reply
post #12 of 45
6/15/12 at 10:43am
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;
}
Reply
Reply
post #13 of 45
6/15/12 at 10:45am
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?
Reply
Reply
post #14 of 45
6/15/12 at 10:45am
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 ??
Reply
Reply
post #15 of 45
6/15/12 at 2:38pm
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.
Reply
Reply
post #16 of 45
6/15/12 at 6:02pm
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.
Reply
Reply
post #17 of 45
6/15/12 at 6:33pm
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.

Reply
Reply
post #18 of 45
6/15/12 at 9:22pm
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
Reply
Reply
post #19 of 45
6/16/12 at 10:15am

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
Reply
Reply
post #20 of 45
6/16/12 at 1:11pm
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;
}
Reply
Reply
post #21 of 45
6/16/12 at 1:16pm
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.
Reply
Reply
post #22 of 45
6/16/12 at 1:42pm
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???

Reply
Reply
post #23 of 45
6/16/12 at 7:34pm
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
Reply
Reply
post #24 of 45
6/16/12 at 8:03pm
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
Reply
Reply
post #25 of 45
6/16/12 at 8:29pm
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
Reply
Reply
post #26 of 45
6/16/12 at 9:26pm
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
Reply
Reply
post #27 of 45
6/17/12 at 3:38pm
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.
Reply
Reply
post #28 of 45
6/17/12 at 7:51pm
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...
Reply
Reply
post #29 of 45
6/17/12 at 8:21pm
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?)
Reply
Reply
post #30 of 45
6/18/12 at 12:05am
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.
Reply
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Forum Operations Center

AVS Top Picks

AVS › AVS Forum › AVS Forum Information › Forum Operations Center › AVS Custom User-Styles