I am new to WordPress theme customization. I am using a theme with woocommerce. when i navigate to the products page click on some item for details it show the woocommerce widgets on right side. I am trying to place that side bar on the left side by changing css. It is working but i am facing this issue.
Before changing css add to quote button working fine.
After changing css add to quote button stop working.
Changes in css
.with_aside .sections_group {
width: 77%;
float: right;
}
.with_aside .four.columns {
float: left;
width: 23%;
}
Changing css through inspect element
Kindly help me what i am doing wrong.
Edited
URL
Add following CSS
.column.one-second.summary.entry-summary {
position: relative;
z-index: 99;
}
Related
I created a site on my blog where I'm putting yt videos. Unfortunately the container of this site goes left and I have no idea why. It doesn't happen to any other site of the blog.
I'm using Virtue theme - https://www.kadencethemes.com/product/virtue-free-theme/
Here's the link to the site I have problem with: http://mlodziez-wks.slask.pl/multimedia/wideo/
I would be more than thankful for help.
This is happening because you added that CSS in your stylesheet
.wideo {
width: 300px;
heignt: 169px;
display: inline-block;
}
Which class is getting called in your "body" tag. And you are forcing your body to stay in 300px width only. Therefore you need to remove it or replace it with
.wideo {
width: 100%;
heignt: 169px;
display: inline-block;
}
it is because you have the CSS class wideo iny our body element, that is adding the following CSS style to it:
width: 300px;
heignt: 169px;
display: inline-block;
You need to remove this class from the body, it is defined outside a CSS file, so it must be added over some theme customisation or similar stuff.
Set your css to
.wideo {
width:100%;
height: 169px;
display: inline-block;
}
This will solve your problem.
I am using the Kale Wordpress theme, and in the footer, I used an image widget for my logo. I am trying to center this image using the Additional CSS panel under customize. I believe my centering code is correct, and that I am just having trouble identifying the proper Selector or class to let CSS know what I am trying to center.
I tried using Inspect Element in Chrome to find what it says is the class name for the image but to no avail.
.image wp-image-14 attachment-medium size-medium .footer-row-3-widget widget widget_media_image {
display: block;
margin: 0 auto; }
If it helps my website is revoltmedia.org, and I am trying to center the logo at the bottom. Again I think the code I have for centering the image is fine, I am just having trouble figuring out what the name of the class/selector is for the image so I can actually call it, and center the image.
Thanks in advance!
Looking at the HTML with Chrome's dev tools (inspect) I can see that the footer seems to have an id for this widget (#media_image-3) so that could be your selector to use text-align: center;
Now, if you want to specifically target only this image (and none other), you can use a more specific selector like #media_image-3 > img.image and then you can use the properties you already have, like
#media_image-3 > img.image {
display: block;
margin: 0 auto;
}
Try this:
.footer-row-3-widget widget widget_media_image {
text-align: center;
}
I have installed a theme in my WordPress website.
On top of the theme, I have added bbPress (forum)... unfortunately the CSS render very badly the forum features...
for example, the picture below show how the search button overlap with the search box
Search box-button overlapping
If I look at the css I can see this:
element.style {
}
vlog-bbpress.css?ver=1.8.1:9
#bbpress-forums #bbp-search-form {
position: relative;
float: none;
}
bbpress.css?ver….5.14-6684:429
#bbpress-forums #bbp-search-form {
clear: left;
}
what should I change in the css??? (I have installed Simple Custom CSS plugin (https://en-ca.wordpress.org/plugins/simple-custom-css/)so I should not need to do any custom css, but I shoul just be able to add the custom CSS)
in case anyone of you want to have a look at the website, you can find it here (not live yet, just playing around)
http://italiancrypto.it/forums/
many thanks all
Regards
#bbpress-forums #bbp-search-form .button {
margin-top:0;
}
#bbpress-forums #bbp-search-form #bbp_search {
height: 42px;
}
You may need to include !important tags, depending on where your CSS overrides are injected. But only use if necessary.
eg:
#bbpress-forums #bbp-search-form .button {
margin-top:0 !important;
}
#bbpress-forums #bbp-search-form #bbp_search {
height: 42px !important;
}
Add the below CSS to solve alignment of button
#bbpress-forums #bbp-search-form .button {
margin: 0;
padding: 9px 20px;
}
Do some reading on using the Chrome inspect screen--I've added an image to help. To get this screen, right click on the search button.
You'll see the highlighted html code on the left (the input field). On the right, you'll see the css and their values for that field.
See the check mark next to each field>? I clicked on the margin setting to remove it. Then, I clicked on the plus sign in the upper right of the inspect screen.
That lets you key in a temporary value for a new parameter. I keyed in:
margin-top: 0;
You'll see that in the image I attached. Now the button is aligned. The css to place in your style sheet is just above the inserted margin-top field.
You'll see that the button is now aligned with the search field. So Mando's answer should work.
position: relative. That should work
Newbie here. I'm re-learning web on HTML5 - customizing a blogger site to cut-my-teeth. I've been able to change a lot from the defaults (w3schools is invaluable!) but I'm getting stuck when trying to change formats for specific objects.
Three things I can't figure out as examples (site www.paddlebeforethewave.com)
1) Featured Post (top) - image wrapping text is a default behavior for blog posts that isn't followed for featured post. I was able to change the image/size position as below - but can't figure out how to have text wrap the image.
.FeaturedPost .snippet-thumbnail img {
max-width: 100px;
float: left;
margin: 0px;
padding: 0px;
display: inline;
}
2) Featured post (top) - I want to change background color of only the featuredpost. I've tried to identify and modify it as follows - but no effect.
.Blog .blog-posts .post-outer-container, #page_body .FeaturedPost {
background: $(posts.background.color);
min-height: 40px;
padding: 30px 40px;
width: auto;
}
OR
.FeaturedPost .bgcolor {
background-color: #cfe2f3;
}
OR
many permutations of above
3) Page 2 content - I created a second page (http://www.paddlebeforethewave.com/p/contact.html) and the formatting is lost for vertical padding and location of page labels.
Is my approach flawed? Could you use one fix as example (I want to learn!)
thank you!
Screenshot for (1) and (2)
1) Add the following code to your theme:
.FeaturedPost .snippet-thumbnail,
.FeaturedPost .post-snippet {
display: inline;
}
2) Your approach is fine, if you haven't seen any changes, try to clear your browser cache. Correct classes for featured post are:
.Blog .post-outer-container, #page_body .FeaturedPost {
}
3) I'm not sure I can see the problem. Could you provide a screenshot, please?
EDIT:
Found it! Go to your theme code and add following property to this class:
.item-view .blog-name {
-webkit-flex-flow: column;
flex-flow: column;
}
I see you fixed your problem I did however see an issue on your site. For big screens a white bar appears if the screen is larger than 1800px.
You can fix this by finding this code in your CSS
.sidebar-container
and adding
display:none;
You could test this in your browser by zooming out until the bar appears. Cheers
I'm relatively new to Drupal and so-so with CSS and am trying to float the image on a particular content type to the left of the content rather than having it center on the page on a row by itself. The purpose of the page is to have a list of items (like a catalog) and have an image to the left with the various descriptive fields to the right.
Using what I've found online I was able to get this on my CSS which almost works but after the first line being properly located to the right of the image the next line appears below the image. I would like all of them to be to the right, next to the image.
Because Drupal is generating the code I don't have the ability to easily change the HTML (though with work this is theoretically possible) but changes in the CSS are simple
.field-item img {
/* Shift "thumbail" images to the left */
/* new code to shift image to the left */
float: left;
padding-right: 10px;
/* -- old code to center image
margin-left: auto;
margin-right: auto;
*/
}
My theme is derived from danland. The page itself can be seen at http://blog.creatingorigami.com/content/eric%E2%80%99s-lotus
Any leads would be greatly appreciated!
Why change html code? This is crap. You can full styling html for use css styles.
I dont know if I understand right. This problem is clearfix hack, your page contains clearfixs.
Fastest solution.Change css property clear from both on value inherit.In system css called system.base.css. Path something as ..(root)/modules/system/.etc
After will be all contains on right side.
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: inherit; /*changed property!*/
visibility: hidden;
}
Comfortable, but not clean solution is violent rewrite property
to the root css style.
.clearfix:after {
clear: inherit !important;
}