Style Chooser Enhancement (Full width

[Shelley]

Shelley submitted a new resource:

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

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...

Read more about this resource...

 

[Edrondol]

What size/dimensions do the images need to be? Or does it matter?

I love this, by the way!

 

[Shelley]

What size/dimensions do the images need to be? Or does it matter?

I love this, by the way!

Dimensions I used were 618px by 100px.

 

[Sylar]

Gorgeous. Thanks for posting this

 

[DRE]

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.

 

[The Grand Potentate]

Says site has been moved to a new server...

How would one go about making up those images showing the style examples?

 

[Shelley]

Says site has been moved to a new server...

How would one go about making up those images showing the style examples?

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.

 

[oman]

Took me a while to work out what image size I wanted, but got there in the end. Nice job Shelley and thanks.

 

[Shelley]

Took me a while to work out what image size I wanted, but got there in the end. Nice job Shelley and thanks.

View attachment 43846

Looking great oman nicely done.

 

[DRE]

My style chooser has been broken ever since I installed Responsive, so I'm going to use this resource for the style chooser.

 

[DRE]

Doesn't work for me even when responsive is disabled.

Removing for now.

/* 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 */

 

[elvamo]

Go to EXTRA.css Right?

It leaves me to register on your forum?

 

[Shelley]

Go to EXTRA.css Right?

Yes.