0

i'am new to mkdocs, here is what i'm trying to do: add a caption to images and use a css style to use a shorter margin-bottom i managed to install a python-makdown extension "captions", so if i use

![](../img/some.png)
:   my sub caption

i'll get 

<figure><img ...><figcaption>...

in html. Unfornutately the spacing (css: margin) is to big so i included a css file to remove the default values. Inspection in my browser now shows me, that base.css overwrites my style, so margin remains at default. How can i overwrite base.css styles with my own styles?

As i wrote in my comment, !important guarantees overwriting:

figure img {margin-bottom: 0px !important;}

But I don't understand why...

Andreas Müller
  • 210
  • 2
  • 10
  • using !important in my own css-file works, could be a solution... – Andreas Müller Sep 22 '16 at 13:22
  • The reason has to do with the *cascading* part of Cascading Style Sheets. You didn't say how you included your own styles, so I can't say what you need to do different. See [CSS precedence](http://stackoverflow.com/a/667585/866026) for general guidance. – Waylan Sep 23 '16 at 18:42
  • thank you waylan, i'll try to find out. I am using mkdocs with a entry in extra_css inside mkdocs.yml. In my css file, i have the above statement and thought, this would overwrite styles in base.css (div.col-md-9 img), but figure img seems not to be the correct place in the cascading hierarchy. – Andreas Müller Sep 30 '16 at 08:35
  • I just checked and MkDocs loads the `extra_css` stylesheets after the theme included stylesheets, so, its not an issue of loading order. It appears to be an issue with the selector you are using or perhaps the theme defines a rule as `!important` (it probably shouldn't be and if it is, that should be reported as a bug). Which theme are you using? – Waylan Sep 30 '16 at 13:27
  • I didn't explicit choose one, so it's mkdocs in site-packages/mkdocs/themes/mkdocs – Andreas Müller Sep 30 '16 at 14:27

2 Answers2

1

If you use your browser's developer tools to inspect the img element...

enter image description here

You can see that the img is defined with a rule for div.col-md-9 img. that is, any img tags under the div with a class of col-md-9.

We can see that (as explained in CSS Precedence) the original rule uses one class attribute and two element names for a specificity of 0012. You need something of equal or higher specificity. But figure img only gives you 0002, which is lower.

To override that, you need at least the same level of specificity:

enter image description here

I'm sure various other permutations would give a working result as well. But we have a working solution, so why keep going. And thanks to the "inspect" tool, it was pretty quick and easy to resolve.

Community
  • 1
  • 1
Waylan
  • 37,164
  • 12
  • 83
  • 109
0

Rather than tweaking the CSS, it might be easier to try a different plugin, such as img2fig

snim2
  • 4,004
  • 27
  • 44