Forums

WordPress › Support » Themes and Templates

Different Style (CSS) to Different Pages (15 posts)

  1. mpustka
    Member
    Posted 1 year ago #

    I'm trying to create a different style format for a "newsletter" page from the other pages on my blog http://atxre.com

    I found this posted topic and have been trying to implement it with no luck and I'm not sure what I'm doing wrong.
    http://wordpress.org/support/topic/337389

    I added

    <body<?php if ( is_page(array('newsletter-1', 'newsletter-2', 'newsletter-3'))) {
echo ' class="myclass" '; } ?>>
</body>

    to the header.php file
    right after <body>
    Then on my "newsletter" page I added at the top,
    <body class="myclass">
    Then on the style.css sheet I added
    .myclass #content { background-color: #123456; }
    .myclass #content p { color: #987654; }
    After

    body {
	background: #FFFFFF url("images/top.gif") repeat-x;
	color: #323232;
	text-align:center;
	font:11px/18px Verdana, Arial, Helvetica, sans-serif;
	margin: 0px auto 0px;
	padding: 0px;
	}

    which is my blog body format.

    What am I doing wrong?

  2. mpustka
    Member
    Posted 1 year ago #

    OK, I'll change the question ~ What's the best way to insert custom css for a page within a blog?

  3. alchymyth
    The Sweeper
    Posted 1 year ago #

    you could use the wordpress template tag body_class()

    change this
    <body>
    to this
    <body <?php body_class(); ?>>
    (in header.php, only once, no other additions anywhere)

    will generate a few specific classes for the body tag, similar to your attempt.

    your own code looks ok; however, if you did what you described, you created a few too many body tags:

    the only thing to do would be to add this in header.php instead of the <body> tag:

    <body<?php if ( is_page(array('newsletter-1', 'newsletter-2', 'newsletter-3'))) { echo ' class="myclass" '; } ?>>

    (no closing body tag </body> here; and no body tag with a class in the template file)

    if you stil have problems, a direct link to your newsletter page might help (could not find any hint to the newsletter in the link to your site)

  4. mpustka
    Member
    Posted 1 year ago #

    OK, this makes sense, but where do I place the custom css formatting?

  5. alchymyth
    The Sweeper
    Posted 1 year ago #

    basically anywhere into style.css of your theme -

    i personally would place the custom styles either after the related styles or totally at the end of style.css

    so, if you already have a style for #content in your style.css, i would add the new custom style after it:
    for instance:

    #content { .... }
.myclass #content { ....}
or
.page-id-37 #content { ..... }
or
.page-template-newsletter-php #content { .... }

    depending on the body classes that the newsletter page shows.

  6. mpustka
    Member
    Posted 1 year ago #

    http://atxre.com/?page_id=4580&preview=true

    In header.php file I changed <body> to
    <body<?php if ( is_page(array('newsletter-1', 'newsletter-2', 'newsletter-3'))) { echo ' class="myclass" '; } ?>>

    In style.css file I added 

    .myclass #content h1 {
	color: #069DD5;
	font-size: 20px;
	font-weight: bold;
	text-transform: uppercase;
	font-family: Courier;
	}

    and

    .myclass #content {
        background-color: #123456;
        }

    Just to see if I could confirm that it is working but I'm still not doing something correctly...

    Sorry if I'm being dense and thanks for your patience.

  7. alchymyth
    The Sweeper
    Posted 1 year ago #

    sometimes one has to reload the page in the browser to get css changes to show; or refresh the browser cache by pressing CTRL F5 at the same time.

    you can also check if the body class is in the code by looking at the html code of your page in the browser ('view' 'source' or 'view' 'page source').

    the link did not work as it is a preview and not an active page.

  8. mpustka
    Member
    Posted 1 year ago #

    http://atxre.com/newsletter-1/

    I published it temporarily above.

  9. alchymyth
    The Sweeper
    Posted 1 year ago #

    it seems that the body class did not get generated.

    could you post the code of header.php around the body tag plus/minus a few lines?

  10. mpustka
    Member
    Posted 1 year ago # 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="distribution" content="global" />
<meta name="robots" content="follow, all" />
<meta name="language" content="en, sv" />
<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

<!-- leave this for stats please -->
<body<?php if ( is_page(array('newsletter-1', 'newsletter-2', 'newsletter-3'))) { echo ' class="myclass" '; } ?>>
<link rel="Shortcut Icon" href="<?php echo get_settings('home'); ?>/wp-content/themes/elements-of-seo/images/favicon.ico" type="image/x-icon" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

  11. alchymyth
    The Sweeper
    Posted 1 year ago #

    the body tag is in the wrong position in header.php; it should be further down just after the closing </head> tag; before the line with <div id="wrap">

  12. mpustka
    Member
    Posted 1 year ago #

    made the change but didn't seem to make a difference

    I tried to make some dramatic changes, such as the background color and font color so that it would show up and easily be noticed but I still don't see it...

    .myclass #content p {
        background-color: #123456;
        }
    .myclass #content p {
	font:12px;
        font-family: Courier;
        color: red;
}

  13. alchymyth
    The Sweeper
    Posted 1 year ago #

    i can't say why, but the body class does simply not appear in the html code.
    (your css is correct)

    alternatively, you really could try:
    <body <?php body_class(); ?>>
    and then work with those classes.

    no insult intended, but are you sure you edit the right file, and save the changes or re-upload the changed file to the right place

    (happened to me before that i try things with the wrong file)

  14. mpustka
    Member
    Posted 1 year ago #

    no insult taken. I'll look at all of it again.

  15. mpustka
    Member
    Posted 1 year ago #

    does it have anything to do with the newsletter page being made up of tables?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags