• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
  • This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Custom Background For members

#1
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:
Code:
<div id="content" class="{$contentTemplate}">
Replace:
Code:
<div id="content"<xen:if is="{$visitor.customFields.background}"> style="background-image: url({$visitor.customFields.background});"</xen:if> class="{$contentTemplate}">
 

DRE

Well-known member
#4
Code:
<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

Well-known member
#5
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

Well-known member
#6
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).
 
#8
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?
Code:
<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.
Code:
<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

Well-known member
#9
Code:
<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.
Code:
<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.
 
#12
hehe. Had an extra " in there. Here you go:
Code:
<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

Well-known member
#13
hehe. Had an extra " in there. Here you go:
Code:
<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!
 
#14
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

Well-known member
#15
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.

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

DRE

Well-known member
#17
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.