Below is the code for my WP post. I'm trying to hide the span for comment. So that it doesn't appear on the blog post.
<div class="blog-stats">
<span class="clock">
<i class="fa fa-calendar stats-item"></i>
<span class="text-center text-light stats-item">February 15, 2020</span>
</span>
<span class="comment">
<i class="fa fa-comment stats-item"></i>
<span class="text-center text-light stats-item">no comments</span>
</span>
<span class="user">
<i class="fa fa-user stats-item"></i>
<span class="text-content text-light stats-item">Wayne John</span>
</span>
</div>
I tried a few below and it didn't work.
.blog-stats.comment {
display: none;
}
span .comment {
display: none;
}
span.comment {
display: none;
}
Any idea how to fix it?
Add below CSS and try :
<style type="text/css">
.blog-stats .comment span{
display: none !important;
}
</style>
your CSS code is OKAY!
try putting "!important" besides your style and clear your browser cache. maybe fixed.
please put space between classes like
.blog-stats .comment {
display: none;
}
or
.blog-stats .comment {
display: none !important;
}
this will work please try
In case if you don't want to use !important try the below version.
.blog-stats .comment.comment {
display: none;
}
Note: You can increase the .comment class x number of times to get higher precedence.
Example:
.blog-stats .comment.comment.comment {
display: none;
}
Please put this code in your css
.blog-stats span.comment{display: none;}
Related
In Chrome it's working good and all the CSS is inline - in the same line
but in Firefox it's messed up for some reason.
This is how it looks in Firefox:
I'm new to Firefox CSS, I have tried to play around with the CSS and search how to use CSS in Firefox but i did't succeed to fix it.
Is some one know how to fix it in Firefox ?
My html:
<template>
<div class="object-document">
<div class="document-icon">
<i
v-if="document.fileType == fileType.Document"
class="el-icon-fa-file-o"
></i>
<i
v-if="document.fileType == fileType.Image"
class="el-icon-fa-file-image-o"
></i>
<i
v-if="document.fileType == fileType.Video"
class="el-icon-fa-file-video-o"
></i>
</div>
<div
class="document-name"
:title="document.dateModified + ' ' + document.name"
>
<span>{{ document.name }}</span>
</div>
<div class="document-btns">
<el-button-group>
<a class="el-button" :href="getDownloadDocUrl(document, true)">
<i class="el-icon-fa-download"></i>
</a>
<a
class="el-button"
target="_blank"
:href="getDownloadDocUrl(document)"
>
<i class="el-icon-fa-eye"></i>
</a>
<a class="el-button" v-if="visibleForUser(userRoleId)">
<i class="el-icon-delete"
#click="showDeleteDialog(document)"></i>
</a>
</el-button-group>
</div>
</div>
</template>
css:
.object-document {
display: flex;
position: relative;
line-height: 23px;
& > .document-icon {
padding-right: 5px;
}
& > .document-name {
flex: 1 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
width: 50px;
white-space: nowrap !important;
}
& > .document-btns {
& > .el-button-group {
& > a {
padding: 2px 3px !important;
}
}
}
}
In general, there are some attributes that don't work in Firefox, but work in other browsers. In the link below you will find all information you need. Check if you have some attributes in your code which are mentioned in the link. If so, adjust them.
For many attributes you have to use -moz prefix so they work in Firefox. The goal is to define both, the normal CSS rule and the same CSS rule for Firefox. The browsers will decide by themselves, which rule to take.
Alternatively you can check you CSS with devtools in Firefox and find out, which CSS rules are not applied. Then look, what the rules have to look like for Firefox and extend them, as described.
Link with all information: https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions
I am using font awesome icons inside a div. When clicked, I change the color to blue. However, I don't want the red border that appears when clicked. How to remove it?
HTML
<div class="row tile-container">
<div class="tile-art search" (click)="changeSearchClass();"
[ngClass]="clicksearch ? 'blue': 'search'" routerLink="/app-quotation">
<i class="fas fa-search fa-lg"></i>
</div>
</div>
CSS
.tile-container{
box-shadow: 1px 2px;
color: lightgrey;
}
.search{
padding-top:10px;
}
.blue{
color:blue;
}
This might help
.tile-art:focus {
outline: none !important;
}
Use CSS outline 0 to this class
.tile-art, .tile-art i {
outline: 0;
}
changeSearchClass(){ this.clicked = !this.clicked; }
and in your html
<div class="tile-art search" (click)="changeSearchClass();" [style.border]="clicked ? none :'red' "
[ngClass]="clicksearch ? 'blue': 'search'" routerLink="/app-quotation">
<i class="fas fa-search fa-lg"></i>
</div>
I have this CSS:
.optionQuiz a:hover{
.Qtick{
background-color: green;
}
}
My HTML:
<div class="optionQuiz">
<a href="#">
<span class="Qtick">1</span>
</a>
</div>
My GOAL:
My Goal is when the user hovers the mouse over the <a> the span with class within the '<a>' to be highlighted.
MY Question:
Why this CSS didn't work? This is indeed good way but seems such thing have not been invented? Why? Should I use JavaScript? I don't want. I want it in CSS way.
Any kind of help is appreciated.
You don't need to use JavaScript. You can solve it with CSS only on a very simple way. See the following snippet:
.optionQuiz a:hover .Qtick {
background-color: green;
}
.optionQuiz a:hover .other1 {
background-color: blue;
}
.optionQuiz a:hover .other2 {
background-color: yellow;
}
<div class="optionQuiz">
<a href="#">
<span class="Qtick">1</span>
<span class="other1">2</span>
<span class="other2">3</span>
</a>
</div>
With plain CSS you can't use nested selectors.
You can do it using a pre-processor like Sass, PostCSS, Less...
If you want to use just CSS you have to use something like this:
a:hover span.Qtick{
color:red;
}
<div class="optionQuiz">
<a href="#">
<span class="Qtick">1</span>
</a>
</div>
Not sure what
.Qtick{
background-color: green;
}
is for...
if you want to change the color
this will do:
.optionQuiz a:hover{
background-color: green;
}
if you want only the span to be highlighter use the following selector:
.optionQuiz a:hover >span.Qtick{
background-color: green;
}
I have the following fiddle - here I am trying to align the 'click' and <h3> in the same line
I am facing 2 issues here -
when the h3 content is too long it is pushing 'click' -
and on click when it shows the content it is moving sideways. Any ideas on how to acheive this - new to CSS.
Tried giving display:inline to <h3> but that did not help in this scenario.
http://jsfiddle.net/92spd439/
$('#ttt a#iimarrow').css({
cursor: "pointer"
}).on('click', function() {
$(this).next('ul').toggle();
});
ul {
display: none;
}
#ttt {
float: right;
}
a#iimarrow {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3><a> tdhfkjshdfhsdfsdflkshdlflskfjl</a><h3>
<span id="ttt">
<a id="iimarrow">click</a>
<ul>
<li>12</li>
<li>13</li>
</ul>
</span>
The problem here is actually the h3 element which defaults to a display: block;. So if you just remove a#iimarrow{display:inline-block;} (since a tags default to display: inline; as #mikelt21 pointed out) and add the CSS below, then your problem will be fixed.
h3 {
display: inline;
}
JSFiddle
I believe something like this might be what you are looking for.
What I did was add float:left to the first <a>.
As following:
<h3>
<a style="float:left"> tdhfkjshdfhsdfsdflkshdlflskfjl</a>
</h3>
You could achieve this by placing the right-floated <a> element ahead of the <h3> in the HTML:
$('#ttt a#iimarrow').css({
cursor: "pointer"
}).on('click', function() {
$(this).next('ul').toggle();
});
ul {
display: none;
}
#ttt {
float: right;
}
a#iimarrow {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="ttt"><a id="iimarrow">click</a>
<ul>
<li>12</li>
<li>13</li>
</ul>
</div>
<h3><a>tdhfkjshdfhsdfsdflkshdlflskfjl</a><h3>
Note that a <span> cannot contain the block-level <ul> element, so I've used a <div> in place of that, otherwise the only change is rearranging so the <div> (#ttt) comes ahead of the <h3>.
i don't want to flood my visitors display with all news, so i want to use expanders for each news. But i want to support vistors with JavaScript disabled too.
My try:
#news > .panel > .panel-heading > .panel-title > .label{
float: right;
}
#news > .panel > .panel-body {
display: none;
}
#news > .panel > panel-heading > panel-title > a:visited < .panel-title < .panel-heading < .panel > .panel-body {
display: block;
}
<div id="news" class="tab-pane active">
{% for announcement in server.announcements.all %}
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{ announcement.title }} <span class="label label-default">By {{ announcement.writer.get_username }} at {{ announcement.date_created }}</span></h3>
</div>
<div class="panel-body">
{{ announcement.content|safe_html }}
</div>
</div>
{% endfor %}
</div>
You need to make some changes
First, you will never (at current CSS3 capablity) be able to get what you desire using pure CSS using the :visited psuedo-class for two reasons: (1) the a element is not at the sibling level of the .panel-body, so it cannot control .panel-body through css, and (2) the :visited pseudo-class has severe restrictions on what it allows a designer to control (for privacy reasons).
So what can you do? Use :target instead.
But that will (1) limit you to allowing only one news item open at a time, and (2) requires you to set id properties on your .panel-body elements to match the href of the a tag controlling it. So you would need html structure like this:
<div id="news" class="tab-pane active">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Title 1
<span class="label label-default">By writer name</span>
</h3>
</div>
<div class="panel-body" id="Item1">
Panel 1 body
</div>
</div>
</div>
Where each a has a unique href that is tied to the id of the .panel-body of the item. Then you can get the functionality similar to what you seek by this CSS for the display:
#news > .panel > .panel-body {
display: none;
}
#news > .panel > .panel-body:target {
display: block;
}
You can see how this works in this fiddle example, and to see how it would work with multiple news items, take a look at this fiddle example.
This solution is only CSS3 compatible, so older browsers with javascript disabled would not be able to see any news items (with javascript you can use that to expand)
Graceful degradation:
I would show all news in a container with internal scrollbar (constrained in height) as in : http://jsfiddle.net/Py2HU/1/
And when JS available would add a Show/Hide button, hide N last news and show/hide them after a click (or add Previous/Next buttons to allow scrolling news one by one)
CSS
.news-wrapper {
width: 300px;
max-height: 400px;
overflow: auto;
border: 1px solid #000;
}
HTML
<div class="news-wrapper">
<ul class="news">
<li class="news-item">Lorem ipsum </li>
<li class="news-item">Lorem ipsum </li>
<li class="news-item">Lorem ipsum </li>
<li class="news-item">Lorem ipsum </li>
</ul>
</div>
Compatibility: IE7+ and easily with IE6 (as simple as .ie6 .news-wrapper { height: 400px } if anyone cares)
This answer is for people who are looking for Single expander only with CSS3.
Bootstrap reference is given only to use Glyph-icons(Up/Down).
check Plunker
HTML
<div class="expandercheckbox">
<input id="e1" type="checkbox" checked="checked" />
<label for="e1" class="expanderheader">Click me to Expand/Collpase</label>
<div class="expandercontainer">
I am in container. I am visible. Click above to make be collpase.
</div>
</div>
CSS
body{
padding:50px;
background: #484848;
color:#fff;
}
.expandercheckbox input[type="checkbox"] {
display: none;
}
.expandercheckbox .expanderheader {
cursor: pointer;
}
.expandercheckbox input[type="checkbox"] + .expanderheader {
color: #fff;
font-weight: bold;
font-size: 12px;
white-space: nowrap;
user-select:none;
-webkit-user-select:none;
}
.expandercheckbox input[type="checkbox"] + .expanderheader:before {
content: "\e113";
display: inline-block;
font: 14px/1em Glyphicons Halflings;
height: 20px;
width: 20px;
border-radius: 20px;
margin: -2px 0.25em 0 0;
padding: 1.5px 3.5px;
vertical-align: top;
background: #717171;
/* Old browsers */
}
.expandercheckbox input[type="checkbox"]:checked + .expanderheader:before {
content: "\e114";
padding: 2.5px;
}
.expandercheckbox input[type="checkbox"]:checked + .expanderheader:after {
font-weight: bold;
color:#000;
}
.expandercontainer{
background:#000;
padding:15px;
}
.expandercheckbox input[type="checkbox"]:checked ~ .expandercontainer {
display: block;
}
.expandercheckbox input[type="checkbox"]:not(:checked) ~ .expandercontainer {
display: none;
}