Hello Petrache,
I would recommend anyone to do it local.
It's just quicker and most importantly you are more flexible.
I use wamp for design and development for the script.
Best regards
Steffen
Printable View
Hello Petrache,
I would recommend anyone to do it local.
It's just quicker and most importantly you are more flexible.
I use wamp for design and development for the script.
Best regards
Steffen
Hello Pertache,
Yes it's nice example for manage selectors with your design. I saved your link for future :) Thanks.
And here is an example for Grid <-> List view switch in bootstrap - Link
If not well designed, but it is only to show how easy it is. We need later also.
Regards
Steffen
i always prefered to work live than in local (i guess it is a matter of personal prefference). anyway, i am interested in something like we see in http://bootply.com/ where you can sweetch from monitor to mobile device view to see your work. so, any option for this in a local?
here is a great utility to see how responsive is your website, on different devices
http://cybercrab.com/screencheck/
Hello Petrache,
Firefox has such screen addons or the developer tool for firefox to switch mobile, tab... screen views.
Hmmm i think, that flynax not create a responsive theme with bootstrap framework.
Best regards
Steffen
can you name an addon for firefox that works ok (if you know)?
olso, since you develop a bootstrap theme, will you share the source so we can customise from that?
olso, will you change the whole script like grid/list, image viewer for photos/videos and the tabs system?
Hello Petrache,
This tool is integrated directly in firefox. Nothing more needs to be installed. ;)
If my bootstrap theme is ready i will share the source.
Of course i will change all to bootstrap framework, also grid/list, photos/videos, tabs, uploads etc....
Either all or nothing... We intend to improve and not make worse. ;)
But one thing i must say in advance.
I have in my flynax script added many modifications and improvements
But that should be no problem for your own bootstrap theme.
You can also ask here in this thread everything.
Therefore, also the workshop.
We should create a ToDo list.
For example, we start with the header, then Content and next Footer.
After that the content items such as boxes, field types and scripts and so on...
So i would suggest.
As anyone can join and make suggestions for the parts that we are currently editing.
So it would also a good solution for "amateurs".
//Steffen
Bootstrap Theme Workshop
1. Grid Structure of page
The first part is a brief introduction of grid structure for flynax bootstrap theme.
The layout for flynax has follow parts.
Full Side = 1 column
Sidebar Left -> Content = 2 column
Content -> Sidebar Right = 2 column
Left -> Content -> Right = 3 column
Bootstrap provides this at the following layouts
Full Side = 100%
For responsive we must use for the booth content div follow class:
Sidebar Left -> ContentCode:Only registered members can view the code.
Content -> Sidebar RightCode:Only registered members can view the code.
Left -> Content -> RightCode:Only registered members can view the code.
Code:Only registered members can view the code.
col-lg-12, col-md-12, col-sm-12 -> width: 100%
col-lg-9, col-md-9 -> width: 75%
col-lg-6, col-md-6 -> width: 50%
col-lg-3 col-md-3 -> width: 25%
It distinguishes between the following media sizes
lg = large (Desktop or Laptop)
md = middle (Tablets)
sm = small (Smartphones, Handys)
The real media size will defined by div class container (div.container) through css.
For example
Code:Only registered members can view the code.
With this basic structure we have the Flynax Layout Structure.
There are more grid styles, but i think thats the best for Flynax Bootstrap Template basic structur at begin.
I will later publish the code for the custom content.tpl in this thread.
Regards
Steffen
Looking good guys and am interested to see what you all come up with. Gotta admit never been a fan of responsive templates except for blogs etc. Have always prefered the current setup for a classified script.
But lets see what you guys can achieve, you may change my mind :D
Then let yourself surprised by the advantages. ;)
i was not a fan as well but, by each day, the mobile usage grows. if 3 years ago, online shopping from phones or tablets was a joke, today, many people navigate online from such mobile devices, with different resolutions for the screens.
you can use http://cybercrab.com/screencheck/ to add your website for instance and see how "great" is for a mobile phone or tablet user to navigate your website, search or add a listing.
time means change and we need to adapt fast to keep beeing in the first pack (we are late now but responsive design done by flynax or by great developers like Steffen will correct this).
http://getbootstrap.com/components/#navbar-default an website wich covers i think all the aspects of bootstrap functions, with examples (great for beginners to this script)
Hi Guys,
I prepare for the second Part of this workshop.
In this second part, i would like to prepare together with you the flynax script to bootstrap.
We will make changes and add new features in a few files and database.
For example, for:
- Layout Structur
- Grid-System
- Query helper
For the layout i have an important question.
How important are the three column design?
I mean this => Sidebar Left -> Content <- Sidebar Right
Would following suffice you, to make better use of the content?
For those who do think it would be worse for advertising... On the contrary!
Advertising can turn anywhere on the website, thanks grid layout.
<- Full Top -> // included
--------------------------------------
Sidebar-Left -> Content // or
<- Full Content -> // or
Content <- Sidebar Right
--------------------------------------
<- Full Bottom -> // included
We have to agree, so i can take this into account when programming.
This all sounds very complicated. But it is not so.
Best regards
Steffen
Maybe some will prefer the three column layout but I put my own in two and I am okay with it. The only problem is that skyscraper banner ads won't be available anymore and I am okay with that to me they are a thing of the past anyway.
Hi Kemoid,
You're wrong. ;)Quote:
The only problem is that skyscraper banner ads won't be available anymore...
We still have <- Full Top -> also <- Full Bottom -> ;)
This is better as before.
In Full Top and Full Bottom fit either for example:
- 1 very very big Banner
- 2 big (medium) Banner
- 3 small Banner
- 12 micro Banner -> How on the - One Million Page -. LoL
and much more variations... ;)
And there are not even the possibilities of sliders for advertising included in the calculation.
Advertising can be placed anywhere.
Except in Footer... ;)
// Steffen
Your miss understanding again Steffen I have full top and full bottom from my previous template and I transferred them to my new template. I am saying that I have 2 columns instead of three because I did not add the right column. The only thing I used it for was skyscraper ads (160x600) which is outdated and would not work in a responsive design.
Ashes on my head.. :*)
You are right. Sry.
My english is not so good than i thought.
i am using left column + main content, so 2 columns.
will we be able to still use in homepage the top area splited in 2 sections (left block + right block) as in present script?
i have in right side categories and in left side field bound box plugin, so i am interested in using this again since it is a payed customisation
Every bootstrap theme is easy to modify, either through LESS or CSS. You can even have a theme selector if you want. The grid for a basic theme is easiest to start with like this http://wrapbootstrap.com/preview/WB01KF12C which is a very nice theme.
For more resources check: http://mashable.com/2013/10/20/bootstrap-editors/ and http://bootstraphero.com/the-big-bad...trap-resources
//Morgan
Good morning Petrache,
What you mean with
If you mean the Full Top Area, this can you split - any way you like, as i have invented something nice.Quote:
top area splited in 2 sections
More on this later. I work and test just the changes before i publish it here. ;)
But a short insight i give all interested.
At page creation now a layout is assigned.
The blocks can be assigned to the areas directly.
Thus either in the sidebar, content, top or bottom.
How and where to place the box, will decide on the position and the grid declarations.
Every page or block can you give a extra class or id. Its better for designing somthing better.
Everything remains backward compatible to the flynax templates, despite the changes in the script.
//Steffen
try to see category page from that template ( http://czsale.sensemedia.cz/category.html) and you will see that on phones it looks bad - an ad is splited in columns wich is pretty bad becouse the description area is non existing (verry thin). overall it is ok but just a remainder that we have to pay attention to details and check it well to cover all aspects.
i propose that once Steffen will release the finished template with instructions, we all install it and sit down and check it very well to cover all functions and find any bugs. once all reported bugs are solved, we will have a pure skeleton that is perfect and from that anyone can start customising it like it wishes and so, be convinced that any issue that may apear is comming from his customisation.
Just change viewport in the theme and it will look nice. This is a benefit with bootstrap.
//Morgan
Also Fonts, Iconsets or colors etc...
Thats right Morgan.
if you go in flynax admin area, content-content boxes, there you can use /create a new one and place it in different position like
left
top
bottom
middle left
middle right
right
i am using in home page 2 content boxes , one placed as middle left (field bound box - a map more precise, similar to the one used by Morgan in his website) and another as middle right (as categories).
so, will we have this freedom of choice to place the blocks from admin area where we need? as we do in flynax now.
Of course.
That remains as it is now also.
But in a different way.
For flynax was this side - declaration a helper for there table structure and
page layout. I'll try to use less tables so that you are flexible in design.
At bootstrap, this can be realized through additional class declarations.
As example nested or offset...
This sounds complicated, but it is not.
Aha I see. What I meant is the in the CSS you can change viewport for the look by visual hide or show different objects in different resolutions or different media and by that, totally control how it should look like. F.i. the slider shouldn't be visible in a small smartphone but for a tablet it should. I think a retina display should be considered when mocking up a theme like this. Also you could render your layout in Photoshop and use this in the CSS. There are some smart tools for this.
For purpose testing I use Pingendo which is a free tool. You can start with simple layouts or insert downloaded layouts, fiddle the code and view it directly in the browser. When layout is ready, you upload it to your domain or XAMP or VAMP.
The Flynax bone-structure is nice as it is easy to add blocks from within the AP and together with a flexible theme, this is a killer. Imagine how many open "theme plugins" we could create.
//Morgan
Morgan, what i initialy said is to pay attention to the details. the template you mentioned is fine (responsive) except that area i mentioned. that's all. i know that the responsivness can be altered to fit proper on different devices but since this is a finished theme, that issue is not ok. i've sean lots of themes advertised as responsive and when you sit and digg the features.... i try to avoid this so we can have a perfect skeleton
that is good, even if i will have issues becouse my map is 600px wide i think and the mobile devices have a 320 width (when viewed in portrait mode). any sugestions how i can shrink the map when viewed for less than 600px?
to get an ideea, take a look at http://realty.demoflynax.com/ with the usa map wich is big. how can we shrink when viewed on mobile?
an example for grid with 6 columns on desktop, 4 columns on tablets, 3 columns on phones
http://bootply.com/103571#
Steffen, will we have grid and list view in your template?
a great responsive megamenu at 5$ so we can add it in the bootstrap template? http://www.weborithm.com/previews/rMM/
quite nice, with images. when i compare this megamenu with the new menu that flynax team made for the latest general classifieds templates...they just can't compare
So guys,
So now guys, i am awake again.
Was a long night.
Nice megamenu.
I'm thinking all the time about this.
How can the best way to be achieved such feature, so that we can realize mega menus.
I think, that i have the solution.
Menus are indeed generated at the sites creation.
You should really just add another field may also be 2, by declaring whether it is declared as a parent or child.
Then you can also create mega menus without problems.
Of course... Why not. ;)Quote:
Steffen, will we have grid and list view in your template?
By you declare that in the css.Quote:
any sugestions how i can shrink the map when viewed for less than 600px?
Depending on how you adding the map in the template, this already works automatically.
Furthermore, i've added a few things. So you can control this manually in admin panel.
//Steffen
Steffen, i like that megamenu alot, performs well as responsivness, so, if you do not manage to find a solution to have it properly generated from the website, i will buy it anyway and implement it with static links like i've done in ilance script. beside the parent or child we still need to have an image upload for the category image as well. so an extra work.
since i'll buy it anyway, i can send it so you can take a look on how is done and maybe you get an ideea how to implement it if you like it and other users as well (in the end each of us can pay 5$ to that developer to use it).
Hi Petrache,
I think i'm going to make it by generating of page.
It must be made dependent changes in flynax script.
But I will put it as simple as possible for everyone.
So that everyone is able to take these changes quickly.
This should all be no problem.
//Steffen
Steffen,
I think that is the best way to go. I mean, it is up to everyone to put in whatever they want on their theme later one. I have been busy for now so I'll have a dig in today.
//Morgan
menu generated by the script from categories is preferable of corse if you manage to do it.
can you tell me if the bootstrap theme will improve olso 2 areas - one page account creation and one page submit ad or those will remain like they are, in multisteps? thanks
Can someone help I have been trying to figure out how to use the bootstrap carousel with the "add Content Box" feature in the admin panel. The only problem is that the bootstrap javascript is conflicting with the original flynax javascript can you tell me how to stop this pleas. Here is the link for the bootstrap carousel.
Anyone got any links to the stuff you have done so i can have a look, or are you building the themes on a local server. If you can show me stuff you have done please Private message me. Am really interested to see
Hello Kemoid and Chris
Kemoid of course bootstrap is realy simple. ;)
Chris at the time i bring flynax still in bootstrap and i am working on a local server.
All my changes are a small expense that must be operated as first.
Of course, everyone can embed bootstrap without core changes to the flynax script for test.
But that is only half the work.
Once i have completed the changes to the Flynax script, i will publish the first part here.
Also important is the downward compatibility to the normal flynax themes.
That's why it takes a bit.
Here some examples:
http://i39.tinypic.com/2eq6v5i.png
http://i43.tinypic.com/345mmhj.png
http://i39.tinypic.com/b4c2fm.png
But there is more...
Let yourself be surprised what all is possible.
Also suggestions i will be happy to consider, wherever possible any special.
Regards
Steffen
NICE. take your time to make it perfect.
Keep it up can't wait to see the finish product. When do you think it will be ready?
Hello Kemoid,
hmm.. when it is finished is a good question. ;)
I think 1 week i will present you a beta for testing.
Then we can make the "fine sanding" together.
Until we have the final version.
Perhaps the flynax team also give tips to improvements for this project. B)
//Steffen
That would be nice and especially if you get some help from Flynax.
Hi Guys,
Here is a short interim report.
The last two days I have made thoughts, how to improve many things.
First i set the page layout and leave it with the extra 3 column layout.
Thus arise in the layout 4 options + 2 -> Large Top (for Sliders or other Informations) and Large Bottom.
FULL TOP
_________________________________________
<- content ->
<- left sidebar -> <- content -> <- right sidebar ->
<- left sidebar -> <- content ->
<- content -> <- right sidebar ->
_________________________________________
FULL BOTTOM
Depending on which blocks are represented by their placement on a page - affects the layout of the page.
For blocks there is therefore a "new" setting -> Side-Placement
In the picture you see the following options.
http://i44.tinypic.com/256sbh3.png
Of course there was this before too. ;)
But there is now a second setting -> Content-Placement
This setting is responsible for the placement within the content area.
Also in this picture you see the following options.
http://i39.tinypic.com/546dqx.png
We now distinguish between layout and content area.
This gives us more design possibilities.
Other features are optional classes and ids, and the assign to a icon class.
The complete new creation page for blocks comes here.
http://i44.tinypic.com/17973a.png
As soon as i have some time i will present you a demo video to understanding this new features.
Best regards
Steffen
great flexibility. looking forword to the finished product.
Hope you find time soon we are very interested to see what you are working on. If you don't already have your own video capture software I would recommend Jing along with screencast.com/.
Hi Kemoid,
Thanks for the info with screencast.com.
Let me still operate. A video is coming tomorrow in the course of the day.
The short overview i have published so that you get a visual as a user.
Maybe you are still missing a few features?
Simply publish here...
When i do so on, i used the 6th Flynax version before the 5th comes out. LoL
Just kidding... ;)
Regards
Steffen