I'm wondering if there is a way to shorten repetitive css code which only different by the given url.
the class is always named .bg-login-[n] and the url represents the same number.
The solution I'm consindering is to somehow combine CSS and JS to loop through an array of filenames. is there a simpler or "cleaner" way?
for example:
.bg-login-1{
background: url(/images/login/login-1.jpg) no-repeat center center;
}
.bg-login-2{
background: url(/images/login/login-2.jpg) no-repeat center center;
}
.bg-login-3{
background: url(/images/login/login-3.jpg) no-repeat center center;
}
.bg-login-4{
background: url(/images/login/login-4.jpg) no-repeat center center;
}
.bg-login-5{
background: url(/images/login/login-5.jpg) no-repeat center center;
}
No JS needed. Just repeat numbers or use SCSS for loop.
.bg {
background-position: center center;
background-repeat: no-repeat:
}
.bg-1 {
background-image: url(/images/login/login-1.jpg);
}
.bg-2 {
background-image: url(/images/login/login-2.jpg);
}
/* ... */
/* SCSS */
#for $i from 1 through N {
.bg-#{$i} {
background-image: url(/images/login/login-#{$i}.jpg);
}
}
.bg-login-1 {
background-image: url(/images/login/login-1.jpg);
}
.bg-login-2 {
background-image: url(/images/login/login-2.jpg);
}
.bg-login-3 {
background-image: url(/images/login/login-3.jpg);
}
.bg-login-4 {
background-image: url(/images/login/login-4.jpg);
}
.bg-login-5 {
background-image: url(/images/login/login-5.jpg);
}
And for the last three properties, do this:
.bg-login-1,
.bg-login-2,
.bg-login-3,
.bg-login-4,
.bg-login-5 {
background-repeat: no-repeat;
background-position: center;
}
or do this:
.bg-login {
background-repeat: no-repeat;
background-position: center;
}
Add classname bg-login to all the button.
<script>
const btns = document.getElementsByClassName('bg-login'); //get all the buttons
const i=1;
for(const btn in btns){
btn.style.backgroundImage = `url(/images/login/login-${i}.jpg) no-repeat center center`;
i++;
}
</script>
Related
I have a simple question but I can't seem to figure this out.
Suppose I have one file with the following contents:
icons.scss
.icon {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 1rem;
height: 1rem;
&[data-icon="left"] {
background-image: url('...');
}
&[data-icon="right"] {
background-image: url('...');
}
}
This would compiles to:
.icon {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 1rem;
height: 1rem;
}
.icon[data-icon=left] {
background-image: url('...');
}
.icon[data-icon=right] {
background-image: url('...');
}
Then I also have another file which is the main file where I import all other files inside before compiling.
main.scss
#use "./icons.scss";
#use "./some-other-file.scss";
What I would like to do is prepend all the classes imported from "icons.scss" or any other files with a name of my choice. For example, .icon would become .prefixed-icon and so on.
This is my desired result:
Desired result:
.prefixed-icon {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 1rem;
height: 1rem;
}
.prefixed-icon[data-icon=left] {
background-image: url('...');
}
.prefixed-icon[data-icon=right] {
background-image: url('...');
}
I've only started learning SASS earlier today so this got way over my head. I tried to use the sass:selector and sass:meta build-in modules but didn't manage to figure it out.
When I replace background image in #media no background image is shown in IE9+ anymore. It works flawless in FF, Safari and Chrome. I tried several bypasses but it seems to come down by these lines (see below). Anyone a suggestion?
CODE
<div class="feature">
<ul class="feature-list">
<li class="nav-boat"><a href="/pages/disclaimer.php" ></a></li>
<li class="nav-camper"></li>
<li class="nav-tools"></li>
<li class="nav-cleaner"></li>
<li class="nav-motorcycle"></li>
<li class="nav-car"></li>
<li class="nav-warehouse"></li>
<li class="nav-office"></li>
</ul>
<div class="clear"></div>
</div>
Below the CSS
.feature {
width:920px;
margin:30px auto;
height:500px;
}
.feature-list {
list-style: none;
}
.feature-list li {
width:185px;
height:185px;
margin-top:40px;
border:2px solid #4d4d4d;
margin-left:33px;
}
.feature-list li a {
text-decoration: none;
float: left;
}
.nav-camper {
background: url(/images/camper-icon-sm.gif) center center no-repeat;
}
.nav-camper:hover {
background-image: url(/images/camper-icon-hover-sm.gif);
}
.nav-boat {
background: url(../images/boat-icon-sm.gif) center center no-repeat;
}
.nav-boat:hover {
background-image: url(../images/boat-icon-hover-sm.gif);
}
.nav-tools {
background: url(../images/tools-icon-sm.gif) center center no-repeat;
}
.nav-tools:hover {
background-image: url(../images/tools-icon-hover-sm.gif);
}
.nav-cleaner {
background: url(../images/cleaner-icon-sm.gif) center center no-repeat;
}
.nav-cleaner:hover {
background-image: url(../images/cleaner-icon-hover-sm.gif);
}
.nav-motorcycle {
background: url(../images/motorcycle-icon-sm.gif) center center no-repeat;
}
.nav-motorcycle:hover {
background-image: url(../images/motorcycle-icon-hover-sm.gif);
}
.nav-car {
background: url(../images/car-icon-sm.gif) center center no-repeat;
}
.nav-car:hover {
background-image: url(../images/car-icon-hover-sm.gif);
}
.nav-warehouse {
background: url(../images/warehouse-icon-sm.gif) center center no-repeat;
}
.nav-warehouse:hover {
background-image: url(../images/warehouse-icon-hover-sm.gif);
}
.nav-office {
background: url(../images/office-icon-sm.gif) center center no-repeat;
}
.nav-office:hover {
background-image: url(../images/office-icon-hover-sm.gif);
}
#media query.
#media screen and (max-width: 769px) {
.feature-list li {
width:120px;
height:120px;
}
.feature ul li a {
width: 120px;
height: 120px;
}
.divider {
display:none;
}
.nav-camper {
background: url(../images/camper-icon-xs.gif) center center no-repeat;
}
.nav-camper:hover {
background-image: url(../images/camper-icon-hover-xs.gif);
}
.nav-boat {
background: url(../images/boat-icon-xs.gif) center center no-repeat;
}
.nav-boat:hover {
background-image: url(../images/boat-icon-hover-xs.gif);
}
.nav-tools {
background: url(../images/tools-icon-xs.gif) center center no-repeat;
}
.nav-tools:hover {
background-image: url(../images/tools-icon-hover-xs.gif);
}
.nav-cleaner {
background: url(../images/cleaner-icon-xs.gif) center center no-repeat;
}
.nav-cleaner:hover {
background-image: url(../images/cleaner-icon-hover-xs.gif);
}
.nav-motorcycle {
background: url(../images/motorcycle-icon-xs.gif) center center no-repeat;
}
.nav-motorcycle:hover {
background-image: url(../images/motorcycle-icon-hover-xs.gif);
}
.nav-car {
background: url(../images/car-icon-xs.gif) center center no-repeat;
}
.nav-car:hover {
background-image: url(../images/car-icon-hover-xs.gif);
}
.nav-warehouse {
background: url(../images/warehouse-icon-xs.gif) center center no-repeat;
}
.nav-warehouse:hover {
background-image: url(../images/warehouse-icon-hover-xs.gif);
}
.nav-office {
background: url(../images/office-icon-xs.gif) center center no-repeat;
}
.nav-office:hover {
background-image: url(../images/office-icon-hover-xs.gif);
}
}
IE9 dosen't support media query add below JS code in text file and save it whth css-media-query-ie.js name and add it to directory then add below tag in head of html page.
HTML
<head>
<!--[if lt IE 9]>
<script type="text/javascript" src="css-media-query-ie.js"></script>
<![endif]-->
</head>
css-media-query-ie.js
/*!
* CSS Media Queries for IE later than 9.0
* http://ghita.org/tipoftheday/css-media-queries-for-ie
* Copyright 2011, Serban Ghita
* Released under the GPL Licenses.
*/
var detectAndUseStylesheet = function(){
var currentWidth = screen.width,
// currentWidth = parseInt(document.documentElement.clientWidth),
//currentWidth = 320,
cssLinks = document.getElementsByTagName('link'),
_check = new RegExp(currentWidth, 'i'),
foundResolution = false,
allSupportedResolutions = [];
for(ii in cssLinks){
if(cssLinks[ii].href){
if(cssLinks[ii].id){
allSupportedResolutions.push(cssLinks[ii].id.match(/[0-9]+/i)[0]);
if(cssLinks[ii].id.match(_check)){
document.getElementById('stylesheet-'+currentWidth).removeAttribute('media');
foundResolution = true;
}
}
}
}
// Fallback if resolution is not found.
if(!foundResolution){
for(ii in allSupportedResolutions){
if(currentWidth<allSupportedResolutions[ii]){
document.getElementById('stylesheet-'+allSupportedResolutions[ii]).removeAttribute('media');
break;
}
}
}
}
window.attachEvent('onload', detectAndUseStylesheet);
Reference
see more
Ok so here's my code:
.file-icon,.folder-icon{
$size:24px;
position: absolute;
top: 10px;
left: 44px;
display: block;
float: left;
width: $size;
height: $size;
margin-right: 10px;
background: $driveIcon;
&.folder-close{
background-position: 0 -72px;
&.folder-open{
background-position: -$size -72px;
}
}
&.archiveIcon{
background-position: -$size*2 -72px;
}
&.audioIcon{
background-position: -$size*3 -72px;
}
&.brokenIcon{
background-position: -$size*4 -72px;
}
&.docIcon{
background-position: -$size*5 -72px;
}
&.imgfile{
background-position: -$size*6 -72px;
}
&.pdfIcon{
background-position: -$size*7 -72px;
}
&.pptx{
background-position: -$size*8 -72px;
}
&.txtIcon{
background-position: -$size*9 -72px;
}
&.unknown{
background-position: -$size*10 -72px;
}
&.videoIcon{
background-position: -$size*11 -72px;
}
&.xlsIcon{
background-position: -$size*12 -72px;
}
&.viewer{
background-position: -$size*13 -72px;
&.folder-open{
background-position: -$size*14 -72px;
}
}
&.owner{
background-position: -$size*15 -72px;
&.folder-open{
background-position: -$size*16 -72px;
}
}
&.moderator{
background-position: -$size*17 -72px;
&.folder-open{
background-position: -$size*18 -72px;
}
}
}
What I want to do is automate this assigning of background positioning. I tried using #for for the actual statement but not able to figure out how to assign the results one by one to my custom second classes. Please help me out, i'm a beginner in sass. Thankyou.
This is what I've done up till now:
#for $i from 0 to 18{ background-position: -($size*$i} -72px; }
Well, you can use sass lists for your sprites.
Here is an approach:
$list: archiveIcon, audioIcon;
$size: 24px;
$totalClasess: 2;
#each $value in $list {
&.#{$value} {
background-position: -($size*$totalClasses) -72px;
#if $value == folder-close {
&.folder-open {
background-position: -$size -72px;
}
}
}
$totalClasses: $totalClasses + 1;
}
You have to complete the list with all your classes.
Regards.
I am trying to re-position some navigation tools in CSS but anything I try doesn't work. Is there a way I could group it together and move it as a div?
I've tried adjusting the background properties and also playing with padding and margins of the individual tags. I'm not sure how else it can be done?
This is the code i'm working with:
#slides .slidesjs-navigation {
margin-top:5px;
}
a.slidesjs-next,
a.slidesjs-previous,
a.slidesjs-play,
a.slidesjs-stop {
background-image: url(images/btns-next-prev.png);
background-repeat: no-repeat;
display:block;
width:12px;
height:18px;
overflow: hidden;
text-indent: -9999px;
float: left;
margin-right:5px;
}
a.slidesjs-next {
margin-right:10px;
background-position: -12px 0;
}
a:hover.slidesjs-next {
background-position: -12px -18px;
}
a.slidesjs-previous {
background-position: 0 0;
}
a:hover.slidesjs-previous {
background-position: 0 -18px;
}
a.slidesjs-play {
width:15px;
background-position: -25px 0;
}
a:hover.slidesjs-play {
background-position: -25px -18px;
}
a.slidesjs-stop {
width:18px;
background-position: -41px 0;
}
a:hover.slidesjs-stop {
background-position: -41px -18px;
}
It's sitting in the bottom of the page! I would like it to sit just beneath the slideshow of images! Any help would be great!
I'm working on a right to left aligned website (in Hebrew) and would like the icons to appear to the right of the text. For example: http://kaptinlin.com/themes/striking/shortcodes/typography/ at the bottom Contact Us widget, the icon is on the left, I want it on the right.
Here is the relevant code (HTML):
<section id="contact_info-3" class="widget widget_contact_info">
<h3 class="widgettitle">Contact Us</h3>
<p><span class="icon_text icon_phone default">(+40) 111 222 333</span></p>
<p class="contact_address">
<span>city, state</span>
<span class="contact_zip">1111</span>
</p>
</div>
</section>
CSS:
.icon_text {
padding: 0 22px 0 0;
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-color: transparent;
}
#footer .icon_text.default {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/footer_icons.png");
}
.icon_globe {
background-position: -390px 0px;
}
.icon_home {
background-position: -360px -30px;
}
.icon_email {
background-position: -330px -60px;
}
.icon_user {
background-position: -300px -90px;
}
.icon_multiuser {
background-position: -270px -120px;
}
.icon_id {
background-position: -240px -150px;
}
.icon_addressbook {
background-position: -210px -180px;
}
.icon_phone {
background-position: -180px -210px;
}
.icon_link {
background-position: -150px -240px;
}
.icon_chain {
background-position: -120px -270px;
}
.icon_calendar {
background-position: -90px -300px;
}
.icon_tag {
background-position: -60px -330px;
}
.icon_download {
background-position: -30px -360px;
}
.icon_cellphone {
background-position: 1px -390px;
}
.icon_text.default {
background-image: url("http://kaptinlin.com/themes/striking/wpcontent/themes/striking/images/icons_black.png");
}
.icon_text.black {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_black.png");
}
.icon_text.gray {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_gray.png");
}
.icon_text.red {
background-image: url("../images/icons_red.png");
}
.icon_text.orange {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_orange.png");
}
.icon_text.magenta {
background-image: url(http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_magenta.png);
}
.icon_text.yellow {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_yellow.png");
}
.icon_text.blue {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_blue.png");
}
.icon_text.pink {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_pink.png");
}
.icon_text.green {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_green.png");
}
.icon_text.rosy {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_rosy.png");
}
Thanks.
Your icons are background-images so in short you need to adjust the padding, background-position and text-align properties to move it from the left to the right side.
You need to make a few adjustments. First you need to make sure the padding is set to the right side instead of the left side. Then you need to adjust the background-position to put the icons on the right:
.icon_text {
padding: 0 22px 0 0; /* changed from 0 0 0 22px on live site*/
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-color: transparent;
}
.contact_info_wrap .icon_text, .contact_info_wrap .contact_address {
padding-right: 26px; /* changed from padding-left on live site */
}
.icon_phone { /* obviously you would change each of the icons as necessary */
background-position: -72px -210px; /* changed from -180px -210px */
}
However doing this will lead to your icons not being in line with each other down the right side. So you will want to align the text to the right by adjust the p tags:
.contact_info_wrap p {
margin-bottom: 5px;
text-align: right; /* add this */
}
I would guess you would also want your titles to be aligned so:
#footer h3.widgettitle {
color: #FFFFFF;
font-size: 24px;
text-align: right; /* add this */
}
Should you need any further assistance on your rtl question, please visit the Striking support forum and we will assist you. RTL is generally straightforward. We can provide you the code for moving all body text to rtl, and assist with any particular element for which you are uncertain of the element movement.