How to remove embedded sytles from header?

  • Resolved deko

    (@deko)


    18 years, 10 months ago

    In the default theme, the header.php has this comment:

    /* To accomodate differing install paths of WordPress, images are referred only here, and not in the wp-layout.css file. If you prefer to use only CSS for colors and what not, then go right ahead and delete the following lines, and the image files. */

    I’m attempting consolidate all styling in the stylesheet and looking for some clarification on this…

    • I assume the comment expects the php code to remain in the “following lines” and delete only the embedded styles – is this correct?
    • There is another comment in the header that says:
      /*Because the template is slightly different, size-wise, with images, this needs to be set here
      If you don't want to use the template's images, you can also delete the following two lines. */
      Is it a bad idea to try and consolidate these lines in the stylesheet? What “template” is being referred to? What is it different from – that makes embedded styling necessary?

    Thanks in advance.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter deko

    (@deko)

    There is another stylesheet in the wp-admin directory:

    wp-admin.css

    What is this used for? Is it necessary? Can this be consolidated in the content stylesheet?

    thx…

    Regarding your most recent post:
    The only style sheet you want to edit is the one in your current theme’s directory.

    Regarding your original post:
    What version of WP are you running?

    you can remove all of the css including comments from the php templage file.

    Thread Starter deko

    (@deko)

    Please correct me if I’m wrong, but it appears that I cannot remove ALL embedded styling from header.php.

    WP version = 2.0.2; Theme = default

    Here’s what I WAS able to remove from header.php (consolidated into the main stylesheet, style.css).

    #body { background: ...
    #header { background: ...
    #footer { background: ...

    This was accomplished by moving the images and updating stylesheet.

    Here’s what remains (the entire file):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="https://www.w3.org/1999/xhtml">
    <head profile="https://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <style type="text/css" media="screen">
    <?php if ((! $withcomments) && (! is_single())) { ?>
    #page { background: url("/images/kubrickbg.jpg") repeat-y top; border: none; }
    <?php } else { ?>
    #page { background: url("/images/kubrickbgwide.jpg") repeat-y top; border: none; }
    <?php } ?>
    #header { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 758px; }
    #headerimg { margin: -10px 9px 0; height: 192px; width: 740px; }
    </style>

    <?php wp_head(); ?>
    </head>
    <body>
    <div id="page">

    <div id="header">
    <div id="headerimg">
    <h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    <div class="description"><?php bloginfo('description'); ?></div>
    </div>
    </div>
    <hr />

    As you can see, the #page, #header and #headerimg directives remain.

    The PHP code has an if-else statement to decide which #page background to use (differnt for single). So I assume there is no way to move this to the stylesheet.

    But what about #header and #headerimg?

    Can safely move these to the stylesheet? What’s with the “!important” directive? Will I need this in the stylesheet?

    Thanks.

    First of all, let me start with a note, for my personal install of wp (which I haven’t had time to complete yet)
    https://www.hradil.us/index.php (if you wipe out the index.php part, it takes you to my “old” mostly static site which I’m porting to wordpress/xoops., I just have so many other projects going on I almost never get the time to update my own stuff), anyway, back to the point, for my install, I’ve wiped ALL of that code out(’cause I don’t need it). If memory serves me correctly if you do choose to remove it, the default stylesheet should take care of the header display, although I’d have to go back and check my notes on that. I would take it out, see what happens, then if it doesn’t work the way you’d like, just put it back.

    All of the themes/templates that I develop for clients/or dontation to the various communities are purely css based and remove all of the previously mentioned code from header.php. I like to build themes/templates/layouts that completely separate content from design/layout, it makes life much much easier in the long run.

    Thread Starter deko

    (@deko)

    Thanks for the reply.

    So, to get around the issue of the PHP code having an if-else statement to decide which #page background to use (differnt for single), I assume you would modify the single.php file and update all the div tags to use the appropriate style directives? Is this correct?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to remove embedded sytles from header?’ is closed to new replies.