I am making a theme for a website managed by plone using diazo and at least parts of twitter-bootstrap. Personally I'm not all too happy about that combination, but it was requested that way.
Now I was informed the other day that there will be some portlets that suppose to come in their own design, styled in an editor insinde plone (the editor seem to write the styles straight into the html). Meaning no further theming should be applied but bootstrap css recognizes the pattern and hijacks it anyway.
I tried to block that by using a form of <notheme css:if-content=".theStaticPortlet" /> but ended up having the theme blocked on the entire site whenever a container like this was found.
Is there a way of excluding a specific container/class from being bothered by the theme while everything around it stays themed like before?
With lesscss you can do something like that:
.theStaticPortlet {
// put your specific portlet css here
}
:not(.theStaticPortlet) {
// copy or import all your regular site css here
}
From what I understand your question is purely about Bootstrap and its CSS interfering with Plone markup. Exactly which styles are being applied on your portlet? I'd bet it has to do with the DL/DT/DD tags. If so you could use Diazo to replace those with DIVs or some other neutral tags - on Bootstrap's understanding, of course.
Related
I am creating a plugin for my theme to customize it, But when I use PHP and I edit the style of main page when using post request, and I don't believe WP AJAX system is a way way to edit style of main page with hooks?
And can I create short codes in my theme, or can I only create it in plugin???
In the case of Wordpress, which is a CMS for web projects, styling is mainly done via writing CSS code and rendering that in the web-browser.
How to apply a styling
Inline
You can do inline styling (unadvisable), example:
<input type="text" value="something" style="color: red;">
The reason this is generally not a desirable practice is that you would always have to add the styling to each element you want to apply it at. This is a problem, because if you have a consistent styling, applied at liked 10 000 elements and then you intend to change it, you will have to apply it at every 10 000 instances of its inline definition.
You may still use inline styling at some point, but you should avoid doing so unless you are absolutely sure that it's adequate for the given problem you solve.
Style tags
You can also add a style tag to your page, which is better than inline styling in general, but it's more difficult to reuse it than a css file. Example:
<style type="text/css">
input.red {color: red;}
</style>
<input type="text" value="something" class="red">
css files
You could create a file like style.css, move your styling from style tags there and create a link tag, as
<link rel="stylesheet" href="styles/style.css">
Note that the code above assumes that there is a styles folder where you store your css files and that your style.css is inside that folder. This is a generally accepted practice about styling, which is a very popular approach.
There are some technologies violating this separation of CSS from structure, like ReactJS, which has a different approach for this stuff, but, if you do not use those SPA approaches (and at least while you learn Javascript and CSS it is a good idea to avoid them), then this is an advisable practice.
The approach
In all cases I will assume that you have a CSS file that you want to append to your head tag at styles/style.css. If you have some differences in your dev environment, then you of course will need to rely on what your environment is like.
Modifying a theme
You can modify your theme whenever you want to do so, it's available on source-code level. However, if it's a theme that is not customly made by you and you intend to use its new versions in the future, then it's advisable to avoid changing the source-code of your theme.
However, at the point when the HTML is generated and particularly the head tag, you can add the link tag as described earlier. As a matter of fact you can add it inside the body tag as well.
Modifying the plugin
If you use a plugin and some HTML is generated there that is applied to the page, you can easily add your link tag to that as well. However, if you are doing some AJAX requests and you determine whether you need the styling at that level, then you will need your Javascript to add a link tag to the head, example:
function addLink(path) {
document.querySelector('head').innerHTML += `<link rel="stylesheet" href="${path}">`;
}
However, this is to be avoided if you know in advance that your file will always be needed. If you want to dynamically change the styling by adding some stuff to it, then you can call the function above, passing the desired path.
I think the title is a bit vague but my vocabulary is limited in english. I'll try to explain what I want to do.
I have two CSS files from products I have no control ( are not mine ). Lets say AdminLTE bootstrap and a JQuery plugin.
The problem is the Box class is in both styles.
and messing my flight indicators from the JQuery plugin. I know I have to choose the order of CSS style files or add important to one of them but I'm afraid of start to mess with my bootstrap interface.
Is there any other way to solve this?
I know I have to choose the order of CSS style files or add important to one of them
you don't, you could simply write a selector with higher specificity which would override the jQuery plugin styles, like body div.instrument .box
I had a question on how to find out which part of your code needs changing to adjust this "display:none !important" functionality which prevents the website to be responsive on mobile. When going under 767px content simply disappears and that condition triggers.
If I change it to "display:inline !important" that works but I've only done it in-browser and I can't find where to change it in the source files. Is there any methodology on finding this out? I've even used grep on all the files in the theme looking for keywords but I don't know where else to look. Also tried adding the changed code into the "Additional CSS" menu however with no success either.
The question is:
Is there any methodology to finding this [where the CSS lives] out?
You want to know the methodology to find the CSS. Let's walk through how I did it.
Step 1
The inspector gives you the location of the styles. Using your images, I marked the locations with the red boxes:
Notice that the style in question is located in (index):557. Where is that? It's not an external stylesheet, as with the style.css example. Rather, it's been added directly into the <head> and wrapped in <style>.
Using Dev Tools, look in the <head> of the DOM (in the HTML markup). You'll find it there.
Step 2:
Where do you find it? The method that I use is to look at the style declarations first in the <head>. Are there any comments to give you clues?
Next, I look at the actual style attributes. In this case, it's .tm_pb_builder. That is giving you a clue to the component that builds the CSS.
I did a Google search for that class attribute, like this: wordpress tm_pb_builder. That took me to GitHub and the Power Builder plugin from TemplateMonster.
Step 3
Now you know that the plugin Power Builder is the one responsible for adding that style into the <head>. You can then take a look at the respective page and explore how this page is built with this page builder.
That's my methodology.
You can add display:inline !important in the style.css of your child-theme, but it will only works if the plugin css file loads before it.
If the theme's css loads before plugin css, you can create a new css style and enqueue it at the very last end of the style enqueue.
add_action('wp_enqueue_scripts', 'se_41042975', 999);
function se_41042975(){
wp_enqueue_style('css-plugin-override', get_stylesheet_directory_uri(); ?>/css/custom_css.css');
}
Hope it helps!
I know I can just have a custom stylesheet that overrides the bootstrap component I wish to customize (for example the jumbotron), but is the right way to go about this "problem"? I don't think this can be done with a bootstrap theme, although I haven't read a whole lot on this subject.
You can use your browsers DevTools to inspect an element that you want to change, and in the Rules/Styles section you can see which CSS elements is it using and then you can create your own css file and paste the CSS there and change it so it overrides bootstraps element. Here is how to get the devtools from Chrome https://developer.chrome.com/devtools#dom-and-styles and from Firefox https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector. Don't forget to import your CSS customised script under bootstraps so it overrides the CSS that you wish to change.
Use twitter-bootstrap customize on their website to customize it and download the customized files. Or just create a custom CSS file and edit classes like .jumbotron and other stuff
There are a few ways to modify the default bootstrap css and no one way is inherently more or less "right" than any other. It all depends on the coding style of you and/or your team. Here is a list of a few ways that I came up with off the top of my head:
Modify the css file you downloaded from Bootstrap
(My Choice) Override Bootstrap styles with your own CSS. Just be sure to follow the rules of CSS Specificity (External < Internal < Inline) and if you have trouble getting a certain rule to apply try reading this answer or force it with !important
NOTE: This is likely NOT a comprehensive list, just a starting point.
I'm new to drupal and i was trying to do several common css tasks, like changing color background, links color etc. I guess i have not understood where the drupal css are. I tried to modify style.css in the folder my-site-name/sites/all/themes/mythemename/, which seems to be the main css, but it seems to have no effect on the site, even using the directive "!important".
So, where's the drupal 7 main css?
There is no "Main CSS". Drupal core uses some CSS files. Each module its own CSS. Then each theme overrides CSS using its own css files. You can have as much css files as you like in your theme and with any acceptable name.
Probably you have to clear the caches to see the results. If not, check the css styles with Firebug to see what is happening. This way, also, you can see what css files apply styles for each page/element.