Theme development in Liferay - css

I'm trying to make a theme for Liferay 6.2 and I have some misunderstandings.
I create new project, choose theme, then click next and choose velocity and _styled responsively. But I want to get a standart theme which I can deploy and nothing change in comparison with default theme. I thought I got the point and after that I should copy overriden .css files in _diffs folder. But I don't achieve that. I attached screenshot with my result and I can't understand why I don't have default theme instead. Also I understand that it may be very dumb question but I hope someone would explain it briefly to me. Thanks in advance.

You should use the classic theme as base.
Something like:
property name="theme.parent" value="classic"
in your build.xml will build your project with the theme that comes with LR by default (the classic one).

Victor already gave the correct answer. If you're interested in the background: _styled is a theme that basically provides the basics for your own theme but doesn't make any assumption on its appearance. If you really want to build your own theme, this is the preferred one to start from. If you only want to tweak a few things from the classic theme, start with classic (as Victor says).
Note that classic is not meant to be extended (though it works) - contrary to the documentation, the css/custom.css file in classic theme is not empty for this reason. This means that you'll need to adopt the instructions for creating a theme and start with classic's own custom.css file.

Related

New to Drupal 7: Trying to figure out CSS

I inherited an already built Drupal 7 site. I have been able to figure out many things. But I am unclear on the CSS. A found a folder full of long-named CSS files but the code is all minified and hard to read. The previous developer had to be using some tools or services to alter and change the code in a more readable way. Does any know what the deal is ?
Also, I cant seem to find any way inside Drupal to enter CSS. I do not even see any classes or ID assigned to the blocks, views, nodes, or fields. So I have no clue how they were able to customize this site at all even though they obviously did. It uses Bootstrap 3 as a theme. Can anyone help explain how this works?
I will try to figure out the essence of the informations you given.
First: You have a Drupal 7 installation with compressed css files based on Bootstrap. That sounds the theme use less or sass precompiler for the theme css and you have the production (builded) instance of the project. Without the uncompressed less/sass/scss files it will be hard to edit the css. if you have no way to get the source files, the best way you can try is to add a extra css file and write you own css in it.
Second: Drupal strictly separates the code from the administration interface. Your PHP, HTML, CSS and other codes (except the WYSIWYG output) should not be entered via the administration interface. That's the best practice way. But anyway, there is a couple of modules that allows to write code inside the Drupal backend like this https://www.drupal.org/project/extra_css_js
Third: As information for you, Drupal 7s End of life is on November 28, 2022 so the best and recommanded way for you is: Freeze the Drupal 7s Instance as is (only Sercurity Updates and Hotfixes) and relaunch the Project with Drupal 9.
Drupal theme css files are mostly located in theme folder like "theme folder/css/style.css". As above mentioned, it might be used css minify tool or module for theme performance aspects. If it is created by drupal tools/module then once cache clear it will delete automatically and regenerate with new one with updated new css code on after page visit. You can also add custom css file by hook alter.

Will "Hello Elementor" automatically convert SCSS to CSS

I've just started using the WordPress page builder "Elementor" and have decided to move from "Genesis" to their own theme called "Hello Elementor". However, their theme uses SCSS and GruntJS.
On their documentation, they've included a custom.scss for all the custom styling. But when you add anything to this via WordPress, nothing happens. I know I could download the theme and use Visual Studio Code to make changes and use a sass compiler to automatically compile this for me, but it would require me to constantly upload files via FTP. Ideally, I would like to stay away from this.
Is there something I am missing? Or something I could do for WordPress to automatically compile this for me?
Edit:
If anyone has any recommendations of other themes to use with Elementor, I would really appreciate it.
They removed this option in Hello Elementor. You can no longer integrate custom scss. And I don't know since which version it's not present anymore, considering that I've tried the latest two ones and none of them seemed to accept the scss custom file.
However, you can check the answer they gave me a few days ago on the Hello Elementor GitHub page, if you want.
https://github.com/elementor/hello-theme/issues/85

What is the best way to implement a theme / template in meteor or angular-meteor

