I have a pre tag which is causing the css to display with too much whitespace.
How do I remove it with css?
<!-- page-title -->
<h1 class="page-title" itemprop="name">Checkout</h1>
<!-- /page-title -->
<div class="page-content entry-content" itemprop="articleBody">
**<pre>**<div class="woocommerce">
<div class="woocommerce-info">Have a coupon? Click here to enter your code</div>
<form class="checkout_coupon" method="post" style="display:none">
The css reads
pre, xmp, plaintext, listing {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0px;
}
how do I change whitespace:pre?
This is a wordpress site using woocommerce plugin.
You can add the following to your CSS to overwrite this specific pre tag
.page-content.entry-content pre {
white-space: normal;
}
If you use a child theme, you can add it in your stylesheet (style.css), else you could use Jetpack's Custom CSS to add it.
If the above wouldn't work, try:
.page-content.entry-content pre {
white-space: normal !important;
}
GL!
Related
WordPress theme I am using has some inline css in the header and one of the things I am trying to change is the header top/bottom padding. In the inline css its listed as:
<head>
...
<style type="text/css" data-type="vc_custom-css">
#site-header:not(.shrink) .site-title { padding: 60px 0 !important; }
</style>
</head>
<body class="home page page-id-24236 page-child parent-pageid-5 page-template-default logged-in admin-bar wpb-js-composer js-comp-ver-4.12.1 vc_responsive customize-support">
<div id="page" class="layout-fullwidth">
<div id="site-header-wrapper">
<header id="site-header" class="site-header" role="banner">
<div class="container container-fullwidth">
<div class="header-main logo-position-left header-layout-fullwidth header-style-3">
<div class="site-title">
<h1><a href="#" rel="home"></h1>
</div>
</div>
</div>
</header>
</div>
</div>
</body>
Obliviously, #site-header:not(.shrink) .site-title {... !important} is not going to work in my styles.css.
I have tried the following and it still doesn't work:
[style]#site-header:not(.shrink).site-title { padding: 1px 0 !important; }
How do I get it to override?
Style blocks that aren't from the stylesheet stink. I truly despise it when theme developers put them in their theme. The only thing worse is inline styles (ie <div style="padding: 5px !important;">). Those are virtually impossible to overcome.
In your case, there's a couple of hack-tastic way to overcome this hacky issue.
In your child theme's functions.php file, you can use the following (Admittedly hacky) solution:
// We're adding a HIGH priority of 9999 which should cause this to be output AFTER the theme's bad styles.
add_action('wp_head', 'fix_bad_theme_styles', 9999);
function fix_bad_theme_styles() { ?>
<style type="text/css" data-type="vc_custom-css">
#site-header:not(.shrink) .site-title { padding: 1px 0 !important; }
</style>
<?php }
If that doesn't work, an even hackier way would be to put the style in the footer. It'll work, but it's not best-practice (as if any of this solution is!):
add_action('wp_footer', 'fix_bad_theme_styles');
If you are already using a child theme you can override a specific file e.g. footer.php
So you would create a file of the same name in the same directory and copy over the code you need
Try adding more specificity to your rule, like:
body .anotherParentClass #site-header:not(.shrink).site-title { padding: 1px 0 !important; }
Example: https://jsfiddle.net/robsilva/wx113Lxo/
You forgot a space between .site-title and :not part. Try this instead :
#site-header:not(.shrink) .site-title { padding: 1px 0 !important; }
I have a well boostrap component containing some text
<div class="well well-sm" id="well_job">
<p>
<h5><%= "#{job.job_description}" %></h5>
</p>
<p>
<h6><%= "#{job.from_date} -" %></h6><h6><%= "#{job.to_date}" %></h6>
</p>
</div>
when I try to select it by one of its classes to change the font family it doesn't change(I tried to select it by .well-sm but nothing changes as well):
.well{
font-family: 'Rock Salt', cursive;
}
How can I select the well and change the font-size to its inside text?
First of all, your syntax is incorrect as you cannot place a header tag inside a paragraph tag. The following syntax
<p>
<h1>Some Header</h1>
</p>
will be interpreted by the browsers as
<p></p>
<h1>Some Header</h1>
</p>
and you will end up having an unexpected </p> end tag. Validating your html will lead to this error:
No p element in scope but a p end tag seen.
Back to your question, in case of using header tags you also need to specify a style targeting that specific header tag.
.well {
font-size: 14px;
}
.well h5 {
font-size: 24px;
}
Have you import the font into the tag <head>?
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
Then for change the font size:
.well{
font-family: 'Rock Salt', cursive;
}
.well p h5{
font-size:30px;
}
.well p h6{
font-size:20px;
}
In short.
I have something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<style>
.vertical_panel > .fields > .item {
display: block;
background-color: #344;
}
.horizontal_panel > .fields > .item {
display: inline;
background-color: #FAE;
}
.item {
width: 100px;
height: 50px;
margin: 2px;
}
.fields {
margin: 0px;
padding: 0px;
}
#specialSpan {
display: table;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="horizontal_panel" id = "specialSpan" style="width: 300px; height: auto;">
<fieldset class="fields">
<span class="vertical_panel item" style="width: 300px; height: auto;">
<fieldset class="fields">
<div class="item">
<span>text</span>
</div>
<div class="item">
<span>text</span>
</div>
</fieldset>
</span>
<div class="item">
<span>text</span>
</div>
<div class="item">
<span>text</span>
</div>
</fieldset>
</div>
</body>
</html>
It's an approximation to my code structure. There are more elements inside the fields. So, I have a javascript function which toggles class of panels.
The problem is: I have correct selectors, correct values of style are set(display), but Internet Explorer 8 does not apply it correctly. The items does not change their direction if I call that function. Under “does not change direction” I mean that items does no rendered as display: block or display: inline.
There is a key part: if I open debug tools and enter display: inline for instance manually for panels, almost everything looks fine. But if I have correct view before manual style changes and I have changed the style, I can't change view back to normal in ordinary way — with call of function.
The function is something like:
function SetPanelOrientation(panel) {
// this attribute doesn't exit in example but actually exist in project's code
// and always correct
var isVertical = panel.getAttribute("IsVertical");
if (isVertical == '0') {
$(panel)
.removeClass('vertical_panel')
.addClass('horizontal_panel');
} else {
$(panel)
.removeClass('horizontal_panel')
.addClass('vertical_panel');
}
};
I can see in debugger tools that class changed, but view doesn't change. I've tried many combinations with block and inline-block but have not found working combination.
Due to the doctype you are using, you are in quirks mode, and IE will perform as if it were 1998 all over again. New web pages should not be using that doctype since 1999.
The only way around this is to set the element's CSS properties to how you want them to be versus how other browsers are correctly displaying them.
There was nothing in doctype, nor in property values. Set styles with jquery instead of css file helps.
For simplicity I've created my style in the document to highlight my problem. I have a row of 4 links that are styled to look like button. The Next link (the 3rd item) I am hiding using css. In IE8+, Chrome, Firefox it works perfectly but in IE7, there is a gap between the Cancel and Accept button (where the Next button would be).
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<style type="text/css">
.ButtonBar
{
margin-top: 20px;
text-align: center;
}
.LinkButton
{
background-color: #01699b;
border: 0px solid;
border-radius: 14px;
color: #fff;
cursor: pointer;
font-weight: bold;
height: 28px;
padding: 0px 11px 0px 11px;
overflow: hidden;
position: relative;
text-decoration: none;
display: inline-block;
line-height: 28px;
}
.NextButton
{
display: none;
}
</style>
</head>
<body>
<div class="ButtonBar">
<a class="PreviousButton"><span class="LinkButton">Previous</span></a>
<a class="CancelButton"><span class="LinkButton">Cancel</span></a>
<a class="NextButton"><span class="LinkButton">Next</span></a>
<a class="AcceptButton"><span class="LinkButton">Accept</span></a>
</div>
</body>
</html>
If you remove all CSS from the .LinkButton class apart from background-color it does the same, I was just including it all to show what I am doing so far.
What should I do to fix this issue?
Didn't you ever wonder where these spaces actually come from?
It's the linebreaks between your inline-elements <a> causing a gap.
<div class="ButtonBar">
<a class="PreviousButton">...</a> <!-- Linebreak! -->
<a class="CancelButton">...</a> <!-- Linebreak! -->
<a class="NextButton">...</a> <!-- Linebreak! -->
<a class="AcceptButton">...</a> <!-- Linebreak! -->
</div>
Now the modern browsers collapse multiple of these, but IE7 does not, so you have actually 2 linebreaks between your elements, causing the gap to be double as wide.
You have several solutions to this:
1) Floating the elements
2) modifying markup:
<!-- end tag on the new line -->
<a>...
</a><a>...
</a>...
<!-- comments in between -->
<a>...</a><!--
--><a>...</a>
<!-- all on one line -->
<a>...</a><a>...</a>
<!-- In some cases (e.g. list elements) you can skip the end tag -->
3) Modifying font sizes
4) Using negative margins- but that could cause issues in older browsers.
What solution you want to take is up to you.
For your special case, where you just hide the element in question you could either declare absolute position or any float on that element.
One solution is to add float:left ONLY to the .NextButton css class. This should work.
I need to set it with CSS, not jquery.
The selector is for
all labels which do not have a sibling that is a checkbox or radio component.
a sample is:
<span>
<input id="item" type="checkbox">
<label for="item">Data</label>
</span>
This is because i have CSS which sets label to 12px, BUT it affects asp:checkboxes and asp:radio..., but i do not want them to be affected.
There isn't a CSS selector for an element that doesn't have a sibling of a certain kind.
But if you can guarantee that your structure is always an input followed by a label, then you could use the next-sibling combinator with :not() like so to match the label:
input:not([type="checkbox"]):not([type="radio"]) + label
Otherwise you're going to have to add classes to those labels, or use jQuery.
Try adjacent sibling selector:
input[type='text'] + label { // your styles }
You need to apply it to all predecessors you need namely. But there are not many possibilities to use label for besides checkbox and radios you don't want ;)
DEMO
You can select elements based on what kinds of siblings they have, IF the siblings precede your target elements. You can do however much type/selector checking you want on preceding siblings of your target.
You can kind of go backwards using nth-last-of-type and nth-last-child, but you can't do any selector checking on elements which follow your target, and the only kind of type checking you can do on following elements is counting how many there are of the same type.
So in your case you could use:
label {
/* your styling here */
}
input[type="checkbox"] + label, input[type="radio"] + label {
/* remove the styling for labels preceded by a checkbox or radio button */
}
Use ~ instead of + if you expect other elements between your inputs and labels.
Depending on what other elements might be inside the spans that you're working with, any of the 'nth' pseudoclasses may be useful to you.
This would also work for your example, if all you care about is that the labels don't have a preceding sibling:
label:first-child {
/* awesome styles */
}
I submitted an answer to a question that I feel is extremely valuable and along the lines to what you're asking for in this question. Here is the permalink to that question/answer.
https://stackoverflow.com/a/43132408/6167697
The key thing that is missing that may not work for your case is I propose keeping the inputs a child only to what they need to be so that other content can be selector'd using generic sibling selectors. Hypothetically you could still keep them in the span, and then use the labels in various elements inside the span, and that would still allow you treat those labels separate from any others I would think. I'll copy in a code snippet for a working example that demonstrates label elements that are not siblings to their inputs that can still be styled.
* {
padding: 0;
margin: 0;
background-color: #262626;
color: white;
}
.radio-button {
display: none;
}
#filter {
padding: 5% 0;
display: flex;
justify-content: center;
}
.filter-label {
display: inline-block;
border: 4px solid green;
padding: 10px 20px;
font-size: 1.4em;
text-align: center;
cursor: pointer;
}
main {
clear: left;
}
.content {
padding: 3% 10%;
display: none;
}
h1 {
font-size: 2em;
}
.date {
padding: 5px 30px;
font-style: italic;
}
.filter-label:hover {
background-color: #505050;
}
#featured-radio:checked~#filter .featured,
#personal-radio:checked~#filter .personal,
#tech-radio:checked~#filter .tech {
background-color: green;
}
#featured-radio:checked~main .featured {
display: block;
}
#personal-radio:checked~main .personal {
display: block;
}
#tech-radio:checked~main .tech {
display: block;
}
<input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked="checked">
<input type="radio" id="personal-radio" class="radio-button" name="content-filter" value="Personal">
<input type="radio" id="tech-radio" class="radio-button" name="content-filter" value="Tech">
<header id="filter">
<label for="featured-radio" class="filter-label featured" id="feature-label">Featured</label>
<label for="personal-radio" class="filter-label personal" id="personal-label">Personal</label>
<label for="tech-radio" class="filter-label tech" id="tech-label">Tech</label>
</header>
<main>
<article class="content featured tech">
<header>
<h1>Cool Stuff</h1>
<h3 class="date">Today</h3>
</header>
<p>
I'm showing cool stuff in this article!
</p>
</article>
<article class="content personal">
<header>
<h1>Not As Cool</h1>
<h3 class="date">Tuesday</h3>
</header>
<p>
This stuff isn't nearly as cool for some reason :(;
</p>
</article>
<article class="content tech">
<header>
<h1>Cool Tech Article</h1>
<h3 class="date">Last Monday</h3>
</header>
<p>
This article has awesome stuff all over it!
</p>
</article>
<article class="content featured personal">
<header>
<h1>Cool Personal Article</h1>
<h3 class="date">Two Fridays Ago</h3>
</header>
<p>
This article talks about how I got a job at a cool startup because I rock!
</p>
</article>
</main>
That has the added benefit of being pure CSS too! And as per the other post, here's the JSFIDDLE so you can play around with it yourselves.