Customizr theme Front page background change

  • Resolved canvasink

    (@canvasink)


    12 years, 4 months ago

    My website ccmforever.com. I am using the Customizr theme. I cannot find out how to change only the frontage background. i have the option in “Customize It” selected “Dont Show any Posts or page” – I used the is code :
    body {
    background: url(“http://christianartistsgroup.com/wp-content/uploads/2013/12/rededication-background-1920×1400.jpg”) repeat fixed 0 0 #FAFAFA !important ;
    color: #5A5A5A;
    padding-bottom: 0;
    }

    But it changes the background for every page. I know how to set different backgrounds for different pace ID’s, but when i do the above code it overwrites all of those. I need to be able to change the home page background as an individual. Please help.

Viewing 15 replies - 1 through 15 (of 17 total)
1 2
  • rdellconsulting

    (@rdellconsulting)

    12 years, 4 months ago

    Try body.home {background-color:red;} and then change to your code

    Thread Starter canvasink

    (@canvasink)

    12 years, 4 months ago

    I tried this in the custom css section and it just changes the front page background back to its default white, and allows my other custom page backgrounds to show. but i can’t change the color of the front page.

    rdellconsulting

    (@rdellconsulting)

    12 years, 4 months ago

    The default White is actually #FAFAFA which is the fallback if it can’t find the image. But I checked and could access the image.

    Code being used is line 576 in your CSS:

    body {
  background: url("http://christianartistsgroup.com/wp-content/uploads/2013/12/rededication-background-1920x1400.jpg") repeat fixed 0 0 #FAFAFA !important;
  color: #5A5A5A;
  padding-bottom: 0;
}

    Did my code not show as Red background (just to test it was working)?

    body.home without any spaces is also key

    Thread Starter canvasink

    (@canvasink)

    12 years, 4 months ago

    correct the code did not turn the background red. just defaulted to white. this is the code i have in now and its just showing white.

    body.home {
    /* Front Page Background */
    background: url(“http://christianartistsgroup.com/wp-content/uploads/2013/12/rededication-background-1920×1400.jpg”) repeat fixed 0 0;
    padding-bottom: 0;
    }

    if you visit the site you’ll see that the background is white on the front page.

    rdellconsulting

    (@rdellconsulting)

    12 years, 4 months ago

    Again, here’s the CSS in use from blue.css:

    body {
  background: none repeat scroll 0 0 #FAFAFA;
  color: #5A5A5A;
  padding-bottom: 0;
}

    I presume you are clicking on ‘Save & Publish’ after changing CustomCSS code?

    rdellconsulting

    (@rdellconsulting)

    12 years, 4 months ago

    Maybe you need to do the classic ‘Disable All Plugins’ test to see if there’s a conflict somewhere.

    Disable all plugins, test. If it works then add back plugins one-by-one to find the culprit.

    Thread Starter canvasink

    (@canvasink)

    12 years, 4 months ago

    yes i am. Ive disabled all plugins and it is still white

    Thread Starter canvasink

    (@canvasink)

    12 years, 4 months ago

    Here is my full coding in the custom css i think its a problem with where the code is located maybe?

    .format-icon:before {
	speak: none;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  padding-right: 10px;
  opacity: 0.2;
  position: relative;
  top: 8px;
  display: none;
  font: normal normal 1.2em/1 'entypo';
}

body.page-id-1801 {
/* CS LEWIS PAGE     */
background: url("http://christianartistsgroup.com/wp-content/uploads/2013/12/cs-lewis-page-background-2560x1400.jpg");background-repeat: y;
background-attachment:fixed;
width: auto;
height: auto;
margin: 0;
padding: 0;
}
body.page-id-1902{
/* Hymns Tour Page     */
background-color:#e1e4c4;
background-repeat: no-repeat;
background-attachment:fixed;
background-position:center top;
width: auto;
height: auto;
margin: 0;
padding: 0;
}
body.page-id-13 {
/* Artist Page     */
background: url("http://christianartistsgroup.com/wp-content/uploads/2013/12/Artist-page-background-2.jpg");
background-repeat: no-repeat;
background-attachment:fixed;
background-position:center top;
width: auto;
height: auto;
margin: 0;
padding: 0;
}
body.page-id-450 {
/* ABOUT US Page     */
background: url("http://christianartistsgroup.com/wp-content/uploads/2013/12/rededication-background-1920x1400.jpg");
background-repeat: y;
background-attachment:fixed;
background-position:center top;
width: auto;
height: auto;
margin: 0;
padding: 0;
}
body.page-id-28 {
/* Contact us page     */
background: url("http://christianartistsgroup.com/wp-content/uploads/2013/12/rededication-background-1920x1400.jpg");
background-repeat: y ;
background-attachment: fixed;
background-position:center top;
width: auto;
height: auto;
margin: 0;
padding: 0;
}
body.page-id-1837 {
/* reDedication Page     */
background: url("http://christianartistsgroup.com/wp-content/uploads/2013/12/rededication-background-1920x1400.jpg");
background-repeat: y ;
background-attachment: fixed;
background-position:center top;
width: auto;
height: auto;
margin: 0;
padding: 0;
}
body.page-id-223 {
/* Promoter Page     */
background: url("http://christianartistsgroup.com/wp-content/uploads/2013/12/promoter-page-background-1920x1400-1024x746.jpg");
background-repeat: y ;
background-attachment: fixed;
background-position:center top;
width: auto;
height: auto;
margin: 0;
padding: 0;
}
body.page-id-53 {
/* SUBMIT OFFER Page     */
background: url("http://christianartistsgroup.com/wp-content/uploads/2013/12/cs-lewis-page-background-2560x1400.jpg");
background-repeat: y;
background-attachment:fixed;
background-position:center top;
width: auto;
height: auto;
margin: 0;
padding: 0;
}
body.page-id-1161 {
/* MAGAZINE PAGE     */
background: url("http://christianartistsgroup.com/wp-content/uploads/2013/12/background-e1386270813561.jpg");
background-repeat: y;
background-attachment:fixed;
background-position:center top;
width: auto;
height: auto;
margin: 0;
padding: 0;
}
body.page-id-1902 {
/* hymns tour page    */
{background-color:E1E3B7;
background-repeat: y;
background-attachment:fixed;
background-position:center top;
width: auto;
height: auto;
margin: 0;
padding: 0;
}
#wrapper {
/* FOOTER EDITS     */
	min-height:100%;
	position:relative;
}
#header {
	padding:10px;
	background:#5ee;
}
#content {
	padding:10px;
	padding-bottom:120px;   /* Height of the footer element */
}
h1, h2, h3, h4, h5, h6 {
    text-shadow: 0 0px 0 transparent;
}

