PJ22
-
Posts
15 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by PJ22
-
-
3 hours ago, tuanphan said:Can you share link to page in screenshot?
We would love for mobile view to be in slideshow mode with the indication dots instead of the thumbnails at the bottom if possible and for the desktop view to stay the same stacked
-
13 hours ago, tuanphan said:
span.Header-nav-folder { left: -10px !important; }Big Thank you.
-
3 hours ago, tuanphan said:
sorry, missing your comment.
You mean active link, hover link or?
Add to Home > Design > Custom CSS
a.Header-nav-folder-item:hover { background: black; color: white !important; } span.Header-nav-folder { padding: 0; } span.Header-nav-folder a { padding: 15px 5px; }That worked perfectly Thanks for all of your help. One last thing if possible, can we center the box and text to aligned under shop? The box comes out towards the right side, maybe if it could come out evenly on the left side to match the right side with the text centered, i attached a similar example below
-
Thanks for the quick reply. Not yet. We want the secondary buttons to be the same as shop and about, As you hover over the buttons we would like for the box to be highlighted black and the text to turn white
-
How would i add a button to the secondary nav on hover to match the primary one? and how would i center the text and the box under shop
ByPaigeJordan.com
Thanks
-
Hello Everyone,
I tried the code above but swapped out
(Productitem-gallery-thumbnails) with our site code (ProductItem-gallery-slides-item) which did not work.I'm also interested in doing a mobile slideshow on the product page but with indication squares or dots over the image or below the image
ByPaigeJordan.com
-
One last question, How do i add spaces and repeat the text over again going around repeatably ?
-
Thanks it is working now
-
Thanks for the quick reply. How would i change the font with this code?
<!DOCTYPE html>
<html><body>
<style style="text/css">
.bounce {
height: 40px;
overflow: hidden;
position: relative;
background: #000000;
color: #ffffff;
border: 0px solid #000000;
}
.bounce p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 40px;
text-align: center;
-moz-transform: translateX(50%);
-webkit-transform: translateX(50%);
transform: translateX(50%);
-moz-animation: bouncing-text 5s linear infinite alternate;
-webkit-animation: bouncing-text 5s linear infinite alternate;
animation: bouncing-text 10s linear infinite alternate;
}
@-moz-keyframes bouncing-text {
0% {
-moz-transform: translateX(50%);
}
100% {
-moz-transform: translateX(-50%);
}
}
@-webkit-keyframes bouncing-text {
0% {
-webkit-transform: translateX(50%);
}
100% {
-webkit-transform: translateX(-50%);
}
}
@keyframes bouncing-text {
0% {
-moz-transform: translateX(50%);
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
100% {
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}
</style><div class="bounce">
<p> BUY ONE, DONATE ONE! </p>
</div>
</body></html>
-
Site URL: https://www.bypaigejordan.com/
Hello Everyone,
I wanted to know if it is possible to make the text on the announcement bar scroll/roll going from right to left automatically and reset/start again?
Thanks
Horizontally scrolling text on announcement bar
in Customize with code
Posted
Hey,
No problem. You can change the front with this line "font-family: 'proxima-nova', sans-serif;"
I'm still trying to figure out how to repeat and do an infinite scroll/Carousel effect.
This page may be of help. Please let me know if you figure it out. Thanks
https://www.w3schools.in/css3/css-marquee/#Scrolling_Text_Using_CSS
<!DOCTYPE html>
<html>
<body>
<style style="text/css">
.bounce {
font-family: 'proxima-nova', sans-serif;
font-weight: 400;
height: 40px;
overflow: hidden;
position: relative;
background: #000000;
color: #ffffff;
border: 0px solid #000000;
}
.bounce p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 40px;
text-align: center;
-moz-transform: translateX(50%);
-webkit-transform: translateX(50%);
transform: translateX(50%);
-moz-animation: bouncing-text 5s linear infinite alternate;
-webkit-animation: bouncing-text 5s linear infinite alternate;
animation: bouncing-text 20s linear infinite alternate;
}
@-moz-keyframes bouncing-text {
0% {
-moz-transform: translateX(60%);
}
100% {
-moz-transform: translateX(-60%);
}
}
@-webkit-keyframes bouncing-text {
0% {
-webkit-transform: translateX(60%);
}
100% {
-webkit-transform: translateX(-60%);
}
}
@keyframes bouncing-text {
0% {
-moz-transform: translateX(60%);
-webkit-transform: translateX(60%);
transform: translateX(60%);
}
100% {
-moz-transform: translateX(-60%);
-webkit-transform: translateX(-60%);
transform: translateX(-60%);
}
}
</style>
<div class="bounce">
<p>
BUY ONE, DONATE ONE FACE MASK!</p>
</div>
</body>