Currently experiencing an irritating quirk of Drupal views where it will change the provided css class name.
For example, if I add the class container_12 it will be rendered as container-12.
Any idea how to turn this off?
Thanks.
Views doest it because of CSS codeing standards from Drupal. You can change the behavior with phptemplate_preprocess_views_view(&$vars). Here is an example.
function phptemplate_preprocess_views_view(&$vars) {
$css_class = $view->display_handler->get_option('css_class');
if (!empty($css_class)) {
$vars['classes_array'][] = $vars['css_class'];
}
}
Also, I just can advise you to change you css, if you use a framework you can easily find a base theme with you framework on drupal.org.
Related
I'm trying to inject a CSS file to a third party iframe that I need to change the styling.
I thought of using
ngOnInit() {
...
this.myIframe.nativeElement.document.head.appendChild('style.css')
}
but it is not working for some reason beyond my grasp.
Any help will be appreciated.
Cheers
This workaround will work if your Iframe is not from a different domain. You will get a cross-browser error.
Template
<iframe #myIframe></iframe>
Component
#ViewChild('myIframe') public myIframe;
..........
ngAfterViewInit() {
const iframDoc = this.myIframe.nativeElement.contentWindow.document;
.....
iframDoc.head.appendChild('style.css');
}
.....
It isn't possible to inject code like I thought it was so I ended up overriding the CSS when the SCSS file that controlled that page was compiled.
In some occasions, I had to use the whole inheritance chain to get a field to behave the way it was required.
Thank you for your input #SuhelKhan
I'm themeing a drupal site using display suite - all current versions. As you may realise, in drupal there are many ways to achieve an equivalent result. I have created a number of custom layouts in display suite. Now I want to add jquery to some of those layouts so that the jquery only loads when those layouts are displayed (as opposed to making the same jquery file load on every page in the theme).
Sure I can use something like drupal_add_js() or $form#attached etc. But what's wrong with adding a tag in my template file? What is the 'Display Suite method' for doing this - I have to believe they (Display Suite team) have already thought of this...
Thanks.
One way to accomplish this is through hook_ds_pre_render_alter(), e.g:
/**
* Implements hook_ds_pre_render_alter();
* Add custom JavaScript.
*/
function MYMODULE_ds_pre_render_alter(&$layout_render_array, $context, &$vars) {
if($vars['type'] === 'MY_NODE_TYPE' && $vars['view_mode'] === 'full') {
drupal_add_js(drupal_get_path('module', 'MYMODULE') . '/js/my_js_file.js');
}
}
Adding the JavaScript through #attached would be preferable as it seems cleaner and is more in line with the approach taken in Drupal 8, however I couldn't find a way to do this. Display Suite seems to override hook_node_view() and adding #attached in to an implementation of ds_pre_render_alter() didn't get me anywhere. Declaring a .js file in a custom DS .inc layout file is also unfortunately not supported.
Implementing drupal_add_js() directly in a .tpl.php template file might not work as expected and seems to not be 'best practice' (see https://drupal.stackexchange.com/questions/20520/drupal-add-js-in-html-template-file).
Interestingly though in Drupal 8 drupal_add_js() is being removed entirely in favour of #attached and it will be possible to add JavaScript directly in templates, see https://www.drupal.org/theme-guide/8/assets).
I am used to develop simple, e.g. leave away whatever you don't need. This is why I have a bit a hard time with projects like joomla, because they ship with a lot of things I don't know what it should be good for.
Someone knows why these classes are added to the elements?
are they of any use to me?
The cms doesn't use them. Those are just helper classes, there for the benefit of template designers and site builders.
Say you want to highlight a particular menu item by giving it a different color. You could do this:
.item-435 a {color: red} /* turn that particular menu item red */
As #Mark Simpson said, they're not actually used.
If you wish to remove them, go to line 25 of modules/mod_menu/tmpl/default.php and you will find this:
$class = 'item-'.$item->id;
which you can simply change to:
$class = '';
Do note that if you do edit this file, it may get overridden in a Joomla update and thus your changes will be lost. So instead of editing this core file, make a template override
i have got the following problem:
I want to create a new Liferay Theme and in this Theme there are Portlets in the Header, how can i Design these Portlets properly? My try was to deploy a "_unstyled" Theme and then copy the theme "classic" in "_diffs". This works fine and I have managed to get the most css done. But now i have a Login-Portlet in the Header and if the User is logged out , the Portlet has more "heigth" and so i cant use the same margin for these two cases.
My idea now was to add a .css file to my Css files and include this one as the last, which overrides the rest, if the user is logged in. This should be done in the portal_vm i guess, but since i am not familiar with the Liferay commands it would be nice if you could help me.
If this is just a little bit of Code, please give me a short example.
Im working with Liferay 6.1 and Eclipse.
thanks in advance
There is a "signed-in" and a "signed-out" class on body depending if someone is signed in or not.
So you might be able to just use this in custom.css
.signed-in .portlet-login {
margin: 0px;
}
.signed-out .portlet-login {
margin: 10px;
}
of course, change the margins and other values according to your environment.
We are looking into providing users of our application the ability override the default site CSS.
Currently they can choose a site theme but it would be nice to allow them to change properties such as background color, font color, font face etc.
I'm torn between giving each site a "user defined" stylesheet that can be edited from the administration area or providing some kind of CSS builder.
The first option provides the most flexibility but could also be the most problematic and requires the user to have some basic understanding of CSS.
So aside from the obvious, (which is the best solution?) I have a few additional questions:
User Defined Css:
Is there a web based CSS editor available?
Is there a server side (.net) CSS validator available (for verifying the css the user enters)
Css Builder:
Is there a web based CSS builder already available?
What is the best way of generating the CSS based on the rules provided by the user (I thought about using some kind of templating engine to do this (NVelocity, Razor etc.)?
Thanks
Solution
I've added an answer below with the solution we went for.
however never used, recently I looked at Brosho Design in the Browser jQuery Plugin
With this Plugin you can style your
markup right in your browser with a
build-in element selector and CSS
editor. Generate the CSS code of
altered elements with one click and
use it in your own stylesheet.
demo here
I'd recommend to build a custom css editor since it's the easiest way to limit which elements and attributes the user will be able to edit / customize, and how. Just keep it simple and you will do just fine.
To validate CSS you could use the API of the W3 CSS Validator, http://jigsaw.w3.org/css-validator/api.html
I've built an application that does exactly this. It's a little more involved as there are multiple master pages and themes, and the user can attach custom urls to load themes - example: /someclienturl would load a specific theme.
Anyway, here's the schema I used. One thing I wish I added is the ability for power users to add custom styles to the stylesheet that's eventually written. Basically, a theme section would apply to a selector #header, for example. And ThemeSectionCssStyle holds user added customizations for that selector. If you have any more questions let me know. It ended up being a fairly involved sub-project. I'm curious to see what anyone else came up with.
I think the key factor here is whether you want your users to 'play with the codez'
If you do then something like this (posted by #Caspar) can be helpful in generating the css. If you do allow direct access to the css then the W3 CSS Validator (posted by #Trikks) is definitely necessary.
In my case I didn't want to provide direct access to the Css. Looking around at various sites that allow you to change simple style properties (background-color, font-face, color etc.) it seems that they have just created their own interfaces for this. There are plenty of javascript plugins around for making this process quite slick (color pickers etc.).
Once you have the styles stored somewhere you need some way of rendering them out.
I couldn't find any .net Css writers. I think it may be possible in Less but the solution was quite simple just using what's built into asp.net mvc.
I created a Css action result (courtesy of #Darin Dimitrov):
public class CssResult : PartialViewResult {
public override void ExecuteResult(ControllerContext context) {
context.HttpContext.Response.ContentType = "text/css";
base.ExecuteResult(context);
}
}
Then in my controller (a simple example):
[HttpGet]
public ActionResult Index()
{
var styles = new Dictionary<string, string>()
{
{ "color", "red" },
{ "font-family", "Consolas, Courier, Serif" },
{ "font-size" , "12px" }
};
return this.Css(styles);
}
Then my view (views/css/index.cshtml):
body {#foreach (var item in Model) {
#string.Format("{0}: {1};", item.Key, item.Value)
}
}
This will essentially render out the styles in the passed in dictionary. Of course you may want to create a specific class for holding these styles so that you could also specify the dom element name/class/id.
Finally to render out the stylesheet on our page we can call Url.Action("index", "css").