[closed] how to add css for custom page template (10 posts)

  1. designtrial
    Posted 3 years ago #

    hi everyone

    I made frontpage using custom page template, the template is frontpage.php was taken from page.php

    I have plan to make frontpage differently per month using this template, my problem is How and Where place to add the css for the frontpage

    I am absolutly newbie for coding, so the code advices that closely to copy-paste is realy needed, this is my link pandjalu

    many thanks

  2. Tara
    Volunteer Moderator
    Posted 3 years ago #

    Have you consider incorporating an unique id or class for your "custom page template" and then add to CSS to the main stylesheet(s) using the id/class?

    However, if you want to use a standalone additional CSS sheet, you could use a conditional to call it in header.php?

  3. designtrial
    Posted 3 years ago #

    you mean something alike this:

    <body<?php if ( is_page(array('somepage1', 'somepage2', 'somepage3'))) {
    echo ' class="myclass" '; } ?>>


    .myclass #content { background-color: #123456; }
    .myclass #content p { color: #987654; }
  4. Tara
    Volunteer Moderator
    Posted 3 years ago #

    For example: Let's suppose your newsletter template is called newsletter.php, you could do something like this:

    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
    <?php if(is_page_template('newsletter.php')) :?>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/newsletter.css" media="screen" />
    <?php endif;?>
  5. Justin Kopepasah
    Posted 3 years ago #

    Generally I would recommend using the body_class filter instead of the if statement on the body.

    However, since you are newbie, I would recommend using the Custom Classes plugin for easily adding classes to specific pages.

    Once the class is added, simply add the styles to the main stylesheet for the theme.

  6. designtrial
    Posted 3 years ago #

    t-p & kopepasah, thanks the support, since i dont know how to implement your advices, now i made the frontpage with inline code in the page:

    body {background-image:url('http://aryapandjalu.net/wp-content/uploads/2013/01/depan-front.jpg'); background-position: center center; background-size: cover;}
    <p style="text-align: right;"><span style="font-family: 'trebuchet ms', geneva; color: #88C34B; font-size: xx-large; padding-right: 140px;">ARYA PANDJALU</span></p>
    <h2 style="text-align: right;"><span style="color: #88C34B;"><span style="font-family: 'trebuchet ms', geneva;">                                                                                                                                         </span><span style="font-family: 'trebuchet ms', geneva;"><a href="http://aryapandjalu.net/arya-pandjalu/"><span style="color: #99cc00; padding-right: 140px;">Welcome /</span></a></span></span></h2>
    <h2 style="text-align: right;"><span style="color:#88C34B;"><a href="http://aryapandjalu.net/arya-pandjalu/"><span style="font-family: 'trebuchet ms', geneva; color: #99cc00; padding-right: 140px;">Selamat Datang</span></a></span></h2>
    <p style="text-align: right; margin-right: 45px;"></p>

    this is the best i did at the moment

  7. square_eyes
    Posted 2 years ago #

    Justin, thanks for the advice, I'm trying to add the body_class_filter. Unfortunately the codex is incomplete. From the example on that page, where does the code go? If I were to take a wild guess I'd put the below in the page template.

    // Apply filter
    add_filter('body_class', 'multisite_body_classes');

    And the following in the themes function file?

    function multisite_body_classes($classes) {
            $id = get_current_blog_id();
            $slug = strtolower(str_replace(' ', '-', trim(get_bloginfo('name'))));
            $classes[] = $slug;
            $classes[] = 'site-id-'.$id;
            return $classes;

    Am I correct?

    Then do I still add some custom css in my main css file?

  8. esmi
    Forum Moderator
    Posted 2 years ago #

    @square_eyes: If you require assistance then, as per the Forum Welcome, please post your own topic.

  9. square_eyes
    Posted 2 years ago #

    But then I would be accused of a duplice post? I don't see how posting a new question which directly relates to getting clarification from an answer in this question benefits anyone.

  10. esmi
    Forum Moderator
    Posted 2 years ago #

    Please post your own topic. Your new topic will not be removed as a duplicate as I am now closing this topic.

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.