At http://communitychessclub.com/ the chessboard diagrams have an annoying orange flash for 1/2 second before the image loads.
How can I css style this to make the background some other color than orange?
The relevant code that produces the diagram:
<div class='hide-for-small-only left set_pic' style = 'clear: left; overflow: auto; margin-top:0.5rem;'>
<a data-tooltip class="has-tip" title = ". Harold Stenzel - . Igor Nikolayev (FM)" href = "basic.php?game=5402">
<img class="box lazyload" height="256" width="256; background:beige; " alt="diagram" src="images/x.gif"
data-src= "./ChessImager/diagram.php?fen=r1bq1rk1/ppp3pp/8/3p4/1Q1Pn3/2N2N2/PP3PPP/R4RK1&square_size=30&ds_color=(121,146,164)&ls_color=(241,235,226)" /> </a> </div>
since you are using an external third party stylesheet ( and even link to it directly) you should look there by yourself.
http://foundation.zurb.com/docs/ color scheme seems to match your tone of orange
Related
As the title says, I have been unable to correctly apply a custom color to a menu in Semantic UI. I have scoured the internet for tutorials, guides, including the Semantic UI page. The only things I have been able to find are people able to successfully apply custom colors to buttons, or people utilizing the default colors defined by Semantic UI for the menu.
<div class="ui fluid container">
<div class="ui segment attached">
<h1 class="ui header item">CONTERACT</h1>
</div>
</div>
<div class="ui fluid container">
<div class="ui primary attached four item inverted menu">
Project Name
Link
Link
Link
</div>
</div>
I have defined the particular color I want as #primaryColor, and this works on a button, just as an experiment, but does not work on the menu. I have also tried to override a default color in site.override with no success. I am under the suspicion that you may not be able to use a custom color with a menu in Semantic UI, but that is also hard to believe considering that defeats the customization aspect.
/**
User Global Variables
**/
#primaryColor: #fabd42
The documentation for coloured menus can be found here and from looking at the source code in the examples we can see that to change out a colour a single-use class is used, e.g red makes the menu red:
<div class="ui red three item menu"></div>
And to set red as the background colour (instead of text colour) the inverted class is added, e.g:
<div class="ui red inverted three item menu"></div>
That indicates that we need to identify where these single-use colour classes are defined and add our own. Searching the source code via GitHub for menu inverted orange we can find that these are defined in menu.less like this:
/* Orange */
.ui.inverted.menu .orange.active.item,
.ui.inverted.orange.menu {
background-color: #orange;
}
.ui.inverted.orange.menu .item:before {
background-color: #invertedColoredDividerBackground;
}
.ui.inverted.orange.menu .active.item {
background-color: #invertedColoredActiveBackground !important;
}
Therefore to add your own background colour for a menu you need to define a background colour class in the same way, e.g:
/* Peach */
.ui.inverted.menu .peach.active.item,
.ui.inverted.peach.menu {
background-color: #peach;
}
.ui.inverted.peach.menu .item:before {
background-color: #invertedColoredDividerBackground;
}
.ui.inverted.peach.menu .active.item {
background-color: #invertedColoredActiveBackground !important;
}
Then you need to add the peach colour, which can be set in site.variables, e.g:
/*--- Colors ---*/
#peach : #FABD42;
You're done! You've added your own colour (peach) and made it available as a background menu colour. The final step is to add the colour class to your menu along with inverted to set it as the background colour, e.g:
<div class="ui peach inverted primary attached four item menu">
</div>
I have a series of images of different size (call it set A) that I am arranging next to each other. Upon press of a button, those images get replaced by a much larger image in original size. I'd like to make sure the replaced image adheres to the original image size. I've tried to apply various container width tricks, but so far have failed.
I've set up a runnable demo here https://stackblitz.com/edit/ionic-au2pcv (code is in home.html and home.ts in pages directory)
If you press the "Switch" button, the images get replaced, as does the size (which I want to avoid)
(please excuse inline CSS styling)
The code:
My template
<ion-content padding>
<div *ngFor="let image of images">
<!-- the reason for this div is to force the placeholder image to this size -->
<!-- doesn't seem to work... -->
<div [ngStyle]="{'width':image.w, 'height':image.h, 'float':left}">
<img [src]="showImage?image.src:placeholder" style="float:left;max-width:100%; max-height:100%;width:auto;height:auto;" />
</div>
</div>
<div style="clear:both">
<button ion-button (click)="toggleImage()">switch</button>
</div>
</ion-content>
The TS:
import { NgStyle } from '#angular/common';
images = [{
src: 'http://lorempixel.com/300/200/',
w:300,
h:200,
},
{
src: 'http://lorempixel.com/100/100/',
w:100,
h:100,
},
{
src: 'http://lorempixel.com/200/80/',
w:200,
h:80,
}];
placeholder = "http://via.placeholder.com/1000x1000";
showImage:boolean = true;
toggleImage() {
this.showImage = !this.showImage;
}
Your demo doesn't show images. Anyways, to acheive this, you don't have to use containers and all other things. It can be acheive by using simple css. Before doing this, make sure to fix the size of the image. for example if you want the 1 image size to be 30% and height 100% and then set object-fit property of the css to be cover. Below is the quick example:-
.image{
width:30%;
height:100%;
object-fit:cover;
}
<img src="../image_path" class="image"/>
Thanks
I have to make text wrap convert into into two line and ellipse will add if the text is more than two line.
Currently it's wrap in multiple line and view look so weird.
What i have done so far in css:
<div class="list card item-text-wrap" ng-click="getNewsDetail(new)">
<a class="item item-thumbnail-left" href="#">
<img src="http:{{new.thumbnail}}">
<h2>{{new.summary}}</h2>
<p style="padding: 0;">{{new.date | date:'EEE, MMM d yyyy'}} {{new.date |
date:'shortTime'}}</p>
</a>
</div>
This is work perfectly when text length is short but i want to make it consistent in two line and rest of part is append with dot(...).
Any help would highly appreciate.
So you cannot accomplish this using only CSS because you must use white-space: nowrap; to be able to use text-overflow: elipsis; and nowrap will not let the words wrap down multiple lines.
Here is a similar question with a Jquery solutions: CSS word ellipsis ('...') after one or two lines
Here is a page dedicated to different version of text-overflow and the different ways to handle it: http://dotdotdot.frebsite.nl/
You are going to need JQuery to do this, but luckily you gain a lot of control and may find a better visual design rather than the ellipsis.
Of course, apply any styles to the parent elements holding the text.
e.g.
<!-- HTML -->
<!-- Give class of "date" -->
<p style="padding: 0;" class="date>{{new.date | date:'EEE, MMM d yyyy'}} {{new.date | date:'shortTime'}}</p>
// Jquery
if ($('.date').height() > 50) {
var words = $('.date').html().split(/\s+/);
words.push('...');
do {
words.splice(-2, 1);
$('.date').html( words.join(' ') );
} while($('.date').height() > 50);
}
I am working within bootstrap's core admin structure and have a main header at the top of the page and then a sub header beneath it. I am trying to allow that sub header to fix to the top of the page when the user scrolls down so they can always see that information, but I am having a bit of trouble.
The section I would like to stick to the top looks like this.
<div class="area-top clearfix" >
<div class="pull-left header">
<h3 class="title"><i class="icon-group"></i>Dashbord</h3>
</div><!--.header-->
<ul class="inline pull-right sparkline-box">
<li class="sparkline-row">
<h4 class="blue"><span> Cover Designs</span> 4</h5>
</li>
<li class="sparkline-row">
<h4 class="green"><span> Video Trailers</span> 5</h5>
</li>
<li class="sparkline-row">
<h4 class="purple"><span> Web Banners</span> 5</h5>
</li>
</ul>
</div><!--.area-top-->
and I have tried so far to wrap that in another div with the navbar navbar-fixed-top classes. But that shot it to the top right away and overlapped content that needs to be seen.
I have also tried using plain css by adding position:fixed; to the current div, but that messes up the breadcrubms I have laying underneath it because it takes it out of the flow.
Is there anyway to accomplish this with just css. I know I can do a hack with jquery, but in my team I am only in charge of the css.
you can use below css to the sub header navbar.
css:
.sticky-top {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1020;
}
Add 'sticky-top' class to sub header.
for eg: you can see the fiddle below which is similar to the question.Here second menu fixed to top when user scrolls.
https://jsfiddle.net/raj_mutant/awknd20r/6/
position:fixed is the way to go here. Can you apply a height to the div you want to be fixed and apply a margin to the breadcrumbs?
.area-top{ position:fixed; height:2em; }
.breadcrumbs { margin-top: 2.2em; }
My point of view is the following. When you ask for this :
to fix to the top of the page when the user scrolls down
It means that you need to detect when users are scrolling. Furthermore, there is no other way than js / jQuery to detect this kind of action. CSS can be a part of solution by creating a class for exemple which will stick your menu, but you'll always need a bit of js to detect when to put and to remove the class.
Here is an exemple on how to do this in jQuery :
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(window).scroll(function(){
var offset = $('.area-top').offset().top;
var top = $(document).scrollTop();
if(top >= offset){
// this is where you should fix you menu
$('.area-top').addClass('fixed'); // if you have a css class which fix the element.
$('.area-top').css('position', 'fixed'); // if you don't have css class
}else{
// this is where you should unfix your menu
$('.area-top').removeClass('fixed'); // if you have a css class which fix the element.
$('.area-top').css('position', 'inherit'); // if you don't have css class
}
});
</script>
Don't forget that every "advanced" action which need to detect a change in the DOM or which need an user interaction will require some JS or PHP to deal with it. By "advanced", i'm meaning all the things that can't be natively handle in HTML.
I have created a css class for like this:
.nav-right-EmployeeEmail {
content: url('../app_resources/nav-blue-email60.png');
padding-top:5px;
width:60px;
}
and using it in aspx file like this:
<img class="nav-right-EmployeeEmail" alt="FT Logo" /></a> <a target="_self" href="index.aspx" title="Help Desk">
I did this to make sure if the images/logos changes in future, then I only need to change it in css file and it will be reflected on every page.
The issue is that the images are not being shown in IE9. I can only see the image placeholders but not the actual image. Please note that the <img> is inside an <a> tag.
Any help will be highly appreciated!!
Yes, it makes sure that you need to change CSS only if the image is changed.
If what you're trying to do is define your logo left to some element, do it like this :
.nav-right-EmployeeEmail:before {
content: url(../app_resources/nav-blue-email60.png);
padding-top:5px;
width:60px;
}
And create your element like this for exemple :
<a class=nav-right-EmployeeEmail target="_self" href="index.aspx" title="Help Desk">some link</a>
DEMO : http://jsfiddle.net/UP88d/