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

[Myke623]

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:

 

[Chris D]

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

 

[Myke623]

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.

 

[Chris D]

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]

Interesting!

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!

 

[Sheldon]

.resourceInfo h1:before {
    background: none repeat scroll 0 0 #000000;
    content: "";
    height: 16px;
    padding-left: 16px;
    width: 16px;
}

 

[Myke623]

@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.

 

[Chris D]

This is how the Resource Manager does it:

<xen:h1><xen:comment>(empty)</xen:comment></xen:h1>

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.

 

[Sheldon]

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

 

[Myke623]

@Chris Deeming, bingo! It's ugly template code but it works!

 

[Chris D]

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

Looks good though!