Change background image for indivdual page

[mtgame21]

If possible, how can I change background image for individual pages? I have a site wide background image set on the Theme Options -> Style Options -> Main.

For certain pages, how could I override that background with a different image? I have tried to set custom CSS for the page but no luck so far.

[Radu]

This reply has been set as private.

[mtgame21]

This reply has been set as private.

[Radu]

This reply has been set as private.

[mtgame21]

ok that explains why that plugin didn’t work.

In the attached pic, where you can add CSS on an edit page screen, does the CSS I put in there only apply to that page?
If so, in theory, could I change the background for sidebars and it only apply to that individual page?

Attachments:

You must be logged in to view attached files.

[Radu]

The css should be added in wp-admin -> theme options -> general settings -> quick css
By this selector body.archive.post-type-archive.post-type-archive-product.woocommerce.woocommerce-page #main section.container-wrap.main-color the css should apply only to the shop page, but also you can add the css here : https://cdn.seventhqueen.com/sq-support/wp-content/uploads/2016/04/VC_custom-CSS.png and it will applies only to that page.

The sidebar bg can be changed like this if you will paste this in quick css it will apply site-wide

COPY CODE

.sidebar.sidebar-main {
    background: red !important;
}

Instead red you can add color code or another name of color.

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mtgame21]

Radu,

I have still been experimenting with that “fully bg manager ” plugin, and I discovered that when in the KLEO,Theme Options, Styling Main, if I set the background color to “Transparent” and background image to blank (no image selected), then the plug in seems to work, which makes it easy to change backgrounds on individual pages.

