I need to remove the search button which is normally placed on the right side of the search form and enter default text that appears inside the search form like the one, here on stackoverflow. I just want the text inside the search form to be a little lighter as well. BTW i am using the toolbox wordpress theme but anyways heres the code.
<div id="search" class="widget widget_search">
<?php get_search_form(); ?>
</div>
I have taken a snapshot of the code in search.php, heres the link
http://i.stack.imgur.com/HreJI.png
And heres the css:
#searchform label {
display: none;
}
#searchform input#s {
width: 150px;
}
input[type=text],
input#s {
margin: 0 1em 0 0;
width: 60%;
}
textarea {
width: 80%;
}
#search {
float: right;
margin-top: -98px;
margin-right: 22px;
}
The search button can be hidden by simply changing its CSS properties to the following:
#search {
display: none;
}
As for placeholder text, you would have to use Javascript or HTML5 in order for that to work, like detailed at this website.
EDIT
Based on the form not being quite organized the way the question suggested, just change the CSS above to:
#searchsubmit {
display: none;
}
Related
hi im pretty new to doing front-end stuff i have this div that contains this mini divs inside it when it only have a p tag input here is how it looks like
but when i added my code for its contents, the div misaligned
and now it looks like this
so fare here is the codes im working with
<div id="tabular" style="display:none">
#foreach($NSAdata as $list)
<div class="divcont">
<p>Filename :</p>{{$list->filename}}
</div>
#endforeach
</div>
.divcont
{
background-color: pink;
display: inline-block;
width: 300px;
height: 150px;
margin-bottom: 1%;
margin-right: 1%;
}
#tabular
{
height: 28.125em !important;
overflow-y: auto;
}
any idea what im doing wrong? or to improve my code?
Adding vertical-align: top; to your inline blocks should fix it.
.divcont {
...
display: inline-block;
vertical-align: top;
}
The reason is the default value of vertical-align is baseline, when your content inside the inline blocks has different length/height, that causes the mis-alignment.
Inline-block elements are whitespace dependent, which means spaces in your HTML are spaces on screen.
Try and remove the extra blank line at the start of your #foreach loop.
Also add white-space: nowrap; to the #tabular parent div
I have this HTML:
<div class="dashboard_wrap">
<div>orders</div>
<div>porting</div>
<div>contact</div>
</div>
that displays 3 divs, here is the CSS:
.dashboard_wrap {
padding:10px;
}
.dashboard_wrap div {
border-left:1px solid black;
padding:10px;
width: 50%;
height:200px;
margin-bottom:50px;
overflow-y:scroll;
float: left;
}
.dashboard_clear:after {
content: "";
display: table;
clear: both;
}
#media all and (max-width: 700px) {
div.wrap div {
width: 100%;
float: none;
}
}
I am using PHP so only certain users can see certain divs. If a user can only see the first 2 divs, how can i make them 50% each rather than 40%?
There is no need to use php or javascript for this. You can use basic html and css for this.
You can check the html fiddle for this: http://jsfiddle.net/4WaX4/1/
All the css which you need is this:
.dashboard_wrap {
display:table;
min-width:500px;
background:#00ff00;
}
.dashboard_items {
display:table-row;
}
.dashboard_items div{
display:table-cell;
border:1px solid #ff0000;
}
#media all and (max-width: 700px) {
div.dashboard_items div {
width: 100%;
display:block;
}
}
And the html looks as follows:
<div class="dashboard_wrap">
<div class="dashboard_items">
<div>orders</div>
<div>porting</div>
</div>
</div>
<div class="dashboard_wrap">
<div class="dashboard_items">
<div>orders</div>
<div>porting</div>
<div>contact</div>
</div>
</div>
Very simpel and quick. When you resize the result window in jsfiddle you see that the divs become 100% relative to the outer div (500px).
I hope this is the solution youre looking for...
You can specify the class of the wrapper based on the number of items inside.
CSS classes for each variant will handle the style automatically.
If however the number of divs can extend beyond expected numbers, then dynamic inline styles may be your solution.
<div class="dashboard_wrap has3">
<div>orders</div>
<div>porting</div>
<div>contact</div>
</div>
<div class="dashboard_wrap has2">
<div>orders</div>
<div>porting</div>
</div>
<style>
.dashboard_wrap div {
border-left:1px solid black;
padding:10px;
height:200px;
margin-bottom:50px;
overflow-y:scroll;
float: left;
}
.dashboard_wrap.has2 div {
width: 50%;
}
.dashboard_wrap.has3 div {
width: 33%;
}
</style>
When the page gets rendered, only two divs will be visible. What you need to do is use a client-based language i.e. javascript or jQuery, to manipulate what is visible on screen.
Use a simple check to see what divs are visible or use php to generate a value which you can hide in the page to make it easier to resize the divs like:
<input type='hidden' id='divs_visible' value='" . $divs_visible ."' />
then using jQuery:
$(document).ready(function() {
var divsvis = $("#divs_visible").val();
if(divsvis == 2)
{
// resize the divs
}
});
EDIT
You can also render all the divs, then using jQuery and the value you've placed in the hidden input, you can simply hide the div you do not need with:
$("#div_to_be_hidden").hide();
Well, I have sidebar but text(in my case tables) inside sidebar are not aligned like I want.
From one .php I call another inside sidebar, like this:
<div id="sidebar2"> <?php include("tiket.php");?></div>
Here is it CSS of sidebar:
#sidebar2 {
width: 240px;
float: right;
padding: 40px;
background: #264988;
color: #e1d2c7;
margin: 5px;
text-align:justify;
}
An this is how it looks:
How to put text on the left of the sidebar?
It would help a lot if you gave us the complete source code of the sidebar, or told us where it was located.
I think that the reason why the text is not aligned to the left is because you put in text-align:justify;. Remove that line.
#sidebar2 {
width: 240px;
float: right;
padding: 40px;
background: #264988;
color: #e1d2c7;
margin: 5px;
}
What justify does is spread the text out evenly, which can be unhelpful if you don't have much text.
You can nest with CSS3
#sidebar2 table {
text-align: left;
}
you can read more about it over here
https://www.w3schools.com/css/css_combinators.asp
I am using a bunch of divs (created with PHP) to generate a block of clickable elements. What I need to do is apply some styles to these generic elements, rather than to specific ones, yet using the code below seems to be invalid.
#Container {
height: 80%;
width: 60%;
background-color: green;
}
#Container div:hover {
background-color: blue;
}
<div id="Container">
<div style="background-color: red; width: 100px; height: 100px;">
</div>
http://jsfiddle.net/XD2eZ/
So I am not sure if it is an issue that a generic div element cannot be styled as a sub-element AND have a :hover attribute that operates properly. I know that classes or id's can be specified to handle this, but have thousands of unique divs. I also cannot use
#Container:hover div{ background-color: blue;}
As it ALSO seems to be invalid, but I need to select the one element from a block, and not all at once.
Any ideas here? Thanks in advance.
This will work if you remove the background color from the HTML, and apply it using css:
#Container {
height: 80%;
width: 60%;
background-color: green;
}
#Container div {background-color: red;}
#Container div:hover {
background-color: blue;
}
Example: http://jsfiddle.net/XD2eZ/1/
The reasone is CSS Specificity - a style attribute rule is much more specific (stronger) than an ID + element rule.
Sorry if this question has been asked a lot. I am currently working on a site that will have a custom gallery. Of all things to get stuck on right now, its the gallery page indicator.
On this page, the left portion will be made of a gallery of "galleries", displaying 6 galleries per "page". http://www.ct-social.com/ctsdev/aff/news-and-events/
Above the gallery are small blue dots that will serve as gallery indicators. The code to create the gallery indicators is as follows:
<?php for ($i=0; $i < $n2; $i++): ?>
<div class="event-gallery-unselected"></div>
<?php endfor; ?>
Upon loading I would like the left most dot to be given a different style that is attributed to class="event-gallery-selected". Upon clicking any other dot (except the current selection) the currently selected dot needs to revert back to "event-gallery-unselected" and the clicked dot takes on "event-gallery-selected"
I am kinda new to PHP, very new to JavaScript and JQuery. If using either of those languages as an example could you please breakdown your explanation? Thank you very much for all of your help.
Updated code:
CSS
.event-gallery.selected {
position: relative;
top: -0.7em;
background: white;
background-color: #1e93bb;
width: 20px;
height: 20px;
margin: 7px;
border-radius: 50%;
}
.event-gallery {
position: relative;
top: -1.1em;
background: white;
background-color: #63c5e7;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 7px;
float: right;
cursor: pointer;
}
Updated Code JS
<script type="text/javascript">
jQuery(document).ready(function($){
$(".event-gallery").click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
});
</script>
Just got it working now.
I would suggest having a class which is present on all of your gallery div elements. This will allow the common styles to be maintained and also allow you to have only 1 click handler. You can then have a separate selected class which you toggle as needed. Try this:
<?php for ($i = 0; $i < $n2; $i++): ?>
<div class="event-gallery"></div>
<?php endfor; ?>
.event-gallery {
color: #000; /* default styling ... */
padding: 5px;
}
.event-gallery.selected {
color: #FFF; /* selected item styling ... */
background-color: #C00;
}
$(".event-gallery").click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
Example fiddle
use jQuery like this:
$('divid').click(function(){
$('divid').css('background-image', 'pic2.jpeg');
});
for example
If you have a set of elements:
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
I typically handle it as such:
var $items = $('#wrapper .item');
$('.item').click(function(){
$items.removeClass('active'); // 'reset' the active links
$(this).addClass('active'); // apply the active class to the clicked item
})
This can easily be done with a little bit of help from jQuery.
$(function() {
$(".even-gallery-unselected").on("click", function() {
this.removeClass("event-gallery-unselected")
.addClass("event-gallery-selected");
});
});