1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 duplication the CODE tag but in a different colour ?

Discussion in 'Styling and Customization Questions' started by eva2000, Nov 23, 2015.

  1. eva2000

    eva2000 Well-Known Member

    My forums extensively use use the CODE bbcode tag for code. But I want sometimes use a different background and font colour (black background + white text) like I do on my main site see example at http://centminmod.com so want to duplicate the CODE bbcode tag with a bbcode named like CODEB or something.

    I want a wider margin for the CODEB tag as well. Using dev tools inspector i altered the existing CODE tag's CSS but of course need to rename these css references for CODEB.

    Questions

    1. Question is how would the custom bbcode be setup ? there's no admin reference to what the default CODE bbcode tag looks like to be able to duplicate it in custom bbcode add section ? HTML replacement code something like
      Code:
      <div class="bbCodeBlock bbCodeCode">
      <div class="type">Code (Text):</div>
      <div class="code">{text}</div>
      </div>
      . I believe I got that far so far https://community.centminmod.com/threads/testing-custom-codeb-tag.4998/
    2. Also how to add CODEB tag to overlay dropdown language code menu ?
    3. Also the CODE default bbcode doesn't pick up tag codes in text, but CODEB tag does ? how to disable that ? i already have parse BBCODE disabled ?

    Code:
    .bbCodeBlock {
        margin: 1em 80px 1em 0;
        border: 1px solid #e8e8e8;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        -khtml-border-radius: 0px;
        border-radius: 0px;
        overflow: auto;
    }
    
    .bbCodeBlock .type {
        font-size: 11px;
        font-family: 'Open Sans',sans-serif;
        color: #fff;
        background-color: #000;
        padding: 7px 8px;
        border-bottom: 1px solid #e8e8e8;
        -webkit-border-top-left-radius: 0px;
        -moz-border-radius-topleft: 0px;
        -khtml-border-top-left-radius: 0px;
        border-top-left-radius: 0px;
        -webkit-border-top-right-radius: 0px;
        -moz-border-radius-topright: 0px;
        -khtml-border-top-right-radius: 0px;
        border-top-right-radius: 0px;
    }
    
    .bbCodeBlock pre, .bbCodeBlock .code {
        font-size: 10pt;
        font-family: Consolas,'Courier New',Courier,monospace;
        background-color: #000;
        padding: 10px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        -khtml-border-radius: 0px;
        border-radius: 0px;
        word-wrap: normal;
        overflow: auto;
        line-height: 1.24;
        min-height: 30px;
        max-height: 500px;
        _width: 600px;
        direction: ltr;
        color: #fff;
    }
    example for CODEB custom bbcode

    upload_2015-11-23_10-44-23.png

    cheers
     
    Last edited: Nov 23, 2015
  2. eva2000

    eva2000 Well-Known Member

  3. eva2000

    eva2000 Well-Known Member

  4. eva2000

    eva2000 Well-Known Member

Share This Page