CSS

Bootstrap Utility Example

p-4 rounded-4 shadow m-auto position-relative overflow-hidden

Css

Custom CSS Example

custom-image

Css

.custom-image {
}

Custom Callout Example

callout

Css

.callout {
width: 100%;
max-width: 850px;
}
.callout > * {
max-width: 65ch;
z-index:1;
}
.callout::after {
       content: "";
    background: url(data:image/svg+xml;base64,PCEtLT94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/LS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9InJnYmEoODUsIDAsIDI1NSwgMSkiIGNsYXNzPSJiaSBiaS1hc3RlcmlzayIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCAwYTEgMSAwIDAgMSAxIDF2NS4yNjhsNC41NjItMi42MzRhMSAxIDAgMSAxIDEgMS43MzJMMTAgOGw0LjU2MiAyLjYzNGExIDEgMCAxIDEtMSAxLjczMkw5IDkuNzMyVjE1YTEgMSAwIDEgMS0yIDBWOS43MzJsLTQuNTYyIDIuNjM0YTEgMSAwIDEgMS0xLTEuNzMyTDYgOCAxLjQzOCA1LjM2NmExIDEgMCAwIDEgMS0xLjczMkw3IDYuMjY4VjFhMSAxIDAgMCAxIDEtMXoiLz4KPC9zdmc+);
    position: absolute;
    height: 200px;
    background-position: center;
    right: 0;
    top: 0;
    background-size: 100%;
    z-index: 0;
    transform: translate(20%, -20%) rotate(45deg);
    background-repeat: no-repeat;
    aspect-ratio: 1/1;
    opacity: 0.6;
}

OK

div#Poster_10091 div#Poster_10091:hover div#Poster_10099 div#Poster_10099:hover div#Poster_10085 div#Poster_10085:hover slider-container>* slider-container>*:hover .accordion-item:first-of-type .accordion-button .grid .g-col-lg-4 info-gray text-price #BurgerMenuButton BurgerMenuButton toast-header toast grid .g-col-lg-4  h-100   theme ok-yellow-blue position-relative item_swift_productdefaultimage item_swift_productdefaultimage product-box-wr btn

Css

div#Poster_10091 {
    border-radius: 5px;
    background-image: url('https://www.ok.is/wp-content/uploads/2023/12/headphone-jabra.png')!important;
    background-size: cover!important;
background-color: #EEF0F0;
}
div#Poster_10091:hover {
    border-radius: 5px;
    background-color: #FFCD00;
    transition: background-color 0.3s ease;
}
div#Poster_10099 {
    border-radius: 5px;
    background-image: url('https://www.ok.is/wp-content/uploads/2023/12/hp-prentar.png')!important;
    background-size: cover!important;
background-color: #EEF0F0;
}
div#Poster_10099:hover {
    border-radius: 5px;
    background-color: #FFCD00;
    transition: background-color 0.3s ease;
}
div#Poster_10085 {
    border-radius: 5px;
    background-image: url('https://www.ok.is/wp-content/uploads/2023/12/hp-tolvu.png')!important;
    background-size: cover!important;
background-color: #EEF0F0; 
}
div#Poster_10085:hover {
    border-radius: 5px;
    background-color: #FFCD00;
    transition: background-color 0.3s ease;
}
.slider-container>* {
    background-color: #EEF0F0;
}
.slider-container>*:hover {
    background-color: #FFCD00;
transform: scale(0.9);
transition: all .2s ease-in-out;
} 
.accordion-item:first-of-type .accordion-button {
    font-size: 22px!important;
    color: #2651A8!important;
    border: 1px solid;
    border-color: #2651a8;
    border-radius: 30px !important;
    margin-top: 32px;
}
.grid .g-col-lg-4 {
        background: white!important;
border-radius: 30px !important;
  padding: 10px;
    }
.text-price {
    font-family: 'font-calibre-semibold'!important;
    line-height: normal;
}
#BurgerMenuButton {
        padding-left: 20px !important;
        font-family: 'font-calibre-semibold'!important;
padding-left: 30px!important;
font-size:20px!impotant;
line-height: 16px !important;
 }
.toast-header {
    background-color: #ffcd00!important;
    color: #00283c!important;
    font-size: 20px!important;
    font-family: 'font-calibre-semibold'!important;
}
.toast {
    border-radius: 30px!important;
    font-size: 16px!important;
    font-family: 'font-calibre-regular'!important;
}
.h-100   theme ok-yellow-blue position-relative item_swift_productdefaultimage  {
    margin-left: auto;
    margin-right: auto;
}
.item_swift_productdefaultimage  {
    margin-left: auto;
    margin-right: auto;
}
.product-box-wr {
border-radius: 30px!important;
padding:20px!important;
padding-top:40px!important;
padding-bottom:40px!important;
background-color: #FFFFFF!important;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.product-box-wr:hover {
background-color: #FFFFFF!important;
transform: scale(0.9);
transition: all .2s ease-in-out;
}
.btn:hover {
transform: scale(1.2);
transition: all .2s ease-in-out;
}

Rounded Corners

rounded-corners

Css

.rounded-corners .badge{
border-radius: .25rem !important;
}
.rounded-corners img {
  border-radius: 30px;
}
.rounded-corners .btn-secondary {
  background-color: #00283C!important;
  border: #00283c!important;
  color: #FFCD00!important;
}
.rounded-corners .btn-secondary:hover {
  background-color: #FFCD00!important;
  border: #FFCD00!important;
  color: #00283C!important;
}

AnonymousAddToCart

aboveStrechedLink

Css

.aboveStrechedLink{
z-index: 1;
}

Animate character

anime

Css

.anime {
background: radial-gradient(circle,#2651A8,#E04A24,#FFCC00);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 14s linear infinite;
}
@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

Horizontal Icon Box

iconbox-h

Css

.iconbox-h .slider-container > * {
border-radius: 30px!important;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)!important;
background-color: #FFCC00!important;
}
.iconbox-h .swiffy-slider .slider-container {
padding-bottom: 10px;
}
.iconbox-h .slider-container > *:hover {
background-color: #6DD8EF!important;
}
.iconbox-h .h3 {
    font-size: 1.5rem!important;
    padding-left: 10px!important;
  }
.iconbox-h .slider-container .slide-visible > * {
border-radius: 30px!important;
}

One side Round Corner

oneside-round

Css

.oneside-round .h-100 {
border-radius: 30px!important;
}

Icon Box

iconbox2

Css

