Joomla Templates Club 406,261 posts

[James Weston Friend James WestonJoin date: September 2014Posts: 1030Downloads:11Uploads:70 Thanks: 408 Thanked: 16 times in 1 posts]

#171910

Morning Guys,

Can someone point me to the right area of my css to start trying to make some changes to the way a certain section displays. On this page http://www.myjakartaconcierge.com/index.php?option=com_k2&view=itemlist&task=category&id=3:chinese&Itemid=587&lang=en

which is the result of clicking on the CHINESE option in the list, I want to change the way the results display. Eventually I want to end up with something more compact like here http://www.londontown.com/restaurants/SearchResults?searchType=category&searchCat=Chinese%20Cuisine

But first I need to know which part of the css to go to so i can start playing.

Jim

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#430156

Greetings Jim:

Are you asking how to modify the size of the reference image to be “more compact” for when you begin to enter additional restaurant entries and information into your site?

If I am not understanding completely, perhaps you might be able to create a quick mock-up image of what it is you are hoping to accomplish with your particular site configuration(s)?

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#430163

Okies.
let’s me go around with you for a bit since i got your mind.

At first : http://www.londontown.com/restaurants/SearchResults?searchType=category&searchCat=Chinese%20Cuisine
This’s not Joomla! site. Ya no prob. It’s okay, just for mention.
But:
– We can’t make ( at least easy way ) tabbing as this site
– We only apply listing layout as this site.
And there is layout of a item on this site
And second: We are using K2 on our site.

Okay let’s go to check the target site:

<div onmouseover="this.style.backgroundColor='#F5F3E7';" onmouseout="this.style.backgroundColor='#F5F5F5';" class="grey-back" style="background-color: rgb(245, 245, 245);">
<div class="float-left height100">
<div style="width: 60px; overflow: hidden" class="image-wrapper">
<a href="/LondonInformation/Restaurant/Hakkasan/f33d/">
<img border="0" width="60" height="100" title="Hakkasan London" alt="Hakkasan London" src="http://cdn.ltstatic.com/2007/December/RT624725_60x100.jpg">
</a>
</div>
</div>
<div class="recommendation-best-pick" onmouseover="this.style.backgroundColor='#F5F3E7';" onmouseout="this.style.backgroundColor='#F5F5F5';" style="background-color: rgb(245, 245, 245);">
<img width="41" height="41" class="small-pick-image" title="Editor's Top Pick - Recommended" alt="Editor's Top Pick - Recommended" src="http://awscloud.ltstatic.com/images/directory-wide/pick-small.png">
<div class="recommendation-details-wrap">
<div class="margin-left-14 padding-top-3">
<a class="heading-link float-left padding-right-10" href="/LondonInformation/Restaurant/Hakkasan/f33d/">Hakkasan</a>
<div class="float-left padding-top-5">
<img width="14" height="16" class="float-left margin-right-3" alt="" src="http://images.londontown.com/images/directory-wide/michelin-star.gif">
<p class="float-left orange-text font-size-10">MICHELIN STARRED</p>
<div class="clear-left height-0"> </div>
</div>
<div class="clear-left height-0"> </div>
<a class="subcat-gold" href="/directory">London</a>
<span class="subcat-gold"> > </span>
<a class="subcat-gold" href="/restaurants">Restaurants</a>
<span class="subcat-gold"> > </span>
<a class="subcat-gold" href="/restaurants/SearchResults?searchCat=Chinese Cuisine&searchType=category">Chinese restaurants</a>
<br>
<span class="black-text bold">8 Hanway Place, <a href="/LondonAreas/Fitzrovia">Fitzrovia</a>, London W1T</span>
<br>
<span class="now-showing-text">Boasting the first Michelin Star ever awarded to a Chinese restaurant, Hakkasan can justly claim to be the best of its kind in London. The...</span>
<a class="bold" href="/LondonInformation/Restaurant/Hakkasan/f33d/">More</a>
</div>
</div>
<div class="clear-left height1"> </div>
</div>
<div class="clear-left height0"> </div>
</div>

A little bit much of code. But take it easy.
– We have a warpped div ( grey-back )
— The image at left side ( float-left height100 )
— Content at right side ( recommendation-best-pick )

The image at left side in K2 we use K2 Image !. No prob.
The right side for content :
– In K2 we have featured item . Use this for “pick” item. And a image at right top
– Next is K2 item title
– Next is K2 Category in listing
– Next is … sth else
And finally is content.

These layout you can apply item category ( or categories ) /category_item.php with follow above structure.
Of course you can make your own K2 template to do, instead hack into K2 default template.

