Syntax highlighter 3.0 is not working on my blog. I use the newest version right from the website. The issues are:
If I write #include in my code, I get at the end of it. There's no text wrapping. The blog's link is http://snacksforyourmind.blogspot.com. I also checked out options but they give nothing but bloggerMode which I already enabled. All the issues are visible in the second code from top of the page. Does anybody have some idea how to fix it?
Depending on your template, the SyntaxHighlighter JavaScript code may run before the content has loaded. In that case, changing the code to run after a short timeout should fix the problem. Try this in the <head> of your template HTML:
<script type="text/javascript">
window.setTimeout(function() {
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
}, 10);
</script>
You can add further customisation of defaults before the call to ScriptHighlighter.all().
If you want to customise the look and feel of the SyntaxHighlighter code display, add some CSS like this:
.syntaxhighlighter code {
font-family: Consolas !important;
font-size: 10px !important;
}
The !important is necessary to override the SyntaxHighlighter theme definitions.
Related
I'm getting a little confused by a CSS question I've got on a WP site I'm working on.
There's a theme installed which always includes a header class on each new page (.title-banner) and I want to hide this on this one specific page. I don't have access to the stylesheets so I just wanted to use CSS to hide the element on this one page, using display: none;, however it won't work if I put it within a tag directly on my page. If I apply the CSS in the inspect tool, it does however work.
Is there a way I can get this to register by using on-page CSS rather than within the stylesheet, as this isn't an option? I know display: none; and !important isn't ideal but I don't know any other way to achieve this.
You need to be more specific to override existing CSS.
You can add this to your theme, or by going to "Appearance > Customize > Additional CSS" from your wp-admin.
Replace the Page ID with the page ID of your page... You can find it by looking at the admin page ID, or inspecting the <body> tag. Wordpress puts the page-id-xxx class in the body of every page, allowing you to override specific CSS on a page by page basis.
/* Replace Page ID with your page id */
.page-id-336 .title-banner {
display: none;
}
Use this;
<script>
window.addEventListener("load", function(){
document.getElementsByClassName('class_of_your_element').style.display = 'none !important';
});
</script>
You should try Javascript. I think your CSS styles are getting overridden by some default ones.
Use this;
<script>
document.querySelector('.title-banner').style.display = 'none';
</script>
So, the lightbox works on my page but it doesn't respond to any changes made in the stylesheet file, lightbox.css. Yet, when I remove reference to the file, the lightbox stops working, so it's clearly being called to.
In the page's code, the stylesheet is being called with:
<link href="../css_javascript/lightbox.css" rel="stylesheet">
And the jquery is being called with:
<script src="../css_javascript/lightbox-plus-jquery.js"></script>
Truly have no idea what to do from here. I'm really just trying to get rid of the Image # count, and calling to lightbox.option in the page's code doesn't work either.
Not sure what information is best needed to put me on a solution path.
Thanks!
If you want to hide the "image 1 of 4" text, it is not done in the CSS but in the javascript options for Lightbox.
Add this to your page after <script src="../css_javascript/lightbox-plus-jquery.js"></script>:
<script>
lightbox.option({
'showImageNumberLabel': false
})
</script>
Also, your Lightbox.css file is not loading the navigation images, the loading and close images used by the light box.
body:after {content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
display: none;
}
They need to be in a folder, images, one level up from your "css_javascript" folder.
Has anyone tried changing the CSS in the new Facebook Page plugin? Old plugin used to provide some options such as being able to select a color scheme. However, the new plugin it's white all around and it does not seem to accept my custom CSS. Example:
._h7l {
background: transparent !important;
border: none !important;
}
Any ideas how we can get some custom CSS to work?
You cannot modify the CSS. The content of the plugin is displayed inside an iframe so there is no way you can change CSS or override any javascript method.
There are different options provided by this plugin you can customize. Please take a look into the docs:
https://developers.facebook.com/docs/plugins/page-plugin/
I hope it helps.
Yes you can, but not without using a little bit of jQuery and you site must use an https protocol (https). Both protocol must match...
Start by adding this awesome plugin: jquery.waituntilexists.js
And then play with your Facebook iframe by adding your css in it:
$(".fb-page iframe").waitUntilExists(function(){
$(".fb-page iframe").contents().find('head').append('
<style>._h7l {
background: transparent !important;
border: none !important;}
</style>
');
});
I really don't like ExtJS but I'm forced to use it. I want to use Twitter Bootstrap 2.2.1 for the main layout and ExtJS for grids and JS (policy).
I have an awesome looking Bootstrap design going but the minute I load ExtJS, the navbar, fonts, etc get all hosed up.
Is there a way I can get the two to work together without going into the ExtJS and tweaking tons of CSS?
The CSS file I am using is in the following path (for ExtJS):
js/extjs/4.1.1/resources/css/ext-all-gray.css
Thanks
Here is my solution:
1.use ext-all-scoped.css instead of ext-all.css
2.add the following code before you load ext-all.js
<script type='text/javascript'>
Ext = {
buildSettings:{
"scopeResetCSS": true
}
};
</script>
<script type='text/javascript' src='http://xxx.com/extjs/ext-all.js'></script>
3.remove the following declaration in ext-all-scoped.css to prevent extjs to re-render the body with those conflict css declarations after bootstrap has been loaded
.x-body {
...
}
The problem is that the rule
.x-border-box .x-reset,.x-border-box .x-reset * {box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;}
is somehow being applied for all page elements, also for Twitter Bootstrap input's (tested on FF, Chrome).
So you should simply provide
box-sizing:content-box !important;
-moz-box-sizing:content-box !important; /* Firefox */
-webkit-box-sizing:content-box !important; /* Safari */
for all Twitter input's.
Additional info on box-sizing.
I hope that this helps.
How do I override the css of a fancybox?
I'm building a website that uses fancybox on two different pages, and I want to override the fancybox css on one of these pages so the arrows are pushed outside of the box.
IE I would like to impart these properties on the fancybox:
.fancybox-prev {
left: -80px !important;
}
.fancybox-next {
right: -80px;
}
I can't figure out how to accomplish this and solutions to other relevant stackoverflow problems don't work. I'm sure there's a simple way to do it.
Can anybody help me out?
$('.fancybox-prev').attr('style', 'left: -80px !important');
$('.fancybox-next').attr('style', 'right: -80px');
You have to remember about hirarchy of the CSS. Inline CSS are the most important ones, external CSS will be read second.
When it comes to the latter, they are read from the top of your CSS file. So writing the style, which you want to use to override a previous one, below, should do the work just fine.
Secondly, you can always use jQuery to do that. ShaggyInjun gave a good example. You should be able to do that by using $(selector).css();.
if using fancybox v1.3.4 check:
http://fancybox.net/faq No.8 .... it also might be useful to check this.
if using fancybox v2.x check :
https://stackoverflow.com/a/8672001/1055987
Basically, you have to set a CSS inline declaration AFTER you have loaded the fancybox css file in order to override those properties.