Grow your CSS skills. Land your dream job.

Where is the WordPress Jetpack Custom CSS file?

  • # January 21, 2013 at 7:41 pm

    Hi Folks

    I’m a fairly recent newcomer to WP (and PHP) so please bear with me.
    I have just added the Jetpack plugin to my TwentyTwelve themed site and have activated the ‘Custom CSS’ module. I am using a child theme on my site consisting of one or two template page tweaks and some custom css (with media queries).
    Ok, so I stripped out the css from the child theme (but ensured style.css remained as a child theme prerequisite) and added it (the css) back in through the Jetpack module (Dashboard – Appearance – Edit CSS). Everything seems to display as before in terms of layout, colour etc, however the paths to my images are no longer correct. So my question is: To work out the correct paths, where would I find the new jetpack-generated Custom CSS stylesheet file??
    Believe me I have spent a small ocean of time trying to find the answer myself.
    So any pointers would be greatly appreciated.

    Thanks
    Chris

    # January 22, 2013 at 3:44 am

    > where would I find the new jetpack-generated Custom CSS stylesheet file?

    The Jetpack Custom CSS module stores your custom CSS in your database, so you won’t be able to find a stylesheet file anywhere on your site. That file is generated dynamically.

    Your CSS changes are stored in the _posts table, along your Posts, Pages, and other Custom Post Types.

    Storing your custom CSS in the database as a Custom Post Type allows you to keep track of the changes you’ve made: you can go back to previous CSS revisions at any moment, thanks to the module at the right of the Custom CSS panel:

    ![Custom CSS panel](http://i.wpne.ws/MKd7/content)

    > the paths to my images are no longer correct

    Try using absolute paths for all your images. That should solve your issue.

    # January 22, 2013 at 8:35 am

    Hi Jeherve

    Thanks for the feedback.
    My main problem is I’m not conversant with the PHP workings of WP yet (far from it).
    That said, as you’ve suggested, I’ve tried the absolute path (http://domain.co.uk/wp-content/images/image.png)
    and the absolute path without the domain (http://wp-content/images/image.png)
    Neither works.
    When you say ‘absolute’ I assume you mean as if I were just simply trying to locate any other asset on the web. Or do you mean absolute in terms of a path that delves into WP…including the ‘uploads’ folder for example?

    I am a little slow at times!!!
    Thanks for your patience
    Chris

    # January 22, 2013 at 1:29 pm

    This should work:

    .class {
    background: url(‘http://domain.co.uk/wp-content/images/image.png’);
    }
    .another {
    background: url(‘/wp-content/images/image.png’);
    }

    # January 22, 2013 at 6:34 pm

    Jeherve

    As you say ‘This should work’ and it does work! I have been looking at the wrong screen res whilst trying to implement the rule in another (media querie). Such is the ‘Wood for the trees syndrome’. I suspect it was working all along. What can I say? (rhetorical!)
    Many thanks once again.

    # March 12, 2014 at 2:22 pm

    Newbie user: When the php code generates the CSS as a page is loaded by a browser: Where is it inserted? In an already existing CSS file? if so which one? if not then where?

    I
    I’m trying to track down why things that I have included using the Edit CSS tool seem not to be having an effect.

    If I look at a “View Source” copy of the page from a browser, where is the <link or <script that is making things take effect?

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".