I have a google Site and I'm wondering how I can display code in a code block on my site, some thing similar to how code is displayed on stackoverflow or stackexchange. I've looked out for a google gadgets but couldn't find one. Any idea if there is already a gadget that does that or should I have to get one created.
public class code()
{
//This is my Code
}
You can open the HTML window on a page and use the code wrapped with a pre element. You can also add a style block in there to restyle how that code element will be displayed. Here is an example of a fiddle
<style>
pre {
padding: 5px;
background-color: black;
color: white;
}
</style>
<p>
This is an example of a code block
</p>
<pre><code>
public function exampleCode() {
// this is where your code goes
}
</code></pre>
That's CSS and the 4 spaces just triggers it!
If you know where your submitting the code you could probably just run a find and replace to "/n " and " " and make it to be the block id of code which would be a view-able change
Related
When clicking on a public or private bookmark, Spotfire takes the user to the page that the user was on DIRECTLY BEFORE he or she created the bookmark. If the user were to select the bookmark again, it would then take them to the correct page, with the correct measures loaded.
This happens whether the GUI bookmark is clicked, or a bookmark link is clicked. In fact, if a link is clicked, it is almost impossible to get to the correct bookmark page (the user has to click very fast).
After a ton of trial and error, I limited it down to some HTML/Javascript functionality. In this dashboard, users navigate by using a custom navigation bar. If a user creates a bookmark, changes pages using the custom navigation bar, then clicks on the bookmark, it will not work correctly. If a user creates the bookmark, clicks the page tab then clicks on the bookmark, it will work correctly. I used the code here to build the python script that changes pages (kicked off by a changing Document Property). I was able to reproduce this bug in the sample spotfire reports. The below HTML code is for the Nav bar:
<style>
.topnav {
overflow: hidden;
background-color: #313814A;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 5px 16px;
text-decoration: none;
font-size: 16px;
font-family:Calibri;
}
.topnav a:hover {
background-color: #ddd;
color: black;
cursor: pointer;
}
.topnav a.active {
background-color: #ddd;
color: black;
}
</style>
<div class="topnav">
<a onclick="SBAReporting()">Reports</a>
</div>
<!-- input field that changes the Doc Prop that fires off the python script-->
<div id="navigateToPage" style="display:none"><SpotfireControl id="f9cc2258568d415383d842064287993a" /></div>
<script>
function SBAReporting() {
randInt = Math.floor(Math.random() * (100+1))
myJSObject = "Reporting";
document.getElementById('navigateToPage').firstChild.value = myJSObject + randInt;
$("#navigateToPage input").focus();
$("#navigateToPage input").blur();
}
</script>
My theory on what is happening is the following:
User clicks on the custom HTML/Python navigation to get back to a page. Spotfire has some internal variable that does not get set correctly.
The user selects the bookmark. Spotfire thinks they are already on the correct page so it does not navigate there. Part of the bookmark process sets that mystery variable correctly.
The second time clicked, that variable is set correctly, spotfire knows what page you are on, and it works correctly.
I tried to refresh the entire page (and hopefully that variable) by adding location.reload(); but that did not work. Is there a way to let Spotfire refresh the page? Any insight on what may not be updating correctly?
tl;dr It seems that the pythonic way to change pages in Spotfire does not alter some behind the scenes variable to let Spotfire know what page the user is truly on. This happens with sample Spotfire provided reports and Spotfire provided Python Scripts. I need a better way of letting Spotfire know what page a user is on.
UPDATE A defect has been logged with TIBCO. Still open to work-arounds.
I'm writing wordpress theme using Tiber and have really interesting case regarding different images on mobile and desktop.
Case:
I would like to upload 2 images (mobile and desktop version) using Advanced Custom Field PRO in Wordpress and use them in custom Timber template engine theme.
Code:
.twig
<div class="application--main-image"></div>
.scss
.application-main-image {
background-position: center bottom;
background-repeat: no-repeat;
background-image: url('../img/mobile.png');
#media (min-width: 600px) {
background-image: url('../img/desktop.png');
}
}
I found that I should use inline-style to put {{ post.image }} inside background-image but what about media queries?
Should I make some custom attributes or style inside .twig file with <style></style> but I want to use scss so it's not the case.
How would you solve that problem?
This is certainly a unique use case, here are my thoughts on how I would approach this:
<style>
.application--main-image {
background: url('https://source.unsplash.com/500x500/?ocean');
/* The actual URL would be replaced by your ACF Filed {{ post.mobile_image }} */
}
#media (min-width: 600px) {
.application--main-image {
background: url('https://source.unsplash.com/500x500/?mountain');
/* The actual URL would be replaced by your ACF Filed {{ post.desktop_image }} */
}
}
</style>
<div class="application--main-image"></div>
I think you are correct in that you will need to add the tags and the css necessary to your .twig template. I know you want to use .scss, however you only really need to change the background image property. I have create a JS fiddle to show you what I mean.
https://jsfiddle.net/robertguss/2kacx91k/7/
I hope that helps. If you have already come up with a solution that is different than mine, please share it here so not only I can learn but others in the future as well.
Cheers.
I am trying to specify a backgroud image for my google site, i have the following code inside the HTML Box
body {
background: #372412;
background-image:url('a/mysite/my/home/body.jpg');
background-repeat:repeat-x;
margin: 0;
padding: 0;
font-size: 13px;
color: #FFFFFF;
}
i tried different options but the HTML Box Properties page just reports an error and i cannot get the image into my page.
i have one more image loaded using
<img src="/a/mysite/my/home/img11.jpg"
this image is shown properly so i suppose that the link is referring correctly.
can someone give me some direction to solve the above issue
I don't think you can change the background in Google Sites like this. The HTML Box is sanitized, and this CSS will probably go away.
Instead, use More -> Manage Site, then choose Themes, Colors & Fonts, and specify the background you wish to use.
I am trying to put two Nivo sliders on one page. Some of the attributes are different. So I have simply created two scripts for these attributes, "slider" and "slider2". That's no problem.
However, I want to make the title style a little different for the second slider. I noticed that the text style of the slide title is controlled by this style:
.nivo-caption p {
padding:8px;
margin:0;
color: #000;
font-size: 16px;
}
However, I don't see that css style called within my html. (When I look at the web page source code I see it but not when I'm actually looking at the code file itself.)
I'd love to simply create a new style for my second slider, something like:
.nivo-caption2 p {
margin:0;
color: #000;
font-size: 12px;
}
But I need to know how to actually call that within my html. Can anyone help? Thanks.
Actually, I figured it out. Since I have ids of "slide" and "slide2" for each slide show, I simply appended that to my new style and that worked.
Hey guys I'm currently having trouble with my CSS linking. Basically I want the colour of my links to change when I hover over them, and click on them and such. But for some reason it is not working when I view it on a browser. Below is my HTML code and my CSS code, they are seperate files and are linked togather. Thanks in advance. (I apologise if the codes are not appearing correctly but it is all there)
EDIT: Don't worry its fixed now :D thanks for the help
from what I see, you don't have a:hover,a:vistied, or a:active defined anywhere, which is what controls the behavior you're looking for.
Are you coding by hand or using Dreamweaver as a WYSIWYG?
NOTE: This could be because the files aren't formatted well in your question, so Markdown could have dropped some characters from the display.
From what I can see, the CSS file isn't written correctly. I'm going to give one example for you which fits for the whole file:
content {
width: 510px;
float: left;
}
This snippet above looks for the <content> tag in the HTML, and when it finds that tag, it will give it a width of 510px and floats it to the left. The problem here is that there are no <content> tags in your HTML page OR in HTML 4.01 itself. What you need to do is change it to this:
.content {
width: 510px;
float: left;
}
By adding the '.' before 'content' in the CSS, it changes 'content' from <content> to finding a tag that has class="content" as an attribute.
Also, to get the <a> tags to change on hover, etc, use the pseudo-elements (pseudo-attributes?) of :hover, :active, and :visited, for when a user hovers over a link, clicks on a link, and has previously visited a link, respectively.
Example:
a {
color: blue;
}
a:hover {
color: red;
}
In this example, a link will display as blue unless the user has their mouse on the link.