Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- This is my CSS file. Can anyone tell me how to change it so that every page will have a different background image.
- /*--------------------------------------------------------------
- =Reset default browser CSS.
- The goal of a reset stylesheet is to reduce browser
- inconsistencies in things like default line heights, margins and
- font sizes of headings, and so on.
- --------------------------------------------------------------*/
- html, body, div, span, h1, h2, h3, p, a, i, font, strong, ol, ul, li, form, label, caption {
- border: 0;
- font-family: inherit;
- font-size: 100%;
- font-style: inherit;
- font-weight: inherit;
- margin: 0;
- outline: 0;
- padding: 0;
- vertical-align: baseline;
- }
- /* Remember to define focus styles! */
- :focus {
- outline: 0;
- }
- body {
- background: #fff;
- line-height: 1;
- }
- ol, ul {
- list-style: none;
- }
- caption {
- font-weight: normal;
- text-align: left;
- }
- a img {
- border: 0;
- }
- article, aside, details, figcaption, figure,
- footer, header, hgroup, menu, nav, section {
- display: block;
- }
- /*-----------------------------------------------
- =Structure
- -----------------------------------------------*/
- /* This is for the screen
- The CSS padding properties define the space between the element border and the element content. */
- body {
- padding: 0;
- }
- /* This is for the page on that screen
- The CSS margin properties define the space around elements. */
- #page {
- margin: 1em auto;
- /* This means that the page max-width is 1000 pixels width. */
- max-width: 1000px;
- }
- /* This is for the text in the header */
- #branding hgroup {
- margin: 0;
- padding: 0;
- }
- /* This is for the text in the menu "ribbon". */
- #access div {
- margin: 0;
- padding: 0;
- }
- /* With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.
- This is the content os the left side. */
- #primary {
- float: left;
- /* Old value
- margin: 0 -26.4% 0 0; */
- margin: 0;
- width: 60%;
- padding: 0;
- }
- /* This is for the text in the page (the actual content) on the left side.
- The parameters are linked to #primary. So width is 100% of the #primary width. */
- #content {
- /* Old value
- margin: 0 34% 0 7.6%; */
- margin: 0 0 0 30px;
- padding: 0;
- width: 100%;
- }
- /* This is for the links on the right side */
- #secondary {
- float: right;
- /* Old value
- margin: 0 7.6% 0 0; */
- margin: 0;
- /* Old value
- width: 18.8%; */
- /* 30% of the #page width */
- width: 30%;
- background-color: White;
- }
- /*-----------------------------------------------
- =Global
- -----------------------------------------------*/
- body, input, textarea {
- color: #373737;
- font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-weight: 300;
- line-height: 1.625;
- }
- /* This is for the whole screen */
- body {
- background-color: #e2e2e2;
- /* I set the background image in the designer (Appearance/Background).
- background-image: url(images/Ireland5.jpg);
- background-repeat: repeat;
- background-position: center top; */
- }
- /* This is for the part of the page where the text is */
- #page {
- /*This is the original color
- background: #fff;*/
- background-color: #4169E1;
- background-image: url(images/Lightning8.jpg);
- background-repeat: repeat;
- background-position: center top;
- }
- /* Headings */
- h1,h2,h3 {
- clear: both;
- }
- /* Text elements */
- p {
- margin-bottom: 1.625em;
- }
- ul {
- list-style: circle;
- margin: 0;
- padding: 0;
- }
- ol {
- list-style-type: decimal;
- margin: 0;
- padding: 0;
- }
- li {
- margin: 0;
- padding: 0;
- }
- strong {
- font-weight: bold;
- }
- i {
- font-style: italic;
- }
- /* Links */
- a {
- color: #1982d1;
- text-decoration: none;
- }
- a:focus,
- a:active,
- a:hover {
- text-decoration: underline;
- }
- /*-----------------------------------------------
- =Header
- -----------------------------------------------*/
- #branding {
- /* This is original definition. It is for the header border.
- border-top: 2px solid #bbb; */
- padding-bottom: 10px;
- position: relative;
- z-index: 9999;
- }
- #branding img {
- height: auto;
- margin: -50px 0 -7px 0;
- padding: 0;
- width: 100%;
- }
- /* This is for the title */
- #site-title {
- margin: 0 0 0 20px;
- padding: 10px;
- }
- #site-title a {
- color: #111;
- font-size: 30px;
- font-weight: bold;
- line-height: 36px;
- text-decoration: none;
- }
- #site-title a:hover,
- #site-title a:focus,
- #site-title a:active {
- color: #1982d1;
- text-decoration: underline;
- }
- #site-description {
- color: #7a7a7a;
- font-size: 14px;
- margin: 0 270px 3.65625em 0;
- }
- /*-----------------------------------------------
- =Menu
- -----------------------------------------------*/
- /* This is for the menu "ribbon". */
- #access {
- background: #222; /* Show a solid color for older browsers */
- clear: both;
- display: block;
- float: left;
- margin: 0;
- padding: 0;
- width: 100%;
- }
- /* For the actual menu items. */
- #access ul {
- font-size: 13px;
- list-style: none;
- margin: 0 0 0 20px;
- padding: 0;
- }
- /*This is how the text in the menu is positioned. */
- #access li {
- float: left;
- position: relative;
- }
- /* This is for the actual menu item. */
- #access a {
- /* Display color of the menu item. */
- color: #FF0000;
- /* How the menu item is displayed when you go over it. */
- display: block;
- /* This is the height of the black "ribbon" of the menu items. */
- line-height: 3em;
- padding: 0 1em;
- text-decoration: none;
- }
- #access li:hover > a {
- /* This is the color of the menu item when you go over it. */
- color: #373737;
- /* This is the background color of the menu item when you go over it. */
- background-color: Lime;
- }
- /* When you click on the menu item it goes to that page and menu item is bold, so that you know what is selected. */
- #access .current-menu-item > a {
- font-weight: bold;
- }
- /*-----------------------------------------------
- =Content
- -----------------------------------------------*/
- /* This is for the content in the page */
- #main {
- clear: both;
- padding: 1em 0 0 0;
- margin: 0;
- }
- /* This is for the bottom of the page. */
- .hentry {
- border-bottom: none;
- margin: 0 0 1em 0;
- padding: 0 0 1em 0;
- position: relative;
- }
- /* It displays a border line in the bottom of the page. */
- .hentry:last-child {
- border-bottom: none;
- }
- /* Edit button. */
- .entry-meta .edit-link a {
- background: #eee;
- -moz-border-radius: 3px;
- color: #666;
- float: right;
- font-size: 12px;
- line-height: 1.5em;
- padding: 0 8px;
- }
- /* Color of the text and background when you go over it by mouse. */
- .entry-meta .edit-link a:hover {
- background: #888;
- color: #FFFF00;
- }
- /*-----------------------------------------------
- Images
- -----------------------------------------------*/
- /* Fluid images for posts, comments, and widgets */
- .entry-content img,
- .widget img {
- max-width: 90%;
- }
- /* Make sure images with WordPress-added height and width attributes are scaled correctly */
- img[class*="align"],
- img[class*="wp-image-"],
- img[class*="attachment-"] {
- height: auto;
- }
- img.size-full,
- img.size-large {
- max-width: 90%;
- width: auto; /* Prevent stretching of full-size and large-size images with height and width attributes in IE8 */
- height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
- }
- /* Properties of the gallerey. */
- .gallery-caption {
- color: #FFFF00;
- font-family: Georgia, serif;
- font-size: 12px;
- }
- /* Image borders */
- img[class*="align"],
- img[class*="wp-image-"],
- #content .gallery .gallery-icon img {
- border: 1px solid #C71585;
- /* It means that there is no border around the images.
- border: none; */
- padding: 0;
- margin: 0;
- }
- /* Add some useful style to those fancy borders for linked images ...
- It is seen when you go over with a mouse. */
- a:focus img[class*="align"],
- a:hover img[class*="align"],
- a:active img[class*="align"],
- a:focus img[class*="wp-image-"],
- a:hover img[class*="wp-image-"],
- a:active img[class*="wp-image-"],
- #content .gallery .gallery-icon a:focus img,
- #content .gallery .gallery-icon a:hover img,
- #content .gallery .gallery-icon a:active img {
- background: #BDB76B;
- border-color: #BDB76B;
- }
- /*-----------------------------------------------
- =Widgets
- -----------------------------------------------*/
- /* This is on the right side of the page */
- .widget-area {
- font-size: 12px;
- width: auto;
- }
- .widget {
- clear: both;
- margin: 0 0 0 0;
- }
- .widget-title {
- color: #666;
- font-size: 12px;
- font-weight: 500;
- letter-spacing: 0.1em;
- margin: 0;
- }
- /* Where the link starts and how big the font is */
- .widget ul {
- font-size: 12px;
- margin: 0 0 0 1.2em;
- }
- /* This is for the description of the link */
- .widget ul li {
- color: #777;
- font-size: 12px;
- }
- /* This is for the actual link */
- .widget a {
- font-weight: bold;
- text-decoration: none;
- }
- .widget a:hover,
- .widget a:focus,
- .widget a:active {
- text-decoration: underline;
- }
- /*-----------------------------------------------
- =Footer
- -----------------------------------------------*/
- #colophon {
- clear: both;
- }
- /*-----------------------------------------------
- =Responsive Structure
- -----------------------------------------------*/
- @media (max-width: 650px) {
- /* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */
- body, input, textarea {
- font-size: 10px;
- }
- #site-title a {
- font-size: 24px;
- }
- #site-description {
- font-size: 10px;
- }
- #access ul {
- font-size: 10px;
- }
- .entry-title {
- font-size: 20px;
- }
- /* Reposition the site title and description slightly */
- #site-title {
- padding: 5.30625em 0 0;
- }
- #site-title,
- #site-description {
- margin-right: 0;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement