DOC: make deprecation warning more visible with red box
State: closed

- [x ] closes #20349
- [ ] tests added / passed
- [ ] passes `git diff upstream/master -u -- "*.py" | flake8 --diff`
- [ ] whatsnew entry


Labels:
name: Docs

Comments:
How it currently looks:

![screenshot-2018-3-15 pandas dataframe from_csv pandas 0 23 0 dev0 604 g8ca08d1 documentation](https://user-images.githubusercontent.com/1020496/37455985-a96b08ce-283e-11e8-92bb-654b420a8821.png)

So I think we need to add some more css to have it look better (border spacing). As comparison, the see also box:

![screenshot-2018-3-15 pandas dataframe from_csv pandas 0 23 0 dev0 604 g8ca08d1 documentation 1](https://user-images.githubusercontent.com/1020496/37455990-ac6b6bfe-283e-11e8-9363-fa76e9e3f94a.png)


Apparently I did something very similar for sklearn a while ago, so you can see there how I did it then: https://github.com/scikit-learn/scikit-learn/pull/8914
# [Codecov](https://codecov.io/gh/pandas-dev/pandas/pull/20357?src=pr&el=h1) Report
> Merging [#20357](https://codecov.io/gh/pandas-dev/pandas/pull/20357?src=pr&el=desc) into [master](https://codecov.io/gh/pandas-dev/pandas/commit/7273ea0709590e6264607f227bb8def0ef656c50?src=pr&el=desc) will **increase** coverage by `0.02%`.
> The diff coverage is `n/a`.

[![Impacted file tree graph](https://codecov.io/gh/pandas-dev/pandas/pull/20357/graphs/tree.svg?width=650&token=eZ4WkYLtcO&height=150&src=pr)](https://codecov.io/gh/pandas-dev/pandas/pull/20357?src=pr&el=tree)

```diff
@@            Coverage Diff             @@
##           master   #20357      +/-   ##
==========================================
+ Coverage   91.77%    91.8%   +0.02%     
==========================================
  Files         152      152              
  Lines       49205    49216      +11     
==========================================
+ Hits        45159    45182      +23     
+ Misses       4046     4034      -12
```

| Flag | Coverage Δ | |
|---|---|---|
| #multiple | `90.19% <ø> (+0.02%)` | :arrow_up: |
| #single | `41.84% <ø> (-0.01%)` | :arrow_down: |

| [Impacted Files](https://codecov.io/gh/pandas-dev/pandas/pull/20357?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [pandas/core/window.py](https://codecov.io/gh/pandas-dev/pandas/pull/20357/diff?src=pr&el=tree#diff-cGFuZGFzL2NvcmUvd2luZG93LnB5) | `96.26% <0%> (-0.01%)` | :arrow_down: |
| [pandas/core/indexes/category.py](https://codecov.io/gh/pandas-dev/pandas/pull/20357/diff?src=pr&el=tree#diff-cGFuZGFzL2NvcmUvaW5kZXhlcy9jYXRlZ29yeS5weQ==) | `97.3% <0%> (ø)` | :arrow_up: |
| [pandas/core/panel.py](https://codecov.io/gh/pandas-dev/pandas/pull/20357/diff?src=pr&el=tree#diff-cGFuZGFzL2NvcmUvcGFuZWwucHk=) | `97.29% <0%> (ø)` | :arrow_up: |
| [pandas/core/series.py](https://codecov.io/gh/pandas-dev/pandas/pull/20357/diff?src=pr&el=tree#diff-cGFuZGFzL2NvcmUvc2VyaWVzLnB5) | `93.84% <0%> (ø)` | :arrow_up: |
| [pandas/core/base.py](https://codecov.io/gh/pandas-dev/pandas/pull/20357/diff?src=pr&el=tree#diff-cGFuZGFzL2NvcmUvYmFzZS5weQ==) | `96.78% <0%> (ø)` | :arrow_up: |
| [pandas/core/arrays/categorical.py](https://codecov.io/gh/pandas-dev/pandas/pull/20357/diff?src=pr&el=tree#diff-cGFuZGFzL2NvcmUvYXJyYXlzL2NhdGVnb3JpY2FsLnB5) | `96.21% <0%> (ø)` | :arrow_up: |
| [pandas/core/generic.py](https://codecov.io/gh/pandas-dev/pandas/pull/20357/diff?src=pr&el=tree#diff-cGFuZGFzL2NvcmUvZ2VuZXJpYy5weQ==) | `95.85% <0%> (ø)` | :arrow_up: |
| [pandas/core/frame.py](https://codecov.io/gh/pandas-dev/pandas/pull/20357/diff?src=pr&el=tree#diff-cGFuZGFzL2NvcmUvZnJhbWUucHk=) | `97.18% <0%> (ø)` | :arrow_up: |
| [pandas/core/indexes/datetimelike.py](https://codecov.io/gh/pandas-dev/pandas/pull/20357/diff?src=pr&el=tree#diff-cGFuZGFzL2NvcmUvaW5kZXhlcy9kYXRldGltZWxpa2UucHk=) | `96.72% <0%> (ø)` | :arrow_up: |
| [pandas/plotting/\_core.py](https://codecov.io/gh/pandas-dev/pandas/pull/20357/diff?src=pr&el=tree#diff-cGFuZGFzL3Bsb3R0aW5nL19jb3JlLnB5) | `82.27% <0%> (ø)` | :arrow_up: |
| ... and [4 more](https://codecov.io/gh/pandas-dev/pandas/pull/20357/diff?src=pr&el=tree-more) | |

------

[Continue to review full report at Codecov](https://codecov.io/gh/pandas-dev/pandas/pull/20357?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/pandas-dev/pandas/pull/20357?src=pr&el=footer). Last update [7273ea0...13188ad](https://codecov.io/gh/pandas-dev/pandas/pull/20357?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).

lgtm. @jorisvandenbossche ?
Don't merge yet. We should fix the styling.

@Imanflow you can take a look at the PR in sklearn I mentioned above how it was done there.
For a reason I can't undersand, further changes in `https://github.com/pandas-dev/pandas/blob/master/doc/source/themes/nature_with_gtoc/static/nature.css_t`doesn't get reflected when i do 

`# in pandas/doc `
`python make.py --single=pandas.DataFrame.from_csv`


any clue?
I'm not sure why you can't see your changes, but based on how @jorisvandenbossche [fixed](https://github.com/scikit-learn/scikit-learn/pull/8914/files) this issue before and #20349, you need:

```
div.admonition p.admonition-title + p, div.deprecated p {
    display: inline;
}
```
`, div.deprecated p` is missing in your code.

You also need:
```
div.deprecated {
    background-color: #ffe4e4;
    border: 1px solid #f66;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 7px;
    border-radius: 4px;
    -moz-border-radius: 4px;
}
```
I think the last two properties here (`border-radius: 4px;` and `-moz-border-radius: 4px;`) are not necessary as we want the box to have sharp edges and be consistent with 'See also' box etc,.

So you are missing these: 
```
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 7px;
```

This is how it should look:

<img width="662" alt="screen shot 2018-03-21 at 1 15 47 am" src="https://user-images.githubusercontent.com/13618953/37695726-ba524ae0-2ca7-11e8-8310-84a3c5677c67.png">

Done, thanks for your patience. 

PD: The problem with not seeing the changes was that on terminal I was in a different branch than in Pycharm. 
@Imanflow @arminv Thanks!