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.
Related
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 have a style for inputs on my page, with some basic padding and font size, I tried applying the same style to a link, but for some reason the link is always larger (height) than the button no matter what I do, even with the exact same text and font size, I tried doing display: block but that just makes the button the width of the screen.
Here is the CSS:
.button{
padding: 10px 15px 7px 15px!important;
font-size: 16px !important;
color: white;
cursor: pointer;
border-radius: 2px;
text-decoration: none;
}
.button-3{
background-color: #ff4d4d;
border: 1px solid #ff4d4d !important;
}
I've looked at the Chrome styles panel and confirmed the font / padding is being used (it's not strikken through).
Here is what it looks like:
Looks like the issue is because:
You aren't using a CSS reset.
The line-height needs to be the same.
Make sure you give a consistent line-height to both. For now, set in the both:
line-height: 1.5;
This should fix it. Also, you can compare both the styles with the computed ones, to check if there's anything else being set. Since you say <button>, it might also have some border.
Also, like I guessed, you are also giving border and same colour as background to the button, making it look 2px bigger.
When you open the Developer Tools, try comparing the Computed Styles part:
To avoid this kind of stuff I always set the font family I used.
Take a look at this example: https://fiddle.jshell.net/tnr0jxka/
You also might want to consider adding:-webkit-apperance:none;-moz-apperance:none; to this kind of css, it will save you big time in cross-browser experience.
Buttons do not inherit the global styling automatically.
So, setting font-size of button explicitly will solve the problem
see this solution for more info
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.
This starts from a previous question that I asked but I think I know what needs to be done but not the How. I have this block of code that defines a pager in bootstrap and applies the bootstrap style to it:
<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>
then in a css that I load I have this to over-ride the bootstrap class bootstrapPager:
.bootstrapPager {
display: inline-block;
padding-left: 0;
border-radius: 4px;
margin-left: 10px;
margin-bottom: 2px;
margin-top: 2px;
line-height: 1.42857;
}
The default .bbotstrapPager has a top and bottom margin of 10px and I want to reduce it to 2px. I tried !important but that does not work. I have read a bit about css specificity and I think that is what is the problem is. So in this context how would I go about setting specificity in my .bootstrapPager class so that it ranks higher than the default class?
My css experience is not great but getting there.
Set your margins this way:
.pagination {
margin: 0px;
}
.bootstrapPager {
margin-left: 10px;
margin-bottom: 2px;
margin-top: 2px;
line-height: 14px;
}
The pager gets rendered to a <div> and an included <ul>.
The <ul> tag has a css class pagination with a margin of 20px on top and bottom.
So, first set those margin to 0px overwriting class pagination with your css resource.
Then you can set the margins you like in your css class bootstrapPager.
Alternatively, you can put all your changes into class pagination and omit your class bootstrapPager.
I've got the following in my .css file creating a little image next to each link on my site:
div.post .text a[href^="http:"]
{
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
How do I modify this snippet (or add something new) to exclude the link icon next to images that are links themselves?
If you set the background color and have a negative right margin on the image, the image will cover the external link image.
Example:
a[href^="http:"] {
background: url(http://en.wikipedia.org/skins-1.5/monobook/external.png) right center no-repeat;
padding-right: 14px;
white-space: nowrap;
}
a[href^="http:"] img {
margin-right: -14px;
border: medium none;
background-color: red;
}
Google
<br/>
<a href="http://www.google.ca">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/50px-Commons-logo.svg.png" />
</a>
edit: If you've got a patterned background this isn't going to look great for images that have transparency. Also, your href^= selector won't work on IE7 but you probably knew that already
It might be worth it to add a class to those <a> tags and then add another declaration to remove the background:
div.post .text a.noimage{
background:none;
}
You need a class name on either the a elements you want to include or exclude. If you don't want to do this in your server side code or documents, you could add the classes with javascript as the page is loaded. With the selection logic wrapped up elsewhere, your rule could just be:
a.external_link
{
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
It would be possible with XPath to create a pattern like yours that would also exclude a elements that had img children, however this facility has been repeatedly (2002, 2006, 2007) proposed and rejected for CSS, largely on the grounds it goes against the incremental layout principles.
So, while it is possible to do neat conditional content additions as you have with a contextual selector and a prefix match on the href attribute, CSS is considerably weaker than a general purpose programming language. To do more complex things you need to move the logic up a level and write out simpler instructions for the style engine to handle.
If you have the content of the links as a span, you could do this, otherwise I think you would need to give one scenario a class to differentiate it.
a > span {
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
a > img {
/* any specific styling for images wrapped in a link (e.g. polaroid like) */
border: 1px solid #cccccc;
padding: 4px 4px 25px 4px;
}