Hello,
I followed the explanations that you reported in your documentation to how adding new modules positions, I was able to add a position, but it is not explained how to add a row style to the new module position.
It would be interesting to understand how to add one…

Thank you

The row style effect the whole row which may be more than one module position. If you want to add your own style to a whole row create a LESS file, you can use one of those in the template as a starting point

You can add more styles here by adding your own less files to the settings/themes/styles folder of your template. The name of the file is added as a class to the row in question eg .dark-row or .primary-row.

// Uses a mixin
// replace values with desired colours
// .row-color(@bg, @textcolor, @headingcolor, @linkcolor)

For example a red row where the red colour is #D40004, white text and heading and grey link colour would be:

Create a file called red-row.less (copy say dark-row.less for a starter file) in the template folder settings/themes/styles. Once you save and compile you will be able to select the red-row from your Row Style list in the template admin to use in your template. Some example code below.

@import "../variables";
@import "../mixins";
.red-row{
.row-color(#D40003, #fff, #fff, #eee)
}

I hope that gives you a starting point. We then save these styles for use in future projects. The above is simple example.

Regards Ian

Thanks Ian

Hello Ian and thank you for these explanations, they will help me at a later stage, but for the moment I would only use the same styles (duplicate the same styles - Inherit, fullwidth, ...) that are already present in other modules (Grid1 Row Style, Grid2 Row Style, ...) in my new module ("Features" module).
In other words: I have my new module named "Features", how to duplicate existing styles and ensure that they will displayed from the Row Style list in the template admin?

Thank you again

You can apply the row style to any existing row by selecting from the drop down list, then save and compile. They should then apply to the row.

This assume your new module is placed within one of the grid rows that are targeted by the styling. If you have placed the new module outside of this then the "block" [you created?] that references the module will need to have the code added and the template backend modified. Of course I may be misunderstanding your question!

If you just have one new module position outside of the standard row styles, and you don't want to reuse in another site, it may be easier for you to just target it with css in custom.css. It is certainly possible to modify the template framework (we have do it for clients), it is super flexible, in order to control other stuff in the admin but I suspect it heads towards major customisation which may not be want you actual want to do. It most cases for one off sites the additional work is not required, simple css is a better solution.

I guess Paul will ask for a site link to help out some more, and subject to work load I can take a look if you need further help.

Regards Ian

Thank you Ian,I know this, but this is not what I'm trying to do...
To summarize my problem:
I created a new module position ("Features"), the module is displayed from the General Layout Settings in the template admin and is correctly displayed in frontend.

The problem is that the new module position is not listed from the Row Style list in the template admin.
My question is how to insert this new module position in the Row Style list.


The reason why I have to go through the settings of the template it's because I need to juggle with the display on mobile and desktop using the options in the General Layout Settings. Also, I'll have to add another position (which I'll name for e.g. "Top-Features") that need to be displayed in full width, this option is listed in the Row Style list.
I know that all these operations can be done via the custom.css and in the mobile.css file with breakpoints, but I would like to choose his display with a single click, it would be so much easier...
I hope that I have been pretty comprehensive with my poor english ...

Hello

You explain it fine. You need to modify the core code of the framework to add functions to the admin, which would involve changing several files usually.

I am not in my office currently, i am meeting customers and replying from the airport on my phone, just see your reply. I will try to look later to give you a better idea but cannot promise.

For a start take a look around the framework folders and files to see how the current options are included then copy the code to duplicate, then modify to call your own row.

The jb team may be able to help in the meantime with more specific detail.

Make sure you have working backups before hacking the core template code!

Regards Ian

Hello again

if the jb team could explain me how to modify the core code as explained in the documentation that I have reported in my first post, I guess it should not be any problems, it was so well explained…I looked carefully to the framework to see how the current options are included, but honestly I am lost in the many folders and files … no worries, changes are made on a test site

Thank you

Hi Lorenzo,

Row styles are different to adding new rows.

Rows styles are added simply by adding a less file to the less/styles folder.

The name of the less file is used as the style name. eg newstyle.less become .newstyle in the admin and the word newstyle is added to the classes for that row.

Thanks

Hello Anthony,
thank you but it's not what I'm asking for…
Ian has understood my problem.
What I'm asking is how to insert this new module position in the Row Style section.
Styles already exist, there are the same styles assigned to modules Grid 1, Grid 2, ...
I have to assign and display these same styles to my new module position in order to display them in the template admin.

Please read again my previous post, thank you.

Hello again...
Can you provide me explanations about how to do this?

Thank you

You need to add the new xml declaration in the settings/settings.xml file

eg <field type="row_styles" compile="both" default="inherit" label="My new style" name="mynew_row_style"/>

The item name needs to be followed by "_row_style".

...done and it works!
Thank you all for your help

Thanks - I'll pass that on

Cheers
Paul