I have a made a custom search box for google custom search. In order of the branding terms I need to have a watermark in the search box. I have tried to use the onFocus attribute in html but this is the wrong approach for me. I want the same style as this Example.
When I try to use the onFocus it only "apply" once. So if i higlight the input box the custom search image disseaper, but when i click on another element the image stay disseapered and does not return.
I have also tried to use the following script below, but that only gives me a input box inside my alleredy custom search box.
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
How can i make a same effect that google custom search ?
You should be able to just create a CSS class or you could include an inline style with the background-image: property and assign it to the <input> tag. Try something like this...
.InputFieldBkgd
{
background-image: url(images/imageName.png);
background-repeat: no-repeat;
}
when you fire off your onFocus event, you can remove this class and assign a different class that does not have a background-image property. then onBlur assign the original class to add the image back.
Run a script after page load (i.e. even after custom search box loads) and add a placeholder.
Related
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'Flat-UI-Icons';
content: attr(data-icon);
speak: none;
I saw this code in one of the bootstrap theme template. How does data-icon or attr(data-icon) works? i cant seem to display the "image/words" of the example i had, it's empty now. I tried
text here
The text here's font doesnt seem to be the same as the example's one and also , the example didnt have anything between the a tags.
Please advice. Thank you
The css above will affect what happens before each instance of data-icon and not the link shown
They are a css3 feature. Attribute selectors alow you to to apply formatting to elements based on certain attributes.
[att^=val] – the “begins with” selector
[att$=val] – the “ends with” selector
[att*=val] – the “contains” selector
good description here which is where above taken from and here
I'm working on a joomla 2.5 website and I'm using the SIGPlus plugin to display an image gallery. The gallery is displayed using the boxplus popup engine.
Most of the functionality is there out of the box but I want to add a new parameter, that defines the color of a 'topbar'. The topbar is a css property on the boxplus-viewer element and looks something like this:
.boxplus-viewer {
...
border-top: 10px solid <color>;
}
I'm trying to change the plugin syntax so that it takes an additional parameter 'topbar':
{gallery topbar=0099cc rows=15}joomlart/stories{/gallery}
so that the resulting css will look like this:
.boxplus-viewer {
...
border-top: 10px solid #0099cc;
}
My problem is that I don't even see the 'topbar' property as part of the $curparams array. I've added the topbar property to the sigplus.xml but it still gets removed. How can I add it to the list of accepted params?
Many thanks for your help!
Adding the parameter sigplus.xml is only helpful if you are going to only use what is entered in the plugin parameters to set the color of the top bar. If you want to add it as part of the plugin call, then you will need to edit sigplus.php (guessing on the file name, I have not looked at the plugin code). Somewhere in there you will find a regular expression that parses all of the parameters that are being passed in the plugin trigger. You will need to add to that so that the value entered is included in the $curparams array.
Good Morning, I am working on my wordpress web-page, which is made of image-boxes and they are changed to one-color background boxes with text on hover. See example here: http://www.top-news.6f.sk/.
I want make this boxes to have random color background or random color from list of colors.
I found out that the color of these boxes isnt set in .css file but its probably generated by some php file or function. (If u inspect source code you cand find that there is generated some css style inside, so if i put this code in my stelysheet.css it still wont work because it is overrided.
Can you give me any clues where to find a code where can i change the color of these boxes? Then I would be able to rewrite it to random color.
Thanks
If you want to override inline styles, in your style.css, use !important.
Similar to :
background-color: #fff !important;
If you want to create a random background color
<?php $hex = dechex(rand(0,255)) . dechex(rand(0,255)) . dechex(rand(0,255)); ?>
and then you’d use the following in your body tag:
<body BGCOLOR=“#<?php echo($hex);?>”>
I'm currently working on my own Wordpress theme. I thought it'd be cool to have a dropdown box in the sidebar in which you can choose different themes, and it'll change the page background, border colors, etc a bit.
The thing is, for one theme (the default one) I have Javascript in my header.php file where the header image will change each refresh. I want this header image to go away when switching stylesheets, but it just overlaps the other one. How do I change this?
If you want to see for yourself, the box is in the right sidebar under the blue buttons. This is my testing website. Ignore the 000webhost stuff.
http://trainman1405.site11.com/wordpress/
Thank you!
The general solution here is to define all of your styles in one sheet, but namespace them so you can simply change the class on the body and the new styles will take effect. (You could also define them in separate sheets, using the namespaces, and simply reference every sheet in your <head>.)
For example, some CSS:
body a { color: #00f; } /* default */
body.green a { color: #090; }
body.red a { color: #f00; }
And then when you want to change it (using jQuery, although plain Javascript could do this job too):
$('#theme_select').change(function()
{
$('body').removeClass('green').removeClass('red'); // remove existing classes
$('body').addClass($(this).val());
});
it looks like you could use a javascript library its called jquery. You could use that to hide and display a new image e.g
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
function piczotheme() {
$("defualttheme").hide()
$("mountaintheme").hide()
//and then show load add your picture
$('#defualt').css("background-image", "url(url of the picture)");
}
</script>
and then you have to set up a button or something to trigger this effect
so...
<button onclick="piczotheme()"> click </button>
On my Drupal site, I have made a Users page using the Views module, which is simply a nicely styled grid (HTML table) of users. I'm displaying a few fields for each one, and both the name and the profile picture have been set to link to the user node.
What is the best way to change it so that the whole cell (HTML td) links to the user node? EDIT: I'm not concerned with adding the HTML link tags, but with accessing each profile page's URL.
I've looked into modifying the theme of the view (over-riding the Style output e.g. views-view-grid--users.tpl.php), but cant see an elegant way to get the URL of the user node.
EDIT: I've implemented a temporary solution in javascript which looks into the HTML of each cell, extracts the first link's URL, and uses that, but is there not a better way of doing this using the Drupal variables somehow?
Thanks for your help.
How about something like this...no JavaScript needed
In your table:
<td>the link</td>
...
In your CSS file:
.td_link {
display: block;
width: 100%;
}
So basically all you need to do is add a class to your link, and a small snippet of CSS.
OK I found a better (super simple) way of extracting the profile URL, and also I over-came a few issues with the whole block-link solution (attributed to espais), which I thought were worth documenting. So here is the complete solution to my original problem:
1) Add a custom template file to override views-view-fields.tpl.php (see http://views-help.doc.logrus.com/help/views/using-theme - thanks to barraponto for the useful link). In this custom file, you should wrap all the code in a link, and add a clear-fix div just before the end to stretch the link to the full height of the container.
<a class="td-link" href="user/<?php print $row->uid; ?>">
...
<div class="clear-fix"></div>
</a>
2) Now you need to get rid of any other links from inside each grid element, as you are not allowed to nest HTML links (produces really weird behaviour). First thing to do is edit the View, and make sure none of the fields have "link this field to it's user" checked. Then if you want to include the profile picture field, you need to add a small fix module because by default there's no way to stop this field being a link! You can get the module from this comment: http://drupal.org/node/720772#comment-2757536
3) Finally the CSS. Add the following to your theme's style.css:
a.td-link {
display: block;
color: #000;
text-decoration: none;
border: 1px solid #E9EFF3;
}
a.td-link:HOVER {border-color: #85b3d4;}
a.td-link label {cursor: pointer;}
div.clear-fix {clear: both;}
This removes the link formatting from the text (as we want the whole block to look like a link, not just the text), and stretches the link out to fill the container. It also makes the cursor graphic consistent, and adds a nice border effect when you mouse-over the block. Remember you can also add a custom CSS class to your View, which makes it much easier/neater to select elements for styling in your CSS code.
It's important to distinguish between actual links, with <a> tags, and arbitrary elements you can click. Even if you don't care about semantics, you should care about your visitors not running JavaScript, especially search engines.
Rather than turning a block element into a link, you should turn a link into a block element, as espais suggested. One way to get more control over the markup is using custom fields to add opening and closing tags for your link around the rest of your fields.
spais and scott-reynen are right. but instead of placing every field under multiple <a> elements, each styled with css to turn them into blocks (which can have margin and padding), why not use a single <a> element?
if everything is meant to link to the same place, you can place it all together under a single <a> element, although every element should be an inline element (<span> instead of <div>). you can do it by changing the row template: check http://views-help.doc.logrus.com/help/views/using-theme
in your case, copy templates from inside the views module to your theme folder, and rename it accordingly as your view "Theme: Information" says. make sure there is no <div> or <p> or any other block element being output. if you need to break lines, use <br>.