I use the cascade bootstrap plugin and like it very much. Now i need to add additional classes to the rows and columnes for styling it more precisely via css. I would like to add style or id -fields to the cascade plugin. I thought the simpliest way is subclassing the cascade plugin but I cant find any way for doing this and I dont find the right place in the docs. Maybe you can give me a hint or point me in the right direction.This is my first djangocms project, I moved from zope.
Any tip or help is appreciated!
Regards,
Klaus
The CSS files that need to be overwritten are in static/css for whatever framework (Bootstrap/Grid System 960) that you want to use. I suggest creating a custom file and including it after the vendor CSS files, leaving them as-is, and have yours overwrite theirs.
See their documentation. In case the link changes: http://djangocms-cascade.readthedocs.org/en/latest/tutorial-bs3.html
They maintain Bootstrap's typical classes for structures, you could probably include a theme from Bootswatch
Related
I am trying to increase the email template width. And I am trying to modify the email-style.php, but it seems no way to change. How can I change it?
Thanks a lot.
The most useful one to copy is emails/email-styles.php and there you'll find the width is defined in two places at 600px; #template-container and #template-body but there's also all the other styles. Anything that is not defined but exists in the email can be added to this file.
I use an email preview plugin so I can see the effect in a web inspector.
if you wanted to be really clever you could include an external css file and then use scss to integrate with the rest of your site styles - eg colours.
The easiest and most common approach to do is to create a folder in your theme called woocommerce/ and then copy the entire templates/ directory from your woocommerce plugin or github into that. This will override the functionality from the plugin.
Here you can find the hardcoded table width.
I'm working on a web application which is using Materialize as a front-end framework along with Kendo UI for the grid component.
I'm hitting problems in cases where both Kendo UI and Materialize have styles for the same element - for example they both override the styling on check boxes - this results in a broken layout due to the clash.
One option I realize is to pick either Materialize or Kendo UI and drop the other... however I would like to avoid this if possible as they in the most part have complemented each others weaknesses well.
If it was simply one element here or there putting specific overrides in would be an option however with the scale of the two frameworks this would be a maintenance nightmare as when one changed the overrides would possibly have to be refactored.
Are there any ways to solve this issue that I am missing?
One way to workaround such a clash is to build your MaterializeCSS to include only the parts you so need for your project.
For instance, if you do not need the buttons styling of MaterializeCSS, you could simply, via sass, compile the materialize.scss and cherry pick buttons out of the file.
If going down the path of building your custom .css of Materialize is a long short for you, you can try using materialize.khophi.co (Disclaimer: I built it).
Find more about how to customize your MaterializeCSS: http://materializecss.com/getting-started.html
I know it's usually suggested not to duplicate code, and you want to try steering away from overrides, but would it be possible to find the section of css you like (i.e. select box from materialize) and copy that in to a new custom css file, renaming the selector so you can use it seperately from Materialize/Kendo UI?
You can manually edit the stylesheet of eighter party. Take the non-minified CSS, and prepend every base path with a short prefix:
.card {
....
}
becomes
.mat.card {
....
}
That way, for every materialize style, you use .mat before anything. Or, if you mainly use materialize, do the same thing for Kendo UI.
This is a lot of pain, but would solve your issue.
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.
How can I add further col-* classes.
I want to add col-xl-* but it's very time consuming adding every class manually.
If i use http://getbootstrap.com/customize/ I just can edit the lg but i will loose a screen width so I want to add another one. Is there a easy way to do that?
Regards
The "easiest" way to do it is use the .LESS source files. Besides that no.
The files you should look at are: grid.less, variables.less and mixins.less. I wouldn't edit those actual files though, because of updates to Bootstrap. I would start your own custom.less file and then #import that into the bootstrap.less file. That way it will generate your CSS with the rest of the bootstrap CSS.
This article on SmashingMagazine is an excellent example and where I got the idea from: Customizing Bootstrap
For some reason though, the article is currently not there or broken. I reported this to them, so hopefully it comes back soon.
Does anyone know how to remove markup from the theme search box? It produces a lot of extra DIVs and CSS id's.
Thanks, Mark.
It is very easy thing to do.
First, search your theme (/sites/all/themes/yourtheme). Do you have search-block-form.tpl.php? If so, you can edit it according to your own fashion.
If you don't have search-block-form.tpl.php, you can create it. Follow the very simple instruction in: http://www.bananatools.com/drupal/customizing-search-block-form.html to create it and afterwards change it as you like.
Assuming you installed a custom theme, go to /sites/all/themes/yourtheme and edit the .tpl.php and .css files. If you didn't install a custom theme, you can't re-theme it without making a huge mess.