- Posts: 47
COMMUNITY FORUM
[SOLVED] Title placements in sub/children categories
- Martin Thorgaard
- Topic Author
- Offline
- Senior Member
Less
More
10 years 8 months ago - 10 years 8 months ago #123280
by Martin Thorgaard
[SOLVED] Title placements in sub/children categories was created 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
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
- Offline
- Platinum Member
Less
More
- Posts: 15920
10 years 8 months ago #123281
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
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
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
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 47
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
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
- Offline
- Platinum Member
Less
More
- Posts: 15920
10 years 8 months ago #123283
by Krikor Boghossian
JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)
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:
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.
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
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 47
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
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
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 47
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 :)
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.