Create text boxes that change colour when hovered over - text

I am trying to create text-box hyperlinks for my website. I want transparent boxes until hovered over then i want to box to change colour but not the text. i was wondering if their was a way to do this?


Using CSS you'll want to add background-color: yourcolor to the hover pseudo class.
Here's an example for you:
<!-- Here's the HTML -->
<div class="myDiv">
<p>Here is some text and then you will be linking to another site</p>
</div>
Then in your CSS you'll have:
.myDiv a:hover {
background-color: red;
}
Pretty Simple.

Related

Bootstrap Navbar - Extra Spaces?

I have a Bootstrap Footer that I'm making, and I'm putting images in it as icons, and also text - all as < li >s.
Where there are images - there is no space at the bottom.
Where there's text - there is. Why is that? I don't want that.
Check it out here on JSFiddle:
It's the first time I've posted a JSFiddle link here, so if you mind explaining me why StackOverflow required me to use code with the link, it'd help me with future questions.

You could simply add padding-top: 5px; to your li with text like this:
<li style="border:1px solid blue; padding-top: 5px;">logo</li>

Modifiying default "Choose File" label of <h:InputFile>

I would like to know if there is a method to label and rename the text displayed by JSF Choose a File when I'm using the tag <h:InputFile> in JSF.

That's not possible with native HTML. The appearance and the button's label is browser-dependent. The particular "Choose File" label is recognizable as the one from Chrome with English language pack (e.g. FireFox uses "Browse..."). As JSF is in the context of this question just a HTML code generator, it can't do much for you either.
There are several ways to achieve this. All can be found in this HTML+CSS targeted Q&A: Styling an input type="file" button, particularly this answer.
Easiest way is to reference it via <h:outputLabel for>, style it to look like a button and hide the actual file upload component. Clicking the label element will as usual just delegate the click event to the associated input element. See also Purpose of the h:outputLabel and its "for" attribute.
Here's a non-IE compatible kickoff example (it's supported in IE's successor Edge):
<h:outputLabel for="file" value="Pick a file" styleClass="upload" />
<h:inputFile id="file" value="#{bean.file}" styleClass="upload" />
label.upload {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
padding: 2px;
cursor: pointer;
}
input.upload {
display: none;
}
If you'd like to support IE9+ too, replace appearance: button by a background and border. It's only harder to get it to look like a true button. The below is far from ideal, but should at least get you started.
label.upload {
padding: 2px;
border: 1px solid gray;
border-radius: 2px;
background: lightgray;
cursor: pointer;
}
If you'd like to support IE6-8 too, which won't delegate the label's click event to the hidden input element, then well, head to the aforementioned related question for CSS tricks on that and rewrite JSF code in such way that it generates exactly the desired HTML+CSS(+JS) output.
A completely different alternative is to grab an UI oriented JSF component library, such as PrimeFaces which is based on jQuery UI. See also its <p:fileUpload> showcase.

Select part of a text with CSS selectors

Is is possible to select part of a text using just CSS selectors?
For example:
<p id="myparagraph">
Your order id is 7654. Thanks for your order.
</p>
I now I can select text from paragraph via $('#myparagraph').html()
But is it possible to select only the numbers 7654 from that text using just CSS selectors?
I'm not in control of the source HTML, so unfortunately I cannot alter the text.

In this case you have use span tag like this
<p id="myparagraph">
Your order id is <span class="number">7654</span>. Thanks for your order.
</p>
After then you can write your css code by calling the selector like this.
span.number {
color: red;
}

Editable spreadsheet control in a webpage

I am trying to place an editable spreadsheet control in a webpage without the menus and toolbars. I saw the postings about this and the last one said to use Google Docs spreadsheet and then choose Publish. If you use "?widget=true&headers=false" then the menus and toolbars will be removed.
This works great. The only problem is the data is not editable! It's a static spreadsheet. Is there a way to get the google spreadsheet control in a web page without menus and toolbars but make it editable?

I simply put the spreadsheet control inside a div and used the div to cover up the tool bars and scroll bars, etc. Worked great.
Here is the html:
<div id='spreadsheet' style="position:absolute; top: 900px; left: 3px; width: 1058px; height: 350px;overflow: hidden">
<iframe style="position:relative; top: -143px; left: -48px; width: 1140px; height: 650px;" src="https://docs.google.com/spreadsheets/d/1zt7JNkuqYKGKxRXSTtgjWeUFnCxRjSLB0UKs1oJk6PY/edit#gid=1047354991?widget=true&headers=false" width="600" height="600"></iframe>
</div>

How to change icon of TreeTable in Primefaces?

I have simple treeTable. http://www.primefaces.org/showcase/ui/treeTable.jsf
I want to change expand and collapse icon of this treeTable. How can I do that?

If you want to use custom icons (images), override the following CSS classes for their respective uses, on the treetable:
ui-icon : to customise the expanded-row state icon (the triangle)
.ui-icon {
width: 16px;
height: 16px;
background-image: url("/your-image-here");
}
ui-icon-triangle-1-e ui-c : to customize the collapsed-row state icon
If you want to use more modern fontAwesome 'icons', see Change icon from jQuery UI to FontAwesome in PrimeFaces

Resources