Nylige søk

Ingen nylige søk

    Populære artikler

      Artikler
      Vis alle
        Emner
        Vis alle
          Saker
          Vis alle
            ingen resultater

            Beklager, ingenting funnet for

            Diverse CSS koder til Nettbutikk

            Nettbutikk uten CSS:




            Eksempler på endringer:


            Vare uten CSS:




            Vis beløpsknapper konstant:


            .solidusOrderItemAutoHide {
               opacity: 100%;
            }



            Skjul forhåndsbestemte beløpsknapper:


            .btn-group-vertical {
               display: none;
            }




            Gjør "Beløp" avrundet:


            .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select {
                border-radius: 4px;
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }




            Skjul bilder:







            .solidusOrderItemImageFrame {
                display: none;
            }


            Eller:


            .solidusOrderItemImageFrame {
                opacity: 0%;
            }


            Eller:






            .solidusOrderItemImageFrame {
                display: none;
            }
            .btn-group-vertical {
                margin-bottom: 165px;
            }
            .solidusOrderItemAutoHide {
                margin-top: 97px;
            }




            Farger beløpsknapper anbefalt oppsett (bare endre de 4 fargekodene øverst):


            :root {
                --solidusOrderItem_Button: #865AFF; /*Beløpsknapp Bakgrunnsfarge*/
                --solidusOrderItem_SelectedButton: #F3EEE8; /*Valgt Beløpsknapp Bakgrunnsfarge*/
                --solidusButtonTextColor: #FFFFFF; /*Beløpsknapp tekstfarge*/
                --solidusSelectedButtonTextColor: #865AFF; /*Valgt Beløpsknapp Tekstfarge*/
            }

            .btn-primary {
                --bs-btn-color: var(--solidusButtonTextColor);
                --bs-btn-bg: var(--solidusOrderItem_Button);
                --bs-btn-border-color: var(--solidusOrderItem_Button);
                --bs-btn-hover-color: var(--solidusSelectedButtonTextColor);
                --bs-btn-hover-bg: var(--solidusOrderItem_SelectedButton);
                --bs-btn-hover-border-color: var(--solidusOrderItem_SelectedButton);
                --bs-btn-focus-shadow-rgb: 132, 164, 156;
                --bs-btn-active-color: var(--solidusSelectedButtonTextColor);
                --bs-btn-active-bg: var(--solidusOrderItem_SelectedButton);
                --bs-btn-active-border-color: var(--solidusOrderItem_SelectedButton);
                --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
                --bs-btn-disabled-color: var(--solidusButtonTextColor);
                --bs-btn-disabled-bg: var(--solidusOrderItem_Button);
                --bs-btn-disabled-border-color: var(--solidusOrderItem_Button);
                --bs-btn-focus-color: var(--solidusSelectedButtonTextColor);
                --bs-btn-focus-bg: var(--solidusOrderItem_SelectedButton);
                --bs-btn-focus-border-color: var(--solidusOrderItem_SelectedButton);
                --bs-btn-focus-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
            }
            .btn-secondary {
                --bs-btn-color: var(--solidusButtonTextColor);
                --bs-btn-bg: var(--solidusOrderItem_Button);
                --bs-btn-border-color: var(--solidusOrderItem_Button);
                --bs-btn-hover-color: var(--solidusSelectedButtonTextColor);
                --bs-btn-hover-bg: var(--solidusOrderItem_SelectedButton);
                --bs-btn-hover-border-color: var(--solidusOrderItem_SelectedButton);
                --bs-btn-focus-shadow-rgb: 207, 202, 197;
                --bs-btn-active-color: var(--solidusSelectedButtonTextColor);
                --bs-btn-active-bg: var(--solidusOrderItem_SelectedButton);
                --bs-btn-active-border-color: var(--solidusOrderItem_SelectedButton);
                --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
                --bs-btn-disabled-color: var(--solidusButtonTextColor);
                --bs-btn-disabled-bg: var(--solidusOrderItem_Button);
                --bs-btn-disabled-border-color: var(--solidusOrderItem_Button);
                --bs-btn-focus-color: var(--solidusSelectedButtonTextColor);
                --bs-btn-focus-bg: var(--solidusOrderItem_SelectedButton);
                --bs-btn-focus-border-color: var(--solidusOrderItem_SelectedButton);
                --bs-btn-focus-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
            }
            .solidusOrderItemButtons .btn-secondary:focus {
                background-color: var(--bs-btn-focus-bg);
                border-color: var(--bs-btn-focus-border-color);
                color: var(--bs-btn-focus-color);
            }
            .solidusOrderItemFrame .input-group-addon {
                background-color: var(--solidusOrderItem_Button);
                color: var(--solidusButtonTextColor);
                border-color: var(--solidusOrderItem_Button);
            }
            .solidusOrderItemFrameSelected .input-group-addon {
                background-color: var(--solidusOrderItem_SelectedButton);
                color: var(--solidusSelectedButtonTextColor);
                border-color: var(--solidusOrderItem_SelectedButton);
            }



            Skjul vare:
            !Bare bruk ved nettbutikker med bare 1 vare med registrering eller forhåndsbestemt beløp!

            Før:

            Etter:


            .solidusOrderItemFrame {
                display: none;
            }


            Innholdsboks:

            .solidusOrderFormClass { 
            background-color: #fff; /*Farge på boksen*/
            opacity: 100%; /*Hvor gjennomsiktig boksen er*/
            margin-top: 2%; /*Hvor my luft det skal være fra toppen av nettsiden til boksen*/
            margin-bottom: 2%; margin-top: 2%; /*Hvor my luft det skal være fra bunnen av nettsiden til boksen*/
            border-radius: 5px; /*Hvor my avrundet hjørnene til boksen skal være*/
            padding-top: 5%; /*Hvor my luft det skal være fra toppen av boksen til innholdet*/
            padding-bottom: 5%; /*Hvor my luft det skal være fra bunnen av boksen til innholdet*/
            padding-left: 5%; /*Hvor my luft det skal være fra venstre side av boksen til innholdet*/
            padding-right: 5%; /*Hvor my luft det skal være fra høyre side av boksen til innholdet*/
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1); /*Første tall bestemmer skyggens plassering til høyre, neste plassering nedover(bruk negativt beløp for å få den til venstre eller oppover), tredje gjør skyggen til en myk skygge til alle kanter, og det siste er fargen til skyggen*/
            }


            Bakgrunnsfarge eller bakgrunnsbilde:

            body {
                background-color: var(--solidusMainColor1);  /*Bakgrunnsfarge*/
                color:  #000; /*Standard tekstfarge*/
            /* Ønsker du bakgrunnsbilde må du bytte ut de to linjene over med de to under:
            background-image: url('https://solidus.no/wp-content/uploads/2022/03/1920x1080-om-oss.jpg'); /*Lenke til bildet*/
            background-size: cover; /*Hvordan bildet skal plasseres på bakgrunnen*/*/
            }
            a {
                color: var(--solidusMainColor1); /*Farge på hyperlenker i teksten, for eksempel personvernserklæring, epost til foretaket og informasjon om Solidus CRM*/
            }

            Farge til hyperlenker:

            body {
                background-color: var(--solidusMainColor1);  /*Bakgrunnsfarge*/
                color:  #000; /*Standard tekstfarge*/
            /* Ønsker du bakgrunnsbilde må du bytte ut de to linjene over med de to under:
            background-image: url('https://solidus.no/wp-content/uploads/2022/03/1920x1080-om-oss.jpg'); /*Lenke til bildet*/
            background-size: cover; /*Hvordan bildet skal plasseres på bakgrunnen*/*/
            }
            a {
                color: var(--solidusMainColor1); /*Farge på hyperlenker i teksten, for eksempel personvernserklæring, epost til foretaket og informasjon om Solidus CRM*/
            }

            Farge på varselfargene (obligatoriske felt osv):

            /*.solidusRed {
               color: var(--solidusSecondaryColor3);  /*varselfargene*/
            }*/


            Nedtrekksmenyer:

            :root {
                --solidusButtonTextColor: #fff;
                --solidusButtonTextColor_Darker: var(--SolidusButtonTextColor);
                --solidusMainColor1: #F3EEE8;
                --solidusMainColor1_Darker: #272727;
            }


            .k-input-solid {
                color: #000;
                background-color: #fff;
            }
            .k-input::selection, .k-textarea::selection, .k-textbox::selection {
                color: var(--solidusButtonTextColor);
                background-color: var(--solidusMainColor1); 
            }
            .k-list-item:hover {
                color: var(--solidusButtonTextColor_Darker);
                background-color: var(--solidusMainColor1_Darker); 
            }
            .k-button-solid-base:hover {
                color: var(--solidusButtonTextColor_Darker);
                background-color: var(--solidusMainColor1_Darker); 
            }
            .k-list .k-item.k-state-selected  {
                color: var(--solidusButtonTextColor);
                background-color: var(--solidusMainColor1); 
            }
            .k-list .k-item:hover {
                color: var(--solidusButtonTextColor);
                background-color: var(--solidusMainColor1_Darker); 
            }
            .k-list .k-item:hover.k-state-selected {
                color: var(--solidusButtonTextColor);
                background-color: var(--solidusMainColor1_Darker); 
            }
            .k-list-item.k-selected, .k-selected.k-list-optionlabel {
                color: var(--solidusButtonTextColor);
                background-color: var(--solidusMainColor1); 
            }
            .k-list-item.k-selected:hover, .k-selected.k-list-optionlabel:hover {
                color: var(--solidusButtonTextColor);
                background-color: var(--solidusMainColor1_Darker); 
            }


            Betalingsalternativer:

            .solidusCardFrame {
                background: #fff;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
                box-sizing: border-box;
                height: auto !important;
                margin: 10px;
                padding-bottom: 5px;
                text-align: left;
                object-fit: cover;
            }
            .solidusCardFrameSelected {
                border: 2px solid var(--solidusSecondaryColor3);
            }
            /*.solidusCardImgBlock {
            	display: none;
            }*/



            Eksempel enkelt oppsett:

            Test denne nettbutikken her.

            :root {
        --solidusHovedfarge: #70349c; /*Lillafargen*/
        --solidusKontrastfarge: #FFFFFF;
        --solidusLysfarge: #F3EEE8; /*Beigefargen*/
        --solidusMorkfarge: #272727;
}
:root {
        --solidusKnappBakgrunnsfarge: var(--solidusHovedfarge);
        --solidusValgtKnappBakgrunnsfarge: var(--solidusKontrastfarge);
        --solidusKnappTekstfarge: var(--solidusKontrastfarge);
        --solidusValgtKnappTekstfarge: var(--solidusHovedfarge);
        --solidusVareBakgrunnsfarge: var(--solidusKontrastfarge);
        --solidusValgtVareBakgrunnsfarge: var(--solidusHovedfarge);
        --solidusVareTekstfarge: var(--solidusHovedfarge);
        --solidusValgtVareKnappTekstfarge: var(--solidusKontrastfarge);
        --solidusBetalingsvalgBakgrunnsfarge: var(--solidusKontrastfarge);
        --solidusValgtBetalingsvalgBakgrunnsfarge: var(--solidusHovedfarge);
        --solidusBetalingsvalgTekstfarge: var(--solidusHovedfarge);
        --solidusValgtBetalingsvalgTekstfarge: var(--solidusKontrastfarge);

}
:root {
  --solidusOrderItem_Button: var(--solidusKnappBakgrunnsfarge);
  --solidusOrderItem_SelectedButton: var(--solidusValgtKnappBakgrunnsfarge);
  --solidusButtonTextColor: var(--solidusKnappTekstfarge);
  --solidusSelectedButtonTextColor: var(--solidusValgtKnappTekstfarge);
  --solidusButtonTextColor: var(--solidusKnappTekstfarge);
  --solidusButtonTextColor_Darker: var(--solidusValgtKnappTekstfarge);
  --solidusMainColor1: var(--solidusHovedfarge);
  --solidusMainColor1_Darker: var(--solidusLysfarge);
  --solidusSecondaryColor2: var(--solidusMorkfarge);
}
.btn-primary {
  --bs-btn-color: var(--solidusButtonTextColor);
  --bs-btn-bg: var(--solidusOrderItem_Button);
  --bs-btn-border-color: var(--solidusOrderItem_Button);
  --bs-btn-hover-color: var(--solidusSelectedButtonTextColor);
  --bs-btn-hover-bg: var(--solidusOrderItem_SelectedButton);
  --bs-btn-hover-border-color: var(--solidusOrderItem_SelectedButton);
  --bs-btn-focus-shadow-rgb: 132, 164, 156;
  --bs-btn-active-color: var(--solidusSelectedButtonTextColor);
  --bs-btn-active-bg: var(--solidusOrderItem_SelectedButton);
  --bs-btn-active-border-color: var(--solidusOrderItem_SelectedButton);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  --bs-btn-disabled-color: var(--solidusButtonTextColor);
  --bs-btn-disabled-bg: var(--solidusOrderItem_Button);
  --bs-btn-disabled-border-color: var(--solidusOrderItem_Button);
  --bs-btn-focus-color: var(--solidusSelectedButtonTextColor);
  --bs-btn-focus-bg: var(--solidusOrderItem_SelectedButton);
  --bs-btn-focus-border-color: var(--solidusOrderItem_SelectedButton);
  --bs-btn-focus-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-secondary {
  --bs-btn-color: var(--solidusButtonTextColor);
  --bs-btn-bg: var(--solidusOrderItem_Button);
  --bs-btn-border-color: var(--solidusOrderItem_Button);
  --bs-btn-hover-color: var(--solidusSelectedButtonTextColor);
  --bs-btn-hover-bg: var(--solidusOrderItem_SelectedButton);
  --bs-btn-hover-border-color: var(--solidusOrderItem_SelectedButton);
  --bs-btn-focus-shadow-rgb: 207, 202, 197;
  --bs-btn-active-color: var(--solidusSelectedButtonTextColor);
  --bs-btn-active-bg: var(--solidusOrderItem_SelectedButton);
  --bs-btn-active-border-color: var(--solidusOrderItem_SelectedButton);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  --bs-btn-disabled-color: var(--solidusButtonTextColor);
  --bs-btn-disabled-bg: var(--solidusOrderItem_Button);
  --bs-btn-disabled-border-color: var(--solidusOrderItem_Button);
  --bs-btn-focus-color: var(--solidusSelectedButtonTextColor);
  --bs-btn-focus-bg: var(--solidusOrderItem_SelectedButton);
  --bs-btn-focus-border-color: var(--solidusOrderItem_SelectedButton);
  --bs-btn-focus-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn {
  border: 2px solid var(--solidusMainColor1) !important;
}
.btn:hover {
  border: 2px solid var(--solidusMainColor1) !important;
}
.solidusOrderItemButtons .btn-secondary:focus {
  background-color: var(--bs-btn-focus-bg);
  color: var(--bs-btn-focus-color);
  border: 2px solid var(--solidusMainColor1) !important;
}
.solidusOrderItemButtons .btn-secondary:hover {
  background-color: var(--bs-btn-hover-bg);
  color: var(--bs-btn-hover-color);
  border: 2px solid var(--solidusMainColor1) !important;
}
.solidusOrderItemFrame .input-group-addon {
  background-color: var(--solidusOrderItem_Button);
  color: var(--solidusButtonTextColor);
  border: 2px solid var(--solidusMainColor1) !important;
}
.solidusOrderItemFrameSelected .input-group-addon {
  background-color: var(--solidusOrderItem_SelectedButton);
  color: var(--solidusSelectedButtonTextColor);
  border: 2px solid var(--solidusMainColor1) !important;
  border-color: var(--solidusKontrastfarge) !important;
}
.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,.input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select {
  border-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.solidusOrderItemAutoHide {
  opacity: 100%;
}
.solidusOrderItemImageFrame {
  display: none;
}
.btn-group-vertical {
  display: none;
}
.solidusOrderFormClass {
  background-color: var(--solidusKontrastfarge);
  /*Farge på boksen*/
  opacity: 100%;
  /*Hvor gjennomsiktig boksen er*/
  margin-top: 2%;
  /*Hvor my luft det skal være fra toppen av nettsiden til boksen*/
  margin-bottom: 2%;
  margin-top: 2%;
  /*Hvor my luft det skal være fra bunnen av nettsiden til boksen*/
  border-radius: 4px;
  /*Hvor my avrundet hjørnene til boksen skal være*/
  padding-top: 5%;
  /*Hvor my luft det skal være fra toppen av boksen til innholdet*/
  padding-bottom: 5%;
  /*Hvor my luft det skal være fra bunnen av boksen til innholdet*/
  padding-left: 5%;
  /*Hvor my luft det skal være fra venstre side av boksen til innholdet*/
  padding-right: 5%;
  /*Hvor my luft det skal være fra høyre side av boksen til innholdet*/
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
  /*Første tall bestemmer skyggens plassering til høyre, neste plassering nedover(bruk negativt beløp for å få den til venstre eller oppover), tredje gjør skyggen til en myk skygge til alle kanter, og det siste er fargen til skyggen*/
}
body {
  background-color: var(--solidusLysfarge);
  /*Bakgrunnsfarge*/
}
a {
  color: var(--solidusMainColor1);
}
.k-input-solid {
  color: #000;
  background-color: #fff;
}
.k-input::selection, .k-textarea::selection, .k-textbox::selection {
  color: var(--solidusButtonTextColor);
  background-color: var(--solidusMainColor1);
}
.k-list-item:hover {
  color: var(--solidusButtonTextColor_Darker);
  background-color: var(--solidusMainColor1_Darker);
}
.k-button-solid-base:hover {
  color: var(--solidusButtonTextColor_Darker);
  background-color: var(--solidusMainColor1_Darker);
}
.k-list .k-item.k-state-selected {
  color: var(--solidusButtonTextColor);
  background-color: var(--solidusMainColor1);
}
.k-list .k-item:hover {
  color: var(--solidusButtonTextColor_Darker);
  background-color: var(--solidusMainColor1_Darker);
}
.k-list .k-item:hover.k-state-selected {
  color: var(--solidusButtonTextColor_Darker);
  background-color: var(--solidusMainColor1_Darker);
}
.k-list-item.k-selected, .k-selected.k-list-optionlabel {
  color: var(--solidusButtonTextColor);
  background-color: var(--solidusMainColor1);
}
.k-list-item.k-selected:hover, .k-selected.k-list-optionlabel:hover {
  color: var(--solidusButtonTextColor_Darker);
  background-color: var(--solidusMainColor1_Darker);
}

.solidusOrderItemFrame {
  background: var(--solidusVareBakgrunnsfarge);
  min-height: 70px;
  border: 2px solid var(--solidusValgtVareBakgrunnsfarge) !important;
}
.solidusOrderItemFrame:hover {
  border: 2px solid var(--solidusValgtVareBakgrunnsfarge) !important;
  background: var(--solidusValgtVareBakgrunnsfarge);
}
.solidusOrderItemFrameSelected {
  border: 2px solid var(--solidusValgtVareBakgrunnsfarge) !important;
  background: var(--solidusValgtVareBakgrunnsfarge);
}
.solidusOrderItemFrameSelected:hover {
  border: 2px solid var(--solidusValgtVareBakgrunnsfarge) !important;
  background: var(--solidusValgtVareBakgrunnsfarge);
}
.solidusOrderItemFrame:hover .solidusOrderItemHeader2 {
  color: var(--solidusValgtVareKnappTekstfarge);
}
.solidusOrderItemFrame:hover .solidusOrderItemHeader {
  color: var(--solidusValgtVareKnappTekstfarge);
}
.solidusOrderItemFrameSelected .solidusOrderItemHeader2 {
  color: var(--solidusValgtVareKnappTekstfarge);
}
.solidusOrderItemFrameSelected .solidusOrderItemHeader {
  color: var(--solidusValgtVareKnappTekstfarge);
}
.solidusOrderItemFrameSelected:hover .solidusOrderItemHeader2 {
  color: var(--solidusValgtVareKnappTekstfarge);
}
.solidusOrderItemFrameSelected:hover .solidusOrderItemHeader {
  color: var(--solidusValgtVareKnappTekstfarge);
}
.solidusCardFrame {
  padding-left: 5px;
  background: var(--solidusBetalingsvalgBakgrunnsfarge);
  min-height: 70px;
  border: 2px solid var(--solidusValgtBetalingsvalgBakgrunnsfarge) !important;
  color: var(--solidusValgtBetalingsvalgBakgrunnsfarge);
}
.solidusRed {
  color: var(--solidusBetalingsvalgTekstfarge);
}
.solidusCardFrame:hover {
  border: 2px solid var(--solidusValgtBetalingsvalgBakgrunnsfarge) !important;
  background: var(--solidusValgtBetalingsvalgBakgrunnsfarge);
  color: var(--solidusValgtBetalingsvalgTekstfarge);
}
.solidusCardFrameSelected {
  border: 2px solid var(--solidusValgtBetalingsvalgBakgrunnsfarge) !important;
  background: var(--solidusValgtBetalingsvalgBakgrunnsfarge);
  color: var(--solidusValgtBetalingsvalgTekstfarge);
}
.solidusCardFrameSelected:hover {
  border: 2px solid var(--solidusValgtBetalingsvalgBakgrunnsfarge) !important;
  background: var(--solidusValgtBetalingsvalgBakgrunnsfarge);
  color: var(--solidusValgtBetalingsvalgTekstfarge);
}
.solidusCardFrame:hover .solidusRed {
  color: var(--solidusValgtBetalingsvalgTekstfarge);
}
.solidusCardFrameSelected .solidusRed {
  color: var(--solidusValgtBetalingsvalgTekstfarge);
}
.solidusCardFrameSelected:hover .solidusRed {
  color: var(--solidusValgtBetalingsvalgTekstfarge);
}
.solidusCardImgBlock {
  display: none;
}
.solidusCardFrame .btn {
    border: 2px solid var(--solidusValgtKnappBakgrunnsfarge) !important;
}







            Var denne artikkelen nyttig?

            Så bra!

            Takk for din tilbakemelding

            Beklager at vi ikke kunne være mer til hjelp

            Takk for din tilbakemelding

            Fortell oss hvordan vi kan forbedre denne artikkelen.

            Velg minst én av grunnene
            CAPTCHA-verifisering er obligatorisk.

            Tilbakemeldingen er sendt inn

            Vi setter pris på tilbakemeldingen din og vil prøve å rette på artikkelen

            Forhåndsvis
            0 av 0