MyCSS

77 comments · AddThis

Latest version:
1.1
2008.04.18

MyCSS is a WordPress plugin that allows you to attach your personal CSS stylesheet to your blog, regardless of the theme you might be using. This is useful for users who want extra control over the presentation of individual blog entries by using self-defined CSS classes without worrying about compatibility issues when switching theme from one to another.

Another reason you might want to use this plugin is if your blog uses other plugins that require CSS styling. While some blog themes support certain plugins “out of the box”, you can style them yourself using MyCSS and make minimal changes as you switches themes since they are all in one place, i.e. my.css.

It is always a good idea to not heavily modify a blog theme’s original CSS whenever possible (to make future theme update easier). Any extra CSS classes you added yourself can be put into MyCSS editor, which will definitely save you time managing your blog’s presentation in the long run.

The closest plugin I found that implements a similar function is “Fixed Stylesheet – Quick n’ Dirty Hack”. However, what is lacking in this dirty hack is the convenience of editing the custom stylesheet. Using this hack, one has to edit the stylesheet using a text editor, upload it to your blog directory via FTP, then only will any changes take place.

MyCSS plugin takes an extra step towards better organizing your custom stylesheet by adding a new panel under “Presentation” menu that allows you to do instant changes to your stylesheet easily. ;)

For your information, this site is powered by MyCSS and you can take a look at the stylesheet to have a feel how would one utilize it.

MyCSS plugin screenshot
See MyCSS in action

For advanced users…
If you make heavy use of “Edit CSS” feature found in Firefox’s Web Developer Toolbar while stying your WordPress blogs, then you’ll definitely increase your productivity by having an extra tab opened with MyCSS and copy desired CSS changes directly from Edit CSS panel into MyCSS textbox. Save, refresh, done! :D

Features

  • imports user-defined stylesheet, independent of blog theme used
  • provides convenient stylesheet editor in admin panel for fast editing
  • does not write to your WordPress database

Usage

Once activated, you can either upload your self-defined stylesheet to “wp-content/plugins/MyCSS/my.css” or copy and paste your CSS codes into the editor under “Presentation” menu.

Make sure “my.css” is writable on your server, a “644″ permission should suffice. Below’s the message you’ll see if “my.css” is not writable:

my.css is not writable
my.css is not writable

Similarly, if “my.css” cannot be found, you will get the following warning:

my.css does not exist
my.css cannot be found

 

Something you should know…
Elements in your blog posting using CSS classes defined in “my.css” will lose their CSS formatting in RSS feeds. This is due to the fact that RSS feed does not support external stylesheet, thus all CSS classes will have no effect in RSS readers.

Tips

Due to the limitation of CSS classes in RSS feeds mentioned above, you should always try to use classes together with standard XHTML tags to allow RSS readers to render those elements closer to the way you intended than completely ignoring your CSS classes. For example:

Example Header

Instead of using <span class=”myheader”>Example Header</span>, you should really use <h2 class=”myheader”>, and the CSS will look something like this (just for reference):

h2.myheader {
  font-size: 1.6em;
  color: #777;
  margin-bottom: 13px;
  padding: 10px 0 7px;
  border-bottom: 1px dotted #ccc;
}

One of the tips I can give you is that you might want to use “!important” whenever your CSS in my.css does not show up (usually due to conflicts with theme’s stylesheet). btw, I’m no pro at CSS so if any of you know a better way of using CSS classes in your blog entries, feel free to share your opinion here. :)

Installation

  1. Download and extract the “MyCSS” folder
  2. Upload the “MyCSS” folder to your WordPress plugin directory, usually “wp-content/plugins”
  3. Activate the plugin in your WordPress admin panel

Download

MyCSS plugin 1.1 for WordPress 2.5+ (4kb .zip)

If you are using older version of WordPress, please download MyCSS 1.0 from here instead.

Please donate to support active development of this plugin, thank you!

Support

If you have any questions, suggestions, or found any bugs in this plugin, feel free to post them in your comments. I’ll try my best to answer them but there’s no guarantee, so don’t be disappointed if you do not hear back from me promptly. :/ If you find this plugin useful and feel like donating some money for my effort, please use the PayPal button above, thanks! <3

History

1.1 [2008.04.18]

  • Updated admin panel markup for WordPress 2.5

1.0 [2006.07.25]

  • Initial release

{ 50 trackbacks }

