search

getgrav / grav-plugin-editor-buttons

Grav Editor Buttons Plugin
http://getgrav.org
12 stars 10 forks source link

Display error with tips #2

Closed Mr3ase closed 8 years ago

Mr3ase commented 9 years ago

I've installed the editor buttons plugin on my blog using the Materialize theme. I'm creating an article to explain how to install the lighttpd rewrite rules configuration file that I wrote. (Which was added in the latest Grav RC) As you can see, for example on that article : https://systemti.me/test/blog/converting-grav-cms-htaccess-file-for-lighttpd

There is a display error : the Pro tip should be green (md: >>>>>) but instead it shows like a simple > multiple times. Moreover, a simple > should display a grey area, but it looks red like the error div.

I'm wondering if it's a bug or something ? Might just be a twig line to add to the theme template that's currently absent, making the plugin not working properly ?

Cheers,

Mr3ase commented 9 years ago

Also, note that the tips are displaying properly as they should (>>>>> is a green box, > is grey...) in the article preview in the admin interface. That's why I think it might be theme related.

khanduras commented 8 years ago

I had the same issue so I copied and modified some code from the Learn2 theme:

blockquote {
  }
  blockquote p {
    font-size: 1.1rem;
    color: #999; }
  blockquote cite {
    display: block;
    text-align: right;
    color: #666;
    font-size: 1.2rem; }

blockquote {
  position: relative; }

blockquote blockquote {
  position: static; }

blockquote > blockquote > blockquote {
  margin: 0; }
  blockquote > blockquote > blockquote p {
    padding: 15px;
    display: block;
    font-size: 1rem;
    margin-top: 0rem;
    margin-bottom: 0rem;
    color: #666; }
    blockquote > blockquote > blockquote p:first-child:before {
      position: absolute;
      top: 2px;
      color: #fff;
      font-family: FontAwesome;
      content: '';
      left: 10px; }
    blockquote > blockquote > blockquote p:first-child:after {
      position: absolute;
      top: 2px;
      color: #fff;
      left: 2rem;
      font-weight: bold;
      content: 'Info'; }
  blockquote > blockquote > blockquote > p {
    margin-left: -61px;
    border-top: 30px solid #F0B37E;
    background: #FFF2DB; }
  blockquote > blockquote > blockquote > blockquote > p {
    margin-left: -84px;
    border-top: 30px solid rgba(217, 83, 79, 0.8);
    background: #FAE2E2; }
    blockquote > blockquote > blockquote > blockquote > p:first-child:after {
      content: 'Warning'; }
  blockquote > blockquote > blockquote > blockquote > blockquote > p {
    margin-left: -108px;
    border-top: 30px solid #6AB0DE;
    background: #E7F2FA; }
    blockquote > blockquote > blockquote > blockquote > blockquote > p:first-child:after {
      content: 'Note'; }
  blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > p {
    margin-left: -132px;
    border-top: 30px solid rgba(92, 184, 92, 0.8);
    background: #E6F9E6; }
    blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > p:first-child:after {
      content: 'Tip'; }
flaviocopes commented 8 years ago

Yes, those styles must be implemented by a theme to be applied correctly. Will have an alternative approach soon.