{"id":2811,"date":"2011-10-17T13:55:22","date_gmt":"2011-10-17T21:55:22","guid":{"rendered":"https:\/\/graphpaperpress.com\/?post_type=tips&p=2811"},"modified":"2011-10-17T13:55:22","modified_gmt":"2011-10-17T21:55:22","slug":"change-backgrounds-colors-fonts-on-specific-pages","status":"publish","type":"tips","link":"https:\/\/graphpaperpress.com\/tips\/change-backgrounds-colors-fonts-on-specific-pages\/","title":{"rendered":"Change Backgrounds, Colors, Fonts on Specific Pages"},"content":{"rendered":"

Open up any WordPress theme and inside the header.php file you will likely see this:<\/p>\n

<body <?php body_class(); ?>><\/pre>\n
The body_class() function is a neat little function that spits out CSS classes that make it easy to change the background color of your About page, for example. \u00a0It’s easy to find the specific CSS class to target. \u00a0Here is how you do it:<\/p>\n
View the source code of any page and search for the <body> tag. \u00a0On this page, for example, the <body> tag looks like this:<\/p>\n
<body lang=\"en\" class=\"single single-tips postid-2811 single-format-standard logged-in admin-bar browser-chrome\"><\/pre>\n
The class=”” is the part we are mainly interested in for this tip. Each one of those CSS classes (single, single-tips, postid-2811, etc.) provide us with CSS hooks to target in our stylesheet, like this:<\/p>\n
.single { background-color: black }\r\n\r\n.single-tips { background: #ededed url(http:\/\/example.com\/images\/this-is-your-background-image.jpg) repeat top left; }\r\n\r\n.postid-2811 { background-color: #ccc; }<\/pre>\n
As you can see, WordPress allows granular control over the CSS on each and every page. \u00a0Here is the scope of each class above:<\/p>\n
    \n
  • .single – all single posts, applies to all posts<\/li>\n
  • .single-tips – all single tips, applies to all tips<\/li>\n
  • .postid-2811 – only this specific post, doesn’t apply to any others<\/li>\n
  • .single-format-standard – applies to all posts with the “standard” post format selected<\/li>\n
  • .logged-in – only shows for users who are logged in<\/li>\n
  • .admin-bar – only shows if the admin bar is enabled<\/li>\n
  • .browser-chrome – only shows when users are using the Google Chrome browser. \u00a0This classes changes depending on which browser is being used.<\/li>\n<\/ul>\n
    Pretty neat, eh? \u00a0You could even enlarge fonts, modify font colors, or really change about anything by targeting these CSS classes in your stylesheet. \u00a0For example, here is how you could enlarge paragraph fonts on single posts only:<\/p>\n
    .single p { font-size: 1.2em; }<\/pre>\n
    It’s easy to go overboard with this. Please don’t. Design consistency is important in web design. \u00a0That said, the body classes above will allow you do style each and every page or post differently in WordPress with a little bit of CSS.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Open up any WordPress theme and inside the header.php file you will likely see this: <body <?php body_class(); ?>> The body_class() function is a neat little function that spits out CSS classes that make it easy to change the background color of your About page, for example. \u00a0It’s easy to find the specific CSS class […]<\/p>\n","protected":false},"author":4765,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","meta":{"_acf_changed":false},"acf":[],"yoast_head":"\nChange Backgrounds, Colors, Fonts on Specific Pages WordPress Tip | Graph Paper Press<\/title>\n<meta name=\"description\" content=\"Open up any WordPress theme and inside the header.php file you will likely see this: <body <?php body_class(); ?>> The body_class() function\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/graphpaperpress.com\/tips\/change-backgrounds-colors-fonts-on-specific-pages\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Change Backgrounds, Colors, Fonts on Specific Pages\" \/>\n<meta property=\"og:description\" content=\"Open up any WordPress theme and inside the header.php file you will likely see this: <body <?php body_class(); ?>> The body_class() function\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphpaperpress.com\/tips\/change-backgrounds-colors-fonts-on-specific-pages\/\" \/>\n<meta property=\"og:site_name\" content=\"Graph Paper Press\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/gppthemes\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphpaperpress.com\/tips\/change-backgrounds-colors-fonts-on-specific-pages\/\",\"url\":\"https:\/\/graphpaperpress.com\/tips\/change-backgrounds-colors-fonts-on-specific-pages\/\",\"name\":\"Change Backgrounds, Colors, Fonts on Specific Pages WordPress Tip | Graph Paper Press\",\"isPartOf\":{\"@id\":\"https:\/\/graphpaperpress.com\/#website\"},\"datePublished\":\"2011-10-17T21:55:22+00:00\",\"dateModified\":\"2011-10-17T21:55:22+00:00\",\"description\":\"Open up any WordPress theme and inside the header.php file you will likely see this: <body <?php body_class(); ?>> The body_class() function\",\"breadcrumb\":{\"@id\":\"https:\/\/graphpaperpress.com\/tips\/change-backgrounds-colors-fonts-on-specific-pages\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphpaperpress.com\/tips\/change-backgrounds-colors-fonts-on-specific-pages\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphpaperpress.com\/tips\/change-backgrounds-colors-fonts-on-specific-pages\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/graphpaperpress.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tips\",\"item\":\"https:\/\/graphpaperpress.com\/tips\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Change Backgrounds, Colors, Fonts on Specific Pages\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/graphpaperpress.com\/#website\",\"url\":\"https:\/\/graphpaperpress.com\/\",\"name\":\"Graph Paper Press\",\"description\":\"Graph Paper Press specializes in photo, video and multimedia themes for WordPress.\",\"publisher\":{\"@id\":\"https:\/\/graphpaperpress.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/graphpaperpress.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/graphpaperpress.com\/#organization\",\"name\":\"Graph Paper Press\",\"url\":\"https:\/\/graphpaperpress.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/graphpaperpress.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/graphpaperpress.com\/wp-content\/uploads\/2015\/11\/cropped-logo.png\",\"contentUrl\":\"https:\/\/graphpaperpress.com\/wp-content\/uploads\/2015\/11\/cropped-logo.png\",\"width\":512,\"height\":512,\"caption\":\"Graph Paper Press\"},\"image\":{\"@id\":\"https:\/\/graphpaperpress.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/facebook.com\/gppthemes\",\"https:\/\/x.com\/graphpaperpress\",\"https:\/\/www.youtube.com\/channel\/UCUebYoxUAXkPL9mNoNTMQDg\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Change Backgrounds, Colors, Fonts on Specific Pages WordPress Tip | Graph Paper Press","description":"Open up any WordPress theme and inside the header.php file you will likely see this: <body <?php body_class(); ?>> The body_class() function","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/graphpaperpress.com\/tips\/change-backgrounds-colors-fonts-on-specific-pages\/","og_locale":"en_US","og_type":"article","og_title":"Change Backgrounds, Colors, Fonts on Specific Pages","og_description":"Open up any WordPress theme and inside the header.php file you will likely see this: <body <?php body_class(); ?>> The body_class() function","og_url":"https:\/\/graphpaperpress.com\/tips\/change-backgrounds-colors-fonts-on-specific-pages\/","og_site_name":"Graph Paper Press","article_publisher":"https:\/\/facebook.com\/gppthemes","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/graphpaperpress.com\/tips\/change-backgrounds-colors-fonts-on-specific-pages\/","url":"https:\/\/graphpaperpress.com\/tips\/change-backgrounds-colors-fonts-on-specific-pages\/","name":"Change Backgrounds, Colors, Fonts on Specific Pages WordPress Tip | Graph Paper Press","isPartOf":{"@id":"https:\/\/graphpaperpress.com\/#website"},"datePublished":"2011-10-17T21:55:22+00:00","dateModified":"2011-10-17T21:55:22+00:00","description":"Open up any WordPress theme and inside the header.php file you will likely see this: <body <?php body_class(); ?>> The body_class() function","breadcrumb":{"@id":"https:\/\/graphpaperpress.com\/tips\/change-backgrounds-colors-fonts-on-specific-pages\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphpaperpress.com\/tips\/change-backgrounds-colors-fonts-on-specific-pages\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/graphpaperpress.com\/tips\/change-backgrounds-colors-fonts-on-specific-pages\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/graphpaperpress.com\/"},{"@type":"ListItem","position":2,"name":"Tips","item":"https:\/\/graphpaperpress.com\/tips\/"},{"@type":"ListItem","position":3,"name":"Change Backgrounds, Colors, Fonts on Specific Pages"}]},{"@type":"WebSite","@id":"https:\/\/graphpaperpress.com\/#website","url":"https:\/\/graphpaperpress.com\/","name":"Graph Paper Press","description":"Graph Paper Press specializes in photo, video and multimedia themes for WordPress.","publisher":{"@id":"https:\/\/graphpaperpress.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/graphpaperpress.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/graphpaperpress.com\/#organization","name":"Graph Paper Press","url":"https:\/\/graphpaperpress.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/graphpaperpress.com\/#\/schema\/logo\/image\/","url":"https:\/\/graphpaperpress.com\/wp-content\/uploads\/2015\/11\/cropped-logo.png","contentUrl":"https:\/\/graphpaperpress.com\/wp-content\/uploads\/2015\/11\/cropped-logo.png","width":512,"height":512,"caption":"Graph Paper Press"},"image":{"@id":"https:\/\/graphpaperpress.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/gppthemes","https:\/\/x.com\/graphpaperpress","https:\/\/www.youtube.com\/channel\/UCUebYoxUAXkPL9mNoNTMQDg"]}]}},"_links":{"self":[{"href":"https:\/\/graphpaperpress.com\/wp-json\/wp\/v2\/tips\/2811"}],"collection":[{"href":"https:\/\/graphpaperpress.com\/wp-json\/wp\/v2\/tips"}],"about":[{"href":"https:\/\/graphpaperpress.com\/wp-json\/wp\/v2\/types\/tips"}],"author":[{"embeddable":true,"href":"https:\/\/graphpaperpress.com\/wp-json\/wp\/v2\/users\/4765"}],"replies":[{"embeddable":true,"href":"https:\/\/graphpaperpress.com\/wp-json\/wp\/v2\/comments?post=2811"}],"wp:attachment":[{"href":"https:\/\/graphpaperpress.com\/wp-json\/wp\/v2\/media?parent=2811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}