How to seprate data generated by view output and display in specific format ?

Events happening in the community are now at Drupal community events on www.drupal.org.
Posted by tejaspmehta on September 17, 2010 at 9:14am

Hello,

I am not totally newbie but beginner to views. Now i have one content type say contact details. It has First Name, Last Name, Address, Phone, Mobile field generated with CCK.

I started to build view and after some Relation and Arguments i have created view successfully in table format (Style of display).

It gives me output like following

First Name | Last Name | Address | Phone | Mobile
fdata1 | Ldata1 | Add1 | Ph1 | Mob1
fdata2 | Ldata2 | Add2 | Ph2 | Mob2
fdata3 | Ldata3 | Add3 | Ph3 | Mob3

Now i wants to display data like following

fdata1 Ldata1
Add1
(phone image) Ph1
(mobile image) Mob1

I had tried few options of grid / Unformatted but they do not have options like table for styling.

So is it possible to create such a view output ? If yes how ? If no what will be solution for such type of situation ?

Thank you
Tejas Mehta

Comments

can anyone help me on this

Posted by tejaspmehta on September 24, 2010 at 7:20am

can anyone help me on this topic ? If my question is not clear then i can repeat it once again.

use css

Posted by freeform.steph on September 24, 2010 at 3:27pm

Regardless of the layout option you choose, the personalized customizing is going to come from the css styles you add in your theme's stylesheet. I suggest using firebug with firefox, it will show you all the class names that are generated for each of your fields. For your phone images, add a background image and left padding to the field.

With the unformatted style,

Posted by merlinofchaos on September 24, 2010 at 5:49pm

With the unformatted style, it looks like you can do some of what you want with the 'inline' setting, but for the most part, this is the territory of needing to do this with CSS.

With the -dev version of Panels and CTools, there is a new Panels style that can be more arbitrary. See http://www.angrydonuts.com/just-checked-a-new-feature-into-panels-3-dev for a couple screenshots of what I'm referring to. That may or may not be what you want. (Note also that this is only available in the -dev release; I have not yet actually made a new official release including this feature. I hope to soonish)

Hello dragonflyway and

Posted by tejaspmehta on September 30, 2010 at 11:42am

Hello dragonflyway and merlinofchaos,

I will try both way. Basically i have already attached particular view with help of view attached so first i will check panels based option and if not work then i have to go with CSS option.

Thank you
Tejas Mehta

Seconded

Posted by scottprive on September 30, 2010 at 12:33pm

I've solved this problem several times.

As noted for FireFox, be sure your install has the "Web Developer" extension. Then use "Inspect Element". You can also type and edit "live" CSS "in the browser" using WD. When something works or does not work, you can inspect the element and view both the inherited styles/cascade, and you can use it to dissect "working examples" you find on the 'net.
Once you know what works, you can put those styles in your CSS file. (Edit: Google Chrome and Opera also have their own set of CSS/markup debug tools - those are worth looking at also.)

Also, yes this is a very generic CSS issue. You want to search a few tutorials on "CSS floats and clear". This is a common CSS issue and any one of those good tutorials will help you out.

Another option - which you do NOT need (but it may help) - is Semantic Views output plugin. SV will not give you any additional capability to solve this problem, but it can help you master the markup that Views outputs which in turn could help you target the CSS against the intended elements.

Hello tzoscott, Thank you for

Posted by tejaspmehta on October 21, 2010 at 11:24am

Hello tzoscott,

Thank you for your input. I did same way and edited css. I will check Semantic Views also. Sorry for late reply as i was busy with deadlines.

Views Developers

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

AltStyle によって変換されたページ (->オリジナル) /