⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠

  •     

profile picture

How to Change list/view Style (CSS)?



FilloG
  • profile picture
  • Member

Posted 29 March 2013 - 03:06 AM

Hello everyone, I'm a complete newbie on grocery-crud and thus I came across a couple of questions. I searched the forum first, but I wasn't able to find an appropriate thread on the matter.

 

So, on with the questions:

 

1-I think the list (table) control is great and provides alot of possibilities, however I would like to customize it to fit on my website's style. How do I do that? I've found a "flexigrid.css" on the themes folder and a "datagrid.css", so would it be enough to change that huge css file? How do you pros on Grocery-crud do it?

 

2-I would also like to know how I can change the style for the detail views (add item, edit item, etc.)?

 

You see, I would be happy with changing colors and font styles (not planning on changing cell sizes or div dimensions) on the list. On the views I would like to do a couple more changes.

 

Anyway after looking at over 1000 lines worth of css file, I figured that there must a be a more efficient way of solving this and decided to ask you guys.

 

So, any ideas?

 

I thank you advance for the feedback provided and for the time spent with this!


davidoster
  • profile picture
  • Member

Posted 31 March 2013 - 08:35 AM

1.

- datagrid uses the default themeroller from jquery ui and you can use it to produce a new css and just put it inside the theme's folder.

  If the css has a different name you need to update also the views the new css filename.

- for flexigrid I can't really tell you, I just change the css by hand! May be you will be lucky to find something on the internet.

 

On every theme, under views folder, assets/grocery_crud/themes/xyztheme/views you will find the add,edit,list_template files that contain all the view code.

On top they have the css they use which is basically the css of the theme as described in 1.


FilloG
  • profile picture
  • Member

Posted 02 April 2013 - 12:25 PM

Humm, thanks I'll look in to your tips... Being customization such a big part of webdesign, I thought maybe someone had invented a more clever way to handle this :)


davidoster
  • profile picture
  • Member

Posted 03 April 2013 - 07:18 AM

Themeing is already a clever way of doing web UI!

Having css (and js) to manipulate the final output gives immense power to web designers!

 

Themeing changes the looks and feel in a snap on the same html controls of a page!

If this isn't clever, what is?

 

You just need to know the ways!

 

What you might mean more clever could be the part of templating the html output!

CodeIgniter and hence GroceryCRUD is template agnostic and doesn't mind at all if you use or not a template engine.

If you do use it supports it, if you don't use it doesn't complain!

CI 2.x has a template parser class library that you can use if you want, http://ellislab.com/codeigniter/user-guide/libraries/parser.html

 

 

CI 3 will have a template engine class that probably will be more advanced!


FilloG
  • profile picture
  • Member

Posted 05 April 2013 - 01:56 AM

Sorry if my comment sounded harsh, it wasn't meant to be.

 

What I wanted to say was:

 

I'm new to codeIgniter/groceryCRUD, so I'm trying to figure my way around the customization part of both frameworks, CI is pretty straightforward, groceryCRUD requires a bit more learning, but I really think it's worth it.

 

Now while trying to do the task that motivated this thread, I admit I got bit scared... I look at this +1000 lines css file for grocey's flexigrid theme and my jaw fell...I haven't seen nothing like that since the 'old days of sharepoint 2007...of course that the classes that count are the ones called on each template (list/view), but it's still scary for a newbie!

 

While the themeroller seems like a very reasonable option (I'll certainly have to give it a go on the datagrid theme), doing a manual replace of all the .css seems a bit backwards for a tool that is so easy and so effective to use. You get a full CRUD with "extras" with like 5 min worth of code with grocery, on my book thats really good!

 

So, I guess I was expecting that being grocery such a powerfull tool, maybe there was a more...streamlined way to customize the flexigrid theme, or even a "vanilla" version of both templates(list, view) with some (or all) of the javascript functionality.

 

If I understood your suggestions correctly, the current scenario on the flexigrid leaves only two courses of action available: if one is going for full customization, we can "almost" trash the full css set and make some new ones from scratch (could be faster than browsing the css file?), on the other hand if one only wishes to do minimal costumization (basic stuff such as colours and fonts for instance), we'll have to identify and replace the required css classes. I'm thinking correctly? I'm sorry if this sounds a bit daft, but I'm trying to get a real take on the complexities of this process.

 

Oh, also, I'm interpreting the usage of both themes (datagrid/flexigrid) by the "old" VB definition: datagrid for "non-editable"/recordset bound data, flexigrid for all sorts of "editable" data (recordset bound and inputed on the table), is this somewhat correct? Or is it really just a matter of look and feel?


davidoster
  • profile picture
  • Member

Posted 05 April 2013 - 17:00 PM

 if one is going for full customization, we can "almost" trash the full css set and make some new ones from scratch (could be faster than browsing the css file?)

 

true. it might be faster, it might not!!! I wouldn't know cause it depends on the case!

 

if one only wishes to do minimal costumization (basic stuff such as colours and fonts for instance), we'll have to identify and replace the required css classes

 

true again! 

 

Flexigrid uses ajax so it is faster on big databases but doesn't have the power of datagrid (which

doesn't have ajax so much slower on big databases) but you can customize it much more than flexigrid.

For me this is the only difference between the two.


FilloG
  • profile picture
  • Member

Posted 06 April 2013 - 02:55 AM

Ahh! It makes some sense now! Thanks for the help, I'll try out these options then ;)


geo
  • profile picture
  • Member

Posted 01 March 2018 - 04:15 AM

I have been away from CI/GC and web dev in general for some time. So despite the fact that I used to do a considerable amount of this stuff, I feel like a noob all over again. So please be kind. 

 

I want to re-awaken this topic since the last discussion on it is pretty old (2013) and I have been looking for a way to make my add/edit pages more user friendly with a custom page layout. I haven't found any posts, blogs, etc. more helpful than this one. Can someone point me in the right direction? 

 

:lol: