http://i.imgur.com/FSueo.png
I want to create a grid system like the one in picture in drupal 7. Can anyone point me in the right direction?
I first tried using Zen, but I could not figure out how to use SASS to make this grid system.
Then, I checked out the panels module, but that also wont help; it only makes more columns, but I want to make more rows.
I am very comfortable with CSS and php so if you have suggestions regarding modifying a certain CSS or php file, its more than enough. Just let me know which file to modify, and what to look for...
Thanks!
Have you tried something like Omega? If you know CSS then with the regions it provides you should be able to achieve that structure.
Omega is definitely perfect for this grid use case. Try it out!
If you'd like to stick with Zen though, it is worth noting that using SASS is not required to use Zen - from the Zen project page:
If you're not ready for Sass yet, Zen still includes a full set of well-documented CSS files. Sass integration adds zero overhead, so if you simply ignore all of Zen's Sass, your site performance isn’t penalized. No worries!
Related
I'm working with jsps in my workplace. Pages were built using bootstrap2. Though new versions of bootstrap and other frameworks came out, I'm stuck with bootstrap2 as we have hundreds of pages using it.
How do I make the style configurable, in the sense, the configuration should give me the freedom to choose the framework, etc. So going forward I can choose what to be used for new pages
I can relate to your problem as this is the case with many "old" products in the market. They could be built with jQuery, plain js or other tools that considered "old" in today's market.
I assume you could not refactor your whole app as you are saying there hundreds of pages. Some options to consider and to set pros and cons for each with management and product teams.
First, you need to decide your technology you want to use and how.
You can use small bits of react/vue.js/other to inject into your existing pages
you can create full pages from newer technologies and slowly replace older pages in the app one by one
start a full rewrite of the app (hard to sell to management)
I did all three options in my projects but you need to decide with your own team.
Now I'll elaborate on what you can do for each of the options:
I use react so can't recommend other libraries, but this is what I used:
https://github.com/rstacruz/remount
You build react components and then you can use them as HTML snippets in your existing code.
You create another app in whatever new language you want and start building out exiting pages one by one. With each new page, you build you link the old app to them.
This is the easiest one to start but the longest one to achieve. But straightforward of what you need to do.
To make the styles configurable, you can add another stlye.css file underneath the bootstrap2 css file. In that style.css file(name it anything you want, can be bootstrap2_override.css) you can add any styles as well as override bootstrap2's framework styles.
The downside to this is that you are now adding another css file with more CSS just to override bootstrap2 styles.
I really want to minimize the work of ever changing look n feel changes in my website/portal. The changes are sometimes related to only CSS which sometimes wants me to update the name of the classes and most of the times, only internal styles are updated (only in this case changes are transparent). But the real torture comes in when I come to know that there are changes in HTML structure of new style guide and after whole application/widgets need to be updated and aligned according to the new style guide.
Technologies used in the application are: AngularJS, Bootstrap 3
Now, please suggest what would be the best possible way to minimize these style guide changes? Can AngularJS helps me in that?
Thanks,
Jaffy
Is not very clear which are your requirements or why your style guide changes. But is not something should try to fix using Angular or Javascript directly. The classes name shouldn't change pretty much never.. except when your layout changes, otherwise the only change should be on the styles.
What you need is 2 things:
If you use Foundation or Bootstrap, you should use the SASS/LESS
files of them and override the styles , that way if the ui
requirements changes for instance: background-color, or
border-radius for certain components, you only need to go to the
proper .scss or .less file and change the variable value
You can Import the sass version using
bower install bootstrap-sass-official --save
Then configure your grunt/gulp or any other task-builder to build sass for instance, and you can override the bootstrap variables.
A convention for naming your components, and knowledge of OOCSS (Object Oriented CSS) i recommend you to use BEM, is very easy to read once you understand the convention and helps a lot with possible css specificity issues.
I hope this helps, otherwise please update your answer more, to understand where are you standing.
So, I must be missing something.
I want to create a specific template for a Basic Page with Drupal 7. I've read about doing something like creating a file called page—mypagename.tpl.php, and putting it in the theme folder but this has not worked for me.
Can anyone provide a quick walk through for this?
Drupal makes my head hurt. :\
Thank you.
Make sure to clear your cache in Drupal after major theme changes which include adding files to the theme as above, otherwise your theme may not pick up the new files.
Last I checked, the Devel module was still buggy for D7, but if it has come along then I highly recommend using this along with the devel_themer module, it has a tool that will tell you what exactly to name your theme files for different elements (pages, nodes, fields, etc).
I know that it's possible to add a filter row UNDER the column title because I've seen it done with Coolite. But since I'm a total newbie with Sencha (ExtJS), I have trouble finding how to do it with the ExtJS.grid.GridPanel directly in the script. Would you point me in the right direction with some samples please ?
If possible, I would like to do so without plugins, but if there's one out there doing great and easy to use, I could change my mind.
Thanks !
Here you have a link to the GridHeaderFilters Plugin. There you have an easy example of how to use it.
And regarding your comment about trying to do this without a plugin I recommend you not to do it. Because this might seem like a easy code to write but I believe it is not. And that is why this plugin has hundreds of lines. I think this is not a plugin full of features that you won't use, this plugin just does the filtering the way you need it.
And as a final note, if you are expecting the exact same behavior as in this coolite example I think you are out of luck. Because if you get the javascript source code of that example and run it through jsbeautifier you will see that this example is not using any ExtJS plugin and is not a easy code as is using a really complex template for the headers.
I am working on DNN 4.09.03. I want to modify the look and feel of a links module. I know how to change the outer looks with containers, but I want achieve a mouseover effect for the links itself.
Looking closely it appears that the links are placed into a table datacell. I want to set the background of that cell to and image, and on mouseover swap it for another image. Can this be done with skinning?
If not, I need some assistance in extending/customising the links module source. I need to know how to set up the development environment to do this first. I have the DotNetNuke solution (with source code) working in VS2008. How do I integrate the source of the links module, so i can customise it (and rename - maybe mylinks)?
I don't think you can do this by containers. If you can do it by any chance, I bet doing it by modifying the code is easier. You have to remember that you might have problems upgrading the links module in future if you modify it.
Just add the Links module to DNN VS2008 solution as a web application. You can do whatever change you won't to do in it. And then use a nant script to just package it and copy to DNN/Install/Modules folder. And then hit the DNN installation URL:
http://<dnn_url>/Install/Install.aspx?mode=installresources
Alternatively you can write some post-build commands in VS2008 it self to copy stuff. Have a look at the existing modules and where each different part files of a module (.ascx, .dnn, .sqldataprovider) is stored in DNN after installation.
This is possible with some creative CSS and maybe even a little jQuery - i did a lot of this sort of thing for the Blog module without having to touch the core module -