.iconbox2 .text-center {
  margin-top: 20px!important;
}
.iconbox2 .slider-container  > * img {
  object-position: top!important;
  padding: 30px;
object-fit:contain!important;
}
.iconbox2 .slider-container > *  {
border-radius: 30px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.iconbox2 .swiffy-slider .slider-container {
padding-bottom: 10px;
}
.iconbox2 .fs-5 {
  font-size: 1.25rem !important;
  background: red;
  background-color: #E04A24;
  background-position: left;
  display: block;
  margin: auto auto auto 0px !important;
  border-radius: 30px;
  padding: 5px 10px 5px 10px;
  color: white;
}

hprodbox

hprodbox

Css

.hprodbox .swiffy-slider .slider-container {
padding-bottom: 10px;
}
.hprodbox .info-gray {
    border-radius: 30px!important;
    padding: 20px!important;
    border: 1px solid #ffcd00!important;
}
.hprodbox .info-gray:hover {
background-color: #FFCC00;
transition: all 1s ease;
}
.hprodbox .badge  {
position: absolute;
  left: 0pc;
  top: 0px;
  font-size: 12px;
  font-family: arial;
  padding: 10px 32px 10px 32px;
}
.hprodbox .item_swift_productbadges  {
border-top-left-radius:30px;
border-bottom-right-radius: 30px !important;
}
.hprodbox .rounded-0 {
border-top-left-radius:30px!important;
border-bottom-right-radius: 30px !important;
}
.hprodbox .grid .g-col-6 {
  border-radius: 30px;
}

Anonymous checkout button

maxWidthAnonymousCheckout

Css

.maxWidthAnonymousCheckout .item_swift_text{
max-width: 30rem;
margin-left: auto !important;
margin-right: auto !important;
padding-bottom: 31px !important;
padding-top: 31px !important;
}
.maxWidthAnonymousCheckout .item_swift_text div:last-child{
    margin-top: auto !important;
}
.maxWidthAnonymousCheckout .item_swift_text div:last-child a{
   border:0px;
}
.maxWidthAnonymousCheckout .item_swift_text div:nth-last-child(2){
        margin-bottom: 1rem !important;
}
.maxWidthAnonymousCheckout .item_swift_text p{
   font-size: 26px;
   margin-left: 1rem;
   margin-right: 1rem;
}

Brand IMG

brand-img

Css

.brand-img img:hover {
    transform: scale(1.4);
    transition: all .2s ease-in-out;
}

vidburdir

vidburdir

Css

.vidburdir .text-center {
  margin-top: 20px!important;
}
.vidburdir .slider-container  > * img {
  object-position: top!important;
  padding: 30px;
object-fit:cover!important;
}
.vidburdir .slider-container > *  {
border-radius: 30px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.vidburdir .swiffy-slider .slider-container {
padding-bottom: 10px;
}
.vidburdir .fs-5 {
  font-size: 1.25rem !important;
  background: red;
  background-color: #E04A24;
  background-position: left;
  display: block;
  margin: auto auto auto 0px !important;
  border-radius: 30px;
  padding: 5px 10px 5px 10px;
  color: white;
}
.vidburdir .col-xl-7 {
        width: 50%!important;
    }
.vidburdir .col-xl-5 {
        width: 50%!important;
    }
@media only screen and (max-width: 600px) {
  .vidburdir .col-xl-5 {
        width: 100%!important;
    }
.vidburdir .col-xl-7 {
        width: 100%!important;
    }
  }
}

Compressed Row 50

comp50

Css

.comp50 .container-compressed {
        max-width: 50%!important;
    }

Product Detail Badge

pdetail

Css

.pdetail .item_swift_productbadges  {
border-top-left-radius:30px;
border-bottom-right-radius: 30px !important;
}
.pdetail .rounded-0 {
border-top-left-radius:30px!important;
border-bottom-right-radius: 30px !important;
padding: 10px 32px 10px 32px;
}

Auðkenndu

audkenndu

Css

.audkenndu .info-box {
    display: flex;
    align-items: center;
  }
.audkenndu .icon {
    width: 30px; 
    height: 30px;
    margin-right: 10px;
  }
 .audkenndu .text {
    color: #1a2b40; 
  }
.audkenndu  .text a {
    font-weight: bold;
    color: #1a2b40;
    text-decoration: underline;
  }

mypage

mypage

Css

.mypage .bg-dark {
    background-color: #4ac386 !important;
    border-radius: 30px;
    padding: 6px 20px 6px 20px;
}
.mypage .text-white {
    font-size: 14px!important;
}
.mypage .h6 {
    font-size: 2rem!important;
}
.mypage #searchForm {
    background: #00283c;
    color: white;
    border-radius: 14px 14px 0 0;
}
.mypage #ViewAllOrders {
    background: #00283c;
    color: white;
}
.mypage .table{
--bs-table-hover-bg: #ffcd0020!important;
}
.mypage .ok-blue-yellow  {
    border-radius: 30px;
}
.mypage .border-top:hover {
    background: #ffcd00;
    color: #00283c;
    padding-left: 10px;
    transition-duration: 0.2s;
}
.mypage .border-top {
    border-top: none !important;
    padding-left: 20px;
}
.mypage .nav-item {
    font-size: 18px;
    font-weight: 700;
    font-family: 'font-calibre-semibold';
    padding-left: 20px;
}
.mypage .nav-link.flex-fill.text-reset.px-3.py-3 .fw-bold {
    color: #ffcd00;
}

My page 2

mypage2

Css

.mypage2 .bg-dark {
    background-color: #4ac386 !important;
    border-radius: 30px;
    padding: 6px 20px 6px 20px;
}
.mypage2 .text-white {
    font-size: 14px!important;
}
.mypage2 .h6 {
    font-size: 2rem!important;
}
.mypage2 #ViewAllOrders {
    background: #00283c;
    color: white;
}
.mypage2 .table{
--bs-table-hover-bg: #ffcd0020!important;
}
.mypage2 .bg-success {
    border-radius: 30px;
    padding: 6px 20px 6px 20px;
}
.mypage2 .bg-warning {
    border-radius: 30px;
    padding: 6px 20px 6px 20px;
}
.mypage2 .ok-blue-yellow  {
    border-radius: 30px;
}
.mypage2 li.nav-item.border-top:hover {
    background: #ffcd00;
    color: #00283c;
    padding-left: 10px;
    transition-duration: 0.2s;
}
.mypage2 .border-top {
    border-top: none !important;
    padding-left: 20px;
}
.mypage2 .nav-item {
    font-size: 18px;
    font-weight: 700;
    font-family: 'font-calibre-semibold';
    padding-left: 20px;
}
.mypage2 .nav-link.flex-fill.text-reset.px-3.py-3 .fw-bold  {
    color: #ffcd00;
}
.mypage2 .text-muted {
    color: #00283c !important;
}

noMarginTop

noMarginTop

Css

.noMarginTop{
margin-top: 0px !important;

newyear

newyear

Css

.newyear img {
    width: 60%!important;
}
.newyear .img-fluid {
    width: 60%!important;
}