Keyword

Align picture and float text

  • Dominik Kaptur
  • Dominik Kaptur's Avatar Topic Author
  • Offline
  • Junior Member
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

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

More
12 years 7 months ago #62805 by 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!


Aaron :)

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

  • Dominik Kaptur
  • Dominik Kaptur's Avatar Topic Author
  • Offline
  • Junior Member
More
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.

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

More
12 years 7 months ago #62807 by 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


Aaron :)

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


Powered by Kunena Forum