I've tried many ways to add padding to my sidebar widgets without success when I make the changes via Developer Tools it works, but I get stuck when I try to find the right tag to call, since I'm using a theme that might have different tag names¿? (I'm sorry if this sounds dumb but I'm kinda new to this, my site is http://thenoirportrait.com, as you can see for example the Social Media blocks are stick to the sidebar divider. These are two of the many codes I've tried to use in my child theme:
.sidebar.widget-area.position-right {
padding-left: 40px!important;
padding-right: 40px!important;
}
.xt-widget-content {
padding-left: 40px!important;
padding-right: 40px!important;
}
Thank you so much for your help :)
Leave a space between the "px" and "!important":
.sidebar.widget-area.position-right {
padding-left: 40px !important;
padding-right: 40px !important;
}
Apart from that, this selector should work
Related
I am looking to improve the style of a Wordpress site.
I have a div with the group-input class which has this style:
.group-input {
display: inline-block;
margin-bottom: 0px;
float: right;
padding-left: 10px;
text-align: right;
}
I would like that below 572 px of screen we switch to float : left so I wrote this below the previous code, in my theme's CSS file, like this:
.group-input {
display: inline-block;
margin-bottom: 0px;
float: right;
padding-left: 10px;
text-align: right;
}
#media (max-width: 572px) {
.group-input {
float: left !important;
}
}
On the other hand it does not work, the new style does not apply to my div.
suddenly I don't know how to do it. Do you have an idea, a lead to advise me?
I want some explanations, something simple for you is not necessarily obvious to me suddenly I need to understand. Thanks for your time and help.
In general, that should overwrite the css rule you are trying to do, but it's probably another css rule that more specifically targets that element. A few reasons it may not be overwriting is because:
another css rule is more specific than yours
it's in a breakpoint more specific than yours
it uses !important
A combo of all of those will require you to be even more specific in targeting the element.
If you find you are unable to overwrite a rule, try and be more specific in your targeting of the element by targeting it's grandparent/parent and working down the html tree. If you notice that that isn't working either, then try using !important.
Check the html structure around it try that. Sometimes even body .group-input might be specific enough, but the closer you specify to the element, the better off you will be.
On my website, I added the following code which I had only intended to apply to my posts, like this.
#media screen and (min-width: 767px) {
p {
font-size: 21px;
padding-right: 20%;
padding-bottom: 10px;
padding-left: 20%;
}
}
Obviously, it was applied to all the pages on the website. It's fine on some pages, but the homepage/frontpage is messed up on computers. If you scroll down, the excerpts (descriptions) below the posts have these margins applied to them.
How can I make the change above only apply to posts and not to the frontpage/homepage? To be clear, I want to remove these paddings from the homepage/frontpage. I want to keep them on my posts.
This is one of the suggestions people gave me that didn't work. If I decreased the number from 20%, nothing happened. The margins got bigger if I increased the padding, as if the minimum is set to 20%.
.home .posts-loop .entry-summary{
font-size: 21px;
padding-right: 20%;
padding-bottom: 10px;
padding-left: 20%;
}
Welcome Ahmed.
The suggestion that people gave you that didn't work, is related to class names (note the point before the names: .home | .ports-loop | .entry-summary . This indicates that are classes).
In your first sample you only use p . This affect to all p html elements.
So, your solution is to add a class to the paragraphs where you want to aply the css rules:
<p id="xxxx" name="xxxx" class="SomeClass">
And then, in your css code, use .SomeClass {...} to set the rules to apply.
This rules should be applied only in the elements set as class="SomeClass", and not to other elements.
For home page/front page just give another custom class name and just give padding to 0 or else you want and write " !important ".For e.g .cstm_home { padding: 0 !important; } . I hope it will solve your issue.
An easy way I see around this is to create a different stylesheet for the homepage. I'm not sure if you're using a global stylesheet, if you are, you should remove the line that links the CSS to this page.
A more prudent approach would be to use another type of selector instead of your paragraph tag, put an id in all the paragraphs you would like to style the aforementioned way and use this id or any other selector in your CSS.
Cheers!
I hope this helps....
What I would suggest is to add a class to the p tag on home page. The HTML should be like
<p class="homepagepara">blah blah blah.....</p>
And the css will be like.
p.homepagepara {
margin: 0;
padding:0;
}
After you have created the class you can style those pages any way you want. And it will target the home page paragraphs only. Hope this helps. Let me know if you have more questions
I wish you had shared your HTML as well. But a general answer is that you are selecting all the p elements in the html document to have the mentioned paddings. So of course it's applied everywhere on the page.
Solution 1: If they're separate html pages you can link separate stylesheets and include the paddings only in the desired pages.
Solution 2: Be more specific with the css selector. For example if the wrapper div for the posts has the class of .posts, write your css as following:
.posts p {
font-size: 21px;
padding-right: 20%;
padding-bottom: 10px;
padding-left: 20%;
}
I am a newbie and designing a Wordpress website (www.dimjaa.org). I am sticking to a minor css problem for last two days but failed to find out the solution. I want to take help from you to solve it and also eager to know root of the cause.
I am using evolve themme. I added header widgets.
Content of the header widget area are Login and Logout links. I want to display these at the top-right of the widget area.Image of the header-block showing unnecessary padding on both sides
Two problems that I am facing now are : 1. Background-color of the header-block which holds the widget area can not be changed. Or the header-block can not be covered by the widget area completely (it takes margin in left and right). The header-block can not be targeted properly. Any one of the above may be considered as solution of the issue.
2. Moreover the Login and Logout links can not be placed on the top-right of the area. Even can not be vertically centered. Interestingly when I remove the float: right; then it can be vertically centered. My html and css as below:
.header-block{
background-color: red;
}
.header-widgets{
background-color: #CDAE02;
}
.user-log a{
float: right;
text-decoration: none;
background-color:#581845;
color: #ddd;
border-radius: 15px;
font-size: 14px;
margin-right: 1em;
}
.user-log a:first-child{
padding: 4px 13px;
}
.user-log a:last-child{
padding: 4px 8px;
}
.user-log a:hover {
background-color:#B12307;
font-size: 15px;
}
<ul class="user-log">
Login
Logout
</ul>
I expect a solution from the experts and also hope to gather knowledge for understanding the issue better.
container is a class used by Bootstrap, so you can force that class to have width 100% by using !important in your rule, or you can define a new class called container-full and replace it with the container class:
.container-full{
margin: 0 auto;
width: 100%;
}
Also, changing the color of header-block won't affect, since it has other children that have other colors and has no space to show the color in the background. You may change the header-widgets' color. And it seems like you have padding and margin rules already defined in .widget-content & .header-widgets classes. You either have to change these rules in style.css, or write new rules that contain !important command in the end of the rules, so you can force them to affect the rules.
I am working out of wordpress. I have tried using inspect element to move a line of text that is basically overlapping another line of text in the ecwid plugin.
It does not seem to work, every time I edit the css code by using margins or padding attributes nothing happens
On my page where it says $205 for the product , was $295 is touching it and I want to separate that from the actual price.
How can I achieve this?
I have tried using this code
html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-compareTo-container{
padding-bottom: 5px;
}
here is a look at exactly what im reffering to
https://surveillanceshack.com/store/#!/Elec-Surveillance-system-w-4-bullet-&-4-dome/p/55396210/category=0
Add a line height like this:
html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price {
font-size: 24px;
font-weight: 400;
color: #a20505;
white-space: nowrap;
line-height: 21px;
}
Both of your prices are included inside the same div. When you have text that wraps, the only way to separate them is to define a height between the lines.
To fix your checkout problem fix the line-height there as well on this class:
.hentry table, #comments table {
margin-bottom: 1em;
font-size: 80%;
line-height: 21px;
}
If you want to fix this problem in one single CSS set of instructions do this instead:
.hentry table, #comments table, .ecwid-productBrowser-price {
line-height: 21px;
}
The issue is that it is a span element, which does not really accept margin / padding well.
The element in question is this:
html#ecwid_html body#ecwid_body .ecwid span
So, to make it have space above it, you can add this style to the stylesheet (at the end):
html#ecwid_html body#ecwid_body .ecwid span {
display: inline-block;
padding-top: 15px;
}
Adjust the padding-top to suite your desired layout.
Alternatively, you could do this by increasing the line-height of the element (in which case it does not need to be display: inline-block):
html#ecwid_html body#ecwid_body .ecwid span {
line-height: 2.5em;
}
It is a span element, to make padding active, you need to add :
{
display :inline-block;
}
You can set padding for "was" element.
html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-compareTo-container, html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-save-container {
padding-bottom:5px;
}
(Ecwid team here)
While the answers here can help to fix the issues yourself, we will investigate how Ecwid works with your "DMS" theme and make sure to fix those on our side. The issue is already in our devs queue, we will roll out the solution in one of the Ecwid plugin updates in the near future.
It would appear that that bootstrap puts a 10px margin on the top and bottom of the pager and I would like to cut that down to 2px and also make the height of the pager a bit smaller. I'm using the code from the xsnippets.openNTF as follows:
<xp:pager partialRefresh="true" id="pager1" for="repeat1"
panelPosition="left" styleClass="bootstrapPager">
<xp:pagerControl type="Previous" id="pagerControl1"
styleClass="bootstrapPagerPrevious">
<xp:this.value><![CDATA[«]]></xp:this.value>
</xp:pagerControl>
<xp:pagerControl type="Group" id="pagerControl2"
styleClass="bootstrapPagerMiddle">
</xp:pagerControl>
<xp:pagerControl type="Next" id="pagerControl3"
styleClass="bootstrapPagerNext">
<xp:this.value><![CDATA[»]]></xp:this.value>
</xp:pagerControl>
</xp:pager>
as suggested I created a new css and copied the css from the xsnippets into it and applied it to the page however I don't think that should be necessary with bootstrap built in so I removed the css. The pager works the same either way. So I want to over-ride the bootstrapPager class and change the margins.
I created a new css called it myBootstrap.css and added this block
.bootstrapPager {
display: inline-block;
padding-left: 0;
border-radius: 4px;
margin-left: 10px;
margin-bottom: 2px;
margin-top: 2px;
line-height: 1.42857;
}
and changed the top and bottom margins to 2px. added the css as a resource but the pager margins do not appear to have changed. Maybe there are some other settings that need changing. As I read it this class should override the main bootstrap.css.
EDIT
If I set disable Theme to true then it appears to remove the margins, but then it also removes all of the additional styling and that is no good either.
Here is what the pager looks like (not connected to the repeat yet but that should not matter. The major issue is the amount of vertical space that it consumes. When I inspect the element in Chrome it looks very much like it is getting the values from the main bootstrap css.
Bill,
Not sure this will work, but please try adding !important to your CSS selector. This has worked for me in the past. In my case it was OneUI, but the concept is the same. This assumes that the style is being applied, but is overwritten.
.bootstrapPager {
display: inline-block;
padding-left: 0;
border-radius: 4px;
margin-left: 10px;
margin-bottom: 2px !important;
margin-top: 2px !important;
line-height: 1.42857;
}
For more info, I wrote a blog post on this subject last year when I was having a similar problem: http://notesspeak.blogspot.com/2014/10/quick-tip-forcing-css-override.html
Note: I have never had much luck ever trying to us the "disable theme" feature.