Items filtered by date: December 2015
Thursday, 11 February 2016 13:24
JSN-ImageShow
Styling
/* Imageshow - Rounded Corners */
.jsn-gallery .box_skitter .image,
.jsn-gallery .box_skitter .box_clone img {
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
/* Rounded Corners - Remove the coloured background */
#jsn-promo {
background-color: transparent;
}
Full Styles (grabbed from templates)
Teki
CSS
/* Imageshow - Teki Style */
.jsn-demo-page .galleria-info {
position: absolute;
max-width: 100% !important;
width: 500px !important;
height: 100%;
left: 150px !important;
top: 150px !important;
right: auto;
margin: auto;
}
.jsn-demo-page .galleria-info .galleria-info-text {
background-color: transparent !important;
}
.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
display: inline-block;
text-transform: uppercase;
font-size: 1.6em !important;
background-color: rgba(0,0,0,0.6);
margin: 0;
padding: 10px 20px;
}
.jsn-color-blue.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
color: #009ACA !important;
}
.jsn-color-red.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
color: #D52722 !important;
}
.jsn-color-green.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
color: #6AA019 !important;
}
.jsn-color-orange.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
color: #E08A00 !important;
}
.jsn-color-pink.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
color: #ED6C6A !important;
}
.jsn-color-cyan.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
color: #4B7E6A !important;
}
.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-description {
display: inline-block;
background-color: rgba(0,0,0,0.4);
padding: 15px 20px;
color: #EEE !important;
font-size: 13px !important;
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
.jsn-demo-page .galleria-info {
left: 0 !important;
top: 0 !important;
}
.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
font-size: 1.2em !important;
}
}
CSS - This is an alternative that I am getting to run on JSN Medis
/* Imageshow - Teki Style */
.jsn-demo-page .galleria-info {
position: absolute;
max-width: 100% !important;
width: 350px !important;
height: 100%;
left: 150px !important;
top: 150px !important;
right: auto;
margin: auto;
}
.jsn-demo-page .galleria-info .galleria-info-text {
background-color: transparent !important;
}
.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
display: inline-block;
text-transform: uppercase;
font-size: 1.2em !important;
background-color: rgba(0,0,0,0.6);
margin: 0;
padding: 10px 20px;
}
.jsn-color-blue.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
color: #009ACA !important;
}
.jsn-color-red.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
color: #D52722 !important;
}
.jsn-color-green.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
color: #6AA019 !important;
}
.jsn-color-orange.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
color: #E08A00 !important;
}
.jsn-color-pink.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
color: #ED6C6A !important;
}
.jsn-color-cyan.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
color: #4B7E6A !important;
}
.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-description {
display: block; /* changed this from inline-block to fix stacking */
background-color: rgba(0,0,0,0.4);
padding: 15px 20px;
color: #EEE !important;
font-size: 13px !important;
}
@media only screen and (max-width: 960px), (max-device-width: 960px) {
.jsn-demo-page .galleria-info {
left: 100px !important;
top: 100px !important;
}
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
.jsn-demo-page .galleria-info {
left: 0 !important;
top: 0 !important;
}
.jsn-demo-page .galleria-info .galleria-info-text .galleria-info-title {
font-size: 1.2em !important;
}
}
Settings
Remove .jsn-demo-page class to allow use any where, or use the jsn-demo-page as a page class to be more specific. The code is otherwise untouched.
These sliders are based on the theme, Theme Classic and uses the following settings. The rest are left as default.
Theme Classic Settings Image Tab Default Presentation Mode = Expand Out Expand Out/Image click Action = No Action Thumbnail Tab Thumbnail Panel Presentation = Hide Toolbar Tab Toolbar Panel Presentation = Hide Slideshow Tab Sliding Timing = 10 Auto Play = Yes
CSS - Demo/Default code from within the Imageshow admin
Title font-family: Verdana; font-size: 12px; font-weight: bold; text-align: left; color: #E9E9E9; Description font-family: Arial; font-size: 11px; font-weight: normal; text-align: left; color: #AFAFAF; Link font-family: Verdana; font-size: 11px; font-weight: bold; text-align: right; color: #E06614;
see citygate or luton accountants
Epic
CSS - Demo code from within the Imageshow admin
title font-family: Verdana; font-size: 12px; font-weight: bold; text-align: left; color: #E9E9E9; Description font-family: Arial; font-size: 11px; font-weight: normal; text-align: left; color: #AFAFAF; link font-family: Verdana; font-size: 11px; font-weight: bold; text-align: right; color: #E06614;
One
This is all of the mobile code for the One slider style, but the reduced version below might be all that is required.
CSS
/* Imageshow - One Style */
.jsn-demo-page .container_skitter,
.jsn-demo-page .container_skitter .image img {
width: 100% !important;
}
.jsn-demo-page .label_skitter {
left: 50% !important;
top: 50% !important;
margin-top: -100px;
margin-left: -580px;
width: 400px !important;
max-width: 100%;
opacity: 1;
background: rgba(0,0,0,0.6);
padding: 20px;
}
.jsn-demo-page .jsn-themeslider-caption-title {
text-transform: uppercase;
font-size: 2em;
color: #fff;
padding: 10px 0;
border-bottom: 2px solid #8D84E4;
display: inline-block;
}
.jsn-color-violet.jsn-demo-page .jsn-themeslider-caption-title {
border-color: #8d84e4;
}
.jsn-color-blue.jsn-demo-page .jsn-themeslider-caption-title {
border-color: #2980B9;
}
.jsn-color-green.jsn-demo-page .jsn-themeslider-caption-title {
border-color: #6ECE97;
}
.jsn-color-red.jsn-demo-page .jsn-themeslider-caption-title {
border-color: #e95e53;
}
.jsn-color-orange.jsn-demo-page .jsn-themeslider-caption-title {
border-color: #F38645;
}
.jsn-color-grey.jsn-demo-page .jsn-themeslider-caption-title {
border-color: #668499;
}
.jsn-demo-page .jsn-themeslider-caption-description {
text-transform: uppercase;
font-weight: bold;
font-size: 4em;
color: #fff;
padding: 15px 0;
display: block;
}
@media only screen and (max-width: 1366px), (max-device-width: 1366px) {
.p-item .pthumb h3 {
font-size: 28px;
margin-top: -20px;
}
}
@media only screen and (max-width: 960px), (max-device-width: 960px) {
.jsn-desktop-on-mobile.jsn-demo-page .demo-join-newsletter {
width: 100%;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkitbox-sizing: border-box;
}
.jsn-desktop-on-mobile.jsn-demo-page .label_skitter {
margin-left: -500px;
}
.jsn-mobile.featured-fashion .container {
width: 100%;
}
.jsn-mobile.jsn-demo-page .demo-join-newsletter {
width: auto;
padding: 30px;
}
.jsn-mobile.jsn-demo-page .demo-join-newsletter .heading {
font-size: 1.1em;
line-height: 45px;
}
.jsn-mobile.jsn-demo-page #jsn-pos-content-bottom {
padding: 0 !important;
}
.jsn-mobile.product-block [class*="span"] {
width: 100% !important;
margin: 0 !important;
}
.jsn-mobile div.grid-layout4 .services-box.standard-box.grid-col {
width: 24.96%;
}
.jsn-mobile.jsn-demo-page div.jsn-modulecontainer:first-child,
.jsn-mobile.jsn-demo-page div.jsn-horizontallayout div.jsn-modulecontainer {
margin-top: 30px;
}
.jsn-mobile.owl-carousel {
margin-top: 20px;
}
.jsn-mobile.demo-promo-products .owl-carousel {
margin-top: 0;
}
.jsn-mobile.jsn-demo-page .label_skitter {
left: 0 !important;
top: auto !important;
bottom: 0 !important;
margin-left: 0;
margin-top: 0;
padding: 10px;
}
.jsn-mobile.jsn-demo-page .jsn-themeslider-caption-title {
font-size: 1em;
}
.jsn-mobile.jsn-demo-page .jsn-themeslider-caption-description {
font-size: 1.4em;
padding: 0;
margin: 0 10px;
}
.jsn-mobile.demo-promo-box .promo-heading {
font-size: 2.5em;
}
}
@media only screen and (max-width: 768px), (max-device-width: 768px) {
.jsn-mobile #jsn-content-top-below .row-fluid.product-block [class*="span"] {
width: 100%;
}
.jsn-mobile #jsn-content-top-below .row-fluid.product-block .span9 {
margin-left: 0;
}
}
@media only screen and (max-width: 640px), (max-device-width: 640px) {
.jsn-mobile .demo-promo-box .promo-heading {
font-size: 3em;
}
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
.jsn-mobile.jsn-demo-page .demo-join-newsletter .heading,
.jsn-mobile.jsn-demo-page .demo-join-newsletter .link-button {
float: none;
margin-bottom: 25px;
}
.jsn-mobile.jsn-demo-page .demo-join-newsletter .heading {
line-height: 30px;
}
.jsn-mobile div.grid-layout4 .services-box.standard-box.grid-col {
width: 100%;
}
.jsn-mobile .text-heading.large-head span {
max-width: 100%;
}
.jsn-mobile.jsn-demo-page .label_skitter {
display: none;
}
.jsn-mobile.jsn-demo-page div.jsn-modulecontainer:first-child {
margin-top: 0;
}
.jsn-mobile .demo-promo-box {
padding: 30px 0 60px;
}
.jsn-mobile .demo-promo-box .promo-heading {
font-size: 1.5em;
}
.jsn-mobile .text-heading.large-head > h1 {
font-size: 23px;
}
.jsn-mobile .p-item .pthumb .mask a {
display: none;
}
.jsn-mobile .p-item .pthumb .mask h3 {
font-size: 1em;
}
.jsn-mobile .p-item .pthumb .mask h3 a {
display: block;
}
.jsn-mobile .sec-recent-work1 .btn-group {
white-space: normal;
}
}
CSS - One Trimmed down
This might be the only required code of the above version to get the One slider style working. Please sort when next using.
/* Imageshow - Unknown Style */
/* Need to make the module it sits in have 0 border */
.jsn-demo-page .container_skitter,
.jsn-demo-page .container_skitter .image img {
width: 100% !important;
}
.jsn-demo-page .label_skitter {
left: 50% !important;
top: 50% !important;
margin-top: -100px;
margin-left: -580px;
width: 400px !important;
max-width: 100%;
opacity: 1;
background: rgba(0,0,0,0.6);
padding: 20px;
}
.jsn-demo-page .jsn-themeslider-caption-title {
text-transform: uppercase;
font-size: 2em;
color: #fff;
padding: 10px 0;
border-bottom: 2px solid #8D84E4;
display: inline-block;
}
.jsn-color-violet.jsn-demo-page .jsn-themeslider-caption-title {
border-color: #8d84e4;
}
.jsn-color-blue.jsn-demo-page .jsn-themeslider-caption-title {
border-color: #2980B9;
}
.jsn-color-green.jsn-demo-page .jsn-themeslider-caption-title {
border-color: #6ECE97;
}
.jsn-color-red.jsn-demo-page .jsn-themeslider-caption-title {
border-color: #e95e53;
}
.jsn-color-orange.jsn-demo-page .jsn-themeslider-caption-title {
border-color: #F38645;
}
.jsn-color-grey.jsn-demo-page .jsn-themeslider-caption-title {
border-color: #668499;
}
.jsn-demo-page .jsn-themeslider-caption-description {
text-transform: uppercase;
font-weight: bold;
font-size: 4em;
color: #fff;
padding: 15px 0;
display: block;
}
@media only screen and (max-width: 960px), (max-device-width: 960px) {
.jsn-desktop-on-mobile.jsn-demo-page .label_skitter {
margin-left: -500px;
}
.jsn-mobile.jsn-demo-page .label_skitter {
left: 0 !important;
top: auto !important;
bottom: 0 !important;
margin-left: 0;
margin-top: 0;
padding: 10px;
}
.jsn-mobile.jsn-demo-page .jsn-themeslider-caption-title {
font-size: 1em;
}
.jsn-mobile.jsn-demo-page .jsn-themeslider-caption-description {
font-size: 1.4em;
padding: 0;
margin: 0 10px;
}
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
.jsn-mobile.jsn-demo-page .label_skitter {
display: none;
}
}
Imageshow Defaults (inside admin)
CSS
Title CSS font-family: Verdana; font-size: 12px; font-weight: bold; text-align: left; color: #E9E9E9; Description CSS font-family: Arial; font-size: 11px; font-weight: normal; text-align: left; color: #AFAFAF; Link CSS font-family: Verdana; font-size: 11px; font-weight: bold; text-align: right; color: #E06614;
Promo Intro Text (ImageShow Overlay)
I grabbed this from the JSN Dona template and have adapted it below so I can use it anywhere I want. This overlay fits over ImageShow and allows you to rotate images behind it. The button is also a Joomlashine Button with animation and styling.
CSS
/*--- Promo Intro Text ---*/
/* Optional - Add this class to the containing module if needed */
.promo-intro-text-module-suffix {
margin: 0;
position: relative;
}
.promo-intro-text {
text-align: center;
position: absolute;
top: 210px; /* This changes the position of the text on image show */
width: 100%;
z-index: 99;
color: #fff;
}
.promo-intro-text .promo-intro-text-inner h2 {
padding: 0 10px;
}
.promo-intro-text .promo-intro-text-inner h2 span {
text-transform: uppercase;
font-size: 72px;
line-height: 80px;
font-weight: 700;
text-shadow: 1px 1px 1px #333;
}
.promo-intro-text .promo-intro-text-inner h2 .pm-t1 {
display: block;
}
.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
display: inline-block;
font-size: 48px;
line-height: 56px;
border-top: 2px solid rgba(255,255,255, 0.6);
border-bottom: 2px solid rgba(255,255,255, 0.6);
padding: 2px 0;
margin-top: 10px;
}
.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
font-size: 18px;
line-height: 30px;
margin-top: 30px;
color: #fff;
text-shadow: 1px 1px 1px #333;
}
.promo-intro-text .promo-intro-text-inner .promo-intro-btn {
margin-top: 20px;
padding: 10px 25px;
}
@media screen and (max-width: 1400px) {
.promo-intro-text {
top: 150px;
}
}
@media screen and (max-width: 1280px) {
.promo-intro-text {
top: 110px;
}
}
@media screen and (max-width: 1024px) {
.promo-intro-text .promo-intro-text-inner h2 span {
font-size: 50px;
line-height: 58px;
}
.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
font-size: 30px;
line-height: 38px;
}
.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
font-size: 14px;
line-height: 22px;
margin-top: 15px;
}
.promo-intro-text .promo-intro-text-inner .promo-intro-btn {
margin-top: 10px;
}
}
@media screen and (max-width: 799px) {
.promo-intro-text {
top: 20px;
}
}
@media screen and (max-width: 640px){
.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
display: none;
}
}
@media screen and (max-width: 480px) {
.promo-intro-text {
top: 10px;
}
.promo-intro-text .promo-intro-text-inner h2 span {
font-size: 30px;
line-height: 38px;
}
.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
font-size: 20px;
line-height: 28px;
}
}
@media screen and (max-width: 360px) {
.promo-intro-text {
top: 0;
}
.promo-intro-text .promo-intro-text-inner h2 span {
font-size: 20px;
line-height: 28px;
}
.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
font-size: 12px;
line-height: 20px;
margin-top: 5px;
}
.promo-intro-text .promo-intro-text-inner .promo-intro-btn {
margin-top: 5px;
padding: 6px 15px;
}
}
CSS (Optional)
/*-- Orange Button - not required in Joomlshine templates --*/
.link-button {
cursor: pointer;
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 3px;
padding: 8px 25px;
display: inline-block;
text-decoration: none;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.link-button, .link-button a {
transition: 0.3s ease-out;
-moz-transition: 0.3s ease-out;
-webkit-transition: 0.3s ease-out;
}
a.link-button, .link-button a {
font-weight: 300;
color: #fff;
}
.link-button.button-orange, .link-button.button-orange:hover {
background-color: #f26522;
}
HTML
<div class="promo-intro-text"> <div class="promo-intro-text-inner"> <h2 class="promo-intro-title"> <span class="pm-t1">THE</span> <span class="pm-t2">QUANTUMWARP BLOG</span></h2> <p class="promo-intro-desc"> Technology And Geek Blog<br /> Articles and Information From My Personal Experience </p> <span><a href="#" class="link-button button-orange promo-intro-btn">Random Article</a></span> </div> </div>
Notes
- Publish in promo position
- Publish ImageShow in the promo position
- Make sure that Imageshow is published after the 'Promo Intro Text' module
Promo Intro Text - Improved (ImageShow Overlay)
I have made alterations to Promo Intro Text (ImageShow Overlay) to make it cleaner code and more stylable including the ability to add coloured semi-transparent backgrounds with rounded corners to the individual lines for better visibility.
CSS
/*--- Promo Intro Text - Improved ---*/
/* Optional - Add this class to the containing module if needed */
.promo-intro-text-module-suffix {
margin: 0;
position: relative;
}
.promo-intro-text {
text-align: center;
position: absolute;
top: 150px; /* This changes the position of the text on image show */
width: 100%;
z-index: 99;
color: #fff;
}
/* set background colour for text blocks */
.promo-intro-text .promo-intro-text-inner h2 .pm-t1,
.promo-intro-text .promo-intro-text-inner h2 .pm-t2,
.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
background: rgb(0, 0, 0) transparent;
background: rgba(0, 0, 0, 0.5); /* Only this is needed for good browsers to add transparent background */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000, endColorstr=#19000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000, endColorstr=#19000000)";
padding: 10px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.promo-intro-text .promo-intro-text-inner h2 {
padding: 0 10px;
}
.promo-intro-text .promo-intro-text-inner h2 span {
text-transform: uppercase;
font-size: 72px;
line-height: 80px;
font-weight: 700;
text-shadow: 1px 1px 1px #333;
}
.promo-intro-text .promo-intro-text-inner h2 .pm-t1 {
display: inline-block;
}
.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
display: inline-block;
font-size: 48px;
line-height: 56px;
border-top: 2px solid rgba(255,255,255, 0.6);
border-bottom: 2px solid rgba(255,255,255, 0.6);
padding: 2px 0;
margin-top: 10px;
}
.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
display: inline-block;
font-size: 18px;
line-height: 30px;
margin-top: 10px;
color: #fff;
text-shadow: 1px 1px 1px #333;
}
.promo-intro-text .promo-intro-text-inner .promo-intro-button-wrapper {}
.promo-intro-text .promo-intro-text-inner .promo-intro-btn {
display: inline-block;
margin-top: 20px;
padding: 10px 25px;
}
@media screen and (max-width: 1400px) {
.promo-intro-text {
top: 90px;
}
}
@media screen and (max-width: 1280px) {
.promo-intro-text {
top: 50px;
}
}
@media screen and (max-width: 1024px) {
.promo-intro-text .promo-intro-text-inner h2 span {
font-size: 50px;
line-height: 58px;
}
.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
font-size: 30px;
line-height: 38px;
}
.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
font-size: 14px;
line-height: 22px;
margin-top: 15px;
}
.promo-intro-text .promo-intro-text-inner .promo-intro-btn {
margin-top: 10px;
}
}
@media screen and (max-width: 799px) {
.promo-intro-text {
top: 20px;
}
}
@media screen and (max-width: 640px){
.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
display: none;
}
}
@media screen and (max-width: 480px) {
.promo-intro-text {
top: 10px;
}
.promo-intro-text .promo-intro-text-inner h2 span {
font-size: 30px;
line-height: 38px;
}
.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
font-size: 20px;
line-height: 28px;
}
}
@media screen and (max-width: 360px) {
.promo-intro-text {
top: 0;
}
.promo-intro-text .promo-intro-text-inner h2 span {
font-size: 20px;
line-height: 28px;
}
.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
font-size: 12px;
line-height: 20px;
margin-top: 5px;
}
.promo-intro-text .promo-intro-text-inner .promo-intro-btn {
margin-top: 5px;
padding: 6px 15px;
}
}
CSS (Optional)
/*-- Orange Button - not required in Joomlshine templates --*/
.link-button {
cursor: pointer;
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 3px;
padding: 8px 25px;
display: inline-block;
text-decoration: none;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.link-button, .link-button a {
transition: 0.3s ease-out;
-moz-transition: 0.3s ease-out;
-webkit-transition: 0.3s ease-out;
}
a.link-button, .link-button a {
font-weight: 300;
color: #fff;
}
.link-button.button-orange, .link-button.button-orange:hover {
background-color: #f26522;
}
HTML
<div class="promo-intro-text"> <div class="promo-intro-text-inner"> <h2 class="promo-intro-title"> <span class="pm-t1">THE</span><br /> <span class="pm-t2">QUANTUMWARP BLOG</span> </h2> <p class="promo-intro-desc"> Technology And Geek Blog<br /> Articles and Information From My Personal Experience<br /> </p> <div class="promo-intro-button-wrapper"> <a href="http://quantumwarp.com/" class="link-button button-orange promo-intro-btn">Random Article</a> </div> </div> </div>
Notes
- Publish in promo position
- Publish ImageShow in the promo position
- Make sure that Imageshow is published after the 'Promo Intro Text' module
Promo Intro Text - Improved (ImageShow Overlay) V2
This is just another style version with slightly different look. on the smallest devices the text is hidden.
CSS
/*--- Promo Intro Text - Improved ---*/
/* Optional - Add this class to the containing module if needed */
.promo-intro-text-module-suffix {
margin: 0;
position: relative;
}
.promo-intro-text {
text-align: center;
position: absolute;
width: 100%;
z-index: 99;
color: #fff;
}
/* Set background colour for text blocks */
.promo-intro-text .promo-intro-text-inner h2 .pm-t1,
.promo-intro-text .promo-intro-text-inner h2 .pm-t2,
.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
background: rgb(0, 0, 0) transparent;
background: rgba(0, 0, 0, 0.5); /* Only this is needed for good browsers to add transparent background */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000, endColorstr=#19000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000, endColorstr=#19000000)";
padding: 10px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.promo-intro-text .promo-intro-text-inner h2 {
padding: 0 10px;
}
.promo-intro-text .promo-intro-text-inner h2 span {
text-transform: uppercase;
font-size: 72px;
line-height: 80px;
font-weight: 700;
text-shadow: 1px 1px 1px #333;
}
.promo-intro-text .promo-intro-text-inner h2 .pm-t1 {
display: inline-block;
}
.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
display: inline-block;
font-size: 48px;
line-height: 56px;
border-top: 2px solid rgba(255,255,255, 0.6);
border-bottom: 2px solid rgba(255,255,255, 0.6);
padding: 2px 0;
margin-top: 10px;
}
.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
display: inline-block;
font-size: 18px;
line-height: 30px;
margin-top: 10px;
color: #fff;
text-shadow: 1px 1px 1px #333;
}
.promo-intro-text .promo-intro-text-inner .promo-intro-button-wrapper {}
.promo-intro-text .promo-intro-text-inner .promo-intro-btn {
display: inline-block;
margin-top: 20px;
padding: 10px 25px;
}
.promo-intro-text {
top: 150px; /* This changes the position of the text on image show */
}
@media screen and (max-width: 1400px) {
.promo-intro-text {
top: 150px;
}
}
@media screen and (max-width: 1280px) {
.promo-intro-text {
top: 150px;
}
}
@media screen and (max-width: 1024px) {
.promo-intro-text {
top: 125px;
}
.promo-intro-text .promo-intro-text-inner h2 span {
font-size: 50px;
line-height: 58px;
}
.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
font-size: 30px;
line-height: 38px;
}
.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
font-size: 14px;
line-height: 22px;
margin-top: 15px;
}
.promo-intro-text .promo-intro-text-inner .promo-intro-btn {
margin-top: 10px;
}
}
@media screen and (max-width: 799px) {
.promo-intro-text {
top: 75px;
}
}
@media screen and (max-width: 640px){
.promo-intro-text .promo-intro-text-inner .promo-intro-desc {
display: none;
}
}
@media screen and (max-width: 480px) {
.promo-intro-text {
top: 10px;
}
.promo-intro-text .promo-intro-text-inner h2 span {
font-size: 30px;
line-height: 38px;
}
.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
font-size: 20px;
line-height: 28px;
}
}
@media screen and (max-width: 360px) {
.promo-intro-text {
top: 0;
}
.promo-intro-text .promo-intro-text-inner h2 span {
font-size: 20px;
line-height: 28px;
}
.promo-intro-text .promo-intro-text-inner h2 .pm-t2 {
font-size: 12px;
line-height: 20px;
margin-top: 5px;
}
.promo-intro-text .promo-intro-text-inner .promo-intro-btn {
margin-top: 5px;
padding: 6px 15px;
}
}
HTML
<div class="promo-intro-text">
<div class="promo-intro-text-inner">
<p class="promo-intro-desc">NEWS, REMINDERS AND INCENTIVES<br /><br />Visit our social media pages by clicking <br />on an icon below and register to receive news,<br />updates and reminders relating to<br />the business, services, events, competitions and prizes.</p>
</div>
</div>
Published in
JSN Extensions
Monday, 28 December 2015 20:23
Rename a Joomla plugin or create a second instance of it
This tutorials will allow you to run a second instance of a plugin completely separate. We will be using K2 Extended search for this tutorial as this is a prime example of why you would want this feature.
Scenario
I wanted to be able to run 2 instances of this plugin because I made the plugin so I could specify which categories and articles it searched. With 2 instances of the same plugin I can now have search results for certain categories or knowledge bases in separate search names spaces in a Joomla search. This allows easier searching and I can also control the results easier.
Prerequisites
- Workout you new name for the plugin. If you just want a second instance of a plugin keep the file names name similar. K2 Extended Search B
- Extract the plugin package on your PC
Files
- Rename the following files as show below. You will see I have just appended ‘b’ on the end of k2extended to keep in line with your new plugin name. You could use a program to change all of these file names as per your choice
- k2extended.php à k2extendedb.php
- k2extended.xml à k2extended.xml
- language/en-GB/ en-GB.plg_search_k2extended.ini
-->
language/en-GB/ en-GB.plg_search_k2extendedb.ini - language/en-GB/ en-GB.plg_search_k2extended.sys.ini
-->
language/en-GB/ en-GB.plg_search_k2extended.sys.ini
File Content
- Open all plugin files in Notepad++
- With case sensitivity on, Text replace in all open files K2EXTENDED à K2EXTENDEDB
- With case sensitivity on, Text replace in all open files k2extended àk2extendedb
- Change the plugin descriptions as required in k2extendedb.xml
- In k2extendedb.php change (the class title)
class plgSearchK2Extended extends JPlugin
-->
class plgSearchK2ExtendedB extends JPlugin
Finalization
- Zip up the files
- Upload the new plugin to your test server to make sure it works as expected and does not overwrite your donor’s plugin
Published in
Extension Development
Monday, 28 December 2015 12:32
Strict Standards: Only variables should be assigned by reference
When developing a Joomla extension, and most likely a standalone extension you receive the following error or similiar:
Strict Standards: Only variables should be assigned by reference in /plugins/editors-xtd/executecode/script.php on line 22
Solution
The error is most likely down to a line similiar to this
$app =& JFactory::getApplication('administrator');
Notice the =&, in PHP5+ you should not longer use this. The line should look like this without the &
$app = JFactory::getApplication('administrator');
Explanation
Remove the & because as off PHP5 it is no longer required and is still only present in PHP5 for legacy code and will be removed in further iterations of PHP.
As of PHP 5, the new operator returns a reference automatically, so assigning the result of new by reference results in an E_DEPRECATED message in PHP 5.3 and later, and an E_STRICT message in earlier versions.
My understanding of this is that PHP5 automatically creates a reference to the objects value and does not copy the value, this makes =& redundant because you no longer need to manually specify this feature. With a reference if you alter the value in either the variable or the object value then the other is changed aswell, hence the term reference.
If you look in the Joomla index.php files you will see there is no =&
// Instantiate the application.
$app = JFactory::getApplication('site');
or in the administrator
// Instantiate the application.
$app = JFactory::getApplication('administrator');
Other Solutions
These are some other solutions I have come across that people use
- Append @ to the beginning of the statement, this causes PHP to supress errors for this statement
@$app =& JFactory::getApplication('administrator'); - Supress errors via the php.ini file
These should be avoided as hiding errors does not mean they have been fixed.
Links
- Dealing with E_STRICT in Joomla - Stack Overflow
- Joomla ‘Strict Standards: Only variables should be assigned by reference’ Error
- Strict Standards: Only variables should be assigned by reference PHP 5.4 - Stack Overflow
- Joomla Man Forum :: Topic: Error "Strict standards: Only variables should be assigned by reference in..." (1/1)
- How to fix the Strict Standards: Non-static method Joomla error
Published in
Extension Development
Sunday, 20 December 2015 20:24
JSN-Vintage
Menu
/* footer div menu fix */
ul.menu-divmenu {
margin: 0 auto;
padding: 0;
list-style: none;
}
ul.menu-divmenu li {
display: inline-block;
}
/* footer div menu fix */
ul.menu-divmenu {
margin: 0 auto;
padding: 0;
list-style: none;
}
ul.menu-divmenu li {
display: inline-block;
}
/* fixes footer menu getting the word 'menu' getting attached */
.jsn-menu-mobile-control, ul.menu-topmenu .jsn-menu-mobile-control {
display: none !important;
}
Slider
/* remove gap under slider - on homepage - if needed */
.jsn-homepage #jsn-promo-inner {
background-repeat: repeat-x;
background-position: left bottom;
height: auto;
padding-bottom: 10px;
z-index: 100;
}
/* frame-1a with frame-correction in content-top jsn_vintage */
/* Double Grey Border and 3D Shadow */
.frame-1a {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: transparent -moz-linear-gradient(center top , #fafafa, #dddddd) repeat scroll 0 0;
border-color: #c9cbcd;
border-image: none;
border-radius: 0;
border-style: solid;
border-width: 1px 1px 2px;
box-shadow: 0 8px 6px -6px black;
display: inline-block;
outline: medium none;
padding: 4px;
transition: all 300ms ease-out 0s;
}
/* main slider correction - add this to the slider module class suffix */
.frame-correction {padding-top: 10px;}
Published in
JSN Templates
Sunday, 20 December 2015 20:24
JSN-Time
General
/* add padding to blog images */
.jsn-layout-blog .pull-left.item-image img {
padding: 20px;
}
/* fix squashed article contents */
.article-contents {
display: inherit;
}
Header
/* Remove Header background image */
#header-inner{background: none;}
/* Disable the world image in header */
#header-inner {background-image: none;}
/* Remove logo white background */
#jsn-logo {background-color: transparent;}
/* Remove topbar padding and margins */
#jsn-topheader-inner {padding-top: 0;}
/* reduce gap between logo and menu */
#jsn-topheader {margin-bottom: 0;}
Menu
/* create a 100% wide menu background */
#jsn-body{
border-top: 51px solid #222222;
margin-top: -51px;
}
If you you need to make the menu taller just increase both 51px.
/* remove line/border below menu */
#jsn-body {
border-top: none;
}
/* Make Main Menu Grey */
#jsn-menu {
background-color: #EFEFEF; /*#EFEFEF this is very common*/
box-shadow: none;
}
Bug Fixes
/* Bug Fix - Content goes of the side - I think that is what this fixes */
@media only screen and (min-width: 481px) and (max-width: 768px), (min-device-width: 481px) and (max-device-width: 768px) and (orientation:portrait) {
#header-inner{
width: inherit !important;
margin: 0 auto;
}
}
module responsive suffix do not work
Please check the file template_pro.css at line 30:
#jsn-page transition: width 0.3s ease-in-out; -moz-transition: width 0.3s ease-in-out; -webkit-transition: width 0.3s ease-in-out; }
The code is missing a "{" after #jsn-page that makes the code incorrect, so all the css after this point is not parsed.
The correct code:
#jsn-page {
transition: width 0.3s ease-in-out;
-moz-transition: width 0.3s ease-in-out;
-webkit-transition: width 0.3s ease-in-out;
}
Then all the class suffix will work fine.
Right hand side is cut off - responsive failed (not all verified as there seems to be 2 soluitions)
The issue has been fixed by changing some css 'css/layouts/jsn_mobile.css' at line 20:
#jsn-pos-topbar,
#jsn-topheader-inner,
#header-inner,
#jsn-header-inner,
#jsn-pos-promo-full,
#jsn-promo-inner,
#jsn-pos-content-top,
#jsn-pos-content-top-below,
#jsn-content,
#jsn-content-bottom-inner,
#jsn-usermodules3-inner,
#jsn-content-bottom-mid-inner,
#jsn-content-bottom-below-inner,
#jsn-footer-inner {
width: 100%; /* change from width: 1170px; */
min-width: inherit;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
'css/layouts/jsn_mobile.css' at line 783:
#jsn-pos-promo {
margin: 0; /* change from margin: 0 20px; */
}
the issue is not fixed. The template changer, the right column and and main content area get cut off. Just like before
In templates/jsn_time_pro/css/layouts/jsn_mobile.css line 34
width: 1170px changed to width: 100%;
In 'templates/jsn_time_pro/css/template.css' line 239, add this code:
@media only screen and (max-width: 1199px), (max-device-width: 1199px) {
#jsn-pos-topbar,
#jsn-topheader-inner,
#header-inner,
#jsn-pos-promo-full,
#jsn-promo-inner,
#jsn-pos-content-top,
#jsn-pos-content-top-below,
#jsn-content,
#jsn-content-bottom-inner,
#jsn-usermodules3-inner,
#jsn-content-bottom-mid-inner,
#jsn-content-bottom-below-inner,
#jsn-footer-inner {
width: 100%;
}
}
cannot change font size in template config
remove the following from the tempalte.css
.article-contents{
font-size: 14px;
}
Published in
JSN Templates
Sunday, 20 December 2015 20:24
JSN-Solid
/* Fix Contact Form going off screen to the left in tablet*/
#jsn-maincontent.span12 #jsn-pos-innerright > div {
padding-left: 0px;
margin-left: 10px;
}
/* correct white space on the left of the header */
#jsn-header {
padding: 0px 0px;
}
/* fix footer menu not <li> not going inline when using main menu items */
/*
ul.menu-divmenu li {
float: left !important;
}
*/
ul.menu-divmenu {
margin: 0 auto;
padding: 0;
list-style: none;
}
ul.menu-divmenu li {
display: inline-block;
}
Published in
JSN Templates
Page 33 of 96