Semi-Trans v. 1.0
rating: +1+x

Name: Semi-Trans v. 1.0

Author: Chaotic1Chaotic1
License: Creative Commons Attribution-ShareAlike 3.0 License

Tags: sidebar topbar transparency

Supports top bar menu *: yes
Supports side bar menu *: yes
* depends on tags: topbar and sidebar

Description:

  • This theme was originally created as an optimization of the Underwater Theme by Squark. As such, it is constantly a work in progress. I am still in the process of finding a way around the transparency issue without having to use an image. If you know a way, then let me know.

body {
background-image: url(http://themes.wdfiles.com/local--files/semi-trans/semi-trans-bgimage.png);
background-position: top center;
background-repeat: no-repeat;
background-color: black;
color: #00ff33;

}

  • Also note that the semi-transparent background is dependent on the image in the "#main_content" section. If you replace it with an opaque image, you will lose the effect. If you want to make a semi-transparent background with your own color, follow these steps:
  1. Open Adobe Photoshop (If you do not own Photoshop and cannot afford it, there is an open-source alternative called Paint.net which you can download for free here.).
  2. Create a new image. The dimensions don't matter; make it as big or small as you like.
  3. Select all and delete.
  4. In the color tool, choose your color, and then set the transparency (sometimes called the alpha) either to 204 for 80% transparency or 191 for approximately 75% (if you want any other level of transparency, you can do the math yourself, the formula is $\frac{255 * percenttransparent}{100}$.
  5. Save the image under a name you'll remember
  6. Upload the image to your wiki, preferably to the page where you have your code saved.
  7. Look for the section of code below:
    # Replace "http://themes.wikidot.com/local--files/semi-trans/semi-transbgtransparent.png" with a link to your image.
  8. Update the code in the management panel (Hopefully, you already know how to do this.).

*Color Scheme (For now) by Jules Ismail.

#main-content {

background-color: transparent;
background-image: url(http://themes.wikidot.com/local--files/semi-trans/semi-transbgtransparent.png);
background-repeat: repeat;
border:1px solid white;
/* for IE */
filter: alpha(opacity=100);
/* CSS3 standard */
opacity: 1.0;
margin-top: 0px;
margin: 0px 240px 10px -11px;
}

  • The opacity code is there as a safety buffer. I may remove it when I figure out a way to further optimize the semi-transparency.

Preferred Method of Installation

  1. Copy the code from below.
  2. Paste it into a page on your wiki that only admins can alter, being sure to place code tags around it.
  3. Go to "Appearance" in the navigation bar of the Admin Management panel.
  4. Select "Custom Themes" in the navigation bar.
  5. Create a new custom theme that imports the code from your css page.
  6. Save it.
  7. Select "Themes" in the navigation bar.
  8. Set your new theme to whatever you want it for.

How to install

  • go to: your wiki admin panel » appearance » themes
  • choose External CSS theme
  • supply the following URL as the CSS location
http://themes.wdfiles.com/local--code/semi-trans

Code

Notes

Similar themes

80.jpg
installbutton.png

Noise

Author: BattlesquidBattlesquid
Rating: 1, Comments: 4

Tags: clean dark flexible grey minimalist modern no-sidebar topbar

80.jpg
installbutton.png

HavokRP Official

Author: Reverend FoxReverend Fox
Rating: 1, Comments: 1

Tags: dark easy purple sidebar simple topbar

Browse themes by tag

Comments

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License