BloggingPro China » Blog Archive » WordPress Plugin: MyCSS UNITED STATES
July 27, 2006 at 1:06 am
MyCSS · WordPress插件中文站 UNITED STATES
July 27, 2006 at 2:01 am
Disruptive Library Technology Jester :: DLTJ under a New Theme UNITED STATES
August 13, 2006 at 11:30 pm
插件 » Blog Archive » MyCSS
November 7, 2006 at 4:32 am
Tip: Lav ændringer i dit tema i et seperat style-sheet (CSS)
March 5, 2007 at 4:36 pm
麦子的blog » Blog Archive » yo2试玩两日笔记
May 7, 2007 at 9:43 am
Weblog Tools Collection » Blog Archive » APAD: MyCSS UNITED STATES
May 10, 2007 at 12:20 pm
MyCSS: Plugin para Wordpress | Kabytes
May 10, 2007 at 1:15 pm
MyCSS, plugin para Wordpress « Cosas sencillas
May 11, 2007 at 4:02 am
我爱水煮鱼 » MyCSS
May 13, 2007 at 11:38 am
Grapefeed » Blog Archive » MyCSS UNITED STATES
May 14, 2007 at 5:16 pm
yourCSS, permite que usuarios personalizen tu sitio | aNieto2K
May 15, 2007 at 4:10 pm
Meme: Lista de Plugins usados | Kabytes
May 19, 2007 at 1:23 pm
WP Plugins DB » Blog Archive » MyCSS UNITED STATES
May 20, 2007 at 3:54 am
MyCSS WordPress Plugin » D’ Technology Weblog: Technology News & Reviews
May 31, 2007 at 9:19 am
MyCSS WordPress plugin | Gizmostuff
June 10, 2007 at 5:25 pm
随便说说SBTalk » Blog Archive » Quick n’ Dirty Hack vs MyCSS插件 CHINA
June 12, 2007 at 10:58 am
Wordpress 中的代码加亮 UNITED STATES
July 23, 2007 at 3:26 am
Externe Links highlighten » bastelbude.com GERMANY
October 29, 2007 at 11:07 am
Blat News » Blog Archive » MyCSS plugin UNITED STATES
November 12, 2007 at 11:45 am
Blat News » Blog Archive » Fixed up a few more things UNITED STATES
November 13, 2007 at 12:13 pm
知更鸟 » WordpressYo2.cn托管用户添加流量统计教程 CHINA
November 24, 2007 at 8:12 am
从申请免费空间到构建wordpress博客的详细图解|免费搭建自己的wordpress博客 » | “华”众取宠CNadman.CN CHINA
November 28, 2007 at 7:04 pm
点名游戏:Wordpress插件之我选择 | 『掌上浮云』
January 9, 2008 at 8:06 pm
blog-thing : 七十二松提供插件介绍
February 15, 2008 at 10:26 am
72松47个wordpress插件小解 | 虾米盒子
March 14, 2008 at 5:37 pm
City Recluse » Blog Archive » 我在yo2博客上启用的插件
March 17, 2008 at 1:30 pm
我所使用的WordPress Plugins | Perfect Blue | MissZ.NET
April 8, 2008 at 6:48 am
Top 3 Most Underrated Wordpress Plugins | Hayes Potter
June 28, 2008 at 6:07 pm
My CSS 插件使用 | 生色活香
September 1, 2008 at 8:03 pm
Top 65+ WordPress Plugins | ShanKri-la UNITED STATES
October 9, 2008 at 8:18 pm
72松47个wordpress插件小解
November 4, 2008 at 5:29 am
Reasons To Wordpress - The MyCSS Syndrome GERMANY
November 4, 2008 at 8:33 am
» Image Caption - WordPress Plugins Catalog UNITED STATES
November 15, 2008 at 9:26 am
» MyCSS - WordPress Plugins Catalog UNITED STATES
December 25, 2008 at 11:42 pm
Another NoBoy Life part… » Archive du blog » :: DEV .:. MyCSS Improved V1 for Wordpress FRANCE
December 27, 2008 at 8:18 am
my cc » google analytics 访问数为0
January 5, 2009 at 8:38 pm
我使用的wordpress插件 | 上网这点事
February 12, 2009 at 8:50 am
My CSS 插件使用 | 路过
May 29, 2009 at 8:58 pm
WordPress Tips - Include an Image Caption |
September 17, 2009 at 10:44 am
CSS Styles For Pretty-fying Text in Your WordPress Blog | CoachNotes
January 5, 2010 at 6:57 pm
CSS Styles Inspired By The YAML Framework | CoachNotes
January 15, 2010 at 1:27 am
CSS Styles From The Guangzhou Theme | CoachNotes
January 16, 2010 at 7:47 pm
CSS Styles Achieved With The Special Text Boxes WordPress Plugin | CoachNotes
January 16, 2010 at 10:10 pm
Empfehlenswerte Wordpress-Plugins « Hardy's Blog
February 17, 2010 at 11:39 am
七十二松提供插件介绍 « 蘇恩兒的部落格
February 27, 2010 at 7:16 am
Just Bojam » 博客文章 » 【转】免费搭建自己的wordpress博客
May 27, 2010 at 4:38 pm
minyoad 的CC World » google analytics 访问数为0 UNITED STATES
July 14, 2010 at 9:13 pm
WP, Styles for Terminal Command Lines at NetSys.HK
October 31, 2010 at 1:40 am
WordPress eklentileri liste halinde aradıgınız tüm eklentiler | SEVECENOL GRUP
September 6, 2011 at 3:59 pm

