Keyword

[SOLVED] Title placements in sub/children categories

  • Martin Thorgaard
  • Martin Thorgaard's Avatar Topic Author
  • Offline
  • Senior Member
More
10 years 8 months ago - 10 years 8 months ago #123280 by Martin Thorgaard
Im creating a new site, using K2 , which seems to be the right choice for me with this site.
So I hope someone is able to help me here.

In the listing of my children categories, I have the images above the titles:
spil-gratis-online-spil.dk/index.php/artikler

But in the subcategory to eg. 'Kost", the title is above the images:
spil-gratis-online-spil.dk/index.php/artikler/itemlist/category/1-kost

I've tried a lot of different configurations/settings, but I don't see how to solve this, unless changing the CSS (Which I'd rather not, and dont know how to do)

Is there a setting or alternative way of doing this?

Sincerely,
Martin

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
10 years 8 months ago #123281 by Krikor Boghossian
Replied by Krikor Boghossian on topic Re: Title placements in sub/children categories
Hello Martin,

The one with the images on top is the subcategories list while the other one is an item listing.

You will need to override the category_item.php file and move the image above the title to achieve the same look and feel.

Read this tutorial, it will help you locate the files. getk2.org/documentation/tutorials/174-templating-with-k2-and-the-concepts-of-sub-templates

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

  • Martin Thorgaard
  • Martin Thorgaard's Avatar Topic Author
  • Offline
  • Senior Member
More
10 years 8 months ago #123282 by Martin Thorgaard
Replied by Martin Thorgaard on topic Re: Title placements in sub/children categories
Hi there Krikor,

I learned SO much, by so little :) Thanks.

The subcat/itemlist you explained, gave me some better understanding of the hierarchy.
And the sub-template thing really open my eyes for the possibilities :)

I am using Artisteer for templating, as I don't know CSS, I hope that wont affect the oppotunities?

But Im a little lost now, as my CSS skills are very very low (I understand some of the things I read in the css-files, but can't code ANYTHING myself)
I've open the file "category_item.php" but dont know what to do know :/

Can you help me out, where I have to look in the file, and preferably what to write, to get the above mentioned look (Image above title, and not as it is now, title above image in the Item listing)

Sincerely,
Martin

Please Log in or Create an account to join the conversation.

  • Krikor Boghossian
  • Krikor Boghossian's Avatar
  • Offline
  • Platinum Member
More
10 years 8 months ago #123283 by Krikor Boghossian
Replied by Krikor Boghossian on topic Re: Title placements in sub/children categories
Actually not knowing CSS is a limit itself.
If start learning CSS then the possibilities with K2 are endless.

These are however PHP files you need to edit.

You need to locate this block:
<?php if($this->item->params->get('catItemImage') && !empty($this->item->image)): ?>
	  <!-- Item Image -->
	  <div class="catItemImageBlock">
		  <span class="catItemImage">
		    <a href="<?php echo $this->item->link; ?>" title="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>">
		    	<img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />
		    </a>
		  </span>
		  <div class="clr"></div>
	  </div>
	  <?php endif; ?>

Cut it and paste it above the title which is around line 35.
Always look at the comments to locate these elements.

Hint: Place the element ABOVE the php if statement which encloses the comment and not direclty above the comment.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

  • Martin Thorgaard
  • Martin Thorgaard's Avatar Topic Author
  • Offline
  • Senior Member
More
10 years 8 months ago #123284 by Martin Thorgaard
Replied by Martin Thorgaard on topic Re: Title placements in sub/children categories
That worked without any problems, at the first attempt :) Thanks.

I have tried to learn some more since yesterday, when I'd put the image above the title :)
I know I really need to learn how CSS is working!

I figured out, that if I want to change the position of the title, I need to change some seetings in my template (CSS)
I want to move the title closer to the image it belongs to (It is right now centered between upper and lower image: spil-gratis-online-spil.dk/index.php/artikler/itemlist/category/1-kost )

And found out, through the edited PHP-file, that the title which I need to change position, is H3 (headline3)

So I tried to edit my template to move the title up closer to the image.


This was the default CSS for H3:

font-size:14px;
font-family:+Headings;
margin-left:0px;
margin-right:0px;
margin-top: 10px;
margin-bottom:0px


I was thinking that I should change the margin-top to maybe 0px or margin-bottom to 10px.
I tried a lot of different settings, but nothing happened.

Am I doing the right thing, or is this WAY of target?
Is it at all possible to move the title closer to the image it belongs to?


Sincerely,
Martin

Please Log in or Create an account to join the conversation.

  • Martin Thorgaard
  • Martin Thorgaard's Avatar Topic Author
  • Offline
  • Senior Member
More
10 years 8 months ago - 10 years 8 months ago #123285 by Martin Thorgaard
Replied by Martin Thorgaard on topic Re: Title placements in sub/children categories
Learning by doing :)


Just for the few people having the same problem (or in case I forget it :) ):

I had to edit k2.css and found this line (line 420):


div.catItemImageBlock {padding:8px;margin:0 0 16px 0;}

Changed it to:

div.catItemImageBlock {padding:8px;margin:0 0 -16px 0;}


That did the trick :)

Please Log in or Create an account to join the conversation.


Powered by Kunena Forum