wp-syntax css with twenty-ten child theme

  • Resolved Mark Thomson

    (@markmclt)


    14 years ago

    I have just installed wp-syntax and it’s working, but I did run into a couple of issues – I’m interested to know if these are known issues or I have just misunderstood the right way to do things…

    Problem #1: I am using a child theme built off the default wordpress twenty-ten theme. When I first attempted to insert code into a post using wp-syntax, the text was way too large and it turned out to be because the styling was coming from my theme and not from the wp-syntax css file.

    With a little investigation I figured out that the reason was that the twenty-ten stylesheet has ‘pre’ declarations that are more specific than those in the wp-syntax stylesheet. They are more specific because they are defined in the context of the #content id selector, e.g. –

    #content pre {
  font-size: 15px;
  line-height: 21px;
}

    whereas the wp-syntax declarations are defined in the context of the
    .wp-syntax class context, e.g. –

    .wp_syntax pre {
  ...
  font-size: 12px;
  line-height: 1.333;
  ...
}

    Ok, not a big problem – the solution is to precede the wp-syntax declarations in wp-syntax.css with the #context id selector. Except for –

    Problem #2: The wp-syntax usage documentation says, “To customize your styling, copy the default wp-content/plugins/wp-syntax/wp-syntax.css to your theme’s template directory and modify it. If a file named wp-syntax.css exists in your theme’s template directory, this stylesheet is used instead of the default.”

    Sounds simple. However this didn’t work the first time I tried it. It turns out – as far as I can tell – that when using a child theme, wp-syntax.css has to be copied into the parent theme, not the child. Once I copied the stylesheet into the twenty-ten theme directory, everything worked as desired.

    Although this works, the fact that I had to modify the parent theme directly is a little messy – it means there is no way to attach custom wp-syntax styling to just the child theme. I did try putting a copy of wp-syntax.css in both the parent and the child and making changes to the latter, but these were ignored.

    I guess this is really a WP issue, not specifically a wp-syntax issue, but I’m curious whether anyone here has run into the same problem or has a better solution.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Khang Minh

    (@oddoneout)

    I don’t think that is a WP issue, you should open the file wp-syntax.php and find this function: wp_syntax_head:

    $css_url = WP_PLUGIN_URL . "/wp-syntax/wp-syntax.css";
  if (file_exists(TEMPLATEPATH . "/wp-syntax.css"))
  {
    $css_url = get_bloginfo("template_url") . "/wp-syntax.css";
  }
  echo "\n".'<link rel="stylesheet" href="' . $css_url . '" type="text/css" media="screen" />'."\n";

    You can try changing this function to:

    $css_url = WP_PLUGIN_URL . "/wp-syntax/wp-syntax.css";
  if (file_exists(STYLESHEETPATH . "/wp-syntax.css"))
  {
    $css_url = get_bloginfo("stylesheet_directory") . "/wp-syntax.css";
  }
  echo "\n".'<link rel="stylesheet" href="' . $css_url . '" type="text/css" media="screen" />'."\n";

    Then copy the wp-syntax.css to the child theme’s folder.

    Hope that will help :).

    Thread Starter Mark Thomson

    (@markmclt)

    Thanks! That’s extremely helpful. Hopefully that will also find its way into the next official release.

    Thread Starter Mark Thomson

    (@markmclt)

    BTW, just out of curiosity, are WordPress constants like STYLESHEETPATH and TEMPLATEPATH documented officially someplace? I found a couple of third party sources but nothing on Codex. In general, how would a plugin author know that STYLESHEETPATH can/should be used in the way you have above?

    Khang Minh

    (@oddoneout)

    Um, I’m not sure, but you can read here: https://codex.www.ads-software.com/Child_Themes, scroll down a little bit to this part: “Including Files to Keep Things Clean”.

    STYLESHEETPATH and TEMPLATEPATH are surely documented in Codex, they just don’t tell you specifically where to use it.

    For your information, I would like to recommend two things:
    – Don’t develop child theme over Twenty Ten, Twenty Ten is very messy.
    – Don’t use this plugin, because 1. (as far as I know) it is not maintained anymore :(, and 2. the way it adds geshi to your post is not really ok. You can try removing the lang= attribute and it will mess up your design.

    The decision is up to you :). If you ask me what should be the alternative, I think there’s none that’s good except some plugins that use Syntax Highlighter instead. By the way, I’m developing a new plugin using Geshi, you can have a sneak peek here: https://img541.imageshack.us/img541/1563/geshi.jpg

    I will release it soon enough, if you are interested I will inform you later in this topic (assuming that it won’t get locked tee hee).

    Thread Starter Mark Thomson

    (@markmclt)

    Thanks much.

    Plugin Author Steven

    (@shazahm1hotmailcom)

    I just updated WP-Syntax to use the fix provided by OddOne Out [THANKS!] and updates GeSHi to the latest version

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘wp-syntax css with twenty-ten child theme’ is closed to new replies.