Style Chooser Enhancement (Full width)

Style Chooser Enhancement (Full width

Overview Reviews (2) Discussion
Shelley

Shelley

Well-known member
Shelley submitted a new resource:

Style Chooser Enhancement (Full width (version v1) - This guide allows for full width previews within your style chooser

lvnFF5s.png

View attachment 40885

Summary: The following enhancement allows for your previews to span the full width of the style chooser. Use the following as a reference guide as your style IDs and image paths/images will differ.

Live Preview: You can see a live preview at bbsmiley.com by clicking the style chooser link.

Install: Upload your custom images to the folder of choice (in this...
Click to expand...

Read more about this resource...
 
Would it be possible to just make the images smaller but make the style chosen grow bigger when hovering over it and for the rest of them ones not selected to fade out instead? I think that way would be more intuitive. Like Nintendo.
 
Rambro said:
Says site has been moved to a new server...

How would one go about making up those images showing the style examples?
Click to expand...

You will have to use a graphics editor. Screenshot style-x and crop to a pre-defined size (sizes are within the css) for reference.
 
My style chooser has been broken ever since I installed Responsive, so I'm going to use this resource for the style chooser.
 
Doesn't work for me even when responsive is disabled. :(

Removing for now.


Screen Shot 2013-05-12 at 12.10.22 PM.webp

Code: 
/* Style Chooser Full width image Enhancement */
 
.chooserColumns .title, .chooserColumns .description {
    display: none !important;
    margin-left: 0 !important;
    text-align: center; }
 
.styleChooser  .style91{
    height: 100px !important;
    width: 618px !important;
    background-image: url("styles/8thos/8thosTheme.jpg") !important;
    background-repeat: no-repeat;
    border: 1px solid white !important;
    margin-left: 0!important;
    background-color: none !important; }
 
.styleChooser  .style107{
    height: 100px !important;
    width: 618px !important;
    background-image: url("styles/8thos/EbonyTheme.jpg"") !important;
    background-repeat: no-repeat;
    border: 1px solid white !important;
    margin-left: 0!important;
    background-color: none !important;
}
 
.styleChooser  .style130{
    height: 100px !important;
    width: 618px !important;
    background-image: url("styles/8thos/FacebookTheme.jpg"") !important;
    background-repeat: no-repeat;
    border: 1px solid white !important;
    margin-left: 0!important;
    background-color: none !important; }
 
.styleChooser  .style143{
    height: 100px !important;
    width: 618px !important;
    background-image: url("styles/8thos/MirthTheme.jpg"") !important;
    background-repeat: no-repeat;
    border: 1px solid white !important;
    margin-left: 0!important;
    background-color: none !important; }

.styleChooser  .style136{
    height: 100px !important;
    width: 618px !important;
    background-image: url("styles/8thos/XenforoTheme.jpg"") !important;
    background-repeat: no-repeat;
    border: 1px solid white !important;
    margin-left: 0!important;
    background-color: none !important; }
.styleChooser  .style129{
    height: 100px !important;
    width: 618px !important;
    background-image: url("styles/8thos/MobileTheme.jpg"") !important;
    background-repeat: no-repeat;
    border: 1px solid white !important;
    margin-left: 0!important;
    background-color: none !important; }
 
.styleChooser li:hover .icon{
    opacity: 0.35;
    -moz-transition: all 0.7s ease-in-out 0s;
    -o-transition: all 0.7s ease-in-out 0s;
    -webkit-transition: all 0.7s ease-in-out 0s;
    margin: 17px 35px 0 0;
    transform: scale(0.8, 0.8); }
 
.chooserColumns li a:hover {background-color: transparent !important;}
 
.chooserColumns li  {width: 100% !important;}
 
/* Style Chooser Full width image Enhancement */
 
You must log in or register to reply here.
Back
Top Bottom