1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 problem with member card after upgrading

Discussion in 'Styling and Customization Questions' started by aiman.h.kallaf, Jul 30, 2013.

  1. aiman.h.kallaf

    aiman.h.kallaf Active Member

  2. Brogan

    Brogan XenForo Moderator Staff Member

    There is no background image for the member card in 1.2.

    This is to ensure full compatibility with the responsive mode.
     
    aiman.h.kallaf likes this.
  3. aiman.h.kallaf

    aiman.h.kallaf Active Member

  4. Brogan

    Brogan XenForo Moderator Staff Member

    I wouldn't recommend it.
    If you do so, there will be problems at lower browser widths when the content layout changes.
     
    aiman.h.kallaf likes this.
  5. Shelley

    Shelley Well-Known Member

    I don't offer support via PC regarding this @aiman.h.kallaf - I'm not even sure what membercard of mine you used before but I'm sure you'll have to apply a background-image back though I haven't got around to looking how membercards are handled in 1.2 (something I've yet to look into) so my support will be limited until I've looked into it.
     
    aiman.h.kallaf likes this.
  6. aiman.h.kallaf

    aiman.h.kallaf Active Member

    i'm welling to pay for it to get it back the look it used to be without affecting much to the code, hope it can be done using extra.css alone
     

    Attached Files:

  7. Brogan

    Brogan XenForo Moderator Staff Member

    If you do decide to use a background image then you are going to have to cater for this:
    upload_2013-7-30_18-38-0.png

    And this:
    upload_2013-7-30_18-39-47.png

    So you will need multiple images.

    Bear in mind also that not having a background image means there is no problem with add-ons hooking into it and pushing content out of the bottom, as was the case with the fixed size previously.
     
    aiman.h.kallaf likes this.
  8. Shelley

    Shelley Well-Known Member

    I'm assuming non responsive a background image can be used and when it hits responsive we can use media queries to revert the card back to using a background-color so it contracts/expands?TBH Haven't looked into any of the membercard stuff yet in 1.2.
     
    aiman.h.kallaf likes this.
  9. Brogan

    Brogan XenForo Moderator Staff Member

    The responsive flag is set per style but yes, you can use media queries to change the CSS to either apply different images or remove it altogether, based on the browser width.
     
    aiman.h.kallaf and Shelley like this.
  10. Shelley

    Shelley Well-Known Member

    I thought so.

    There's no way I will be updating my membercards to use multiple images (too much work) I'll just have it set to use the background-color on the narrrowwidth. @OP - As soon as I update the membercard (since you pc me saying you were using one of my designs) I'll alert you that they are updated.
     
    aiman.h.kallaf likes this.
  11. aiman.h.kallaf

    aiman.h.kallaf Active Member

    i know it is wrong method but just for now this is what i did and it looks fine i gues
    upload_2013-7-31_8-1-25.png


    upload_2013-7-31_8-1-48.png
     
  12. Shelley

    Shelley Well-Known Member

    Nice one. But as Brogan mentioned, in responsive your going to have trouble with that on the narrow widths. I'm cringing at the potential workload this will entail when I get around to updating those. Hopefully I'm just thinking the worst and it'll be a few lines of code but I suspect it won't be.
     
    aiman.h.kallaf likes this.
  13. Brogan

    Brogan XenForo Moderator Staff Member

    Currently there is no background image by default in 1.2 so in theory it should just be a matter of applying the background image and then when the browser window reduces below a certain width, remove it.

    Code:
    <xen:if is="@enableResponsive">
        @media (max-width:800px) {
            .xenOverlay.memberCard {
            background-image: none !important;
            }
        }
    </xen:if>
     
    aiman.h.kallaf likes this.

Share This Page