{ 27 comments… read them below or add one }

Jeza July 13, 2010 at 6:06 pm

Hello, I’m interested in using this plugin, although i don’t know if it would conflict with my thesis blog.

Reply

liutongbao June 29, 2010 at 1:21 am

Very good idea! same as my blog theme MIMBO 3.0 which has a child theme to govern the most personal parts.They have the same function. Great indeed!

Reply

fum February 21, 2010 at 7:57 am

Hi, first thank you for share your work.
I have recently install MyCSS but when I try to enter in MyCSS Editor I got these:

“Oops, my.css cannot be found! Please check the plugin directory and try again.”

Well it appears normal in the pluggin directory and when I enable the plugin seems normal too, could you help me?

Thanks and greetings.

Reply

Arnaud Levy GERMANY July 2, 2009 at 4:21 pm

Un plugin qui simplifie la vie !

Reply

Jim UNITED STATES April 20, 2009 at 9:47 pm

This plugin is absolutely brilliant, just like the website. Eyn, I am so impressed with you. I stumbled on this site while looking for an alternative to child themes. Then I found the writers on this site are also fantastic. Great work everyone. I’m a fan.

Reply

__MaX__ FRANCE June 24, 2008 at 2:12 pm

Hello Yaosan Yeo,

I worked on a multiblog version for your plugin, you can find some details here :

http://blogs.nofrag.com/__MaX__/2008/jun/24/38301-dev-mycss-improved-v1-for-wordpress/

Let me know if it’s a problem for you :)

Reply

Paul FRANCE June 10, 2008 at 6:05 am

MyCSS will not over-ride Theme Editor in Wordpress 2.51 ?
File permissions 644 ok.

Reply

管智鹏 CHINA June 2, 2008 at 6:44 am

宝贝呀!!必备插件儿!!

Reply

Patota* May 3, 2008 at 3:16 pm

ótimo! great!
awsome ;)

Reply

michael lee April 14, 2008 at 4:34 pm

Under the WP 2.5 admin panel, the text entry area for the MyCSS admin page is restrictively narrow.

It can be fixed by adding a value for “cols” on line #68 of mycss.php – the result looks like this on mine:

rows=”25″ cols=”120″ tabindex=”1″

Reply

Steve Murphy November 14, 2007 at 1:44 am

Fantastic plug-in – thanks for your work!

I’m preparing to go live with a WP-based site that will replace my current (and increasingly stale) static site, and have been busy customizing my chosen theme’s css. And then it occurred to me that it would all be wiped out if I installed the next update to the theme.

Your recommendations regarding Firefox and Web Developer are spot on too.

If I may, here’s a recommendation to those like me who had already done significant work modifying a theme’s style.css page: download a program called Beyond Compare by Scootersoftware. It has been invaluable in identifying and transferring the changes I already made in the theme’s CSS to your plugin, as well as tackling the task of identifying and logging changes to other theme files (mostly php) that I will have to repeat manually upon an update. Very powerful and easy to use…

best,

steve

Reply

BGH Quiz GERMANY November 4, 2007 at 10:26 pm

Awesome plugin, thank you a lot. It makes things a lot easier. I like switching themes too much.

Reply

cokar October 28, 2007 at 5:02 am

Thank you!

Reply

心想事成的秘密 MALAYSIA October 15, 2007 at 10:21 am

Does it support wp2.3?

Reply

pyko August 28, 2007 at 9:08 am

hi eyn!
thanks for the great plugin :) i had *just* started editing the core CSS file (and felt horrible doing it) then found your plugin, which solves everything! No more guilty feeling of ‘hacking’ the CSS file anymore :)

thanks heaps!!
pyko

Reply

Martino POLAND August 8, 2007 at 2:45 pm

I´a using this plugin.
Very good. :)
Thanks
Martino :)

Reply

BUGabundo PORTUGAL June 15, 2007 at 4:23 pm

there a case sensitive problem
the file uses “MyCSS” while the folder is “mycss”
on linux it wont work

Reply

Mosey UNITED KINGDOM June 12, 2007 at 6:36 am

Wow… great idea! :D This plugin should have come along sooner~~ one of the reasons why I hardly change themes is precisely because I can never remember which parts I’ve edited ^^: Thanks!

Reply

Shawn UNITED STATES November 24, 2006 at 9:03 pm

Can someone please help me? I am new to installing wordpress on my hosting account and I downloaded the CSS plug in. I wanna build a wordpress blog and add a customized theme. Can someone e-mail me please and school this ditz on how to do it?

Thank you..:-)

Reply

posix September 29, 2006 at 12:56 pm

hmm, personally, i think a plugin at hand of which creating javascript trees anywhere on your blog would be handy.

Reply

eyn CANADA September 28, 2006 at 11:07 pm

Hi posix, I’m not working on any plugin at the moment, but if you have any interesting ideas feel free to tell me and I’ll see if I can code a plugin for it. :)

And Josh, you might want to try different permission settings for the folder, if it stop working once you change the permission, you can change the permission of “my.css” only instead of the whole folder. I suggest you try out 777 permission on my.css (but not the folder, for security reason) as a last resort, it should work. Tell me if you have any more problems.

Reply

Josh September 28, 2006 at 2:06 pm

I cannot detect the plug in after having changed my folder permission

Reply

posix September 2, 2006 at 8:14 am

thank you eyn.
for some reason, when i tried the plugin again, everything worked fine.
it’s beyond me what i did differently before.
well, anyway, i can now fully enjoy this wonderful plugin.
are you working on other plugins? i’d be very interested :)

kind regards,
posix.

ps. sorry for the double-comment earlier.

Reply

eyn CANADA September 1, 2006 at 11:16 pm

posix, I went to your page and found that your my.css is working fine, I don’t think it’s being ignored, but rather the way you put in your CSS might be the problem. You might want to use Firefox Web Developer extension to help you debug your CSS, it comes with a handy EditCSS feature that show you real-time CSS changes. You might also want to try using !important in order for certain CSS to show up as sometimes your main theme CSS file might have already styled certain elements, and you need to force your custom style to overwrite those.

Reply

posix August 31, 2006 at 5:41 pm

hey,
this plugin is what i longed for for ages…
i was so happy to find it.
thanks a bunch for making it.

however, it doesn’t work for me :’(
everything went well with the installation of the plugin and whenever i apply changes it confirms them. there are no error messages saying “can not write” or so.
yet no chages are present.

when i edit the exact same thing in the initial css files of my theme (steve lam’s “true blue” (http://stevelam.org/trueblue/) style for k2) the changes are present.

i don’t understand what i am doing wrong.
i feel more like mycss is being ignored at the moment.

i hope you can help me.

thanks again,
posix.

Reply

eyn CANADA August 13, 2006 at 9:39 am

Hi Daniel, I do know about that plugin you mentioned before I started making this one. Honestly, that plugin isn’t really doing what I wanted, and its implementation goes against what I’m trying to achieve here. First of all, MyCSS does not touch your WordPress database, so user can feel free to enable and disable this plugin without worrying about leaving “traces” behind.

Also, why would someone need multiple “cross theme” stylesheets when the whole purpose of having one is to make managing theme independent CSS classes easier? The reason of me using MyCSS is to group plugin related CSS classes and custom classes I’ve used in my blog post. I want them to be valid even after I switch to a new WP Theme.

One can easily organize CSS classes within a single stylesheet using proper commenting.

Reply

daniel GERMANY August 13, 2006 at 5:31 am

Have a look at this… it also overrides the themes css, can be changed in the admin panel. you can create multiple css files and toggle them on or off without aczually deleting them, as they are sotred in the database.

http://scott.sauyet.com/php/wp-plugins/stylesheets/

Reply

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>