I've been having trouble implementing templates bought in themeforest in a meteor app.
I'm wondering, what would the best way to implement a template into a meteor app.
Two ways that I think of right now are:
(Tedious way)
Place javascript in Compatibility folder and try to name them in specific alphabetic order in order to get them to work properly.
Place css in client/lib folder and try to name them in specific alphabetic order in order to get them to work properly.
Place fonts and images in the public folder.
The second way (I haven't tested it yet) is to place the template files in the public folder and just link them manually (the old/non-meteor way) in the index.html file.
Now I'm not sure if these are the correct ways to do this and I would like some information regarding this issue.
Thanks!
I've done this myself with a themeforest theme.
Put the theme's css file under /client - it doesn't need to be in /public
Use the class names your theme uses in your templates. Typically a theme will have 3x what you really need so this ends up being much less work than it might seem. If your theme is built on bootstrap then it's even easier.
My theme used fontello a lot for icons, I had to recreate the folder hierarchy under client/fonts and then make sure the cross-references were correct.
Typically themeforest themes don't use js that much, I completely ignored all the js that came with my theme and created what I really needed in Meteor.

Events manager - child theme not working

I am trying to make changes to plugins/events-manager/templates/forms/event/bookings.php via my child theme. When I make changes to the file directly in the plugin, it works well, but I know the way to go is to make changes at the child theme level so this is what i have done:
I added the edited bookings.php to twentytwelve-child/plugins/events-manager/templates/forms/event/bookings.php but for some reasons the changes are not applied.
I have also tried to add the edited bookings.php to twentytwelve-child/events-manager/templates/forms/event/bookings.php but it is not working either.
I would appreciate if someone could help me figure this out (screenshots below). FYI - I am not a developer, so please try not to be too technical in your answers.
Many thanks,
Yvan
It would be nice if developers could simply override a specific file within a plugin from within their theme, but I'm pretty sure WP doesn't work that way (At least not for overriding plugins. Theme files? Yes. Plugins? No).
If the plugin developer was nice they will have given you some override capabilities like using action hooks, filters, or including their function as static within a class.
From the looks of the events-manager plugin file there are three such action hooks available:
do_action('em_events_admin_bookings_header', $EM_Event);
do_action('em_event_edit_ticket_td', $EM_Ticket);
do_action('em_events_admin_bookings_footer', $EM_Event);
You will either need to hook into these actions to make your adjustments (highly recommended), or duplicate the plugin, rename it, and edit it manually (which means you will need to duplicate these edits every time you upgrade... YUCK!)
EDIT after further researching the events-manager plugin:
While WP doesn't provide this template override functionality, it looks like the plugin does. However after some digging in the documentation I noticed that this functionality doesn't specify weather it supports child themes. Try placing the template override within twentytwelve instead of twentytwelve-child. If that works, then maybe you could move that folder back into twentytwelve-child and create a symlink within twentytwelve to the real folder in twentytwelve-child (sort of tricking the plugin). Doing it this way means you have to recreate the symlink each time you update twentytwelve, but the trade off is that you can now override templates and won't loose your changes if you update twentytwelve (just the symlink).
The problem is your file path:
plugins/events-manager/templates/forms/event/bookings.php
should be
plugins/events-manager/forms/event/bookings.php
If you have issues with EM we monitor the free forums here (I stumbled on this by coincidence) - https://wordpress.org/support/plugin/events-manager
also #StevenLeimberg, thank for chipping in! we do support child themes it was just wrong directory structure.

Advice on SAFELY modifying / customizing Header on a Wordpress theme

I just started using Wordpress 3.0 to get a simple blog up and going. For now I am working with the default theme "Twenty Ten".
I want to make a simple change:
I'd like to modify the layout of the bloginfo( 'name' ), bloginfo( 'description' ), and php header_image() that appears at the top of the blog.
So, under Appearance, Editor, I select Header.php and I can see how this is being rendered.
It appears I can just modify this to my liking and I am good to go. (Correct?)
If so, my question is: is it considered proper practice to modify the html in header.php?
It seems to me that this is a bit dangerous, for example when it comes time to upgrade that same theme. How do I know which php files I have applied customizations to? Say I modify 6 php files, then an upgrade of the theme comes along...how does one handle re-applying these changes to the upgraded theme?
Is it a total "do over"?
Is there a better way to handle this scenario?
Maybe some themes are more powerful than others and can handle this type of customization more flexibly, and I should be searching for such a theme? Or, is there a reasonably proper and safe way to do this by directly editing the php files?
Child theme, child theme, child theme. Create a new folder in themes (name it whatever you want. Go crazy. As long as you don't name it twentyten). Create a style.css file in that directory and copy the whole style.css file from twentyten into it. Then, change the theme name in the css headers and add this line after the tags:
Template: twentyten
Then copy the header.php file over to another file in your directory, and edit to your heart's content. If twentyten ever gets updated, you'll get the benefit of those updates (unless they're in css or the header) without losing your changes.
Yes, you can edit the theme to your liking. I think it's common practice (however, I've always just created my own themes from scratch). Just give credit where it's due and don't pass it off as your own original work.
To avoid over-writing your customized theme when an upgrade comes out, you could save the customized one to a different folder in the themes directory with a different name, like Twenty Ten Customized. You can then copy or re-do the changes in the upgraded theme if you think the upgrades are worth the trouble. There's no rule that says you have to have the latest version of the theme, after all.
There might be other themes that allow a high degree of customization without editing the php, but most of the time you'd have to edit the php I'd think. (but I'm no pro theme developer.)
I would do as Benny suggested and rename the theme so that it isn't overwritten when you upgrade Wordpress.
I would not worry about updates to the actual theme because I don't think those ever really happen. The last Wordpress default theme was Kubrick and, to my knowledge, it rarely was updated and most updates were minor and went unnoticed by most users. If you go about customizing your theme, I don't think Wordpress is going to update the Twenty Ten theme to the point where you would ever wish that you hadn't edited the source because you wanted to upgrade to the new default theme.
If you don't want to actually edit any of the theme files, check out something like Thesis that allows you to customize most things from the admin.
Note: I'm not aware of a free theme that offers a lot of customization options through the admin panel, but there might be something if you check around for a while.
If I really had to stop automatic updates on my Wordpress theme, I'd do exactly what Kris + Chris Schmitz suggested (i.e. rename the theme differently). Modify header information in the style.css file in your theme's root to do this.
Personally, however, if the theme already works for me out of the box, I think I'd most probably already be fine with that. My website's running, the theme's working, and updating my theme may just break my site in ways I don't know.
I'd probably update it only for major security updates, but I'd probably be reading a changelog for that. But if I was doing that, I'd know what files exactly were modified, and I can just manually do it myself. Sounds like a lot of work, but better than my site buckling on me by some unknown cause.
If you do as Benny suggests and create a renamed copy of the default theme, you can use a free diff tool to compare the directories when an upgrade comes out. I'd use Meld ( http://meld.sourceforge.net/ ) to do a three-way directory comparison (Original theme, upgraded theme, modified copy) to determine if any changes have been made that impact the parts you changed, as well as to merge the upgrade changes into your modified files.

Resources