First, I really need a responsive site and I think that now we all need that.
Second I'm very new on seblod but I like it because I almost did what I wanted in a few time, after a long search and unfructuous experiences with most of the existants cck including seblod two years ago.
Now I know this is the one and I will use it. But I need it responsive.
I thought maybe position variation is my solution but don't know how to use it and what it really does.
So if someone could point me to a tutorial...no I'm joking. But if someone could explain it to me from the beginning I'll appreciate very much.
Thanks and By
I'll read the doc on template didn't do it yet, my mistake !
But to answer your post; I got a joom3 site and using protostar for now, so it's responsive. But when I reduce slowly my window to see how responsive seblod is: nothing is moving on side-A position and the fields are cut as the com_content reduces. To be fully responsive I expect the side_A to move down the mainbody when there's no more place for it.
But I'm sure there's a way to do it in seblod I just don't Know what.
Thanks
I'm reading the doc.
I looked into my .../seb_one/positions/ folder and there's is no file corresponding to the content type I created, it's a form with 20 fields.
I'm working locally but I don't think that changes anything ?
If you got a clue or if I didn't understand something well, please let me know
By
For the custom templates, you must create all of the directories and files manually. So you would need to create something like:
.../seb_one/positions/my_content_type/content/template_position_name.php
But before the custom templates, try the minima template and then create your own div fields from within the SEBLOD Workshop. Then in the Markup class (option #6) you can add your style elements.
Regards,
Randy
I don't think it could change the layout, maybe i'll have to do it myself but it scares me a little code is not my friend so far !
Thanks anyway By
/* Smartphones */
@media (max-width: 480px) { ... }
/* Smartphones to Tablets */
@media (min-width: 481px) and (max-width: 767px) { ... }
/* Tablets */
@media (min-width: 768px) and (max-width: 959px) { ... }
/* Desktop */
@media (min-width: 960px) and (max-width: 1199px) { ... }
/* Large Display */
@media (min-width: 1200px) { ... }
If you don't know CSS very well I would recommend you: do not do it responsive. If your site gets profitable you could hire some one to do it for you and it's gonna cost you less time, effort and probably money.
Thanks for the recomendation but I need to do it responsive and I know that would be long and fastidious.
Luckily working two years on joomla! made me learn a little code, I got the ressources to write html5 and css3 wich are really well documented. php is not my stuff but just to call folders Ithink I could do it.
I thought to limit myself at 3 layouts, the most used.
You seem to know a little about it, so I won't hesitate to post here if I got some troubles in my way.
Thanks for the reply and good week-end to you
I am using the mobile-first responsive template framework http://siegeengine.org (based on Foundation Framework 4 from Zurb - see http://foundation.zurb.com) with seblod. I am going to try and give a seblod content type its own class from the default template which is fully responsive. It might not work, but it's a possible way forward. I really like what Seblod can do, but if it's not responsive, it's almost useless because all sites need to be responsive.
Hi all,
I did make my form responsive, but doing it with all seblod is another kind of stuff. maybe developpers could do something for it.
I added a custom css file with media querries corresponding to the major breakpoints of my form.
Don't think it deserve a tutorial but i'll answer any question with pleasure.
regards
Hi everyone,
Seblod (at least 3.3.5) offers a responsive design stylesheet out of the box.
You can enable it in the global Seblog configuration (In Joomla 3: Global Configuration > Seblod > Site) just activate "Responsive (RWD)" and your site will integrate "/media/cck/css/cck.responsive.css" into the site header. The standard responsive css does the job for me as I am using seb_one in most cases. Maybe this can help you as well to tweak your responsive css or just use the standard seblod one.
Best Regards
sUrfa
Hi sUrfa,
You won't believe that nobody told us about that before, information seems to have dificulties to go throught.
I tried it directly, after I removed my custom css, it doesn't work at all.
Maybe I did something wrong;
Regards to all
Hi JJL,
I just had a look at "/media/cck/css/cck.responsive.css". The responsive setup seems to be relatively basic so far. There are two media-queries existing (width below 480px --> phone and width between 481px and 959px --> tablet). The entries are addressing the seblod-css classes ".cck-w99" where 99 stands for various numbers.
Are you using theses css-classes in your template / are you using seb_one for your content types?
I am using the responsive template in my list views with the seb_one template (fields in intro). There e.g. sidebody_a moves above mainbody on smaller screens.
Hope this helps.
Best Regards
Hi sUrfa,
I'm sorry I didn't solve this topic. But I made it responsive for my specific needs.
This is my own responsive.css file, it works very well but was a little work to set it !
Hope that's helpy.
By
@media(max-width: 980px){
.devis cck-f100 cck-pad-8{
-webkit-columns: 1;
-moz-columns: 1;
columns: 1;
}
.cck-fr {float: left; width:77%;
}
.cck-70 cck-fl cck-ptb cck-body {float:left; width:80%;
}
}
@media(max-width: 425px){
#nom,
#prenom,
#adresse,
#adresse_electronique,
#telephone,
#description_du_projet,
#plan_croquis,
#photo_1,
#photo_2,
#photo_3,
#video_1,
#video_2,
#confirmation,
#longueur,
#largeur,
#surface_en_m2,
.icon-calendar
{
width:85%;
}
#nature_du_projet_reel{
width:100%;
}
}
@media(max-width:485px){
#date_du_projet{
width:40%;
}
}