Im still trying to figure out how to modify the buddypress “profile” page. I thought that if I set the background for the “members” page (http://mysite/members), it would pass the traits down to member profile page background(http://mysite/members/username1) but no luck. I don’t know if there is a page to modify for that, or if its related to a buddypress profile template. Any ideas on that?

I had the same issues when I tried for the buddypress “group” pages as well. I could set the background for (http://mysite/groups), but (http://mysite/groups/groupname) background stayed white. Its probably the same fix for both profile and the group pages.

[mtgame21]

This reply has been set as private.

[Radu]

Hi,

Integration with between that plugin and the theme it will require dedicated time for that and there is no quick fix for that. You can use this method

body.page-id-9743 .main-color {
background-image: url(http://imgsv.nikon-image.com/products/lens/nikkor/af-s_nikkor_200-500mm_f56e_ed_vr/img/sample/pic_03_l.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}

page-id-9743 represents the id of the blog page and in this way i’ve matched the styles to apply
only to that page, in case you need to add bg to groups page use this selector

COPY CODE

.directory.members .main-color {
    background-image: url(http://imgsv.nikon-image.com/products/lens/nikkor/af-s_nikkor_200-500mm_f56e_ed_vr/img/sample/pic_03_l.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
}

or member page

COPY CODE

.bbp-user-page .main-color {
    background-image: url(http://imgsv.nikon-image.com/products/lens/nikkor/af-s_nikkor_200-500mm_f56e_ed_vr/img/sample/pic_03_l.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
 } 

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mtgame21]

I added those to my styles file and changed the background-image: url to point to one my pics in my media library, but I didn’t see any change to the buddypress’s profile page or on the buddypress’s group pages.

[mtgame21]

Hold on, let try again, may be a caching problem…..Also, how do I modify the buddypress “profile” page?

It this one supposed to address that?

body.page-id-9743 .main-color {
background-image: url(http://imgsv.nikon-image.com/products/lens/nikkor/af-s_nikkor_200-500mm_f56e_ed_vr/img/sample/pic_03_l.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}

[mtgame21]

This reply has been set as private.

[Radu]

Hi,

For the third use this instead

COPY CODE

.bbp-user-page .main-color {
background-image: url(http://mercquest.com/wp-content/uploads/2016/03/metal003.gif) !important;
background-repeat:repeat;
background-attachment:fixed;
background-color:transparent !important;
}

Also i’ve added in improvement list this functionality to have custom background for page and posts, most probably in future this will be implemented in theme.

Cheers

R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mtgame21]

Hi,

I added the new code you just suggested but I’m not sure what page it is supposed to affect. I didn’t see any difference.

Also, per your direction, I dropped that background plugin. Then I set my Theme Options background to the background I want my buddypress “profile” page to be, since I cant deviated from the background set in Theme Options for Profile page.

I was able to modify all pages (except one, see below) using your code here and just modify the page ID accordingly
body.page-id-9743 .main-color {
background-image: url(http://imgsv.nikon-image.com/products/lens/nikkor/af-s_nikkor_200-500mm_f56e_ed_vr/img/sample/pic_03_l.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}

I tried to modify the WooCommerce “Shop” page using the same way above, with the correct Page ID, but didn’t work. Fortunately, your other code below did work for this “Shop” page.
body.archive.post-type-archive.post-type-archive-product.woocommerce.woocommerce-page #main section.container-wrap.main-color {
background-image: url(http://imgsv.nikon-image.com/products/lens/nikkor/af-s_nikkor_200-500mm_f56e_ed_vr/img/sample/pic_03_l.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}

Lastly, the only page left that I cant modify is the WooCommerce “Single Product Page”. I don’t have a page ID for this one. Im assuming it is dynamically created. It just defaults to the background specified in the Theme Options and not whats specified for the default “Shop” page we took care of above. Can you point me to the special CSS for this page like you did for the “Shop” page?

*********************************************
In addition, I found two useful buddypress plugins that you might like. They will allow your members to pick their own buddypress “profile” page background and admins can set a different background for individual buddypress Group “home” pages. They are http://buddydev.com/buddypress/allow-your-users-to-change-their-profile-page-background-using-bp-custom-background-for-user-profile-plugin/ and http://buddydev.com/buddypress/introducing-buddypress-group-customizer-lite-allow-group-admins-to-change-buddypress-group-background/

[Radu]

Hi,

For the single product page use this css

COPY CODE

body.postid-4948 .main-color {
background-image: url(http://imgsv.nikon-image.com/products/lens/nikkor/af-s_nikkor_200-500mm_f56e_ed_vr/img/sample/pic_03_l.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}

4948 is the product id

For the shop page you can use also this

COPY CODE

body.woocommerce-page #main section.container-wrap.main-color {
background-image: url(http://imgsv.nikon-image.com/products/lens/nikkor/af-s_nikkor_200-500mm_f56e_ed_vr/img/sample/pic_03_l.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mtgame21]

Radu,
This worked great, the second one above set the default background for the shop page and all of the single product pages at once. Ant then the top one allows me to set an individual product page, if desired. Thanks.

******************************
On another topic, for some reason, I don’t see the form to post new questions (ie..start a new thread) anymore under “General Questions” . I can only see the “Reply to” form, to respond to existing threads. Been like this for a week. I tried logging back in, different browsers but no luck. Has something changed with my account?

******************************
New question
On my buddypress groups directory page, it list three groups per row. How can I make the directory just list one group per row?

I tried to make the box (for each group) full width across by trying this change, but didn’t work. Any ideas?
.kleo-masonry-item, .kleo-isotope > li {
width: 33.3%;
}
to
.kleo-masonry-item, .kleo-isotope > li {
width: 100%;
}

[Radu]

Hi,

Regarding the forums, they are private and only users who open the ticket can read it.

Use this css if you need one item per row

COPY CODE

@media (max-width: 1439px) and (min-width: 1200px) {
.template-page.col-sm-12 .kleo-isotope>.kleo-masonry-item, .template-page.col-sm-12 .kleo-isotope>li, .template-page.col-sm-12 .section-container.container-full .kleo-isotope>.kleo-masonry-item, .template-page.col-sm-12 .section-container.container-full .kleo-isotope>li { 

width:100%;

}
}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mtgame21]

This reply has been set as private.

[mtgame21]

This reply has been set as private.

[Radu]

Hi,

Link to the support for kleo and scroll down https://archived.seventhqueen.com/kleo/

The css that i have provided to you it applies only between these resolutions 1439px – 1200px

COPY CODE

@media (max-width: 1439px) and (min-width: 1200px) {
.template-page.col-sm-12 .kleo-isotope>.kleo-masonry-item, .template-page.col-sm-12 .kleo-isotope>li, .template-page.col-sm-12 .section-container.container-full .kleo-isotope>.kleo-masonry-item, .template-page.col-sm-12 .section-container.container-full .kleo-isotope>li { 

width:100%;

}
}

If you need toat for all resolutions use this

COPY CODE

.template-page.col-sm-12 .kleo-isotope>.kleo-masonry-item, .template-page.col-sm-12 .kleo-isotope>li, .template-page.col-sm-12 .section-container.container-full .kleo-isotope>.kleo-masonry-item, .template-page.col-sm-12 .section-container.container-full .kleo-isotope>li { 

width:100%;

}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mtgame21]

Followed your link and was able to see a form to start a new ticket. I had never been on that page before, so that problem is solved.

I’ll experiment with the new CSS and let you know.. Have a great day!

[Radu]

Have a good day to

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mtgame21]

I have add the CSS (for all resolutions) to my styles file, but it didn’t change. We still have 3 groups per row.

fyi, Maybe this will help us figure it out……
We were able to adjust the buddypress “Following and Follower” tabs to display 2 members per row with this CSS:

.following #buddypress .kleo-isotope>.kleo-masonry-item, .following #buddypress .kleo-isotope>li {
width: 50% !important;
}

.followers #buddypress .kleo-isotope>.kleo-masonry-item, .followers #buddypress .kleo-isotope>li {
width: 50% !important;
}

[Radu]

Hi,

Try to add that css into wp-admin -> theme options -> quick css

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mtgame21]

Ok I did some more testing and learned a few things.

I added the “for all resolutions” css that you provided above to the quick CSS but no change. Still 3 rows across. So I removed it from the quick CSS but left it in my Styles file.

Then I went to Theme Options -> buddypress and changed the default template for group page to full width. When I do this, then we get 1 group per row on the Group page. If I change the default template to have at least one or two sidebars on the page, it then goes back to 3 groups per row.

Note my buddypress profile page has two sidebars. If I leave the Group page template as full width template. The buddypress profile page, Group tab (where it shows the groups that member has joined), it shows here 3 groups per row.

So basically, if you are on any page that is displaying a list of groups, if there is a sidebar on the page, then it will show 3 groups per row.

If you have another idea, I will try it. If not, then I will make my Group page with no sidebars, and just accept 3 per row on the Buddypress Profile -> Group tab page.

[Radu]

IF you are using two sidebars this will be the css

COPY CODE

.kleo-isotope>.kleo-masonry-item, .kleo-isotope>li {
    width: 100%;
}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mtgame21]

Hi Radu,

That fixed and made it 1 group per row even when you use sidebars.

For anyone else that was following this thread. When add this
.kleo-isotope>.kleo-masonry-item, .kleo-isotope>li {
width: 100%;
}

It may also affect you Member directory page and make it 1 per row. If you want it to be 2 members per row, then add
.kleo-isotope>.kleo-masonry-item, .kleo-isotope>li {
width: 50%;
}
to the quick CSS of the individual member directory page.

Thanks Radu

[Radu]

You’re welcome

Have a nice week

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[touren]

hi there,

i also have a question relating background image.

is it possible to add a background image (with visual composer) that then has an external link to a defined website?

How can this be done?

[Radu]

Hi,

No, the VC doesn’t support that by default.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts