custom CSS to remove @import lines

  • Hi all,
    I was trying to import my custom CSS into the custom stylesheet definition form http://ciscoresearch.wordpress.com/wp-admin/themes.php?page=editcss for our blog.
    I’d like to do so, at least during the editing phase, to avoid editing directly on the web form (rather impractical)
    If I use the following line in the form:

    @import url('http://....css');

    the line gets removed when I save the stylesheet (both in the ‘Add to existing CSS (View stylesheet)’ and the ‘Start from scratch and just use this’ mode).
    Is that normal? It would be nice to be able to edit your own stylesheet directly in your favorite editor.
    Thanks,
    regards,
    Michele

    p.s. for who may be wondering, I paid the 15$ fee for custom CSS… :-)

  • As I understand it, you can only edit the CSS for an existing theme. If you are trying to use your own theme, it’s not going to work.

  • I honestly don’t have clue about that. But isn’t it possible to define a completely new stylesheet using the ‘Start from scratch and just use this’ option in the custom stylesheet page? That would suggest me we should be able to enroll in the quite tricky quest of defining a completely new theme from scratch (or basing upon an existing one).

    Anyway, this is not exactly my problem. I just would like to create a stylesheet file in my web space and using a stylesheet tool (with syntax check, toolkits, word completion, etc… for example Microsoft Visual Studio for Web Development) and being able to ‘import’ it as-is as stylesheet for my blog. Normally it is a straightforward task but the custom stylesheet page seems to have a syntax check that gets rid of the @import lines.

    What I would like to know is if there is any way to resolve this problem.

    Thanks,
    Michele

  • Michele,

    The only thing that is allowed in either of the 2 options for your CSS is elements. It will strip out anything that is not a CSS element or includes of other files. That means, if you have a design that you normally would just include 3 CSS sheets using @import, you will have to cut and paste all those CSS sheets into the editor.

    In terms of editing them with another text editor or program, I personally do this as well. What I do is copy the CSS editor information from wordpress.com, paste into my favorite editor, make the changes I want, copy that text and replace the one in the editor. Working in the editor is not my favorite task.

    Does that help?

    Trent

  • It strips out comments as well, so you won’t be able to use comments to create browser-specific CSS. It’s a pain in the ass.

  • Hi Trent,
    yes it does help. Thanks! it confirms what I was scared of.
    I’m actually following the same procedure as you described. Copy, edit in my favorite editor and copy back. What I was trying to understand was if there exist a way to avoid the cut and paste and just refresh the page to see the effect of changes made ‘locally’ on the file (I’m not a web dev, I still heavily rely on trial and error… :-) )

    Hi engtech,
    I confirm, it’s a pain in the ass :-D
    Thanks for your answer.

    Cheers,
    Michele

  • Michele, there is a Firefox browser plugin called “firebug” that does real time changes once you run it through and you can always use the “preview” button in the editor. I have a great program for my mac called CSSEdit that does amazing real time editing with your site offline and then you just copy and paste the finished product in!

    Something to think about!

    Trent

  • Wow Trent,
    this firebug addon is incredibly powerful. In particular if you’re not a real web developer like in my case, you can play as much as you want and when you find the effect that you wanted, you can copy paste to your final stylesheet.
    Thanks, thanks a lot for sharing this,
    Michele

  • The topic ‘custom CSS to remove @import lines’ is closed to new replies.