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

Floating an image with the xen:h1 and xen:description tags?

Discussion in 'Styling and Customization Questions' started by Myke623, Feb 16, 2014.

  1. Myke623

    Myke623 Active Member

    How would one go about floating an image left of the <xen:h1> and <xen:description> tag?

    I'm trying to achieve a similar effect seen in the Resource Manager, such as:

  2. Chris D

    Chris D XenForo Developer Staff Member

    Just look at the source and CSS of the resource manager.
  3. Myke623

    Myke623 Active Member

    I don't have the resource manager installed, so I don't have access to its templates.

    Inspecting the source code (on here) only reveals the html structure and css used, which I already have a handle on.
  4. Chris D

    Chris D XenForo Developer Staff Member

    You can't actually do it with xen:h1 and xen:description. The HTML source and CSS is all you need to achieve it. That's how they do it in the RM.

    The xen:h1 tag on that page is basically blank.
    Myke623 likes this.
  5. Myke623

    Myke623 Active Member


    I was hoping(!) there was another tag, or an attribute to xen:h1, that I didn't know about but I guess not. I'll just construct it manually then. Cheers!
  6. Sheldon

    Sheldon Well-Known Member


    .resourceInfo h1:before {
        background: none repeat scroll 0 0 #000000;
        content: "";
        height: 16px;
        padding-left: 16px;
        width: 16px;
    Chris D likes this.
  7. Myke623

    Myke623 Active Member

    @Sheldon, I don't think that works because you're only affecting the h1 element. As you can see, the icon should be floating left of both the h1 and the description.

    @Chris Deeming, using a <h1> tag instead of <xen:h1> doesn't work. If <xen:h1> isn't specified, then the view seems to default to using <xen:title> as a <h1> within the the titleBar div. And if you omit the <xen:title> it uses the site name as the heading.
    Last edited: Feb 16, 2014
  8. Chris D

    Chris D XenForo Developer Staff Member

    This is how the Resource Manager does it:


    That has the effect whereby the <xen:h1> value is defined so the value doesn't come from <xen:title> but the value is empty so it doesn't render at all.
    Myke623 likes this.
  9. Sheldon

    Sheldon Well-Known Member

    Just takes a bit more CSS, but it's doable.

    Chris D likes this.
  10. Myke623

    Myke623 Active Member

  11. Chris D

    Chris D XenForo Developer Staff Member

    Just my opinion: That might look better without the sectionMain class around the tabs etc.

    Looks good though!
    Myke623 likes this.

Share This Page