"Posts page" custom template and/or CSS

  • maxdlr

    (@maxdlr)


    8 years, 5 months ago

    Hello everyone,

    I’ve been looking everywhere but I can’t seem to find the solution to my problem which, I think, is a really simple one.

    I have a very simple website: http://www.maxdlr.com
    And as you can see, the home page is a static one and I have a “posts page” on a different location: http://www.maxdlr.com/blog (which currently has two test articles)

    I am using the Blankslate theme, so I don’t have much in my php and css files.

    I have a general stye.css file that applies to the entire website, except one or two pages which have their own css, using the “WP Add Custom CSS” plugin.
    I also have a “blank.php” template that applies to all my pages, that takes away the header, footer, titles..etc. Basically everything.

    I’ve created a home.php template that applies to my “Posts Page” (/blog), which also takes away the header, footer and so on.

    Now my problem is that I can’t apply any kind of custom css to that page.
    My plugin doesnt work on the “Posts Page”, and when I try to use any of the “.pageid-###” things, it doesn’t do anything.

    I’d like to do simple things to the Blog/Posts page, like change the background, change the font, the colors, the margins… etc. But I just can’t touch it.

    Here is my style.css: 

    body {
    margin-top: 25px;
    margin-right: 40px;
    margin-bottom: 40px;
    margin-left: 40px;
	color: white;
	font-family: 'Helvetica', sans-serif;
	background-image: url("http://www.maxdlr.com/wp-content/uploads/2015/11/bg-reel.png");
    background-color: #333333;
    background-position: top center;
    background-attachment: fixed;
    }

video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
 	background: url(http://www.maxdlr.com/wp-content/uploads/2015/09/FALLBACK.jpg) no-repeat;
  	background-size: cover;
  	transition: 1s opacity;
	}

    The body () applies to my entire website and the video () is for my landing page video background.

    And here is the blank.php template that applies to the whole website, except the blog page: 

    <?php /* Template Name: Blank */ ?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title(' | ', true, 'right'); ?></title>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php the_post(); ?>
<?php the_content(); ?>
<div class="entry-links"><?php wp_link_pages(); ?></div>
<p class="edit-link"><?php edit_post_link(); ?></p>
<?php wp_footer(); ?>
</body>
</html>

    And here is the home.php template that applies to my blog/posts page: 

    <?php /* Template Name: Blog */ ?>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title(' | ', true, 'right'); ?></title>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
<?php wp_head(); ?>
</head>
<section id="content" role="main">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'entry' ); ?>
<?php comments_template(); ?>
<?php endwhile; endif; ?>
<?php get_template_part( 'nav', 'below' ); ?>
</section>

    I hope you guys can help.
    Thanks

  • The topic ‘"Posts page" custom template and/or CSS’ is closed to new replies.