• REGISTRATION REQUIREMENTS:

    Your username here MUST MATCH your XenForo username (connected to your XF license).

    Once you have registered here, then you need to start a conversation at xenforo.com w/Bob and provide the following:
    1. Your XenForo License Validation Token
    2. The Domain Name associated with the License
    NOTE: Your account will be validated once ALL requirements are verified/met. Thank you for your patience.

Implemented Items Slider: modify js/html/css

Bob

Developer
Staff member
As per title, modify the Item Slider js/html/css.

JS changes: remove the js resize/crop and use CSS to manage thumbnail size in container (just like grid view and news view II do). This allows the thumbnail shape to match the rest eg, if its a 300x300 thumbnail, its going to be square in the slider now. This also reduces the page load time by not having to resize/crop slider images.

HTML changes: due to the JS changes, some of the HTML will need to be changed.

CSS changes: due to the JS changes, some of the CSS will need to be changed.
  • The Image is now the full width of the container and no border around the image itself.
  • The Title is now limited to ONE LINE and uses the text-overflow: ellipsis CSS property to trim the title if necessary.
  • The description block has been chopped in HALF (was 99px, is now 50px with overflow hidden).
  • The description snippet is now 100 instead of 200 and its using the dimmed text style property for the color instead of solid black.
  • The width of the container is now a full 250 with a 15px margin between containers.
  • The responsive break points no longer remove parts of the blocks (description and ratings used to get removed on tablets and smartphones)
There is more, but am not going to go into details as the stuff I mentioned is all you really need to know.

Here are a couple shots from the FINAL tweaks.

Selection_238.png
Selection_239.png
Selection_240.png
Selection_241.png
Selection_242.png
Selection_243.png
Selection_244.png
Selection_245.png
 
Upvote 1
This suggestion has been implemented. Votes are no longer accepted.
Back
Top