Custom Background For members

[IFeelYourPain13]

Demo (Username: Test - Password: test123

Allow yours members to customize the background of your website.

How would you like to turn this:

Into this:

Just by allow your members to edit their preferences:

Installation
Create a custom field
Field ID: background
Title: Background
Description: Choose the background of the website.
Display Location: Preferences
Field Type: Single-line text box
Value Match Requirements: URL
User Editable

In PAGE_CONTAINER find:

<div id="content" class="{$contentTemplate}">

Replace:

<div id="content"<xen:if is="{$visitor.customFields.background}"> style="background-image: url({$visitor.customFields.background});"</xen:if> class="{$contentTemplate}">

 

[DRE]

Sounds cool.

 

[IFeelYourPain13]

How do you make it centered?

<div id="content"<xen:if is="{$visitor.customFields.background}"> style="background-image: url({$visitor.customFields.background});background-position: center;"</xen:if> class="{$contentTemplate}">

 

[DRE]

<div id="content"<xen:if is="{$visitor.customFields.background}"> style="background-image: url({$visitor.customFields.background});background-position: center;"</xen:if> class="{$contentTemplate}">

Wow I thought I deleted my question. Your original post is perfect since it works for repeating backgrounds. I had asked about making it both fixed and centered for members who wanted to add a large wallpaper. Wouldn't that require a separate custom user field so that the original code (for repeating backgrounds) is also kept?

 

[ArnyVee]

This is great, although for a family-friendly site, it would be great to set a choice of 5 or 10 different backgrounds that we can set and have folks to choose from. Any thoughts on how to do this?

 

[DRE]

This is great, although for a family-friendly site, it would be great to set a choice of 5 or 10 different backgrounds that we can set and have folks to choose from. Any thoughts on how to do this?

Create an extra page with a screenshots and sample backgrounds to choose from. Link that page inside the custom field extension. The custom field could be the filename or number chosen from a selected checkbox. The page container template edit would include part of the full url of the background url (file name and extension selected checkbox for the one you want).

 

[Rho Delta]

Very cool template edit.

 

[IFeelYourPain13]

Wow I thought I deleted my question. Your original post is perfect since it works for repeating backgrounds. I had asked about making it both fixed and centered for members who wanted to add a large wallpaper. Wouldn't that require a separate custom user field so that the original code (for repeating backgrounds) is also kept?

<div id="content"<xen:if is="{$visitor.customFields.background}"> style="background-image: url({$visitor.customFields.background});background-position: center;background-attachment:fixed;"</xen:if> class="{$contentTemplate}">

If you wanted them to be able to select large or small backgrounds. Just create a yes no field and ask them if they are going to use a large background and set a conditional.

<div id="content"<xen:if is="{$visitor.customFields.largebackground}" == 'yes'"><xen:if is="{$visitor.customFields.background}"> style="background-image: url({$visitor.customFields.background});background-position: center;background-attachment:fixed;"</xen:if><xen:else /><xen:if is="{$visitor.customFields.background}"> style="background-image: url({$visitor.customFields.background});"</xen:if></xen:if> class="{$contentTemplate}">

 

[DRE]

<div id="content"<xen:if is="{$visitor.customFields.background}"> style="background-image: url({$visitor.customFields.background});background-position: center;background-attachment:fixed;"</xen:if> class="{$contentTemplate}">

If you wanted them to be able to select large or small backgrounds. Just create a yes no field and ask them if they are going to use a large background and set a conditional.

<div id="content"<xen:if is="{$visitor.customFields.largebackground}" == 'yes'"><xen:if is="{$visitor.customFields.background}"> style="background-image: url({$visitor.customFields.background});background-position: center;background-attachment:fixed;"</xen:if><xen:else /><xen:if is="{$visitor.customFields.background}"> style="background-image: url({$visitor.customFields.background});"</xen:if></xen:if> class="{$contentTemplate}">

The following error occurred:

The following templates contained errors and were not saved: PAGE_CONTAINER: 1) Line 70: Template syntax error.

 

[IFeelYourPain13]

did you create profile field?

 

[DRE]

did you create profile field?

Yes sir!

 

[IFeelYourPain13]

hehe. Had an extra " in there. Here you go:

<div id="content"<xen:if is="{$visitor.customFields.largebackground} == 'yes'"><xen:if is="{$visitor.customFields.background}"> style="background-image: url({$visitor.customFields.background});background-position: center;background-attachment:fixed;"</xen:if><xen:else /><xen:if is="{$visitor.customFields.background}"> style="background-image: url({$visitor.customFields.background});"</xen:if></xen:if> class="{$contentTemplate}">

 

[DRE]

hehe. Had an extra " in there. Here you go:

<div id="content"<xen:if is="{$visitor.customFields.largebackground} == 'yes'"><xen:if is="{$visitor.customFields.background}"> style="background-image: url({$visitor.customFields.background});background-position: center;background-attachment:fixed;"</xen:if><xen:else /><xen:if is="{$visitor.customFields.background}"> style="background-image: url({$visitor.customFields.background});"</xen:if></xen:if> class="{$contentTemplate}">

Works perfect! Thank you so much!

 

[IFeelYourPain13]

No problems. I guess as XF develops I will try to remove template edits and profile fields, but so far auto template, and auto profile field creation... It's too server intense. My load jumps too high when using auto template.

 

[DRE]

I know how to create a customer user field but how do I add html color code b60000 one time only to the following 3 sections?

Style Properties/Building Blocks/Subheading/Background
Style Properties/Header and Navigation/Selected Tab/Background
Style Properties/Selected Tab Link/Hover State/Background

Selected Tab Background can be found in navigation.css

but I can't find the other two.

I know how to put them in an if condition but I don't know how to wrap them so that they show in the 3 areas above.

<xen:if is="{$visitor.customFields.background3}"> style="background: #{$visitor.customFields.background3};"</xen:if>

 

[IFeelYourPain13]

Did you try doing a search in your templates for the same result previously found?

 

[DRE]

Did you try doing a search in your templates for the same result previously found?

Man I spent almost 8 hours straight, lost sleep trying to figure this all out. I used the code in navigation template to replace tabLinks right (but with the < else > code in case it's not being replaced) and I thought it was working then it wouldnt change. It's weird. I gave up for now.