I'm using Dokan plugin for my website. My problem is need to remove extra space between heading & banner (Check screenshot 1). And I find a solution using web inspect tool. If i change the padding-bottom to 0px its working fine.(check screenshot 2). so I try to find that CSS class in my website backend, i found a same CSS class regarding my issue but if I change it not working in my website.
The CSS class in martfury/style.css
.page-header-page .entry-title {
padding-top:0px;
padding-bottom:0px;
font-size: 48px;
font-weight: 600;
text-align: center;
margin-bottom: 0;
}
I search every CSS file but nothing found also try to clear data. Nothing help me. If any one know how to solve this please help me.
I'm really thankful for your time.
Just try with !important like given below
padding-bottom:0px !important;
I think you CSS not able to overwrite so !important will be work there.
Related
I work for 2 sister companies and we have copied the template of one website to another for most of the functionality.
For some reason, I cannot get the pagination to work as it does on the one website. We are using a custom theme so I can't seem to get any plugins to work.
The pagination works well here: https://clcanursing.co.uk/news/ and I want to be able to replicate how it looks and how it reacts to tablet and mobile devices. I am trying to copy it onto this page: http://clcacalldirect.com/blog/ but it fails here.
Any help would be appreciated!!
Thanks,
Andy
It seems like your issue is CSS related. You're missing some styles (like the one below). Make sure you're copying over all styles.
Use dev tools to see the differences between the two slices of code.
EDIT:
The below code gives you the exact style and functionality on tablet/mobile
#media (max-width: 1200px) {
.pagination .default--button {
border-radius: 0;
width: 49% !important;
text-align: center;
margin-top: 70px;
}
}
I've been attempting to create a hero header in my Laravel 5.4 project. However, one certain thing doesn't seem to be working the way it's supposed to.
(If you're not familiar with what a hero header is; it's basically an image stretching over the entire screen used as a background upon first loading the website, usually with some text and a call to action on top of it.)
This is the way I've structured my code, based on research I've been doing:
home.blade.php:
#extends('layouts.app')
#section('content')
<div class="container">
#include('partials.hero')
</div>
#endsection
hero.blade.php:
<div class="hero-image">
<div class="hero-text">
<h1>Hero header</h1>
<p>Hero text</p>
<button id="hero-prim" class="button-primary">Action!</button>
<button id="hero-sec" class="button-secondary">Info</button>
</div>
and finally the css:
.hero-image{
background-image: url(/images/hero-image.png);
width: 100%;
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
The strange thing about this is that the text and the buttons are loaded with the page, but there's no sign of the image. Even if I exclude any other elements and try to only show the image, it gives me nothing.
This makes me think the issue must be in how I'm setting the background-image in my CSS, but I've no idea how I'd have to do it differently.
Any help or advice is greatly appreciated!
EDIT:
The image now displays properly, but doesn't stretch across the entire width of the screen, instead I think it only stretches across the section.
In any case, I'm not sure exactly which change in code made this happen, but after trying out some Bootstrap classes on it and defining the height of html and body as 100% (courtesy of VegaPunk), things have been better.
I'm sorry I can't define a more clear answer, but it's still a mystery to me, since yesterday none of these solutions seemed to work on their own.
I face the same problem and solved it just now. My css code was background: url(images/banner.jpg); and the error was Failed to load resource: the server responded with a status of 404 (Not Found). The solution is adding two dot '.' and a single slash '/' before images background: url(../images/banner.jpg);, Now the image has been appeared. My images and css folder in my project public folder and banner.jpg is in the images folder.
Your image should be located in your public folder. So create a folder in public called 'Images' with a capital I and place the hero-image.png inside the created folder.
Heights are really tricky in CSS. I suggest you use a framework like Bootstrap or Foundation.
It doesnt know 50% of what, you need to declare
html, body { height: 100%;}
I've got a Wordpress site using WooCommerce, and I've got a plugin that isn't working how it should. So, I managed to find a particular line in the PHP code that triggers when I need it to do something my way. Problem is, I need to change some CSS styling within the PHP code.
How exactly would one do something like this?
<woocommerce class="a.button.alt"><style>background: #FF8282; pointer-events: none;</style></h1>
<woocommerce class="button.button.alt"><style>background: #FF8282; pointer-events: none;</style></h1>
Mind you that code above is incorrect. It is just an example of what I'm trying to achieve.
As for a more detailed breakdown, I'm trying to change/override a CSS style that already exists on my web page. Overall, the trick is to change some CSS style that already exists into doing something else. The CSS for the item I found (from Firefox's HTML debugger/inspector) is:
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt
And I need it to apply these styles instead:
background: #FF8282;
pointer-events: none;
If you need more information, just let me know.
Thank you.
I think that adding an !important behind would do the trick.
{ background: #FF8282 !important; pointer-events: none !important; }
Also, make sure u only link this after all other css occurences.
Would this help?
SOLVED
I included in the logic that was tripping some PHP code:
include '/wp-content/themes/my_theme/400.css';
And that CSS file (400.css) contained:
<style>
.woocommerce a.button.alt { background: #FF8282 !important; pointer-events: none !important; }
</style>
Thank you everyone for your help. Much appreciated.
Have you tried adding !important at the end of your css line ? This will force your new property to overide the one from your plugin :
background-color : red !important;
I guess something like this is your looking for. Just comment if you want modification.
$('button').click(function(){
$('div').addClass('changed');
});
.woocomerce{
background: cyan;
}
.changed{
background: #FF8282;
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change CSS</button>
<div class="woocomerce">
Hello World
</div>
I'm trying to add an arrow to the left hand side of my active link in my categories sidebar for my wordpress site I'm building.
I've already put in the css for it to behave the way I'd like it, I've added a small change in colour just so I know it's working well.
I've attempted to add a background image with a small .png file and tried various CSS styling to get it how I want it but I've had no luck even showing the image.
I'm open to using the character such as "➤" or the like if I cannot use a background image, maybe I might be missing something.
http://94.23.211.70/~cewp/product-category/cushions/
The above my my URL that will go directly to the page you're wanting to see along with a link already highlighted on the sidebar.
Here is the css that is making this active:
.product-categories .current-cat a {
color: #000033;
background-image: url("images/ICONNAMEHERE.png");
}
Hopefully this is enough information to provide, anymore then just ask me.
Regards
You can achieve this by css and font awesome. First add font awesome to your project. You can also use unicode charecters instead.
.widget_product_categories li { margin-left: 2.5em; }
.widget_product_categories li:before {
display: block;
float: left;
margin-left: -2.5em;
font-family: 'fontawesome';
font-size: 14px;
content: "\f054";
}
if not interested in adding font awesome content:url("images/ICONNAMEHERE.png");
I am trying to modify a WordPress website. I need to make some changes in the style. But when I logged into the WordPress dashboard, I was unable to find the style classes whose properties needs to be changed. I found those classes when I did "Inspect Element" from a web browser.
Luckily I found out a style.css file & custom.css file in the WordPress dashboard. This is the class I am looking for caroufredsel_wrapper. this class is assigned to a div element.
I searched for it in styles.css file, but it didn't contain it. custom.css file was empty. I wrote the needed changes to the class in that file, but nothing changed.
I am new to Wordpress. Can anyone give me some quick tips to resolve the style issues or how can I change them?
#amit was on the right track: the classes are being added inline, which means it's probably being added via JS. The likely culprit is jquery.carouFredSel.min.js. While you could override the JS yourself, or write your own script to add styles this would probably give you headaches later on if you update your theme. Doing some digging I find that jquery.carouFredSel.min.js is being loaded by the carouFredSel WordPress Plugin; a quick glance at the plugin support page shows that there are user settings and probably some kind of control panel in the dashboard that you can use. I'd recommend playing with that first before you commit to overriding actual JS files.
I think you are talking about inline css which is added by jquery script.
element.style {
bottom: auto;
display: block;
float: none;
height: 181px;
left: auto;
margin: 0;
overflow: hidden;
position: relative;
right: auto;
text-align: left;
top: auto;
width: 328px;
z-index: auto;
}