Css background-image navigation bar - css

nav {
padding : 10px 10px 10px 10px;
background-image : url("This PC/Pictures/motivationportfolio.jpg");
}
li
{
padding : 10px;
}
div
{
text-align : justify;
margin : 20px;
}
p
{
text-indent : 15px;
}
This code is not inserting background image to my navigation bar.you can check the entire code in http://codepen.io/Supreja/pen/zKERvd.
I have also tried giving the online URL . Even that doesnot work. I am working online ,so how to know my current directory ?

That should work just paste a valid URL:
For instance:
background-image : url('http://www.verypdf.com/wordpress/wp-content/uploads/2011/11/clip_image00455.jpg');

well , you need to know where is the path of your image first.
for example you have images folder and CSS folder .
and this style is in the CSS folder , then the path should be like that
../images/iamgename.jpg
this two dots (..) make you back one step then enter images folder and choose your image
url("../Pictures/motivationportfolio.jpg");

Related

why can i only use my cursor tag in embedded html?

I tried to change the cursor on my html website with the "cursor" property, but I can only do it embedded, but I want to put it in my css stylesheet. Is that possible?
This is the code that I put between the style tags
* {
cursor: url('plaatjes/cake.cur'), default;
}
changing ur cursor is possbile yeah.
There are different possibilities why ur cursor image is not showing up (image type, image size, image url for
example..)
Try this accepted answer:
so accepted answer
This example changes the cursor for a specific div, if u use this like u have done before (with *) it should work at all.
If you want cursor on whole page, this should work:
first fix width/height of html and body element,
html, body {
height: 100%;
width: 100%;
padding: 0; margin: 0;
}
then:
* {
cursor: url('plaatjes/cake.cur'), default;
}

Custom css code in wordpress

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.

Overwriting CSS Bootstrap

I need to surcharge Bootstrap CSS and for that i have created a new overwrite.css file.
In my different test I need to display a black background (It's only for test) but nothing.
<div id="myBackground"> </div>
CSS:
#myBackground { background-color: black; width: 100px; height: 100px; }
so i don't know where exactly you need change the bg color use these after bootstrap or in <style></style> inside <head></head>
if you want change the page background
body {
background-color: black !important;
}
if as container or column
col-md-5 {
background-color: black;
width: 100px;
height: 100px;
}
Make sure you are selecting your element with more specificity than the bootstrap css.
Load your overwrite.css file after bootstrap.
Try selecting a parent element before your #myBackground div. For example,
.main-content #myBackground {}
Find the attributes bootstrap is using that you want to override... for example if in bootstrap.css there is .navbar-nav {background:#000;} then you need to make sure your overwrite has a background attribute declared, such as #myNavbar {background:#555;}
overwrite.css : "It means what it means"! You can't create your own id or class if bootstrap doesn't know what is this...
So, you must create a third css file (style.css for example) and load this after bootstrap.css and overwrite.css !
After this, all is working!
Thanks

Extjs fieldset - remove line after title when collapsed

I was trying to remove the line after title (highlighted in attachment) when collapse, I am not able to do it.
I tried to use the border:0, which removes only the border on expand. Is there a way to remove this?
{
xtype : 'fieldset',
border : 0,
title : '<b>Starting point</b>',
name : 'startingPt',
items : [{...}]
}
I am using extjs 4.2 On FF
Looks like it can't be done through javascript. as the border-width is given important tag in scss file, it is overriding the 0. It has to be done through additional css.
Below snippet FieldSet.scss file
{$prefix}fieldset-collapsed {
padding-bottom: 0 !important;
***border-width: 1px 1px 0 1px !important;***
add the below css:
.x-fieldset-collapsed{
border-width:0 !important;
}

CSS and Wordpress: remove padding from element

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.

Resources