[SOLVED] Where is this code? Trying to change size of select category box

[lucato]

Hi folks, it is driving me crazy.
I'm using Brazil Theme and I want to change on the home page, the size of the 'Select a category....' dropdown box. By inspecting the page code, it shows the code below, but I have already searched into all site files parts of it or the entire code and I didn't get to find in which PHP file this code is located at to get to change its pixels size!

Here is the line code:

Code: [Select]

<div class="selector" id="uniform-sCategory" style="width: 508px;">
<span style="width: 481px; -webkit-user-select: none;">Select a category...</span>

If you know how do I get to change the size of the 'Select a category....' dropdown box on the home page of the Brazil Theme, I'll appreciate it.

Thanks a lot and have a great weekend.

[teseo]

Hi,

Just add or subtract the same amount of pixels to both values there. I don't have Brazil theme, but all those themes with map are but tweaked Modern.

Default code is:

Code: [Select]

<div id="uniform-sCategory" class="selector" style="width: 288px;">
    <span style="width: 261px; -moz-user-select: none;"
Narrower:

Code: [Select]

<div id="uniform-sCategory" class="selector" style="width: 227px;">
    <span style="width: 200px; -moz-user-select: none;"
Regards

[lucato]

Hi Teseo, thanks again for your help, but the problem is that I don't get to find any of these codes or part of them. If I try for example to search into the entire site/files for the text '-webkit-user-select', it shows no results. There is no .php file or even .css file with it. So, that is why it drives me crazy. How can it be, if the code is there in the front end!!! Tried also to search for:
- 508px and no result;
- id="uniform-sCategory" and no results too.

So, I wonder, where is this code located. In which PHP file do you think it can be in your theme?

Thanks a lot once again.

[teseo]

Most curious, right now I couldn't find it either... Must be done with Javascript at some point using some convoluted syntax...

Anyway, we also can do that, manipulate dimensions using our own Javascript code:

Add this at the very bottom of your theme functions.php:
Notes:
1.- Take care not to leave blank lines after this.
2.- If your theme functions.php doesn't end with ?> skip first line of my code.

Code: [Select]

<?php
function cust_resize_category_select() { ?>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#uniform-sCategory").css('width', '227px');
            $("#uniform-sCategory span").css('width', '200px');
        });
    </script>
<?php }

osc_add_hook('footer', 'cust_resize_category_select');
?>

Change 'XXpx' to the values you want.

Regards

[lucato]

Amazing, you're the man! Thanks a lot! I appreciated that. I'd like to know coding like that. :0)

[lucato]

Hi Teseo and folks,


I'd like to resize the category box also when adding a listing, so by following your code and thinking, I added some lines in your code, but as I'm not a PHP programmer, of course it didn't work hunf! I thought it was going to work.

Well, the code you provided me was this one right below to resize at the home page:

Code: [Select]


<?php
function cust_resize_category_select() { ?>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#uniform-sCategory").css('width', '227px');
            $("#uniform-sCategory span").css('width', '200px');
        });
    </script>
<?php }


osc_add_hook('footer', 'cust_resize_category_select');
?>

So, following your logic, I added the following lines to get to it works when adding listings:

Code: [Select]


  $("#uniform-select_2").css('width', '300px');
  $("#uniform-select_2 span").css('width', '255px');

So, the full code was:

Code: [Select]


<?php
function cust_resize_category_select() { ?>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#uniform-sCategory").css('width', '227px');
            $("#uniform-sCategory span").css('width', '200px');

            $("#uniform-select_2").css('width', '300px');
            $("#uniform-select_2 span").css('width', '255px');
        });
    </script>
<?php }


osc_add_hook('footer', 'cust_resize_category_select');
?>

Any Idea what I have missed?


Thanks and have a nice week.

[teseo]

Any Idea what I have missed?

Yes. $(document).ready means "when this page has been totally rendered". Now, can you immediately see element "#uniform-select_2" when you get the publish or edit page (at least hidden inside the source code of the page, waiting to be unveiled when you choose an option on "#uniform-select_1" -main category)? No, that first subcategory select (#uniform-select_2) is dynamically added to the page using an Ajax call to the Osclass scripts, only once you have selected a main category.

So in this case you need an event other than $(document).ready:

Code: [Select]

<?php
function cust_resize_first_subcategory_select() { ?>
<script type="text/javascript">
    $(document).ajaxComplete(function() {
        $("#uniform-select_2").css('width', '300px');
        $("#uniform-select_2 span").css('width', '255px');
    });
</script>
<?php }

if (osc_is_publish_page() || osc_is_edit_page()) osc_add_hook('footer', 'cust_resize_first_subcategory_select');
?>

This is still a bit rough, because it will try to resize #uniform-select_2 every time any Ajax call is made (location selects also use Ajax to get correct regions for selected country and correct cities for selected region), but at this point most of the action is already happening on the client side (browser) and he won't notice that anyway.

To compensate for that, I've restricted this bit of code to publish/edit pages only (if (osc_is_publish_page() || osc_is_edit_page()) osc_add_hook...

Regards

[lucato]

Hey Teseo, thanks a lot for the extra class. I appreciated that. My head is burning a little bit, but that is ok. :0)

I did it for the 3 levels and worked wonderful! Thanks a lot. Just a little blinking on a wrong position, but right after it goes to the right place. No big deal.

Here is how I used your code for both, main page and adding listings (Max 3 levels). Thanks again!

Code: [Select]


  /* Resize categories dropdown box */
  function cust_resize_category_select() { ?>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#uniform-sCategory").css('width', '350px');
            $("#uniform-sCategory span").css('width', '255px');
                   });
    </script>
<?php }


osc_add_hook('footer', 'cust_resize_category_select');
?> <?php
function cust_resize_first_subcategory_select() { ?>
<script type="text/javascript">
    $(document).ajaxComplete(function() {
        $("#uniform-select_1").css('width', '350px');
        $("#uniform-select_1 span").css('width', '295px');
        $("#uniform-select_2").css('width', '200px');
        $("#uniform-select_2 span").css('width', '155px');
        $("#uniform-select_3").css('width', '200px');
        $("#uniform-select_3 span").css('width', '155px');
    });
</script>
<?php }


if (osc_is_publish_page() || osc_is_edit_page()) osc_add_hook('footer', 'cust_resize_first_subcategory_select');
?>


[teseo]

Just a little blinking on a wrong position

There is when the things grow complex...

Regards