footer#footer {
color: white !important;
background: black;
opacity: .8;
}

footer#footer a {
color: darkgoldenrod;
}

footer#footer h3, footer#footer h4, footer#footer h5, footer#footer h6 {
color: grey;
}
.navbar-wrapper .navbar h2 {
/* TAGLINE    */
/* Change (red) font color      */
color:       red ;
background-image: url("");
background-repeat: no-repeat;
padding-left: -35px;  /* width of the image plus a little extra padding */
display: block;  /* may not need this, but I've found I do */;
/* Change (Garamond) font family */
font-family:    Garamond;
/* Change (20px) font size      */
font-size:      20px;
/* Change (19%) move to left    */
padding-right:  1%;
/* Change (normal) italic-normal-oblique */
font-style:     normal;
opacity:      0.6;
}
.site-description:before {
/* TAGLINE CCMFOREVER IMAGE    */
    content: url("http://christianartistsgroup.com/wp-content/uploads/2013/12/CCMFOREVER-logo-.png");
    display:      block;
    font-size:    0.8em;      /* optional */
    font-weight:  normal;     /* optional */
    opacity:      0.9;        /* optional */
padding-right: 215px;
}
body {
/* Front Page Background    */
  background: url("http://christianartistsgroup.com/wp-content/uploads/2013/12/rededication-background-1920x1400.jpg") repeat fixed 0 0 #FAFAFA !important ;
  color: #5A5A5A;
  padding-bottom: 0;
}
#main-wrapper {
/* Featured Page Background */
  background-color: black ;
  margin-top: 0;
}
.round-div {
/* Featured Page Circle Background   */
border: 104px solid black;
}
    rdellconsulting

    (@rdellconsulting)

    12 years, 4 months ago

    As CSS is resolved in line, the body code at the bottom of this is the last to be used and it will override all the other body code above it.

    That’s the problem! So move everything below the body.page-id-1902 code to the top.

    batharoy

    (@batharoy)

    12 years, 4 months ago

    I know how to set different backgrounds for different pace ID’s

    It seems you have some already.

    body.page-id-1801 {
    /* CS LEWIS PAGE */
    background: url(“http://christianartistsgroup.com/wp-content/uploads/2013/12/cs-lewis-page-background-2560×1400.jpg”);background-repeat: y;
    background-attachment:fixed;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    }

    You need to use the page id in the code.

    body.PAGE ID HERE {
/* HOME PAGE     */
background: url("URL TO IMAGE HERE or LEAVE BLANK BETWEEN QUOTES FOR SOLID COLOR");background-repeat: y;
background-attachment:fixed;
width: auto;
height: auto;
margin: 0;
padding: 0;
}

    Thread Starter canvasink

    (@canvasink)

    12 years, 4 months ago

    There is no page ID for my home page because its not an actual “page” is the default customize theme frontage.

    Thread Starter canvasink

    (@canvasink)

    12 years, 4 months ago

    I redid the code but its still giving me the same issue

    ElectricFeet

    (@electricfeet)

    12 years, 4 months ago

    You still have your body rule coming after the body.page-id-1801 declaration. Both rules fire, so it’s overwriting the background.

    Change your body selector to body.home {...}

    Thread Starter canvasink

    (@canvasink)

    12 years, 4 months ago

    Ok i tried that. Here is my code now. But it has made all the other pages work correctly but the frontage background is the default white, instead of the image I’m trying to use.

    #wrapper {
/* FOOTER EDITS     */
	min-height:100%;
	position:relative;
}
#header {
	padding:10px;
	background:#5ee;
}
#content {
	padding:10px;
	padding-bottom:120px;   /* Height of the footer element */
}
h1, h2, h3, h4, h5, h6 {
    text-shadow: 0 0px 0 transparent;
}

