Website Overlay, Is It Possible? - web

Can anyone come up with a solution?
We sell phone systems from a supplier www.voipstudio.com
Our customers login to their account at www.voipstudio.com/login
We want to hide everything around the login page so it only shows the login details.
Is there anyway to over white boxes around the login dialog box?
This picture shows how it currently looks
This picture shows how we would like it shown
Is there any way to maybe load pop up boxes over the sections that we don't want the customers to see or another method?

Based on the information you provided and the page that you referenced in your question. If you add this css to your css file it will hide all of the divs you want to not be on your page.
This works because I am using the css to not show the data.
.page-id-653 .main-image {
display: none !important;
}
.page-id-653 .dark-bg {
display: none !important;
}
.page-id-653 .ft-button {
display: none !important;
}
.page-id-653 .site-footer {
display: none !important;
}
.page-id-653 .ft-button-twitter {
display: none !important;
}
.page-id-653 .ft-button-facebook {
display: none !important;
}
.page-id-653 .vs-page .header {
display: none !important;
}
Please notice that I added the class .page-id-653.
The reason I did this is to make sure we don't hide the data on any other page besides this specific page.
In order to enter the css please go to
Appearance / editor / style.css
From your Wordpress Dashboard
If you do not have access to this site and you are trying to serve it up with an iframe you could attach the id of the area you want to show to the url.
<iframe id="iframe" src="http://voipstudio.com/en/login/#l7p-login-form" width=400 height=400></iframe>
The social media sidebar they have on the page was acting a little difficult for me but this one of these answers should get you twoards one of the best solutions for your situation.
There are many ways you can get tricky with iframes. I suggest searching SO for more on, "position iframe on specific points".

Related

Bookmarks drop user off at wrong page

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.

Custom Search Result Box For Blog

My Blogger custom search gadget in a menu when click on this its visible but I want it to the visible always. my blog www.bloggerspices.bid
Use this
div#searchbox {
display: block !important;
}

css background image issue in google site

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.

How to add Code Gadget on Google Sites

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

dreamweaver button link CSS help

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.

Resources