Can someone maybe help me with a few lines of css code?
I would like to my search section on my page:
http://www.virtual-forms.com/docs/
To look something like this:
https://docs.wedevs.com/
I'm new to CSS and Wordpress
Thanks, Davor 🤗
EDIT:
My latest try was with this:
/*Header search weDocs*/
.wedocs input[type="submit"],
.wedocs input[type="search"]
{
background-color: #fff !important;
color: #000;
width: 50%;
}
But no luck.
you should get on with applying correct CSS by inspecting the elements in your web browser (right-click element on site > Inspect) to find their correct classes. inspecting linked site virtual-forms.com shows that the whole search form has a parent form element with class="search-form wedocs-search-form", with child divs with classes "wedocs-search-input" for input, "wedocs-search-in" for dropdown and "search-submit" for submit-button.
I would put display: flex; on the parent element:
.wedocs-search-form {
display: flex;
}
use classes to style each individual element there
.wedocs-search-input { }
.wedocs-search-in { }
.search-submit { }
Using those classes should get you closer to getting the correct style to those elements. read up on the flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I would use flex-grow on input to make it bigger for example. Hope this gets you along.
A while ago I had managed with very limited CSS knowledge to remove the user name; widget boarder; picture boarder; and 'follow on Pinterest' button. This was achieved by tagging the widget (in HTML) with:
div id="pinterest-container"
and then using the following CSS commands to hide everything but the pictures:
#pinterest-container > span { box-shadow: none !important; }
#pinterest-container > span > span > a { display: none; }
#pinterest-container span a:nth-child(3){
display: none !important;
}
.post-body center div#pinterest-container span span a{
display: block !important;
}
.post-body center div#pinterest-container span span span a{
display: block !important;
}
However a short time ago this stopped working and the picture boarders, user name and ffollow button all returned: http://www.andrewmacpherson.me/p/precedence.html
I would be very greateful if someone could help me hide these again, I've been searching and testing but with no luck!
Many thanks
Andrew
I remember hiding things like this back in the Myspace days. Overriding certain elements was often a complicated and brittle process. Fortunately, we've now got CSS attribute selectors, providing a more elegant way to handle situations such as yours. The $= part of the following selectors are targeting class attribute values ending with those certain suffixes (_img, _col, etc.). Hopefully, these overrides will last a little longer than the last batch.
Remove picture and widget borders:
#pinterest-container [class$=_img] {
display: block !important;
box-shadow: none !important;
border-radius: 0 !important;
}
#pinterest-container [class$=_col] {
padding: 0;
}
Kill the follow buttons:
#pinterest-container [class$=_button] {
display: none !important;
}
To remove the scrollbars, you'll have to do something a bit more general. Note: this will show all of the content in each group of images, so no truncation occurs.
#pinterest-container span span {
overflow: hidden !important;
height: 100% !important;
}
I've built a page using Wordpress, and am now trying to modify is using CSS. I want to remove the top padding from a particular element on my page. After inspecting the culprit element (using Chrome-->Inspect Element), I see that it has a class of .content-area and a top-padding of 72px. Here is the relevant CSS info yielded by inspect element:
.content-area, .content-sidebar {
padding-top: 72px;
}
However, when I insert the following into my style.css:
.content-area{
padding-top: 0px;
}
the padding remains. Any thoughts on what I'm doing wrong, or how to resolve?
sometime time this property can be inherited by parent class so you can try to this code
.content-area, .content-sidebar {
padding-top: 72px !important;
}
Thanks all. I changed the CSS to:
#media screen and (min-width: 846px) {
.content-area {
padding-top: 5px;
}
}
and the padding disappeared. Other media queries in CSS aren't as intuitive, but at least this works for now.
I've been working on positioning a button for a web app and ran into some difficulty.I've created this jsfiddle, which demonstrates the problem.
The code is taken out of context, so some of the rules and classes and such may not make sense, but the problem I'm having is the same. The button moves away on click and I can't seem to fix it when playing with the position. I want the button to stay in the same place when clicked, so that clicking on the button will actually take you to the link that it is referencing.
Any Ideas?
Thanks.
You are specifying the link move to 1px from the top of the page in the rule .back:active (what happens when you click down on an item.)
http://jsfiddle.net/3dk48/8/
a.back:active {
/* This breaks it.
position: inherit;
top:1px; */
color: black;
}
In addition, if you want to still have :active effects, you need to have the correct specificity (currently a.back:link rule overrides your color for :active, but if you correctly update the specificity you can fix that. As well as link rule positioning in the LV(f)HA order (LoVe HAte mnemonic, plus focus lol) will ensure your pseudoclasses work properly.)
The LoVe-f-HAte mnemonic:
a:link { ... }
a:visited { ... }
a:focus { ... }
a:hover { ... }
a:active { ... }
... ensures that the correct states override the correct other states.
Remove the below code from .back style
position: absolute; // not need
margin-left: 2%; // not need
then the problem can solved.
EDIT:
also make change here..
.back:active {
/* position: absolute;
top: 1px; */
color: black;
}
fiddle: http://jsfiddle.net/3dk48/9/
use this:
.back{
top:32px !important;
}
body{
position:relative;
}
I have the following CSS for my print style:
* {
display:none;
}
#printableArea {
display:block;
}
I expected this to hide all elements, and only show the printableArea, however everything gets hidden. In print view, all I get is a blank page.
I have it included properly in the HEAD, with media="print" on this particular stylesheet.
If an element is not displayed, then none of its children will be displayed (no matter what their display property is set to).
* matches the <html> element, so the entire document is hidden.
You need to be more selective about what you hide.
You're taking the right general approach, but you want to use visibility: hidden instead of display: none so that you can set child elements to be visible.
See Print <div id=printarea></div> only?
html body * {
display:none;
}
#printableArea {
display:block;
}
Also, you may need an !important on #printableArea, but probably not.
Answering because I found this question while searching for this
Instead of 'display: none' you can use :
* {
visibility: hidden;
margin:0; padding:0;
}
#printableArea * {
visibility: visible;
}
source : https://www.concrete5.org/community/forums/5-7-discussion/need-to-print-a-certain-div-and-ignore-everythign-else-on-the-pa
You might try popping it up on top of everything. This solved 90% of my problems, then I just had to make a .noprint class and add it to a few straggling elements.
.print_area{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 9999;
background-color: #ffffff;
}
If you want to use JavaScript, you can try this simple snippet that doesn't even require jQuery:
document.body.innerHTML=document.getElementById('printableArea').innerHTML;
make a div wrap everything after the body tag. Before the wrap div, put the visible item's div.
I had to do this to make a simple username-password page, and needed to hide everything, except the half-opaque sign-in form's background. So, after the correct credentials were typed in, the form would animate out, and the half-opaque page cover would animate out, and finally, EVERYTHING aside would show up and you could use the page normally.
There is a one-line solution:
With JQuery
var selector = '';
$(document.head).append($('style').text('*{visibility:hidden}' + selector + '{visibility:visible}'));
Without JQuery
var selector = '';
document.head.appendChild(Object.assign(document.createElement('style'), { innerText: '*{visibility:hidden}' + selector + '{visibility:visible}' });
In both examples, set the selector variable to the selector you want. For example, div#page:hover or p.class1,p.class2
#media print {
* {
visibility: hidden;
}
/* Show element to print, and any children he has. */
.svgContainer, .svgContainer * {
visibility: initial;
}
}
Make sure any children elements are also visible. Remember that invisible elements still influence positionning of other elements in the page. In my (simple) case, I just added position: fixed; on .svgContainer (somewhere else).
Simply you can use the following code and assign "hide" class to that specific element you dont want to display on print page
<style type="text/css" media="print">
img
{
display:none;
}
.hide
{
display:none;
}
</style>
There is another clean way to achieve this:
* {
visibility: hidden;
}
#printableArea {
visibility: visible;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
That way you're going to get only the #printableArea element in the print view and all of the other elements will be hidden.