And about css. You can make your own k2.css and put it under template_name/css and load it.
Actually byself i often use @import to import my own customized css file and put that code into template.css.
So in any case i can safety for upgrade and easier for maintenance.

Thank you

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#430165

Joo . . . are you certain that the “solutions/recommendations” you provided above are what Jim is wanting?

If so . . . FANTASTIC . . . Mission Accomplished.

If not . . . this is why I was asking for further clarification – to make sure the recommendations we provide fit with what Jim is wanting/envisioning for his site.

I guess we’ll wait and see if the recommendations you provided is what Jim is looking for.

[James Weston Friend James WestonJoin date: September 2014Posts: 1030Downloads:11Uploads:70 Thanks: 408 Thanked: 16 times in 1 posts]

#430183

Hi Tom & Joo,

Thanks for the input. Just got home so I have tried to do the screenshot to show you what I am thinking. I know that the http://www.londontown.com site is not Joomla. But what I am starting to understand is that by using Joomla along with the great templates at Joomlart, and a bit of lateral thinking one can find ways of creating pretty similar results to non Joomla sites.

So to explain. I am not trying to tabs. What I am trying to do is style the way the restaurants in the catergory are displayed when they first come up in the list. I have attached the screenshot with some rough notations.

1. I want to make the image smaller (I believe I can do that in the K2 settings in Joomla)?
2. I am thinking it would be nice to have the name of the restaurant Xin Wah in once colour and the name of the hotel (if there is one) in another colour (although if this requires a lot of complex alterations it is not essential.
3. I don’t need any of the data that you can see in 3. I just want to have the address running on one line underneath the name of the restaurant in a different colour than the restaurant name (as they have in the screenshot)
4. I would like to change the READ MORE button to just a simple More in the same size font just in bold with a different colour.

The other thing would be to have a line or uniform gap between each entry so it is easy to see the separation.

The results page in the screenshot looks nicely spaced and laid out and positions itself nicely on the page.

I guess the main question is which parts of this can i do in the K2 setting and which parts will i need to do in the css.

Cheers guys.

---

Attachments:

1. 

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#430187

<blockquote>1. I want to make the image smaller (I believe I can do that in the K2 settings in Joomla)?</blockquote>
Yes, in K2 you can do that
<blockquote>2. I am thinking it would be nice to have the name of the restaurant Xin Wah in once colour and the name of the hotel (if there is one) in another colour (although if this requires a lot of complex alterations it is not essential.</blockquote>
# If you want to use both of 2 “name” in a article. Than you will need:
– Primary name use as item title – Another name will use as a part of content.
or you can do by use item Title but use spectator character like ” || ” between 2 title.
And in layout use $titles = explode ( ” || ” , $item->title );
<blockquote>3. I don’t need any of the data that you can see in 3. I just want to have the address running on one line underneath the name of the restaurant in a different colour than the restaurant name (as they have in the screenshot)</blockquote>
Same as above

And finally. You can make this page as listing by use K2 Category page ( view=item_list ). To do this
#1. Create your own “template folder” in

componentscom_k2templates
#2. Copy all files from

componentscom_k2templatesdefault
into your new template folder
And now you can custom these.
category.php: This file use for item_list layout
category_item.php: This file use for each item layout in item_list layout above

About css. Said i said above. But you can put your own css into this template directory and use addStyleSheet to include to by self.

Thank you

1 user says Thank You to jooservices for this useful post

1. James Weston

[James Weston Friend James WestonJoin date: September 2014Posts: 1030Downloads:11Uploads:70 Thanks: 408 Thanked: 16 times in 1 posts]

#430190

Thanks Joo,

I will see if I can turn your suggestions into results. As always thanks for the help and the prompt response.

Jim

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#431839

<em>@origomedia 289858 wrote:</em><blockquote>Thanks Joo,

I will see if I can turn your suggestions into results. As always thanks for the help and the prompt response.

Jim</blockquote>

Did the suggestions achieve the results you were looking for?

[James Weston Friend James WestonJoin date: September 2014Posts: 1030Downloads:11Uploads:70 Thanks: 408 Thanked: 16 times in 1 posts]

#431850

Hi Tom,

In the end I decided I might be safer at this stage to go with the template and maybe at a later date pay someone experienced to make a bunch of changes all at the same time. I was worried about messing everything up.

Now I have hit a problem with not been able to get the intro text to display in the listing page as per this example http://www.myjakartaconcierge.com/index.php?option=com_k2&view=itemlist&task=category&id=3:chinese&Itemid=587&lang=en where there is intro text for the two restaurants but it is not showing. I made a new post and one of the members is trying to work out why for me.

All the best and hope you have a great new year.

Jim

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#431861

Hi
If needed . Just PM me i can help you .

Thank you

[Author]

Posts