I am in the process of creating my first wordpress template.
I have a top nav that is however pushed down by
html {
margin-top: 32px !important;
}
I found that this particular style is in the admin-bar.php file that came when I downloaded wordpress on my local machine.
I could just take the lines out of that file but that doesn't do the job because I want to create a template that can be bundled and uploaded to anyones wordpress.
Is there a way I can overwrite the above styling through my own template?
I hope this makes sense
Thank you so much
With css you can just do the following
html {
margin-top: 0px !important;
}
and it'll automatically override it.
But I can't tell exactly what you are trying to do.
You could enqueue a css file to the bottom of the page and overwrite the above with:
html{
margin-top: 0px !important;
}
It has to be the last CSS file to be linked.
I'm adding this for future reference because previous answers respond to the CSS question, but the issue here is not the CSS part, in fact html { margin-top: 32px !important; } is added by Wordpress for the toolbar.
As the reference says:
Note: If you have turned the Toolbar on in your profile settings, but still don't see it on the front end of your site, it may be that your theme does not call wp_footer() in its footer.php file, or the Toolbar may be disabled by a plugin.
Related
I have made the sidebar sticky by using fixed sidebar plugin but the sidebar disappear when scroll back to top I have tried many other plugin but they're not working. This
https://willowdaleequity.com/blog/acquire-69-unit-georgia-apartment-complex-press-release/
is the url of the website on which I'm facing the issue.
Please help me with this problem. I'm using Hub theme by Liquid Themes on my website.
I've also tried following custom css code instead of any plugin but it's also not working.
position: sticky; top:100px; bottom: 100px;
Your plugin is addding position relative when scrolling to top, is there any option in your plugin to change position if on top
add this css and it will show
figure.wp-block-image.size-full.is-style-default.my-sidebar.FixedWidget__fixed_widget {
position: initial !important;
}
Just apply below CSS and you issue will be solved.
CSS Code:
figure.wp-block-image.size-full.is-style-default.my-sidebar.FixedWidget__fixed_widget:not([style*="position: fixed"]) {
position: initial !important;
}
If you still find issue please let me know
Thanks
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.
Please I'm having issues styling the contact page . I'll love to change Address, email and phone number colours to white. See Screenshot,
I've tried inspecting element, but can't find the actual file to modify.
You can't find the file is because it's in-between script tags. Can you not do it using the WYSIWYG controls?
If you want to do it with CSS, put the following in your theme's custom.css or your child themes styles.css (Or if your theme has theme options, it may be in there):
.page-template-contact .info-strip .info-block p,
.page-template-contact .info-strip .info-block a {
color: #fff !important;
}
This will apply it only to those blocks on the contact page. The important also prevents it being overridden by inline CSS added by WYSIWYG editors, so bare this in mind when you want to change it 2 months down the line :)
.page-template-contact .info-strip .info-block p,
.page-template-contact .info-strip .info-block a {
color: #fff !important;
}
Would you please add above code in your style.css ?
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;
}