-
Posts
-
I am using the Code Block element on a webpage, and the background lines alternate between white (#ffffff) and light gray (#f3f3f3). I’d like to change those two to much darker colors since (1) the text in that area is styled white from the theme settings and (2) a darker code area will stand out more on the page.
I’m not sure how to accomplish this.
Hey lbccomm,
You are looking to change it on the front-end? Please add a link to the site/page in question so we can look into this issue further.
Best regards,
Jordan ShannonI’m in the middle of updating the page, so it’s kind of a mess at the moment.
Start scrolling down and you’ll find a list shortly. The code block is located in #5 (this will make sense when you see it). This entire list is contained within a “Color Section” where the Section Background has been set to “Alternate Content.” The settings for Alternate Content is a blue background with white text. That’s fine for most of the site, however, for this section I want a white background. For text within a Text Block, I just change the text color to a dark gray (#cccccc).
My dilemma is that the text within the Code Block is being formatted white, and the code background is also white/light.
So, in reality, I either need to be able to force the text to be dark, or the background.
My assumption is that this can be resolved with CSS, but I’m not 100% sure.
For clarity: Just passed where I’m having this issue you will see the code working just fine. I am replacing that, so it will be deleted.
Thanks!
you see here the code concerning to pre background:
pre { clear: both; border-style: solid; border-width: 1px; overflow: auto; padding: 2em; line-height: 2em; font-size: 12px; background-image: -webkit-linear-gradient(rgba(0, 0, 0, .05) 50%, transparent 50%, transparent); background-image: -moz-linear-gradient(rgba(0, 0, 0, .05) 50%, transparent 50%, transparent); background-image: linear-gradient(rgba(0, 0, 0, .05) 50%, transparent 50%, transparent); background-size: 100% 4em; font-family: Monaco, "Andale Mono", "Courier New", Courier, monospace; -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s; margin-bottom: 30px; position: relative; left: 0; text-transform: none; width: 100%; }it is here which rules the background – try this:
pre { background-image: -webkit-linear-gradient(rgba(0, 0, 0, .2) 50%, transparent 50%, transparent); background-image: -moz-linear-gradient(rgba(0, 0, 0, .2) 50%, transparent 50%, transparent); background-image: linear-gradient(rgba(0, 0, 0, .2) 50%, transparent 50%, transparent); }
you see 50% are light gray – 50% are transparent
btw: if you want to have more line-height:
padding and line-height must have the same value
background-size : width 100% and double line-height comes to height here ( 2em, 2em – 4em)
if you want 3em line-height you have to have 3em padding (important is top -bottom value) and background-size: 100% 6em
Hi,
Thanks for helping out @guenni007, did you try any of the suggestion out @lbccomm?
Best regards,
RikardI added the following code to the Custom CSS area:
/* DARKENS CODE BLOCK */
pre {
background-image: -webkit-linear-gradient(rgba(0, 0, 0, .7) 100%, transparent 100%, transparent);
background-image: -moz-linear-gradient(rgba(0, 0, 0, .7) 100%, transparent 100%, transparent);
background-image: linear-gradient(rgba(0, 0, 0, .7) 100%, transparent 100%, transparent);
}There’s no variation between the lines, but I don’t need any. That worked great. Thanks a lot!
Hi,
Great, glad you got it working and thanks for sharing your solution. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
Rikardin this case if you are sattisfied with no lines you can do instead:
pre { background: rgba(0, 0, 0, .7); color: #fff }
- The topic ‘Change color of code block’ is closed to new replies.