Forum Support

 
Advanced Search


[1]

Offline Gutshot
Free Member
Posts: 489
Posted on: December 13, 2017, 07:44:14 AM

Hi, just read this article:

https://magazine.joomla.org/item/3284-webdesign-trends-of-2018

Some nice trends, what I like very much is the use of  isometric dimensional grid layouts. Wonderfull!!

Hope to see some of this stuff into the S5 2018 templates.

What I have thought of: (if this is possible off course  Smiley )

Some pre-made custom css that you can use in your site. let me know if the following make sense:

Let's say you want a row split in 2 (50%-50%) with 2 different backgrounds. The template "Store Pro" was already a hell of a template with the freedom of use of the backgrounds.

Or add an service/section like this on the S5 website:
https://codepen.io/jayjoomler/pen/gXdrmb

Add it as service or extra addon. (paid or free, I don't mind)

This takes editing templates to the next level. Lots of freedom then.
Users can bring the css in the "custom css" and take it from there. When this integrates in the S5 templates this can create so much freedom. No need for extensions anymore.. only clean S5 source code.. how cool would this be?

Logged

Offline jonahh
Free Member
Posts: 23789 WWW
Posted on: December 13, 2017, 02:36:59 PM

Hey,

Thanks for the input!

So you are suggesting basically adding in things like the Store Pro module backgrounds to the custom CSS file?
Logged

Offline Gutshot
Free Member
Posts: 489
Posted on: December 13, 2017, 03:50:22 PM

Hey,

Thanks for the input!

So you are suggesting basically adding in things like the Store Pro module backgrounds to the custom CSS file?

Hey,


Not necessarily, the option to choose which custom css would be a great addition, especially with the arrival of the latest css applications this would be very welcome. The option for creating your own module background  in pro store was indeed one I really liked.

Normally only on the homepage is some new custom code. Some are really cool but only to use in that template. One simpel example is to split content in one row/module/article. That way you don't need 2 modules to split the content. Below something I mean:

Quote
<div class="top_text">

<div class="top_text_left">

<div class="top_text_right">

Tons of cool custom css to add. This will save S5 developer members tons of time and can give a nice inspiration boost.

Place this kind of items in the S5 (paid) member section.

"S5 Custom css kit" Grin

The variation to be applied can be enormous.

Just my 2 cent thoughts. Smiley

Here more cool trends:
https://webflow.com/blog/19-web-design-trends-for-2018?utm_campaign=december2017No2&utm_source=newsletter&utm_medium=email&utm_source=Master&utm_campaign=0bbf1e2c93-December2017No2&utm_medium=email&utm_term=0_e8e875e4ea-0bbf1e2c93-90036501


Kind regards,




« Last Edit: December 13, 2017, 03:59:02 PM by Gutshot »
Logged

Offline jonahh
Free Member
Posts: 23789 WWW
Posted on: December 14, 2017, 12:55:15 PM

Thanks. Ok so this would be more along the lines of our "pages" drop down. That CSS works on all templates and is custom code you can place anywhere.
Logged

Offline sonu11
Free Member
Posts: 1
Posted on: May 28, 2018, 01:00:15 PM

I have used this code for responsive, but it is not working ..
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
Step 3) Add JavaScript:
Example
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
« Last Edit: July 27, 2018, 10:11:54 AM by jonahh »
Logged

Offline mikek
Free Member
Posts: 28743 WWW
Posted on: May 29, 2018, 07:27:07 AM

Hello,

I don't know what you are trying to apply this css too, but those classes don't apply to our templates. We don't provide support for custom css programming.
Logged

Offline wovolarjem
Free Member
Posts: 1
Posted on: July 27, 2018, 09:20:18 AM

Even I was looking for the above point changes you talked Tutuapp ShowBox Kodi about, hope they will bring out sooner.

With Regards,
Protar Smith
« Last Edit: July 29, 2018, 02:24:37 AM by wovolarjem »
Logged
[1]

Jump to:  


Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Page created in 0.015 seconds with 21 queries.
Need some help getting your site up and running? Be sure to check out our tutorials area, post on the forum or hire us
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.