[Resolved] Adding more than one field to a list view and styling it

[Author]

Posts

[barryG-4]

I am trying to:
 
I have a view that displays a custom post type title with URL, followed by a taxonomy term (if it exists or blank if not), displayed in a list format separated by commas.

I created the view but in the list format I could only add one field so I added the title with URL. There was no content template and I don't really know what I'm doing so I added the taxonomy term field in the loop and set it to display just the term name. The whole loop code now reads:

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-item index=other]
[wpv-post-link][wpv-post-taxonomy type="girl-promotion" format="name"],
[wpv-item index=last]
[wpv-post-link]
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

It's nearly ok but there is no white space between the post name and the term so it doesn't look right as you can see here:

Aylin, BeatriceNew, Belle, Carla, Carmen, ChloeNew, Claire,

If I add a space (by using my keypad so not any code) then I get this:

Aylin , Beatrice New, Belle , Carla , Carmen , Chloe New, Claire , 

....which gives me the space in between the title and the term, but annoyingly adds the space after post titles that are not assigned a term, so there's a horrible gap before the comma (after the post name where there's no term).

How can I fix this so the list displays as follows:

Aylin, Beatrice New, Belle, Carla, Carmen, Chloe New, Claire,

....therefore no gap after the post title and before the comma where there is no term, and a gap in between the post title and the term when it exists.

I thought this would be rally simple but for me it's not.

I've tried to also add a colour (red) to the term but all efforts failed. I know how to make it bold, by wrapping it with but that's all I can do with styling.

The absolute icing on the cake would be to have the URL to the post consist of both the post title and the term so a user won;'t get confused by one bit being clickable and one bit not.

I have tried to do this myself for over 4 hours but I currently can't get any further. Are you able to help please.

Many thanks,
Barry.

Link to a page where the issue can be seen: hidden link (please scroll down to the footer to see the list of girl's names in blue)

I expected to see: no gaps after girl names and before the commas and what the term name to be styled in red.

Instead, I got: a gap after the post title and before the comma (where there was no term).

[Shane]

Hi Barry,

Thank you for contacting our support forum.

Could you try it like this

           [wpv-item index=1] 
           [wpv-post-link][wpv-post-taxonomy type="girl-promotion" format="name"]
          [wpv-item index=other]
           ,[wpv-post-link]

Please let me know if this helps.
Thanks,
Shane

[barryG-4]

Hi Shane,

Thank you for replying. It's not worked sadly. The term isn't showing and the comma is now sitting right next to the next post title in the list with a gap on the left side of there comma.

Many thanks,
Barry.

[Shane]

Hi Barry,

This one should work now.

[wpv-item index=1] 
         [wpv-post-link][wpv-post-taxonomy type="girl-promotion" format="name"]
      [wpv-item index=other], [wpv-post-link][wpv-post-taxonomy type="girl-promotion" format="name"]

Thanks,
Shane

[barryG-4]

Hi Shane,

Thank you. It's like I had it before now but with different code, so that's interesting. There's no white space though between the post title and the term (when the term exists). If I add a white space between the two field code sections, then the white space appears between the post title and the comma when there is no term. So I'm back to square one really. It's as if the white space needs to go in the code section that gets term, as other wise the white space its there regards of the term being there or not, if you see what I mean.

[wpv-post-link]----IF WHITE SPACE IT PUT HERE IT SHOWS REGARDLESS OF A TERM BEING PRESENT OR NOT----[wpv-post-taxonomy type="girl-promotion" format="name" CAN CODE BE PUT HERE SOMEWHERE TO ADD A SPACE BEFORE THE TERM NAME?]

Many thanks,
Barry.

[barryG-4]

Hi Shane,

I've just noticed that the gap pointed to in the screenshot in the previous thread is only after the first name. If I add a white space between the two fields the gap appears after each post title and before the comma (unless there's a term after the name). very odd.

Many thanks, Barry.

[barryG-4]

Hi Shane,

I've managed to do it. I used the following loop editor code after setting a new view up from scratch as unformatted. I don't really understand it still but it works. If it's useful to you here it is;

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-post-link]
[wpv-item index=other]<font style="color:red;">[wpv-post-taxonomy type="girl-promotion" format="name"]</font> <font style="color:white;">-</font>
[wpv-item index=last]<font style="color:red;">[wpv-post-taxonomy type="girl-promotion" format="name"]</font> <font style="color:white;"></font>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

There was a trailing '-' after the last name so I was able to work out that adding [wpv-item index=last] and removing the '-' fixed that sort of thing.

You can see the results here:

hidden link

Regards,
Barry.

[Shane]

Hi Barry,

I'm happy i was able to help you out and point you in the right direction.

If everything is resolved you can now mark this thread as resolved so that others with a similar issue are able to find it from the pool of resolved threads that we have.

Thanks,
Shane

[barryG-4]

My issue is resolved now. Thank you!