1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. 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.
    Dismiss Notice
  3. 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

Discussion in 'Template Modifications [Archive]' started by IFeelYourPain13, Jan 9, 2012.

  1. IFeelYourPain13

    IFeelYourPain13 Active Member

    Demo (Username: Test - Password: test123

    Allow yours members to customize the background of your website.

    How would you like to turn this:
    [​IMG]

    Into this:
    [​IMG]

    Just by allow your members to edit their preferences:
    [​IMG]


    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}">
     
  2. DRE

    DRE Well-Known Member

    Sounds cool.
     
  3. IFeelYourPain13

    IFeelYourPain13 Active Member

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

    DRE Well-Known Member

    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?
     
  5. ArnyVee

    ArnyVee Well-Known Member

    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?
     
  6. DRE

    DRE Well-Known Member

    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).
     
  7. Rho Delta

    Rho Delta Well-Known Member

    Very cool template edit.
     
  8. IFeelYourPain13

    IFeelYourPain13 Active Member

    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}">
     
  9. DRE

    DRE Well-Known Member

    The following error occurred:

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

    IFeelYourPain13 Active Member

    did you create profile field?
     
  11. DRE

    DRE Well-Known Member

    Yes sir!
     

    Attached Files:

    • lbg.jpg
      lbg.jpg
      File size:
      82.6 KB
      Views:
      29
    • lbg2.jpg
      lbg2.jpg
      File size:
      72.2 KB
      Views:
      28
  12. IFeelYourPain13

    IFeelYourPain13 Active Member

    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}">
     
    The8thLegion likes this.
  13. DRE

    DRE Well-Known Member

    Works perfect! Thank you so much!
     
  14. IFeelYourPain13

    IFeelYourPain13 Active Member

    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.
     
  15. DRE

    DRE Well-Known Member

    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>
     
  16. IFeelYourPain13

    IFeelYourPain13 Active Member

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

    DRE Well-Known Member

    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.
     

Share This Page