Fix for wasted margins and invisible links

az2000

Well-Known Member
I created a "user stylesheet" to fix two things that bother me about this site: 1) the huge margins and 2) the way links in posts (and blogs) can't be discerned from ordinary text. To use it:
  1. Install the Stylish add-on. It's available for Chrome or Firefox.
  2. Visit Rollitup in your browser, then click the Stylish icon Capture.GIF which should appear in your toolbar after installing Stylish.
  3. Choose the option to "Write style for www.rollitup.org /this URL"
  4. Paste the code below.
  5. In the left pane give it a name "Rollitup" and click Save
Code:
div.pageWidth     {max-width: 100% !important;}


/* Make links stand out in postings, blog lists and blog entries */
div.messageContent blockquote a:link,
li.blogEntry blockquote a:link,
div.blogEntry blockquote a:link    {color:#0000EE !important;
    text-decoration:underline !important;
    box-shadow: none !important;}

div.messageContent blockquote a:visited,
li.blogEntry blockquote a:visited,
div.blogEntry blockquote a:visited {color:#551A8B !important;
    text-decoration:underline !important;
    text-shadow: none !important;}

div.messageContent blockquote a:hover,
div.redactor_box a:hover,
li.blogEntry blockquote a:hover,
div.blogEntry blockquote a:hover   {color:#AA0000 !important;
    text-decoration:none !important;
    text-shadow: 1px 1px 4px #CCC !important;}

div.messageContent blockquote a:focus,
div.redactor_box a:focus,
li.blogEntry blockquote a:focus,
div.blogEntry blockquote a:focus  {color:#AA0000 !important;
    text-decoration:none !important;
    outline: #333 dotted thin !important;}

div.messageContent blockquote a:active,
div.redactor_box a:active,
li.blogEntry blockquote a:active,
div.blogEntry blockquote a:active  {color:#EE0000 !important;
    text-decoration:none !important;
    text-shadow: none !important;}

/* Make links stand out in the editor with a yellow background. */
/* NOTE: This works in Chrome 42, not FireFox 37 */
[contenteditable="true"] a:link
{background-color:#FFFFAA !important;}
This is just ordinary CSS. It should work in other browsers. (The have different ways to specify a user stylesheet.).
 

deadgro

Well-Known Member
I created a "user stylesheet" to fix two things that bother me about this site: 1) the huge margins and 2) the way links in posts (and blogs) can't be discerned from ordinary text. To use it:
  1. Install the Stylish add-on. It's available for Chrome or Firefox.
  2. Visit Rollitup in your browser, then click the Stylish icon View attachment 3402034 which should appear in your toolbar after installing Stylish.
  3. Choose the option to "Write style for www.rollitup.org /this URL"
  4. Paste the code below.
  5. In the left pane give it a name "Rollitup" and click Save
Code:
div.pageWidth     {max-width: 100% !important;}


/* Make links stand out in postings, blog lists and blog entries */
div.messageContent blockquote a:link,
li.blogEntry blockquote a:link,
div.blogEntry blockquote a:link    {color:#0000EE !important;
    text-decoration:underline !important;
    box-shadow: none !important;}

div.messageContent blockquote a:visited,
li.blogEntry blockquote a:visited,
div.blogEntry blockquote a:visited {color:#551A8B !important;
    text-decoration:underline !important;
    text-shadow: none !important;}

div.messageContent blockquote a:hover,
div.redactor_box a:hover,
li.blogEntry blockquote a:hover,
div.blogEntry blockquote a:hover   {color:#AA0000 !important;
    text-decoration:none !important;
    text-shadow: 1px 1px 4px #CCC !important;}

div.messageContent blockquote a:focus,
div.redactor_box a:focus,
li.blogEntry blockquote a:focus,
div.blogEntry blockquote a:focus  {color:#AA0000 !important;
    text-decoration:none !important;
    outline: #333 dotted thin !important;}

div.messageContent blockquote a:active,
div.redactor_box a:active,
li.blogEntry blockquote a:active,
div.blogEntry blockquote a:active  {color:#EE0000 !important;
    text-decoration:none !important;
    text-shadow: none !important;}

/* Make links stand out in the editor with a yellow background. */
/* NOTE: This works in Chrome 42, not FireFox 37 */
[contenteditable="true"] a:link
{background-color:#FFFFAA !important;}
This is just ordinary CSS. It should work in other browsers. (The have different ways to specify a user stylesheet.).
I understand this is for desktop, but do you know of any apps that bring custom stylesheets to android? I've not found any.
 

az2000

Well-Known Member
Firefox for Android let's you install add-ons. I just installed Stylish on my phone. I haven't tried to add the stylesheet. I don't think the margins would be so important, but the link highlighting would be.

It would be better if RIU modified the underlying sytlesheets. But, Xenforo's stylesheets are messy. I like the site's theme. Just the margins and links are my only complaint. The WYSIWYG editor is slow in Firefox. I like Chrome better for that.
 
Top