Here is my website : http://sourcingstrategybd.com/
I want to change (margin-bottom:100px;) in (#header-wrapper-sticky-wrapper)
but I cant find this exact location in folder => file.
Please help me, how can I change this margin.
For details please view this Image
This style comes from javascript.so this css code will be removed from js file
If you can't do this from your header php file you should be able to achieve this from your css files I believe.
Put this
#header-wrapper-sticky-wrapper {
margin-bottom: 0!important;
}
This must work unless your'e doing any mistakes.
Thanks
Add this code to your stylesheet:
#header-wrapper-sticky-wrapper.sticky-wrapper {
margin-bottom: 0 !important;
}
Its look like inline style css
so change it from that php file. or another way.
add this in your css.
.sticky-wrapper {
margin-bottom: 0 !important;
}
Still not work then try this
#header-wrapper-sticky-wrapper {
margin-bottom: 0!important;
}
$(document).ready(function(){
$("#header-wrapper-sticky-wrapper").css('margin-bottom','0px');
})
You can add this script in your footer
Related
In my vuejs component I have style like this
<style>
.preview-page {
.preview-section {
width: 100%;
}
.logo-section {
text-align: center;
}
}
</style>
Its building fine and showing correct results in browser, but on vscode its showing 2 errors
Do not use empty rulesetscss(emptyRules)
and
} expectedcss(css-rcurlyexpected)
OK, looks like there are two issues being picked up on:
Do not use empty rulesetscss(emptyRules) is a valid complaint, since .preview-page{} contains no styles (although its children do). Add some styles to .preview-page or suppress the warning if it bothers you.
} expectedcss(css-rcurlyexpected) I assume is triggering because you have not defined lang="scss" in your <style> tag. Here is the documentation.
I have added a title color for each category that is displayed on the posts. This is how I want it to be displayed and this is the way it displays
It works fine for one category page https://everythingstudent.co.uk/category/discounts/, but on the others it doesn't https://everythingstudent.co.uk/category/sponsored/ - The section after In case you missed it.
I don't understand why it doesn't respect the CSS assigned. It bugs me out.
You have made small mistake. just replace your css with below css. same class in body and article tag so we need to add article tag with class name so it does not conflict with body tag :)
article.category-discounts .category_es_title {
background-color: #0072bc!important;
}
article.category-anothercat .category_es_title {
background-color: #f8ac87!important;
}
article.category-jackiscool .category_es_title {
background-color: #75d3f6!important;
}
article.category-sponsored .category_es_title {
background-color: #00a651!important;
}
article.category-student-life .category_es_title {
background-color: #ff1744!important;
}
Where is your CSS typed? did you do it manually or through a front-end editor?
In my experience, a lot of times it's something as simple as a theme compatibility issue so you may have to go directly into the source code for the theme itself.
Let me know some details & I should be able to elaborate more
I am having list of css files and every css file has different image location code written like url(../_images/headerImages.jpg), now I am placing my images to some other domain therefore I want to create a variable like var domainPath = http://sitename.com so that at every url(../) I could write something like url(domainPath+ '/images/headerImages.jpg').
Example
var DOMAIN_PATH = http://www.mysite.com;
#header {background: url(DOMAIN_PATH/_images/headerimage.jpg)no-repeat; }
Please help me..
You cannot use variables in plain CSS. I suggest using a CSS preprocessor which is a language that compiled to CSS. SASS is fantastic and you can do what you ask like so:
$domainpath: url(http://www.mysite.com/_images/bg-header-noodletools-express.jpg);
#header {background: $domainpath no-repeat; }
Another alternative is LESS.
As mentioned in https://ishadeed.com/article/css-vars-101/ and others, it is possible to use variables in CSS now.
You can do:
:root {
--domainpath: url(http://www.yourdomain.com/_images/bg-header-noodletools-express.jpg);
}
#header {
background: var(--domainpath) no-repeat;
}
Unfortunately, CSS is not dynamic but you can do something like this:
store your URLs in the: root selector Which represents the root element and is identical to the selector html, except that its specificity is higher.
use the URL variable
:root {
/* define your variables here */
--url1: url(http://sitename.com/image1);
--url2: url(http://sitename.com/image2);
}
.img {
background-image: var(--url2);
width: 200px;
height: 200px;
}
Full source code: here
I want to have one variable that contains the root path to all my images in my CSS file. I can't quite figure out if this is possible in pure Sass (the actual web project is not RoR, so can't use asset_pipeline or any of that fancy jazz).
Here's my example that doesn't work. On compile it balks at first instance of variable in the background url property saying ("Invalid CSS after "..site/background": expected ")").
Defining the function to return the path:
//Vars
$assetPath : "/assets/images";
//Functions
#function get-path-to-assets($assetPath){
#return $assetPath;
}
Using the function:
body {
margin: 0 auto;
background: url($get-path-to-assets/site/background.jpg) repeat-x fixed 0 0;
width: 100%; }
Any help would be appreciated.
Have you tried the Interpolation syntax?
background: url(#{$get-path-to-assets}/site/background.jpg) repeat-x fixed 0 0;
No need for a function:
$assetPath : "/assets/images";
...
body {
margin: 0 auto;
background: url(#{$assetPath}/site/background.jpg) repeat-x fixed 0 0;
width: 100%; }
See the interpolation docs for details.
Was searching around for an answer to the same question, but think I found a better solution: http://blog.grayghostvisuals.com/compass/image-url/
Basically, you can set your image path in config.rb and you use the image-url() helper
Adding something to the above correct answers. I am using netbeans IDE and it shows error while using url(#{$assetPath}/site/background.jpg) this method. It was just netbeans error and no error in sass compiling. But this error break code formatting in netbeans and code become ugly. But when I use it inside quotes like below, it show wonder!
url("#{$assetPath}/site/background.jpg")
We can use relative path instead of absolute path:
$assetPath: '~src/assets/images/';
$logo-img: '#{$assetPath}logo.png';
#mixin logo {
background-image: url(#{$logo-img});
}
.logo {
max-width: 65px;
#include logo;
}
I am using the LESS styling language.
Consider the following CSS:
.side-bg
{
background:url(../img/layout/side-bg.jpg) top no-repeat;
}
Right now all of my images are in the folder ../img/ I wanted to be able to set a variable as the image path and use it like so:
#image-path: ../img;
.side-bg
{
background:url(#image-path/layout/side-bg.jpg) top no-repeat;
}
This does not work however. Its not a huge deal, I could always use find and replace if the image folder ever changed. I am just starting to learn LESS and was wondering if something like this is possible.
Try using string interpolation for things like this. Look for “variable interpolation” in docs.
#base-url: "http://assets.fnord.com";
background-image: url("#{base-url}/images/bg.png");
The solution:
.side-bg
{
background : ~"url( '#{image-path}/layout/side-bg.jpg' )" top no-repeat;
}
I was searching for the same question and found this page. Thought I would post my solution as someone else might find it useful...
#iconpath: '/myicons/';
.icon (#icon) {
background: no-repeat url('#{iconpath}#{icon}');
}
.icon-foo { .icon('foo.png'); }
.icon-bar { .icon('bar.png'); }
.icon-spuds { .icon('spuds.png'); }
which compiles to (used http://winless.org/online-less-compiler)
.icon-foo {
background: no-repeat url('/myicons/foo.png');
}
.icon-bar {
background: no-repeat url('/myicons/bar.png');
}
.icon-spuds {
background: no-repeat url('/myicons/spuds.png');
}
Here is an updated and clean way to handle image paths with LESS:
Start with your variable:
#imagePath: ~"../images/bg/";
Then use it like this:
.main-bg {
background: url('#{imagePath}my-background-image.png') repeat scroll left top;
}
Make sure the #imagePath variable points to the images folder from wherever you have your compiled CSS, NOT from where you have your LESS files. Also, you have to escape the address in the variable as in the example above to ensure that it does not get rewritten by less.js.
Anton Strogonoff's answer is good but be aware of the Issue #294:
Using the above which comes straight from the docs, I get url://pathtolessfile/variable I set. Even though I'm trying to set an absolute URL instead of a relative one. For example this works
#base-url: "../../images/";
#background-image : url ("#{base-url}/bg.png");
But this does not work
$base-url: "http://localhost/ns/assets/images/";
#background-image : url ("#{base-url}/bg.png";
In the latter example, my final source path becomes
http://localhost/ns/assets/css/libs/http://localhost/ns/assets/images/bg.png
Relative urls can be handled by the command line compiler, supposedly. There's probably some similar option you can set in the file watcher.
https://github.com/cloudhead/less.js/wiki/Command-Line-Usage
EDIT: There totally is. Just look: http://lesscss.org/usage/#command-line-usage-options
relativeUrls: true