Way to style a variable

[Ben Spiral]

I might be in a muddle about this. Here is the question:

For one of the sections on a computer website I would like to define four variables for each product: Processor, Memory, Hard Drive and Operating System.

If the client enters information in these boxes within actinic (I would put the variable in the General section of the product) I would want it to appear on the page. If they didn't - it should not display.

Styling the variable.
Further more, I would like to style this variable with a background image using CSS. Is this even possible? For example, if I created a variable called 'Processor' would it be possible to add a CSS syle for 'Processor' in the actinic.css and have a background image associated with it?

The aim would be to get the products to display like this composite - I have highlighted the section I am trying to create by the rounded red rectangle, the rest is the product as it currently displays:



Anyone know if this can be done?

[TraceyHand]

I might be in a muddle about this. Here is the question:

For one of the sections on a computer website I would like to define four variables for each product: Processor, Memory, Hard Drive and Operating System.

If the client enters information in these boxes within actinic (I would put the variable in the General section of the product) I would want it to appear on the page. If they didn't - it should not display.

Easily achieved using a BlockIf to test if the variables are empty or not.

Styling the variable.
Further more, I would like to style this variable with a background image using CSS. Is this even possible? For example, if I created a variable called 'Processor' would it be possible to add a CSS syle for 'Processor' in the actinic.css and have a background image associated with it?

The aim would be to get the products to display like this composite - I have highlighted the section I am trying to create by the rounded red rectangle, the rest is the product as it currently displays:



Anyone know if this can be done?

I don't see why not.
Set up your classes, with background images (presumably these are the images shown in the SS?) and other requirements in the CSS and apply the classes to the variable in the layout.

Have you tried it? I don't see why you shouldn't be able to do it.

[jont]

Yes - very possible and very easy.

First you need a basic block if to see if the variable is not empty ... therefore display the block of HTML ... the background image is simply inserted using background-image in the CSS ... there are are different versions of "processor" you need to pass the value through and you can then concatenate this into your image eg: variablecontent.jpg ... so long as you have all the jpg's designed for each of the options it will insert this accordignly.

Rather than messing with background images in the CSS you can always set the <img src="variable.jpg"> to be used and in your example wrap everything in a <div> with a sliding door effect background to insert the red containing box.

[jont]

I don't see why you shouldn't be able to do it.

Indeed ... although looking complex it is a basic Actinic block if

[TraceyHand]

Indeed ... although looking complex it is a basic Actinic block if

gotta love those lil pretty green things
My layouts are littered with them

[jont]

I wonder if the colour is symbolic and decided upon after months of usability studies? I like to think it represents a set of traffic lights and they allow you to proceed and have fun. Probably not though.

[Ben Spiral]

Thanks both. Will give it a try. Just wanted to check my thinking was theoretically sound before plunging in and tearing my hair out.

The images for each variable (processor, hard drive, etc) will always be the same. The text part is the only thing that will change so I would think background image in CSS will be the way to go.

I'll take a crack at it tomorrow and no doubt post again here when I have confused myself...

[jont]

Yep - set the background image with some left padding and simply insert the content of the variable as text.

[Ben Spiral]

Thanks for that folks, managed to get it working:

Example up and running on this page

[jont]

Ben - may be worth adding in title="" tags to the images so you can let users know what "VHB" stands for.

I would also be inclined to add a link to a legend to not only tell people what the symbols stand for but also what each is suitable for (eg gaming, desktop apps, video editing etc).

Looks well though - quick easy guide to scan down for something specific and for a quick comparison