Insights From A Different Corner

Browser Extension To Improve Instagram’s Main Page

By: Published On:

In the last few days, I have published some CSS to fix some minor problems with Face Facebook’s main page and post editing dialog box. You can read about that Facebook’s fixes by visting the following link: Browser Extension For Minor Facebook Fixes

In a similar vein, I am publishing the CSS needed to fix some major problems with Instagram’s main page only. It does not currently fix all of the pages, but only addresses the problems in the main page or the landing page for the visitors.

Your directory structure should look exactly as shown in the included photograph.

Your manifest file should look exactly as shown in the following fixed fontface style block.

{
   "manifest_version":       3,
   "name":                   "Meta Styles",
   "version":                "3.0",

   "content_scripts":
   [ 
      {
         "matches":         ["https://www.facebook.com/*"],
         "css":             ["CustomCSS/FacebookMain.css"]
      },
      { 
         "matches":         ["https://www.instagram.com/*"],
         "css":             ["CustomCSS/InstagramMain.css"]
      }
   ]
}

You will need to paste all of the CSS declarations included in the following fixed fontface style block in your file named InstagramMain.css.

*
{
   font-family:                  "PT Sans" !important;
   font-size:                    20px !important;
}


body
{
   line-height:                  28px !important;
}


h1._aacl._aaco
{
   line-height:                  28px !important;
   font-size:                    21px !important;
   color:                        rgb(220,220,220) !important;
   padding-bottom:               18px !important;

   + div span.xlyipyv.xuxw1ft   
   {
      color:                     #0096FF !important;
      font-size:                 22px !important;
      line-height:               28px !important;
      font-weight:               normal !important;
   }
}


div.x1dr59a3.x13vifvy.x3hkoc4.x6bx242 
{
   > div:first-child
   {
      > div:nth-child(2)
      {
         display:                   none !important;

         + div
         {
            margin-top:             400px !important;
         }
      }
   }
}


.xozqiw3 
{
   height:                       56px !important;
}

._aak3._agh4 .x1lliihq  
{
   line-height:                  26px !important;
}

.x1iyjqo2.xh8yej3 *,  ._aad7
{
   font-size:                       22px !important;
   font-weight:                     normal !important;
   line-height:                     24px !important;
   --base-line-clamp-line-height:   24px !important;
   color:                           rgb(220,220,220) !important;
}


.xopu45v.xu3j5b3.xm81vs4.x1vjfegm
{
   width:                            230px !important;
   max-width:                        230px !important;
   box-sizing:                       border-box !important;

   div.x1n2onr6:hover
   {
      background-color:             #232323 !important;
   }
}


.x1zvrr1
{
   width:                     495px !important;

   div.x1iyjqo2 > span:not(a)
   {
      color:                     rgb(210,210,210) !important;
   }
}


div.x5yr21d.xh8yej3
{
   .x2lah0s.x14ju556
   {
      font-size:                 30px !important;
   }

   & div.x1iyjqo2 > span 
   {
      line-height:                    28px !important;
      --base-line-clamp-line-height:  28px !important;
   }

   & div.x9f619.xjbqb8w > span._aacl._aaco
   {
      color:                     rgb(0, 150, 255) !important
   }
}


.x6s0dn4.x9f619.xxk0z11.x6ikm8r
{
   height:                       25px !important;
}


div[class ~= "x1qjc9v5 x9f619 x78zum5 x1q0g3np"]
{
   ul._acay
   {
      > li._acaz
      {
         div[class ~= "_ap3a _aacn _aacu"]
         {
            height:              30px !important;
            min-height:          30px !important;

            > div[class ~= "x9f619 x1lliihq x6ikm8r"]
            {
               height:           30px !important;
            }
         }

      }
   }
}


section[class ^= "x78zum5 xdt5ytf"] > 
main[class ^= "xvbhtw8 x78zum5"] > div:first-child > div:first-child 
{
   margin-left:                 20px !important;
}


._acay *, .xw7yly9 *
{
   font-size:                    22px !important; 
}


.xsag5q8.x1e558r4 > div > div:nth-child(2), 
.xsag5q8.x1e558r4 > div > div:nth-child(2) div
{
   line-height:                  1.55em !important;
}

span._aacl._aaco._aacu > span:nth-child(2) > div:first-child
{
   display:                      block !important;
   margin:                       12px 0 0 0!important;
}

section[class = "xat24cr"]
{
   + div 
   {
      > div:nth-child(2)
      {
         margin-top:                   20px !important;
      }

      + div 
      {
         > ul > div 
         {
            margin-top:                8px !important;
         }
      }
   }
}


form._aidk._aidl._aie4
{
   & textarea
   {
      margin-top:                25px !important;
      min-height:                40px !important;
      background-color:          #1E1E1E !important; /* 30 decimal */
      
      border:                    2px Solid #003366 !important;
      border-radius:             6px !important;
      padding:                   12px !important;
      line-height:               26px !important;
   }

   & textarea:focus 
   {
      /* Steel Blue border */
      border:                 2px Solid #4682B4 !important; 
      min-height:             80px !important;
      line-height:            26px !important;
      color:                  rgb(210,210,210) !important;
   }
}


ul._a9ym div.xt0psk2 > a, div.xsag5q8.x1e558r4 span._aacl._aaco._aacw 
{
   color:                     #0096FF !important;
   font-weight:               normal !important;
   font-size:                 24px !important;
}

div[class = "x1lliihq x1n2onr6"] div.x9f619.xjbqb8w >
a.x1i10hfl.xjbqb8w span
{
   margin-top:                15px !important;
   color:                     #0096FF !important;
   font-weight:               normal !important;
   font-size:                 24px !important; 
}


div[class $= "_ab8b"]
{
   > nav * 
   {
      color:                 rgb(165,165,165) !important;
   }

   > span * 
   {
      color:                 rgb(140,140,140) !important;
   }
}


div.xu96u03.xm80bdy.x10l6tqk > div > div > div
{
   background:                   rgb(20,20,20) !important;
}

div.xu96u03.xm80bdy.x10l6tqk div
{
   border-radius:                5px !important;
}


div.xq9evs9 .x1y1aw1k
{
   padding-top:                15px !important;
   background:                 rgb(30,30,30) !important;
}


div.xq9evs9 a.x1i10hfl.x1qjc9v5,
div.xq9evs9 div.x1i10hfl.x1qjc9v5
{
   background:                  rgb(30,30,30) !important;
}

div.xq9evs9 .xols6we, div.xq9evs9 .x28ko6u  
{
   height:                      3px !important;
   background:                  rgb(45,45,45) !important;
}

.xyamay9
{
   padding-top:                  0px !important;
}

.x1l90r2v
{
   padding-bottom:               0px !important;
}

Comments

Popular posts from this blog

Do Telepaths Exist? Outrageously Disgusting Tale Of Torture Using Telepathy — Part II

Media Empires, Theft Of Information Using Telepathy, And Increasing Anxiety Rates

Amanda Davies, The Desire To Write An Innocuous Critique, And Badly Stalled Cerebrum