I'm trying to write a css stylesheet for use in my wordpress blog, which will output a colored background, highlighted bash code and line-numbers. This is what I've got so far -
code {
background-color: #FFC0CB;
list-style-type: decimal;
border-radius: 5px;
}
But I'm having problems getting highlighted code and also line numbers.
Can anyone help please?
Thanks
Sharon.
Like this
DEMO
CSS
code ul{
list-style-type: decimal;
margin:0;
}
code ul li {
background-color: #FFC0CB;
border-radius: 5px;
margin:3px 0;
padding:0;
}
I am assuming that this is what you are trying to achieve:
http://jsfiddle.net/BdY2g/
edit
http://jsfiddle.net/BdY2g/2/ - new fiddle.
in this new fiddle, i am using javascript to wrap each line in a 'li' tag.
This fiddle requires you to put ID tags on your code in this case: "bashCode" and an onload function that runs the function to update accordingly.
firstly, if you are using classes you need to use a '.' prefix in your css so your
code {
moves to
.code {
also, if you use an ordered list (ol) instead of an unordered list (ul) numbering is applied automatically.
I hope this helps.
Related
I am trying to create a css style that give the same result like native browser highlight so i can put in the css into tinymce.
but from the photo below you can see that the height of the custom css is too low, i tried a few method like using display:inline-block, it works fine for the height but it automatically remove the first and the last space.
Any expert please advise.
Do you mean something like this:
.highlight {
font-size: 14px;
display: inline-block;
color: #fff;
background-color: blue;
padding: .5em 0;
}
Here's a fiddle:
https://jsfiddle.net/c7rdekej/
Create a span around the text you want to highlight and assign a class to it
like highlight
And add css property like below
.highlight {
background:#008AE6;
color:#ffffff;
}
Check this fiddle for clarification http://jsfiddle.net/5u52qw57/
Let me know if it is helpful
There ARE other questions regarding this issue. However, each one seems to have an individual answer, because the answers found do not work.
Just scroll right on my site and see the white space all through the site: http://highcatering.wpengine.com/
NOT nice!
Any ideas? I have tried the following:
body{width:100%;}
body{margins:0 0 0 0;}
Thanks!
The offending line is in style.css:
.post ol, .post ul { margin:0 0 30px 20px; padding:0;}
It is adding a margin to all ol and ul within your main body section. If you remove it, the white space will disappear. I'm not sure if it is needed somewhere else on your site.
it should be like:
body
{
width:100%;
margin:0;
}
That large white bar down there, is a place to insert some widgets, if you do not want to use this section, add this on your CSS file:
.footerWrap.footerStyleLight {
display: none;
}
If you want to have something on this section later but with a different background color, just change the background color like this for example:
.footerWrap.footerStyleLight {
background: #2c2c2c;
}
Although you probably have this class in your CSS file, search for it delete what's inside and add this display: none; or for changing background color background: #2c2c2c;
Iam needing help with my footer in CSS.
I'm a new wordpress developer and I get the gist of how to work with it but as usual I've run into a problem, it's probably simple too, as I'm not sure exactly how to pick out the certain CSS snippets I need. I use Firebug but sometimes I just not sure whats happening with my CSS I guess.
This is my testing site so you can have a look at what I'm going to be talking about. In my footer, my last < li > element (the Archives) I'm hoping to get up right underneath Follow Us. I can always us the last child css rule however I know IE ignores that. So whats my next option? I know what to do if wordpress has given the lists individual styles but in this case it hasn't, so I'm not sure what to do.
CSS
#footer { width: 100%; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px;/*border: 1px solid #0C0;*/}
.footer-widgets { width: 960px; margin: 0px auto; padding: 0px; /*border: 1px solid #fff;*/ }
.footer-widgets li { width:280px; height: auto; list-style-image: none; list-style-position: outside; list-style-type: none; float: left; color: #fff; padding: 13px; margin-right: 10px; /*border: 1px solid #fff;*/ }
.footer-widgets li ul {color: red;}
.footer-widgets li ul li {color: #fff; margin-left: -50px; margin-top: -15px;}
What is the best way to make this work? Any help is appreciated!
If you need to support browsers that do not accept a :last-child selector then you have two options.
Manually add a class to the last element and style it.
Use javascript to find the last <li> and add a class, then style it.
[edit]
Unfortunately, the very handy lastElementChild that was introduced in the W3C Traversal Spec is also not supported in IE8/7. That leaves you, again, with two options.
Use a library like jQuery, which has very simple $('.footer-widgets li:last-child') selector
Use regular js and find the element through tedious DOM traversal.
I would say it's silly to use jQuery for this one thing, but if you will be doing other javascript stuffs on your site, might as well use jQuery, right? Otherwise, I would stay away from the DOM traversal as it's just a pain. Just manually put a class on the last <li> and be done with it :)
There are 2 alternatives I see:
Add a class to your last element and take it with JavaScript to do your own manipulation.
Use jQuery to get the nested elements (unnecessary I think).
Example:
$('.yourElement').css('property', 'value')
Complement:
Getting any element with JavaScript:
var x = document.getElementById("id");
I suggest you to take a look at this W3C documentation with an example. Right after you get the element with JavaScript comes manipulation anyway you need it.
I think it may help you!
http://cargocollective.com/joingateillustration
Hi everyone, this is my site I am developing and I have managed to add my twitter feed to my page however I cant add a line break before each tweet, Ive searched here and people have posted answers to a similar post but this doesnt seem to affect mine, can anyone help?
You could add a top margin to your tweet list items:
#twitter_update_list li {
list-style: none outside none;
width: 150px;
margin-top: 10px;
}
Something like this?
#twitter_update_list li span
{
padding-top:10px;
}
I have tried
<ul id="contact_list">
<li id="phone">Local 604-555-5555</li>
<li id="i18l_phone">Toll-Free 1-800-555-5555</li>
</ul>
with
#contact_list
{
list-style: disc none inside;
}
#contact_list #phone
{
list-style-image: url(images/small_wood_phone.png);
}
#contact_list #i18l_phone
{
list-style-image: url(images/i18l_wood_phone.png);
}
to no avail. Only a disc appears. If I want each individual list item to have it's own bullet, how can I accomplish this with css, without using background images.
Edit : I have discovered that, despite what firebug tells me, the list-style-image rule is being overridden somehow. If I inline the rule, like so:
<li id="phone" style="list-style-image: url(images/small_wood_phone.png);">Local 604-555-5555</li>
then all is well. Since I have no other rules in the test case I'm running that contains ul or li in the selector, I'm not sure why inlining gives a different result.
Try this:
#contact_list li
{
list-style: none;
}
#contact_list li#phone
{
list-style-image: url('images/small_wood_phone.png');
}
#contact_list li#i18l_phone
{
list-style-image: url('images/i18l_wood_phone.png');
}
I'm not sure if this is your problem, but you're using relative links to your images. When you use relative links in css, it is relative to the css file, but if it is inlined, it will be relative to the html page.
First determine whether you are in "quirks" mode or not, because for many CSS properties it makes a difference.
Secondly, the W3c specifies that the URL should be in double quotes (although I don't use the quotes, either). Go with the spec to save yourself trouble down the line.
If you are specifying "strict" in your DOCTYPE, then the browser may require the double quotes, per the standard.
The thing is, I tried your code it it works. The only time it doesn't is if the images are not present. Maybe you need to check to see that the images you specify in the CSS are actually in the folder images or not misspelled.
NOTE: IN both firefox and ie.
I never would have thought. If I quote the url, like so:
#contact_list #phone
{
list-style-image: url("/images/small_wood_phone.png");
}
it starts working. I unquote it, and it stops. I thought that's not supposed to make a difference.
Thanks for your help, everyone.
I would suggest doing it slightly differently, in the CSS - i.e.:
#contact_list
{
list-style: none;
}
#contact_list li {
padding-left: 20px; /* assumes the icons are 16px */
}
#contact_list #phone
{
background: url(images/small_wood_phone.png) no-repeat top left;
}
#contact_list #i18l_phone
{
background: url(images/i18l_wood_phone.png) no-repeat top left;
}
You might double check that those images are where you think they are. This example works fine unless the images are missing.
Could you try adding list-style-type: none; to #contact-list? Perhaps even instead of your list-style: declaration.
It pains me to suggest it, but have you tried the !important flag? Also, does it behave the same in other browsers? What if this is something you have in your Firefox userChrome.css file?
You could try adding !important after the list-style-image property, which would prevent it from being overridden.
#contact_list
{
list-style: disc none inside;
}
#contact_list #phone
{
background-image: url(images/small_wood_phone.png) no-repeat top left;
padding-left: <image width>px;
}
#contact_list #i18l_phone
{
background-image: url(images/i18l_wood_phone.png) no-repeat top left;
padding-left: <image width>px;
}