footer#footer {
color: white !important;
background: black;
opacity: .8;
}

footer#footer a {
color: darkgoldenrod;
}

footer#footer h3, footer#footer h4, footer#footer h5, footer#footer h6 {
color: grey;
}
.navbar-wrapper .navbar h2 {
/* TAGLINE    */
/* Change (red) font color      */
color:       red ;
background-image: url("");
background-repeat: no-repeat;
padding-left: -35px;  /* width of the image plus a little extra padding */
display: block;  /* may not need this, but I've found I do */;
/* Change (Garamond) font family */
font-family:    Garamond;
/* Change (20px) font size      */
font-size:      20px;
/* Change (19%) move to left    */
padding-right:  1%;
/* Change (normal) italic-normal-oblique */
font-style:     normal;
opacity:      0.6;
}
.site-description:before {
/* TAGLINE CCMFOREVER IMAGE    */
    content: url("http://christianartistsgroup.com/wp-content/uploads/2013/12/CCMFOREVER-logo-.png");
    display:      block;
    font-size:    0.8em;      /* optional */
    font-weight:  normal;     /* optional */
    opacity:      0.9;        /* optional */
padding-right: 215px;
}
body.home {
/* Front Page Background    */
  background: url("http://christianartistsgroup.com/wp-content/uploads/2013/12/rededication-background-1920x1400.jpg") repeat fixed 0 0 #FAFAFA !important ;
  color: #5A5A5A;
  padding-bottom: 0;
}

#main-wrapper {
/* Featured Page Background */
  background-color: black ;
  margin-top: 0;
}
.round-div {
/* Featured Page Circle Background   */
border: 104px solid black;
}

.format-icon:before {
	speak: none;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  padding-right: 10px;
  opacity: 0.2;
  position: relative;
  top: 8px;
  display: none;
  font: normal normal 1.2em/1 'entypo';
}

body.page-id-1801 {
/* CS LEWIS PAGE     */
background: url("http://christianartistsgroup.com/wp-content/uploads/2013/12/cs-lewis-page-background-2560x1400.jpg");background-repeat: y;
background-attachment:fixed;
width: auto;
height: auto;
margin: 0;
padding: 0;
}
body.page-id-1902{
/* Hymns Tour Page     */
background-color:#e1e4c4;
background-repeat: no-repeat;
background-attachment:fixed;
background-position:center top;
width: auto;
height: auto;
margin: 0;
padding: 0;
}
body.page-id-13 {
/* Artist Page     */
background: url("http://christianartistsgroup.com/wp-content/uploads/2013/12/Artist-page-background-2.jpg");
background-repeat: no-repeat;
background-attachment:fixed;
background-position:center top;
width: auto;
height: auto;
margin: 0;
padding: 0;
}
body.page-id-450 {
/* ABOUT US Page     */
background: url("http://christianartistsgroup.com/wp-content/uploads/2013/12/rededication-background-1920x1400.jpg");
background-repeat: y;
background-attachment:fixed;
background-position:center top;
width: auto;
height: auto;
margin: 0;
padding: 0;
}
body.page-id-28 {
/* Contact us page     */
background: url("http://christianartistsgroup.com/wp-content/uploads/2013/12/rededication-background-1920x1400.jpg");
background-repeat: y ;
background-attachment: fixed;
background-position:center top;
width: auto;
height: auto;
margin: 0;
padding: 0;
}
body.page-id-1837 {
/* reDedication Page     */
background: url("http://christianartistsgroup.com/wp-content/uploads/2013/12/rededication-background-1920x1400.jpg");
background-repeat: y ;
background-attachment: fixed;
background-position:center top;
width: auto;
height: auto;
margin: 0;
padding: 0;
}
body.page-id-223 {
/* Promoter Page     */
background: url("http://christianartistsgroup.com/wp-content/uploads/2013/12/promoter-page-background-1920x1400-1024x746.jpg");
background-repeat: y ;
background-attachment: fixed;
background-position:center top;
width: auto;
height: auto;
margin: 0;
padding: 0;
}
body.page-id-53 {
/* SUBMIT OFFER Page     */
background: url("http://christianartistsgroup.com/wp-content/uploads/2013/12/cs-lewis-page-background-2560x1400.jpg");
background-repeat: y;
background-attachment:fixed;
background-position:center top;
width: auto;
height: auto;
margin: 0;
padding: 0;
}
body.page-id-1161 {
/* MAGAZINE PAGE     */
background: url("http://christianartistsgroup.com/wp-content/uploads/2013/12/background-e1386270813561.jpg");
background-repeat: y;
background-attachment:fixed;
background-position:center top;
width: auto;
height: auto;
margin: 0;
padding: 0;
}

    Thread Starter canvasink

    (@canvasink)

    12 years, 4 months ago

    Thanks guys figured it out.

Viewing 15 replies - 1 through 15 (of 17 total)
1 2

The topic ‘Customizr theme Front page background change’ is closed to new replies.