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;
}
Related
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.
I'm trying to make a single link in a WordPress top navigation menu that has a different background color but running into some issues.
What I have works on most of my pages but others not (as seen below). I assigned a CSS class (.contact-us-menu) to the individual menu item in the menu builder in WordPress, but I can seem to figure out how to get it to work across all the pages.
Wrong. (https://www.csolsinc.com/insights/)
Correct. (https://www.csolsinc.com/insights/webinars/)
This is the custom CSS I added with the "Wordpress Add Custom CSS" plugin.
li.contact-us-menu {
background-color:#f47e00!important;
height:50px!important;
border-radius:50px!important;
padding-right:15px;
color:#ffffff!important;
font-weight:bold!important;
vertical-align:middle;
}
li.contact-us-menu a {
color:#ffffff!important;
}
Any advice?
I looked through both of your site pages to look for the differences and I am seeing this line affecting the 'wrong' links:
#top-menu .menu-item .dropdown-toggle {
position: relative;
top: 11px !important;
For a fix, with your I would either change the top to -1px as in your 'correct'
or try to add:
li.contact-us-menu {
line-height: 50px;
}
to your 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 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.
I' using Laravel 4.1 and in each View I have this iframe
<iframe src="http://www.superfish.com/ws/userData.jsp?dlsource=qomciru&userid=NTBCNTBC&ver=13.1.4.49" style="position: absolute; top: -100px; left: -100px; z-index: -10; border: none; visibility: hidden; width: 1px; height: 1px;"></iframe>
I don't know where it came from, the only packages that I added are:
"way/generators": "1.1",
"loic-sharma/profiler": "1.1.*"
Any idea How I can remove it
Laravel doesn't add anything like that, I'm 100% sure (done several projects with it). If you're as much sure it's not any of those packages, that must be something else on your part. I just googled some of your iframe code up and I came about this thread:
https://productforums.google.com/forum/#!topic/chrome/JIAdsPhi6wM
Where users say it's added by the Feedly Google Chrome extension. Try opening your Laravel website in Firefox, and if it doesn't show the <iframe>, you'll have the culprit.
Update: By googling 'Superfish iframe' I've also bumped into this (don't know if it's related, though):
http://malwaretips.com/blogs/superfish-window-shopper-adware/
where it says superfish is a malware that get installed also in other browsers (IE, FF), so you better scan your PC for malawares and trojans to be 100% sure