Global settings

[krstivoja]

Can you please add global change for theme, header and footer.

<3 Love the plugin by the way!

[KevinBatdorf]

Thanks. It's a difficult problem to solve I think but I'll work on that next.

[krstivoja]

You can create settings page under Admin > Tools where user can choose defaults. If you need any help I am glad to help.

[adriancs2]

As an alternative solution, you can modify some of the style of code block by adding additional CSS to the frontend. This will take effect globally for the whole site.

You can use a plugin called Simple Custom CSS and JS.

Screenshot of using the plugin:

Here are some of the basic styling that you can change:

/* Modifying the Border Radius*/
.wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre {
    border-radius: 10px !important;
}

/* Modifying the top and bottom margin */
.wp-block-kevinbatdorf-code-block-pro {
    margin-top: 25px; /* Top Margin */
    margin-bottom: 25px; /* Bottom Margin */
}

/* Use any font resource you prefer, example: import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');

/* Change font, font-size, line-height, font-weight */
.wp-block-kevinbatdorf-code-block-pro pre code {
    font-family: "Roboto Mono", monospace !important;   
    line-height: 135% !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

/* Change the cursor highlight background color */
.wp-block-kevinbatdorf-code-block-pro pre span::selection {
    background-color: #336ecc; /* Cursor highlight background color */
    color: white; /* Cursor highlight text color */
}

But however, this method only allows you to change the basic styling, not the layout, such as code block header and footer style.

[adriancs2]

Here is how I identify the class selector block for specific elements:

Here is what I discovered:

The relevant elements structure can be broken into a few layer:

• div.wp-block-kevinbatdorf-code-block-pro (top layer)
• pre
• code
• span

by default, by modifying the CSS of top layer element should fix. All child elements inherit the parent. For example:

.wp-block-kevinbatdorf-code-block-pro {
    margin-top: 25px;
    border-radius: 10px;
    margin-top: 25px;
    margin-bottom: 25px;
    font-family: "Roboto Mono", monospace;
    line-height: 135%;
    font-size: 13px;
    font-weight: 400;
}

.wp-block-kevinbatdorf-code-block-pro::selection {
    background-color: #336ecc;
    color: white;
}

But however, some of the styles are not able to be applied.

.wp-block-kevinbatdorf-code-block-pro {
    margin-top: 25px;
    border-radius: 10px;  <-- failed
    margin-top: 25px;
    margin-bottom: 25px;
    font-family: "Roboto Mono", monospace;   <-- failed
    line-height: 135%;    <-- failed
    font-size: 13px;    <-- failed
    font-weight: 400;     <-- failed
}

.wp-block-kevinbatdorf-code-block-pro::selection {
    background-color: #336ecc;    <-- failed
    color: white;    <-- failed
}

This indicates that, somewhere around the stacks of styles have applied !important. Marking !important prevents future styles to override it.

My very first attempt is to override it with !important. But yet, it still failed.

.wp-block-kevinbatdorf-code-block-pro {
    margin-top: 25px;
    border-radius: 10px !important;  <-- failed
    margin-top: 25px;
    margin-bottom: 25px;
    font-family: "Roboto Mono", monospace !important;   <-- failed
    line-height: 135% !important;    <-- failed
    font-size: 13px !important;    <-- failed
    font-weight: 400 !important;     <-- failed
}

.wp-block-kevinbatdorf-code-block-pro::selection {
    background-color: #336ecc !important;    <-- failed
    color: white !important;    <-- failed
}

Therefore, we need to find out the exact element's selector and override it with another !important. and hence the following was found, and now it works.

.wp-block-kevinbatdorf-code-block-pro {
    margin-top: 25px;
    margin-bottom: 25px;
}

.wp-block-kevinbatdorf-code-block-pro pre span::selection {
    background-color: #336ecc;
    color: white;
}

.wp-block-kevinbatdorf-code-block-pro pre code {
    font-family: "Roboto Mono", monospace !important;  <-- success
    line-height: 135% !important;  <-- success
    font-size: 13px !important;  <-- success
    font-weight: 400 !important;  <-- success
}

.wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) pre {
    border-radius: 10px !important;   <-- success
}

.wp-block-kevinbatdorf-code-block-pro pre span::selection {
    background-color: #336ecc;   <-- success
    color: white;   <-- success
}

[adriancs2]

For the border-radius: 10px !important;, at the browser developer's mode "elements" tab, I manually insert the style into the element's attribute to find out the exact block that has the direct influence for the style. With this, I am able to find the correct selector.

[adriancs2]

I found that, you can even adjust the maximum code block height and change the scroll bar style. But the scroll bar style below does not apply in Firefox:

.wp-block-kevinbatdorf-code-block-pro pre {
    max-height: 300px;
}

.wp-block-kevinbatdorf-code-block-pro pre::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.wp-block-kevinbatdorf-code-block-pro pre::-webkit-scrollbar-track {
    background: #979797;
}

.wp-block-kevinbatdorf-code-block-pro pre::-webkit-scrollbar-thumb {
    background: #7a7a7a;
    border-radius: 10px;
}

.wp-block-kevinbatdorf-code-block-pro pre::-webkit-scrollbar-thumb:hover {
        background: #656565;
    }

    .wp-block-kevinbatdorf-code-block-pro pre::-webkit-scrollbar-thumb:active {
        background: #383838;
    }

[KevinBatdorf]

Thanks for sharing those styles. It solves the problem for some basics but I think the main one being the theme, which still needs to be updated manually. Also, I think a lot of people won't feel comfortable adding CSS to their site, so a solution will still be needed.

My very first attempt is to override it with !important. But yet, it still failed.

This is because of CSS specificity. Style rules with high specificity will override lower ones, so you didn't necessarily need to match the same classes, but you just needed to make have more weight. See here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

(btw I purposely make wrote them with a higher specificity though to avoid themes and other plugins from interfering)

[adriancs2]

a lot of people won't feel comfortable adding CSS to their site, so a solution will still be needed.

agreed