Preparing/creating own .master prepared for future mobile use.
Good day to you all
I am creating my own .master on a site which might in the future use the mobile module. Now my understanding is that the transitions from 3 cols to 3 rows for example will work only if you use the classes SF uses when you create page templates within SF.
I created a template in SF and styled it. Now I do want to take that created code and use it in my own .master.
Now SF creates a whole heap of divs.
I usually have a wrapper div "w" and then add for example a div all the way on the top "w" which would have two divs in it "w_l" (left) and "w_r" for the right part.
The code below shows what SF does reproducing this.
My question is which of the DIVs and CSS classes do I need to keep in order to make a future use of the mobile responsive add-on work out of the box.
would keepking the sf_1col_1_in_100 and so on be enough or do I also need the sf_cols, sf_colsOut, sf_colsIn, Public Wrapper classes?
The attached screenshot shows what I would be using (red stuff removed)
Kind regareds Markus
<div id="PublicWrapper" class="sfPublicWrapper"><div class="sf_cols w"><div class="sf_colsOut sf_1col_1_100" style=""><div id="TBD5FF593001_Col00" class="sf_colsIn sf_1col_1in_100"><div class="sf_cols t"><div class="sf_colsOut sf_1col_1_100" style=""><div id="TBD5FF593002_Col00" class="sf_colsIn sf_1col_1in_100"><div class="sf_cols"><div class="sf_colsOut sf_2cols_1_25"><div id="TBD5FF593020_Col00" class="sf_colsIn sf_2cols_1in_25"><div class="sfContentBlock">sefiltec logo </div></div></div><div class="sf_colsOut sf_2cols_2_75"><div id="TBD5FF593020_Col01" class="sf_colsIn sf_2cols_2in_75"><div class="sfContentBlock">competence in filtration </div></div></div></div></div></div></div>Hi,
You can check (or modify) the responsive design css selectors in the configuration. Administration -> Settings -> Advanced -> ResponsiveDesign -> LayoutElements
sf_colsIn and sf_colsOut are being used. sf_cols, sf_1col_XXX don't seem to be used anywhere.
Regards,
Boyko Karadzhov
Telerik
Dear Boyko
I don't have these settings. Could that be because I do not have the mobile module yet?
Markus
Hello,
Yes, this would explain the missing settings.
Keep the outermost DIV with a class "sfPublicWrapper". It can work with "w" but then you would have to replace "sfPublicWrapper" with "w" in the before-mentioned config.
Don't remove sf_colsOut where they are together with sf_2cols_.* classes.
Everything else that you have in red can be safely removed.
Regards,
Boyko Karadzhov
Telerik
Dear Boyan
Your quick and detailed feedback is very much appreciated.
Thanks a lot.
Markus