My MSOE Skin [Updated]

by Wesley Zloza

A look at the new myMSOE skin.

Preview Image of the myMSOE Skin

I’ve been working hard to complete a new modification of my myMSOE skin. The new skin complies to the new website that MSOE has implemented early this year. The skin can be downloaded/installed using the instruction below. Feel free to comment here if you like it or follow me on twitter @wesleyzloza.

INSTALLATION INSTRUCTIONS:
MOZILLA FIREFOX


  1. Install Stylish for Mozilla Firefox. (Stylish for Mozilla Firefox – Download)
  2. Once Stylish is installed, the Stylish icon should appear in the top right corner of the toolbar. Step 2 -  Firefox
  3. It isn’t necessary to download the myMSOE repository from GitHub. Instead, the CSS information for Firefox can be accessed directly using the following link. (myMSOE for Mozilla Firefox) By using this method, no files need to be downloaded or unzipped – essentially its easier and faster.
  4. A new tab will open and all of the CSS information should be listed. In this windows press Ctrl + A to select/highlight everything.  Once this is done, press Ctrl + C to copy all of the text and then close the tab. (Note: make sure to not clear your clipboard. This information will be pasted into the Stylish editor).
  5. Create a new Stylish style. This is done by clicking on the stylish icon in the toolbar and selecting “Write new style” and then “Blank style…”.Step 6
  6. Paste the CSS copied from before into the Stylish editor.
  7. Give the skin a name; I recommend naming it something along the lines of “myMSOE Skin” or something similar. Tags are an optional feature and are just used for search purposes. When this is all done, the editor window should look like the figure below:final settings-firefox
  8. Click the save button and close the text editor.
  9. Head to my.msoe.edu and see if it works! If there are any issues feel free to contact me in the comments below.

GOOGLE CHROME


  1. Install Stylish for Google Chrome. (Stylish for Google Chrome -  Download)
  2. Once Stylish is installed, the Stylish icon should appear in the top right corner of the toolbar.Step 2 - Chrome
  3. It isn’t necessary to download the myMSOE repository from GitHub. Instead, the CSS information for Firefox can be accessed directly using the following link. (myMSOE for Google Chrome) By using this method, no files need to be downloaded or unzipped – essentially its easier and faster.
  4. A new tab will open and all of the CSS information should be listed. In this windows press Ctrl + A to select/highlight everything.  Once this is done, press Ctrl + C to copy all of the text and close the tab.  (Note: make sure to not clear your clipboard. This information will be pasted into the Stylish editor).
  5. Create a new Stylish style. This is done by clicking on the stylish icon in the toolbar and selecting “Manage installed styles”.Step 6 - Chrome
  6. A new tab will open displaying the Stylish control panel. Here a user is able to view all installed styles. Assuming there are no styles installed prior to this, the right hand side of the control panel should be blank. To install the myMSOE skin, click on “Write new style”. The control panel will then turn into the editor window. Step 7 - ChromeStep 8 - Chrome
  7. Paste the CSS copied from before into the code field.
  8. Unlike Mozilla Firefox, the website controls for the skin are specified below the editor and not controlled within the CSS. This part is crucial to get the skin working! We do not want the skin to apply to everything. Instead, we must “Specify” what domains should be effected. Click the “Specify” button to show the domain controls. In the drop down menu select “URLs on the domain” and in the next field type “my.msoe.edu”. This will tell Stylish to change the style sheet for all pages that are registered under “my.msoe.edu”.
  9. Give the skin a name; I recommend naming it something along the lines of “myMSOE Skin” or something similar. Make sure that the “Enabled” check-box is clicked. This check-box controls whether the skin is on or off. When this is all done, the settings window should look like the figure below: final settings-chrome
  10. Click the save button and close the tab.
  11. Head to my.msoe.edu and see if it works! If there are any issues feel free to contact me in the comments below.
About these ads