/o//commerce-media/accounts/-1/images/18540671?download=true
Banners
Data Modeling, Process & Business Logic
.carousel-container img {
cursor: pointer;
object-fit: contain;
}
.custom-gallery-modal button:disabled {
cursor: default;
opacity: 0.4;
pointer-events: none;
}
.custom-gallery-modal {
background-color: #282934 !important;
border-bottom: none;
color: white !important;
}
.custom-gallery-modal .liferay-modal-body {
align-items: center;
display: flex;
justify-content: center;
position: relative;
}
.custom-gallery-modal .close {
color: white !important;
margin-right: 16px !important;
}
.lexicon-icon-overwide .lexicon-icon {
height: 2em;
margin: 0px !important;
}
.custom-gallery-modal{
height: 80% !important;
}
.main-image-wrapper {
align-items: center;
display:flex;
justify-content: center;
position: relative;
width: 902px;
height: 454px;
}
.main-image-wrapper img {
border-radius: 8px;
max-height: 100%;
}
.main-image-wrapper:hover .nav-button {
opacity: 1;
pointer-events: auto;
}
.main-image-wrapper:hover .nav-button:disabled{
cursor: default;
opacity: 0.4;
}
.modal-image {
aspect-ratio: 16/9;
object-fit: contain;;
border-radius: 8px;
max-width: 100vh !important;
}
.modal-gallery-header .lexicon-icon {
fill: #FFC124 !important;
margin-right: 8px !important;
width: 16px !important;
}
.modal-gallery-header {
padding: 16px !important;
}
.modal-prev,
.modal-next {
align-items: center;
background: rgba(105, 102, 102, 0.4) !important;
border-radius: 50%;
border: none;
display: flex;
font-size: 1.6rem;
justify-content: center;
padding: 14px !important;
position: absolute;
top: 45%;
}
.modal-prev .lexicon-icon,
.modal-next .lexicon-icon {
margin-top: 0px !important;
}
.modal-next {
right: 24px;
}
.modal-prev {
left: 24px;
}
.nav-button {
background: rgba(0,0,0,0.4);
border-radius: 50%;
border: none;
color: white;
cursor: pointer;
font-size: 1rem;
opacity: 0;
padding: 0 8px;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.3s ease;
user-select: none;
}
.nav-button.prev {
left: 10px;
}
.nav-button.next {
right: 10px;
}
.thumbnail {
border-radius: 12px;
border: 2px solid transparent;
cursor: pointer;
height: 86px;
object-fit: cover;
opacity: 0.6;
transition:
border-color 250ms ease-out,
opacity 250ms ease-out;
width: 142px;
}
.thumbnail.selected,
.thumbnail:hover {
border-color: #8FB5FF;
opacity: 1;
}
.thumbnail.selected{
height: 102px;
}
.thumbnails {
display: flex;
gap: 8px;
overflow-x: auto;
}
.thumbnails-wrapper {
align-items: center;
display: flex;
justify-content: flex-start;
margin-top: 24px;
max-height: 86px;
max-width: 902px;
}
.view-full-gallery {
background-color: white;
border-radius: 12px;
border: 1px solid #E2E2E4;
color: #2563eb;
cursor: pointer;
display: flex;
flex-direction: column;
height: 86px;
justify-content: center;
margin-left: 8px;
min-width: 152px;
transition: background-color 0.3s ease,
box-shadow 0.3s ease,
border-color 250ms ease-out;
}
.view-full-gallery .subtitle {
color: #6b7280;
font-size: 12px;
font-weight: 400;
line-height: 1;
}
.view-full-gallery .title {
font-size: 16px;
font-weight: 600;
line-height: 1;
margin-bottom: 4px;
}
.view-full-gallery:hover {
background-color: #f3f4f6;
box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
border: 2px solid rgb(143, 181, 255);
}
Beschrijving
Banner is a plugin which allows you to place text or advertisement on
the rectangular shaped banner and linked to see more information. You
can adjust display date and text style on it.
Configurable:
- Banner width
- Image size and extensions
Feature:
- Period specific display
- Banner display order setting
- Image file adapted to Liferay file store
- Text and background styling
- English, Korean, and Thai language pre-translated
NOTICE FOR LP 7.0 USERS
* Please completely delete previous versions before you upgrade to new version.
Configurable:
- Banner width
- Image size and extensions
Feature:
- Period specific display
- Banner display order setting
- Image file adapted to Liferay file store
- Text and background styling
- English, Korean, and Thai language pre-translated
NOTICE FOR LP 7.0 USERS
* Please completely delete previous versions before you upgrade to new version.
Banner is a plugin which allows you to place text or advertisement on
the rectangular shaped banner and linked to see more information. You
can adjust display date and text style on it.
Configurable:
- Banner width
- Image size and extensions
Feature:
- Period specific display
- Banner display order setting
- Image file adapted to Liferay file store
- Text and background styling
- English, Korean, and Thai language pre-translated
NOTICE FOR LP 7.0 USERS
* Please completely delete previous versions before you upgrade to new version.
Configurable:
- Banner width
- Image size and extensions
Feature:
- Period specific display
- Banner display order setting
- Image file adapted to Liferay file store
- Text and background styling
- English, Korean, and Thai language pre-translated
NOTICE FOR LP 7.0 USERS
* Please completely delete previous versions before you upgrade to new version.
DEVELOPER
Ontwikkelaar
Publisher Date
January 23, 2024
Deployment Method
Liferay Self-Hosted
Liferay PaaS
App Type
DXP
Versie
2.0.0
Ondersteunde versies
7.0,
6.2
Standard Price
$ 10,00
Help and Support
Link delen
DEVELOPER
21-11-24 18:10
Published date
21-11-24 18:10
Published Date
21-11-24 18:10
SUPPORTED OFFERINGS
Liferay PaaS
Supported Versions
7.0,
6.2
Resource Requirements
Edition
Community
PRICE
Paid
help & support
SHARE LINK
HTML Example
A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. Paragraphs are usually an expected part of formal writing, used to organize longer prose.