I've tried to override woocommerce.css using child themes, but still nothing.
Folder structures:
/home/project123/public_html/wp-content/themes/betheme/css/woocommerce.css
/home/project123/public_html/wp-content/themes/betheme-child/css/woocommerce.css
When I've tried to look at the page source the URL points to betheme not to betheme-child. What can I do?
I want to remove this lines, and I don't want to use !important because I want to use bootstrap to resolve some responsive problems.
.woocommerce .product .product_wrapper .product_image_wrapper .images {
width: 100%;
margin: 0;
}
Try adding an extra identifier such as the page class or an id
`.page-id-16 .woocommerce .product .product_wrapper #sampele-product .product_image_wrapper .images {
width: 100%;
margin: 0;
}`
Related
Newbie here, I am adding additional css to my wordpress theme while inspecting it with chrome dev tools.
For example, this element has the following styles (by default, provided by my theme):
.product p.price {
float: left;
margin: 0;
}
I want to add this:
padding: 10px 0;
And now it looks like this:
.product p.price {
float: left;
margin: 0;
padding: 10px 0;
}
When I'm done, do I have to copy the 3 lines from dev tools to my theme's additional css or just the one line I added? Does it matter if my additional css reads this:
.product p.price {
padding: 10px 0;
}
instead of this:
.product p.price {
float: left;
margin: 0;
padding: 10px 0;
}
Is there a right/wrong way when adding additional css to a theme?
I'm not familiar with the way wordpress does these things, but i doubt you want to edit the CSS into your template. Templates can get updated over time and when you update them it'll likely just remove all the old files and replace them with the newly downloaded versions - all your changes would be wiped.
I imagine wordpress either provides a separate place for you to override styles, or allows you to manually add extra stylesheets (fresh empty .css textfiles).
In either case, you'd only add your changes to the stylesheet.
Based on your example, the right thing to add would be:
.product p.price {
padding: 10px 0;
}
I'm trying to edit the colors of my user profile page on my site www.wastelandgamers.com/user-profile I would like for the fields tat are blue to be white instead and the text in those fields to be black instead of white.
I am able to change them when I use the developer tools through Google Chrome and get the desired look, however, I am not able to find the HTML doc that I need to change in order to get the look I want. I have searched through nearly all of the relevant site files using file manager through cPanel with no luck.
Here are a screen captures of before and after the color change using developer tools.
Before code change:
After code change:
Code I need to change (.entry-content towards bottom)
.tml-profile {
max-width: 100%;
}
.tml-profile .tml-form-table {
border-collapse: collapse;
}
.tml-profile .tml-form-table th,
.tml-profile .tml-form-table td {
display: block;
vertical-align: middle;
width: auto;
}
.tml-profile .screen-reader-text,
.tml-profile .screen-reader-text span {
height: 1px;
left: -1000em;
overflow: hidden;
position: absolute;
width: 1px;
}
.tml-profile .wp-pwd {
text-align: right;
}
.tml-profile .wp-pwd .dashicons {
font-size: 1em;
line-height: 1;
height: 1em;
width: 1em;
vertical-align: middle;
}
.tml-profile #pass-strength-result {
margin: 0.5em 0;
}
.hidden,
.no-js .hide-if-no-js,
.js .hide-if-js {
display: none;
}
#media screen and (min-width: 768px) {
.tml-profile .tml-submit-wrap input {
width: auto;
}
}
.entry-content tr th, .entry-content thead th {
color: #cbcbcb;
background-color: #fff;
}
I am using the Parabola theme for my site and Theme my login for the profile page.
If anyone knows why I'm unable to find the file I need to edit or of another way to make the change I would really appreciate the help! If you need any more information let me know.
I'm not a fan of WordPress themes, but some of them do allow for custom CSS. Google found me this:
we have created a special input field right in theme’s settings page.
You’ll find it by going to Appearance > Theme Settings, then expanding
the Miscellaneous Section by clicking on it. The Custom CSS field is a
bit further down.
You should see this: https://www.cryoutcreations.eu/wp-content/uploads/2012/11/themesettings-customcssjs.png
In this area (indicated by the blue box), you will want to PRECISELY recreate the code you have circled above (http://i.stack.imgur.com/00cxb.png) EXCEPT for changing the #colour to your desired colour.
I have created a wordpress single theme, but I am getting confuse with CSS code, where CSS rules should change the display to make menu and image slider revolution look closer.
I would like to reduce the space between the main navigation menu and my revolution slider
This is my website url: http://www.warungrempong.com/
I am trying to use this CSS code:
.admin-bar .nav-container {
min-height: 0;
}
But it's not working as desired and only work when I am using it on my browser dev tools.
When I try to change in my website, nothing happen.
How can I solve this issue?
Thanks.
In the style.css file of your active child theme (or theme), You should add this:
.nav-container {
min-height: inherit !important;
}
When looking at the generated source code of your home page, it seems that your theme is embedding some CSS rules in the html document, as you have this (on line 41 of that source code):
<style id='ebor-style-inline-css' type='text/css'>
nav .pb80 {
padding-bottom: 0px;
padding-top:0px;
}
.pt120 {
padding-top: 0px;
}
.nav-container { /* ==========================> HERE ONE TIME */
min-height: 0;
}
.logo { max-height: 300px; }
.nav-container { /* ======================> HERE ANOTHER TIME
As this is the last instance, it get the priority on first one! */
min-height: 491px;
}
.admin-bar .nav-container {
min-height: 523px;
}
#media all and (max-width: 767px){
.nav-container {
min-height: 366px;
}
.admin-bar .nav-container {
min-height: 398px;
}
}
</style>
So may be you have add this CCS rules yourself somewhere in your theme settings. The best thing, should be to remove that 2 repetitive CSS rules, and your issue should get solved without any need…
I have a Wordpress theme that create elements with dynamic class names. I don't want to mess the PHP code, so I want to make changes only on the CSS.
Every element has a code like this:
<dd class="variation-testing">Testing</dd>
I tried to use this CSS rule and it should have worked, but it seems that it doesn't applied the element at all:
dd.[class^=variation-] {
width: 48%;
float: left;
}
How can I add a CSS by using the first part of the class only?
Update:
The answer was simple and found in the comments. The right CSS is without the dot.
dd[class^=variation-] {
width: 48%;
float: left;
}
Yes, as stated in the comments the carat selector should be used.
dd[class^=variation-] {
width: 48%;
float: left;
}
Here is a reference for CSS attribute selectors:
https://www.w3schools.com/css/css_attribute_selectors.asp
I look on Stack Overflow, and didn't find the solution, I know how to override style if style exists, just change its property. But now I have a strange style to override
Here is an example of what I have
First I have this one:
.slikezamenjanje img{
max-width: 100%;
max-height:150px;
padding-right:7px;
}
Now I need to override that style with just this one:
#zoomTarget .slikezamenjanje img {
max-width: 100%;
}
The problem is that first style appends second, but I don't want that, in this second style what I need is just one line, not to append from the first style?
Instead of override you can add another class to the element and then you have an extra abilities.
for example:
HTML
<div class="style1 style2"></div>
CSS
//only style for the first stylesheet
.style1 {
width: 100%;
}
//only style for second stylesheet
.style2 {
width: 50%;
}
//override all
.style1.style2 {
width: 70%;
}
You just have to reset the values you don't want to their defaults. No need to get into a mess by using !important.
#zoomTarget .slikezamenjanje img {
max-height: auto;
padding-right: 0px;
}
Hatting
I think the key datum you are missing is that CSS comes with default values. If you want to override a value, set it back to its default, which you can look up.
For example, all CSS height and width attributes default to auto.