I'm currently trying to make some CSS changes to a WordPress child theme.
When I use the chrome developer tool, it tells me which line in the style.css file the elements refer to. For example, style.css:17.
However, on certain CSS elements, instead of referring to style.css it refers to (index). For example, (index):54. What does (index) refer to and where would I normally find it to make the changes?
Thanks
Wordpress theme options usually appends a stylesheet to the head of the html document.
<head>
<!-- added by Wordpress, usually found in functions.php -->
<style>
...theme specific styles...
</style>
</head>
Related
I use a link in my html. How i can copy code of this file to edit it?
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
Do you really want to edit a minified file?
It can be done but it's difficult.
Instead, put that whole address minus the .min in your browser's address field
https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.css
and you should see the code unminified which you can then copy/save to your local system for editing. (on Windows this would be by right clicking the mouse/pad).
I am not sure whether you do want to actually edit this file, or whether you want to change some of its effects. If the latter you link to the file then put your own CSS in style element following and it will overwrite with whatever settings you have given.
You have to add your custom css style after it so it will overrite it.
In main html file you can just add styles right after <head> for example:
<head>
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
background-color: red;
}
</style>
So what happens now it imports bootstrap styles but after that overrides it so you can add your custom styles inside <style>
You can simply open the url - https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
and save (ctrl+s) the file locally in your project and include the css file path with the help of this tag given below :-
You can also use custom css and then overide the css.
(Note :- Format the document/css file then you can edit the document)
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!
Is there a way that I can define css so that, for example all paragraphs (<p>) on this specific page are formated according to that css, but not other pages on the plone site?
Inline-css does work, but that's pretty annoying for larger tables I'd like to style.
You should use
ploneCustom.css or related custom CSS file which is merged with other CSS files in portal_css registry
Use <body> CSS classes to target a single page only
More <body> CSS can be added for custom needs. What kind of page you need to target with CSS.
http://collective-docs.readthedocs.org/en/latest/templates_css_and_javascripts/css.html#adding-new-css-body-classes
Also you can include CSS as <head> viewlet if needed but this approach is not recommended.
http://collective-docs.readthedocs.org/en/latest/views/viewlets.html#viewlets-for-one-page-only
I developed an application, and I used header and footer from another app. I created a separate style sheet for my app, called TestStyleapp.css. When I run my new application, the stylesheet I used from the other app is overriding my new CSS file.
Is there a way to include/reference the Teststyleapp.css (I tried calling it last) other than using !important in front of all the elements in teststyleapp.css?
When I use FireBug, I do not see Teststyleapp.CSS at all.
Even if it is LAST, if it is NOT more SPECIFIC (the other page items are more specific) it will not override what is above it in the stack.
Example:
div .myclass (background-color: red);
other (yours has)
.myclass(background-color:green);
you still see red.
<link rel="stylesheet" href="TestStyleapp.css" type="text/css" media="screen" />
It should be linked as such, between the head tags. Make sure the case is correct. I like using all lowercase and _ as a word separator. Just my personal style.
First, get the .css file to show in the NET tab in Firebug and we'll take it from there.
I'd like to use Bootstrap from Twitter in my ASP.Net MVC 3 application. I downloaded bootstrap.css and added it to my project in the Content folder. I opened _Layout.cshtml and added a link to the file:
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
When I run the application no stylesheet is applied. How do I reference both Site.css and bootstrap.css from my _Layout.cshtml file?
I think the issue here is the inheritance, cascade and specificity CSS. Bear in mind that Twitter's Bootstrap resets all styles.
'If Site.css is before bootstrap.css only bootstrap is applied (which I didn't realize at first). Reverse the order and both work. Strange'
Actually, this makes complete sense. Site.css is loaded with all it's style declarations and immediately afterwards Bootstrap.css is loaded which resets most(if not all styles) thus declarations within Bootstrap.css will be applied. It only appears that both work probably because Bootstrap.css might not have a defined style or Site.css has very specific style defined using html ids or classes.
Reverse the order (with Bootstrap.css first), you are now resetting all styles first and then other styles are being applied. Since Site.css is loaded second, the styles defined therein will be applied to your site.
For your own interest, try to define an inline style within your html doc that has been defined within both 'Site.css' and 'Bootstrap.css', and see how the style gets applied by adding/removing the style definition.
I tried finding a good supporting explanation for CSS cascading, and the best graphic and simple explanation I found was this which notes
If selectors within external and embedded style sheets conflict but
have the same specificity, the final tie-breaker is based on the order
of apperance of the rules: the rule declared later wins. This applies
not only to the order of rules within a single sheet, but also to the
order that the sheets are linked, imported or embedded in the head of
the (X)HTML page.
You can copy and paste the CSS from the bootstrap file into your single .css file in order to cut down on the HTTP requests.
Just place all the bootstrap code at the very beginning and then your personal CSS following it, for organizational purposes.
However what you've done should work. Can you post an example on JSFiddle of what your markup looks like?
For more information see:
http://www.w3.org/TR/html4/present/styles.html#h-14.3