Digging through Style.css theme, I coulnd find how to change 2 kinds of margins:
Margin between browser border and site page
Margin between site page border and site content.
I did it for my website http://raigle.net. See Margin 1 and Margin 2 on the picture:
I'm not a pro in Wordpress styling and would be glad to any advice!
When looking for styling, you can use Chrome's Inspector.
Right click an element > Inspect element. It looks like you have an element that acts as an overlay. Just delete (select in elements panel then hit delete) the node and try again.
It's pretty nifty.
http://i.imgur.com/EfCARba.png
about margin1:
it is not margin, it is padding:
.ui-content {
border-width: 0;
overflow: visible;
overflow-x: hidden;
padding: 15px; /* change here */
}
about margin2:
it is not margin too, it is padding:
.site {
padding: 0 24px; /* change here */
padding: 0 1.714285714rem; /* change here */
background-color: #FFF;
}
http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css - line 12 - change padding style for .ui-content {
in http://raigle.net/wp-content/themes/twentytwelve-child/style.css,wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.6.pack.css
you have to change padding for div.site. You probably need to add !important clausule for this one, as this style is overwritten in couple other files
Related
I've set up my own custom scrollbar with CSS, and I'd like to know know how to only apply these settings to my vertical crossbar.
I've looked up other posts to fix this, but haven't been successful in implementing their solutions in my project.
Any fix that either removes my horizontal scrollbar completely or resets its settings to default would be greatly appreciated.
Here's my code:
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background-color: rgb(26, 23, 23);
}
::-webkit-scrollbar-thumb {
background-color: hsl(270, 2.9%, 48.7%);
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: hsl(270, 2.9%, 78.7%);
}
edit: The problem seems to have been related to other pre-built styles overriding overflow-x. overflow-x: hidden !important; solved the issue.
The questioner have faced a problem that a WebKit engine won't allow him to remove customized horizontal scrollbar.
It seems that the implementation of such a removal vary from one browser to another and there's no universal way to hide scrollbars.
Using overflow: hidden will disable the scroll and that’s not what we want.
So we’ll need another way to hide the scrollbar.
Unfortunately, there is no universal CSS property that does something
like this
div {
scrollbar-visibility: hidden; /* <--- I wish we had this one !! */
}
We’ll need to implement different CSS properties for each browser.
For Firefox, we can set the scroll-bar width to none.
scrollbar-width: none; /* Firefox */
For IE, we’ll need to use -ms prefix property to define scrollbar style
-ms-overflow-style: none; /* IE 10+ */
For Chrome and Safari. We’ll have to use CSS scrollbar selector.
Then apply display: none to hide it.
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
Or you can set it’s width and height to 0.
::-webkit-scrollbar {
width: 0;
height: 0;
}
https://redstapler.co/css-hidden-scrollbar-while-scrollable-element/
Nevertheless, the following solution took effect in questioner's situation:
overflow-x: hidden !important;
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.
Buttons are large and going over the card width
This should be easy, but I'm having a bit of tough time customizing the buttons inside the cards. I want to remove all the padding, so that the black border nicely encompasses the icon without any extra space in the left/right-hand sides. I've tried adding custom css and !important and directly overriding the div.btn__content, but those don't work. Any ideas to do this as simply as possible?
Reproduction Link
The issue is the min-width of the .btn class. Setting that to 0 will allow the button to be smaller than 88px. You should also just set the padding of the .btn__content to 0.
div.btn__content {
padding: 0;
}
div.card__actions .btn {
min-width: 0;
}
Here's an updated codepen.
For newer versions of Vuetify (1.2.4 and above) you need to use this:
/* turn off min-width for all buttons */
.v-btn {
min-width: 0;
}
You need to change min-width of .btn class and set padding-left: 16px of .btn-content.
Here is an example:
https://codepen.io/anon/pen/zPEyLB
You might have to use ::v-deep
::v-deep .v-btn {
padding-left: 12px;
padding-right: 12px;
}
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.
i have an issue with my css where if i use margin: 0 instead of margin-top: 0, for header p, the header { margin: 0 0 20px; } will be as good as not there. isit supposed to be like that? if i see what happens in firebug, its because the margin-bottom of header collapsed into the next sibling, the section.
html
<header>
<h1>ToDo List</h1>
<p>HTML5 Offline Capable Web Application</p>
</header>
css
header { font: 24px/1em Notethis; color: #666; margin: 0 0 20px; }
header h1 { font: 60px/1.4em Hetilica; margin: 0; }
header p { margin-top: 0; }
By default, Firebug only show you part of the story.
To see what really happens when you change margin-top: 0; for margin: 0 0 0 0;, please click on the arrow right to the Style tab (above 'header p' on your snapshot) and select "Display default CSS properties" or sth like that and you'll see downward that html.css already styles p as:
p {
display: block;
margin: 1em 0;
}
Beware, do NOT modify system styles or you'll have to restart Firefox, reopening tabs won't be sufficient.
BTW this 1em margin is what you see in HTML without any style (menu Display / Page style / No style in Firefox or CSS menu of Web Developer Toolbar) : your paragraphs have some vertical margin.
So basically you erased a 1em bottom margin.
I think that the problem here is that your header element is not actually rendering any margin applied to it at all. The space you are seeing is actually the result of a default margin applied to header p.
The reason I say this is that many browsers will not automatically treat the header tag as a block-level element unless explicitly defined as such:
header { display: block; }
After applying this statement to header in your CSS I could successfully apply header p { margin: 0 } and retain the margin specified in header itself. Removing this statement will revert back to the behaviour you are seeing.