- Posts: 27
COMMUNITY FORUM
Align picture and float text
- Dominik Kaptur
- Topic Author
- Offline
- Junior Member
Less
More
12 years 7 months ago #62804
by Dominik Kaptur
Align picture and float text was created by Dominik Kaptur
Hi. Is it possibile to align main picture to the left and float description text on the right in category view or itme view?
Thank you
Thank you
Please Log in or Create an account to join the conversation.
- Aaron
- Offline
- Premium Member
12 years 7 months ago #62805
by Aaron
Aaron :)
Replied by Aaron on topic Re: Align picture and float text
This is a change in the template. I would highly recommend not changing the "default" template. Instead, copy the default folder into the same directory with a different name.
Changing the picture alignment size and float is all in the CSS. While displaying the page, you can right click on the picture and click inspect element (in chrome) and it will tell you which class is assigned. The CSS is in the folder: components / com_k2 / css / k2.css
I found it helpful to copy the class, paste it on the bottom of the css file and add your template name to the beginning of the class.
I actually did what you are asking:
1. I added a float:left; to the class. This allowed the picture to float left and because their is not clear after it, the introtext and extra fields aligned themselves next to the picture.
Hope this helps!
Changing the picture alignment size and float is all in the CSS. While displaying the page, you can right click on the picture and click inspect element (in chrome) and it will tell you which class is assigned. The CSS is in the folder: components / com_k2 / css / k2.css
I found it helpful to copy the class, paste it on the bottom of the css file and add your template name to the beginning of the class.
I actually did what you are asking:
1. I added a float:left; to the class. This allowed the picture to float left and because their is not clear after it, the introtext and extra fields aligned themselves next to the picture.
Hope this helps!
Aaron :)
Please Log in or Create an account to join the conversation.
- Dominik Kaptur
- Topic Author
- Offline
- Junior Member
Less
More
- Posts: 27
12 years 7 months ago #62806
by Dominik Kaptur
Replied by Dominik Kaptur on topic Re: Align picture and float text
Hi.
Thank you for info it's work :). I added the new css style in the file category.php because I don't know how to add template name to the beginning of the class. I suppose I skipped this CSS lesson :D.
I have this CSS class "div.catItemImageBlock" and my template name is "alpha", so how should correct combination look like?
Thank you.
Thank you for info it's work :). I added the new css style in the file category.php because I don't know how to add template name to the beginning of the class. I suppose I skipped this CSS lesson :D.
I have this CSS class "div.catItemImageBlock" and my template name is "alpha", so how should correct combination look like?
Thank you.
Please Log in or Create an account to join the conversation.
- Aaron
- Offline
- Premium Member
12 years 7 months ago #62807
by Aaron
Aaron :)
Replied by Aaron on topic Re: Align picture and float text
If your template name is "alpha" and you want to add class names specific to your template, simply add the template name to the beginning of the class:
div.alphacatItemImageBlock
div.alphacatItemImageBlock
Aaron :)
Please Log in or Create an account to join the conversation.