Float image left in the category view

Hello aacmn1,

Which templates do you use? What do you mean by "category view"?

aacmn1 i made the field class " .floatleft " in the image field

Maybe I am stating the obvious, but...

• Make sure you don't add the "." in field parameter
• Just use the plain class name
• The default list template is a table. So, you can't really float things around.
• The default full view template uses a DL/DD structure. Check the output in your browser... and hence the label CSS, too.
• Allways make sure your CSS is loaded at last position. i.e. your main template.css or a general custom.css file should do the trick.

Sorry i am using the "Blog" template And did not use the "'s in the CSS. I guess this component would call it the "Record list" Also used this same CSS code in "Adsmanager" and it works fine.

Guest Sorry i am using the "Blog" template And did not use the "'s in the CSS

NP. Thanks for the infos.

But I still can't help you, because I don't know exactly what you want to achieve. I mean, what fields do you want to display and what is your final layout and their position? Do you need the labels... etc.

The Blog template has the same default markup like the full view. It uses a definition list (DL/DT/DD). By default the elements do already float! The default CSS also adds margins and clear. The field layout is top-to-bottom.

• You might try to adjust and override the CSS properties for that particular blog...
• Or write a custom template for a "total free" positioning

Here are screenshots of what i have The 2nd one is what i want it to look like. The 1st is how it appears in coblt 8

I Hopr this helps.

aacmn1 I Hopr this helps.

It does. ;)

Again, hence my previous comment about default templates and their markup.

Suggestions

CSS only

• Edit your image and text fields. See field Label: Set Show labels to Submission from
• Image field needs proper Field Class(es). Either existing bootstrap helper classes or create your own.
  e.g.: pull-left , MyImageClass
• Important CSS rules: You have to remove the margin or left-margin from the DD/image (which gave the space for the label)

dd.input-field.MyImageClass {
    float: left;
    margin-left: 0;
}

• if your image needs more space than 180px, you might adjust the text field, too. Give it a custom field class and set or remove the left-margin. Or let it float as well, and add some right-padding/margin to the image instead.

Alternative Templates

• see Cobalt's Additional templates pack
  (includes a versatile table with a lot of configuration parameters, it has a special 1st column)
• see JoomBoost AddOns / also found in Depot under Templates and Packs
• create custom template with certain fields and your markup/layout. See Docs -> Templates

Alright i am getting nowhere with this. Let's just start with this: In what file and on what line of the blog template do i delete to get rid of the field labels for the records list? so there is no left margin at all.

PLease start with reading template customisation documentation as suggested.

http://docs.mintjoomla.com/en/cobalt/

aacmn1 Where would i place the css code to float the image left in the category and item views? I have tired the following code config in both my default template css and in the libary CSS of cobalt, niether has worked. 1 i made the field class " .floatleft " in the image field. 2 and than added the following CSS code to both of the above mentioned files " .floatleft { float: left; margin: 0px 5px 5px 0px; }" Thank you

aacmn1

Try floatleft without leading point in Field Class in the image field.

Or download this file list-left Unzip and upload to components/com_cobalt/fields/image/tmpl/output Go to your image field settings and in "Template in the articles list view" choose "list-left.php"

Thank you, Thank you and Thank you! your list_left file worked perfectly can not thank you enough!!!!

No problem. Thats the way a good community should work. :-)

Lord_Helmchen Thats the way a good community should work. :-)

+1