How can I remove portlets in edit mode with Plone 4? - plone

I'm used to achieve this under Plone 3 by override base_edit.cpt file under portal_skin and make columns empty:
<metal:head fill-slot="column_one_slot"></metal:head>
<metal:head fill-slot="column_two_slot"></metal:head>
I have tried to achieve this with Plone4 and the result is quite weird: I have two empty columns and the edit mode doesn't stretch (stay in the middle of the page).

In Plone 4 you can disable the columns by setting a couple variables on the request:
<metal:override fill-slot="top_slot"
tal:define="disable_column_one python:request.set('disable_plone.leftcolumn',1);
disable_column_two python:request.set('disable_plone.rightcolumn',1);"/>

I think that's because plone 3 used tables as core page structure while plone 4 uses sunburst that uses Deco GS.
Probably the fastest way (not THE way :P) is to force the width of the columns trough CSS (you can push CSS using style_slot into base_edit.cpt).
Anyway, I see in
./plonetheme.sunburst-1.0.3-py2.6.egg/plonetheme/sunburst/skins/sunburst_templates/main_template.pt
that columns class/width should be calculated by getColumnsClass of sunburst_view. Probably is a bit buggy (I didn't debug it though).
HTH

Related

How to hide order index of variations in Patternlab using Handlebars?

I am using indexes to order Patterns. As recommended I am putting some spaces between the pattern indexes in case i would like to reorder some later.
I am naming the files like shown in https://patternlab.io/docs/reorganizing-patterns/.
It does work. As you can see in the next screenshot, the index is also shown in the rendered page. Is there a way to hide it or am I doing something wrong? Is there maybe a different approach using Handlebars (.hbs) files?
The easiest would be to migrate to the newest patternlab version and use the „order“ property introduced to get set via .md files, compare to the new content on the page you mentioned in your post.

What is the best way to customize the design/skin of mediawiki?

I'm new to mediawiki and want to make my own skin for a mediawiki. For example I have a button (div.button-field > input) and I want to give it height: 100%. I know you can put it in a custom.css like
div.button-field > input {height: 100%;}
But if I do it for every element I want to customize the .css gets very long. The other thing, if I want only to customize a specific button which is nested like "div > div.container > form > div > div.button-field > input" and I add a div or remove a div, then it wont work anymore and I have to adjust the "path". So what would be the right way todo it? Or is the .css the best way todo it?
With kind regards
Oli
The answers depend on how much you want to change.
The first easiest path is to find an existing skin, see on MediaWiki.org.
You can configure some elements like the logo, the favicon or the sidebar, and you can change every text message of the interface.
Then, you can customise, as a logged-in administrator, the CSS rules by modifying the page MediaWiki:Common.css (example on English Wikipedia), or possibly MediaWiki:YourSkinName.css for skin-specific rules (for example MediaWiki:Vector.css to modify only the skin Vector; example on English Wikipedia).
You can also modify add JavaScript features by modifying MediaWiki:Common.js (example on English Wikipedia), or MediaWiki:YourSkinName.js for skin-specific rules (for example MediaWiki:Vector.js to modify only the skin Vector; the page does not exist on the English Wikipedia).
This kind of modification is recommended because it will be kept during MediaWiki updates, although minor adaptations could be needed on the long term.
If you want heavier changes, you can copy an existing skin, rename it, and change the PHP code, for instance by moving or deleting entire blocks. Prefer copying a well-supported skin like Vector or Monobook to be sure it is compatible with most MediaWiki extensions.
But it will take some or lot of work during MediaWiki updates (depends on the quantity of changes), and if you cannot do this work the risk is either you custom skin breaks or you will stay with an old MediaWiki version (which is not recommended for security reasons).
Also, if you choose this path, be warn not to break the structure expected by the VisualEditor if you want it continues to work.
There is a tutorial on MediaWiki.org to adapt the skinning from easiest ways to heaviest, see Manual:Skinning Part 1 and next pages.

Bootstrap with DataTable integration design issue PHP

I'm using latest version of twitter bootstrap v.3.1.1 (http://getbootstrap.com/) and integrating the same with dataTables (https://datatables.net/blog/Twitter_Bootstrap_2)
The files and versions are as follows:
bootstrap.css - v.3.1.1
bootstrap.min.js - v.3.1.1
jquery.dataTables.js - v.1.9.4
DT_bootstrap.js - Not given
If I use the above file, the pagination, search and sorting are working fine. But the design is shuffled (i.e search box, page numbers etc.. are looking ugly without any style applied).
I can over-come the design issues if I change the bootstrap.css-v.3.1.1 to bootstrap.min.css-v.2.3.2 but my header, footer and other designs are getting collapsed.
When I analyzed both the css i.e. 3.1.1 and 2.3.2 - I came to know that many class files are missing in 3.1.1.
The one such missing class files are .span6(and still there are lot more) from my knowledge.
Now, How to fix the design issue or where shall I find the updated one.
Have anyone came across this issue?
Here a complete example in the official documentation of how to use Datatables with Bootstrap 3 :
https://editor.datatables.net/release/DataTables/extras/Editor/examples/bootstrap.html

How to make a custom layout in a subtheme from omega 4 Drupal show in appearance settings?

I've started working with the omega 4 theme in drupal, switching from omega 3. I've created a subtheme succesfully, and according to the documentation I want to make my own layout. I've copied over the "Simple" layout from omega to my subtheme folder, as well as the required css and sass files. I've renamed all instances of Simple to Grid (my layout name).
That all seems fine, but when I go into my drupal installation, appearance -> settings -> layouts I still only see the four main omega layouts (simple, divine, hero, off canvas). It claims to show any layout from omega or installed subthemes. Why won't my layout show up for selection?
Additionally: Is it possible to use a different layout for the front page than the rest of the site?
I had the same problem myself and it turned out that in MY.layout.inc I forgot to changhe the value
template = simple-layout
with
template = MY-layout
pamatt: BONUS! I was having the same problem. This fixes it.
A little more detail:
If you follow the directions here it's possible you might miss this explicit reference. I'm updating that page now.
Go to your
themename/layouts/layoutname/layoutname.layout.inc
file (of course, substitute "themename" and "layoutname" with the appropriate names) and look for a line that starts with "template" i.e.,
template = simple-layout
change "simple-layout" to your whatever you named your tpl file, minus the ".tpl.php" part.
I'm coming back to this question since after a long absense of coding I came back to it this weekend and had the exact same problem! Above answers are correct.
Another issue I had was that I had to clear the cache from Drupal -> Configuration -> Performance and not just my browser cache. After clearing the cache it showed up.

How can I modify a CSS file programmatically?

I have a legacy application that I needed to implement a configuration page for to change text colors, fonts, etc.
This applications output is also replicated with a PHP web application, where the fonts, colors, etc. are configured in a style sheet.
I've not worked with CSS previously.
Is there a programatic way to modify the CSS and save it without resorting to string parsing or regex?
The application is VB6, but I could write a .net tool that would do the css manipulation if that was the only way.
You don't need to edit the existing one. You could have a new one that overrides the other -- you include this one after the other in your HTML. That's what the "Cascading" means.
It looks like someone's already done a VB.NET CSS parser which is F/OSS, so you could probably adapt it to your needs if you're comfortable with the license.
http://vbcssparser.sourceforge.net/
One hack is to create a PHP script that all output is passed through, which then replaces certain parts of CSS with configurable alternatives. If you use .htaccess you can make all output go through the script.
the best way i can think of solving this problem is creating an application that will get some values ( through the URL query ) and generate the appropriate css output based on a css templates
Check this out, it uses ASP.NET and C#.
In my work with the IE control (shadocvw.dll), it has an interesting ability to let you easily manage the CSS of a page and show the effects of modified CSS on a page in realtime. I've never dealt with the details of such implementations myself, but I recommend that as a possible solution worth looking at. Seeing as pretty much everyone is on IE 6 or later nowadays, you can skip the explanations about handling those who only have IE 5,4,3 or 2 installed.
Maybe the problem's solution, which is most simple for the programmer and a user is to edit css via html form, maybe. I suppose, to create css-file, which would be "default" or "standart" for this application, and just to read it, for example, by perl script, edit in html and to write it down. Here is just the simple example.
In css-file we have string like:
border-color: #008a77;
we have to to read this string, split it up, and send to a file, which will write it down. Get something like this in Perl:
tr/ / /s;
($vari, $value) = split(/:/, _$);
# # While you read file, you can just at the time to put this into html form
echo($vari.":<input type = text name = ".$vari." value = ".$value.">");
And here it is, you've got just simple html-form-data, you just shoul overwrite your css-file with new data like this:
...
print $vari[i].": ".$value.";\n";
...
and voila - you've got programmatical way of changing css. Ofcourse, you have to make it more universal, and more close to your particular problem.
Depending on how technically oriented your CSS editors are going to be, you could do it very simply by loading the whole thing up into a TextEdit field to let them edit it - then write it back to the file.
Parsing and creating an interface for all the possibilities of CSS would be an astronomical pain. :-)

Resources