Profile Customizer - shared themes layout is out of whack

I've searched everywhere and haven't seen this issue anywhere, so thought I'd pick your brains:

 

We've added shared themes, but when we go into the Customizer and look at shared themes, the thumbnails are all out of alignment. There are 12 thumbnails on the first row (which is a "full" row and how it should be), but the 2nd row only has 3 thumbnails, the 3rd row only has 1 theme thumbnail, the 4th line has 12 thumbnails.

 

Every time a shared theme is added or deleted, these rows shift randomly. For example, I just deleted a shared theme and before that the 1st row had 12 theme thumbnails, the 2nd row had 3 thumbnails, the 3rd row had 2 themes, the 4th row had 3 thumbnails and there was a 4th row with the remaining themes.

 

I can't find anywhere on the Admin Panel to adjust the Profile Customizer layout. I can't find any of the coding in the files that covers the layout. I can't find anything in the PHP Admin that covers the layout. Am I just at the mercy of how the Customizer wants to randomly lay these out or is there somewhere that I can fix it so that all of the rows have the same number of theme thumbnails?

 

Here's examples of how the Shared profile theme lines are all messed up. These screenshots of the Shared Themes section of the Profile Customizer were all taken within minutes of each other after themes were deleted and/or added. Every time a theme is added or deleted, the random lines shift randomly.  Instead of the lines all being the same length, they display w/ random numbers of theme thumbnails in each line.

 

Any suggestions on how to get this to display properly?

 

messed up customizerscrewyscrewy

Quote · 5 Feb 2011

Please can you provide screenshot ?

The ones you've already provided aren't working.

Rules → http://www.boonex.com/terms
Quote · 7 Feb 2011

images are back up

Quote · 7 Feb 2011

You need to make height of every item the same.

You can set no wrap style for theme name or set height for whole element along with overflow hidden.

Rules → http://www.boonex.com/terms
Quote · 8 Feb 2011

 

You need to make height of every item the same.

You can set no wrap style for theme name or set height for whole element along with overflow hidden.

I'm not sure how to do any of that with the Profile Customizer. The thumbnails are uploaded by various members and I have no contorl over the height of these items, although the Shared Themes page in the Customizer defaults them to all the same size thumbnail in the theme viewer (as you should be able to see on the screenshots).

 

Can you direct me to where I would set the wrap style or set height or overflow for the Profile Customize Module? I haven't been able to track down a single file in my server that relates to how these are displayed. I've looked at every css file, every html file, every php file that I can find that even refers to the Customizer. When I look at it with Firebug, I can see that in the common.css file it's set to <div class="" style="overflow: hidden;">, which looks right. That's the only bit of code I've tracked down relating to the layout, so any directions to where to look for the rest would help.

Quote · 8 Feb 2011

 

 

You need to make height of every item the same.

You can set no wrap style for theme name or set height for whole element along with overflow hidden.

I'm not sure how to do any of that with the Profile Customizer. The thumbnails are uploaded by various members and I have no contorl over the height of these items, although the Shared Themes page in the Customizer defaults them to all the same size thumbnail in the theme viewer (as you should be able to see on the screenshots).

 

Can you direct me to where I would set the wrap style or set height or overflow for the Profile Customize Module? I haven't been able to track down a single file in my server that relates to how these are displayed. I've looked at every css file, every html file, every php file that I can find that even refers to the Customizer. When I look at it with Firebug, I can see that in the common.css file it's set to <div class="" style="overflow: hidden;">, which looks right. That's the only bit of code I've tracked down relating to the layout, so any directions to where to look for the rest would help.

try to change the following code in modules/boonex/profile_customize/templates/base/css/main.css file:

form#custom_themes_form .thumb {
float: left;
margin-right: 10px;
width: 66px;
margin-bottom: 10px;
cursor: pointer;
}

to

form#custom_themes_form .thumb {
float: left;
margin-right: 10px;
width: 66px;
margin-bottom: 10px;
cursor: pointer;
height:100px;
overflow:hidden;
}

Clear CSS cache after changing this file.

Let me know how it goes, with screenshot please, and I will include this fix in next version.

Rules → http://www.boonex.com/terms
Quote · 9 Feb 2011

I switched the code as you recommended, cleared the cache and refreshed. And it looked all cleared up. I went ahead and added themes to see if the alignment held up - and it still looks all cleared up. (Screenshots included)

 

Looks like that solved the problem! Thank you so much!!

 

screenshot 1Screenshot2.Screenshot3

Quote · 9 Feb 2011

Ticket created: http://www.boonex.com/trac/dolphin/ticket/2405

Rules → http://www.boonex.com/terms
Quote · 9 Feb 2011

Had this same issue on a fresh install of 7.1.2 and the fix wasn't incorporated into the code even though there was a ticket created. However, the fix Alex gave still works even on the latest release.

(Evidently I'm the only one who actually uses profile customizer! lol)

Quote · 11 Dec 2012

Thank you for popping this up.

The fix was incorporated.

Rules → http://www.boonex.com/terms
Quote · 16 Dec 2012
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.