Mysidia Adoptables Support Forum  

Home Community Mys-Script Creative Off-Topic
Go Back   Mysidia Adoptables Support Forum > Mysidia Adoptables > Addons and Modifications > Mys v1.3.x Mods

Reply
 
Thread Tools Display Modes
  #1  
Old 12-23-2014, 02:37 AM
Kyttias's Avatar
Kyttias Kyttias is offline
Premium Member
 
Join Date: Jan 2014
Posts: 839
Gender: Female
Credits: 33,897
Kyttias is on a distinguished road
Send a message via AIM to Kyttias
Arrow Item Shop Mod(s): NPC + Item Display + Tooltips

Item Shop Mod(s): NPC + Item Display + Tooltips
Today we're going to modifying classes/class_itemshop.php, specifically the display() function. This guide comes in two parts. The first part will be a total modification of your item shops to display an NPC, with random text, and an overhaul of how items are displayed, complete with tooltips. The second part is just the item display overhaul, for those uninterested in having an NPC run your shops.

Let's start by showing you what you'll be making (if you change nothing), on the default Main theme Mysidia comes with, to prove it should work with any thee. After this, I'll give you the code as-is. Then I'll make an attempt at explaining in the code in greater detail. The code already comes commented, but if you're looking to build things to your exact specifications, it is my hope that the further reading will give you the details you need.
Section 1 - Default Instructions
We'll be replacing the display function in classes/class_itemshop.php:
  Spoiler: Our new display() function! 
PHP Code:
    public function display(){
        
$mysidia Registry::get("mysidia");
        
$document $mysidia->frame->getDocument();              
        
$document->addLangvar($mysidia->lang->select_item);
      
        if(
$this->gettotal() == 0){
            
$document->addLangvar($mysidia->lang->empty);
            return 
FALSE;
        }

        
# Choose the NPC image based on the name of the shop
        
switch ($this->shopname) {
            case 
"Crossed Roads":                     
                
$npc_img "http://fc00.deviantart.net/fs71/f/2014/262/a/2/base_npc_60_by_kyttias-d7zqrnf.png";
                
#Based on the random number, sets a quote for $npc_text
                
$num Rand (1,6);   
                switch (
$num) { 
                        case 
1$npc_text "Time is money."; break; 
                        case 
2$npc_text "Isn't icecream super?"; break; 
                        case 
3$npc_text "Welcome to {$this->shopname}!"; break; 
                        case 
4$npc_text "Off to see the wizard?"; break; 
                        case 
5$npc_text "Tomorrow is another day..."; break; 
                        case 
6$npc_text "PHP is cool!"; }                            
                break;
            case 
"Spectrum"
                
$npc_img "http://fc00.deviantart.net/fs70/f/2014/313/a/c/base_npc_2_60_by_kyttias-d85ww5k.png";
                
#Based on the random number, sets a quote for $npc_text
                
$num Rand (1,6);   
                switch (
$num) { 
                        case 
1$npc_text "Time is money."; break; 
                        case 
2$npc_text "Isn't icecream super?"; break; 
                        case 
3$npc_text "Welcome to {$this->shopname}!"; break; 
                        case 
4$npc_text "Off to see the wizard?"; break; 
                        case 
5$npc_text "Tomorrow is another day..."; break; 
                        case 
6$npc_text "PHP is cool!"; }                   
                break;
            default; 
                
$npc_img "http://placekitten.com/g/200/500";
                
$npc_text "Welcome to {$this->shopname}!";
                break;
        }
        
        
# let's begin rendering the page
        
$document->add(new Comment("
            <style>
                .s_top {
                  overflow:hidden;
                  display: block;
                }
                .sc_npc_text{  
                  width: 300px;
                  float: left;
                  position: relative;
                  height: 70px;
                  padding: 15px;
                  margin: 10px;
                  margin-top: 180px;
                  font-family: 'Trebuchet MS', Helvetica, sans-serif;
                  overflow: auto;
                }
                .sc_npc_img{  
                  width: 40%;
                  float: left;
                }

                .sc_item {
                  display: inline-table;
                  padding: 5px;
                  text-align: center;
                  font-family: 'Trebuchet MS', Helvetica, sans-serif;
                  font-size: 14px;
                  margin-bottom: 3px;
                }
                .s_panel {
                  border-radius: 2px;
                  border: 1px solid #CCC;
                  background-color: #FBFDF2;  
                }
            </style>
            <!-- START Container for Text and NPC -->
                <div class='s_top s_container'>
                    <div class='s_panel sc_npc_text'>
{$npc_text}</div>
                    <div class='sc_npc_img'><img  src='
{$npc_img}' height='300'></div>    
                </div>
            <!-- END Container for Text and NPC -->
            <!-- START Container for Items -->
                  <div class='s_container'>    
        "
FALSE));     
            
        
# Now render each item the store has
        
foreach($this->items as $stockitem){
              
$item $this->getitem($stockitem);
            
              
#descriptions of the item functions
            
switch ($item->function) {
                case 
"Click1"$usage "<br/><b>use:</b> Feed a pet to give them {$item->value} EXP."; break;
                case 
"Click2"$usage "<br/><b>use:</b> Feed a pet to set their EXP to {$item->value}."; break;
                case 
"Click3"$usage "<br/><b>use:</b> Resets EXP earned today to 0."; break;
                case 
"Level1"$usage "<br/><b>use:</b> Raises the Level of your pet by {$item->value}."; break;
                case 
"Level2"$usage "<br/><b>use:</b> Sets the Level of your pet to {$item->value}."; break;
                case 
"Level3"$usage "<br/><b>use:</b> Makes your pet Level 0 again!"; break;
                case 
"Gender"$usage "<br/><b>use:</b> Swaps the gender of your pet to its opposite!"; break;            
                default;
                    
$usage "";
                    break;
            }                        

            
# Now let's render each item icon, name, price and tooltip
            
$document->add(new Comment("
                <div class=\"s_panel sc_item\">
                <img rel=\"tooltip\" title=\"
{$item->description} <em>{$usage}</em>\" src=\"{$item->imageurl}\"/><br/>
                  <b>
{$item->itemname}</b>
                  <br/>
                  
{$item->price} {$mysidia->settings->cost}<br/>
                "
FALSE));


            
# Building the Buy form
            
$buyForm = new FormBuilder("buyform""../purchase/{$mysidia->input->get("shop")}""post");
            
$buyForm->setLineBreak(FALSE);
            
$buyForm->buildPasswordField("hidden""action""purchase")
                    ->
buildPasswordField("hidden""itemname"$item->itemname)
                    ->
buildPasswordField("hidden""shopname"$shop->shopname)
                    ->
buildPasswordField("hidden""shoptype""itemshop")
                    ->
buildPasswordField("hidden""salestax"$shop->salestax);
            
$quantity = new TextField("quantity""1");
            
$quantity->setSize(3);
            
$quantity->setMaxLength(3);
            
$quantity->setLineBreak(FALSE);        
            
$buy = new Button("Buy""buy""buy");
            
$buy->setLineBreak(FALSE);
            
$buyForm->add($quantity);
            
$buyForm->add($buy);

            
# Actually adding in the Quantity field Buy button now
             
$document->add($buyForm);

            
# Now we finish off the item by closing its div
            
$document->add(new Comment("</div>"FALSE)); 
        }  

        
# And that's a wrap
        
$document->add(new Comment("</div><!-- END Container for Items -->"FALSE));

    }  
#END display function 


You'll notice in the screenshot above that the items don't appear to have a description with them. This is because I'm also going to help you install nifty tooltips!
Section 2 - Tooltips
In your directory where Mysidia is installed there is a css folder (not talking about anything theme-related in the template folder, this css folder is the one at the root). We're going to add this as tooltip.css -

  Spoiler: tooltip.css 
HTML Code:
#tooltip
{
    text-align: center;
    color: #fff;
    background: #111;
    position: absolute;
    z-index: 100;
    padding: 15px;
}
 
    #tooltip:after /* triangle decoration */
    {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #111;
        content: '';
        position: absolute;
        left: 50%;
        bottom: -10px;
        margin-left: -10px;
    }
 
        #tooltip.top:after
        {
            border-top-color: transparent;
            border-bottom: 10px solid #111;
            top: -20px;
            bottom: auto;
        }
 
        #tooltip.left:after
        {
            left: 10px;
            margin: 0;
        }
 
        #tooltip.right:after
        {
            right: 10px;
            left: auto;
            margin: 0;
        }


A nearby folder, also in the heart of things, is called js. Open up this folder and add this as tooltip.js:
  Spoiler: tooltip.js 
HTML Code:
/*
        TOOLTIP
    */

    $( function()
    {
        var targets = $( '[rel~=tooltip]' ),
            target  = false,
            tooltip = false,
            title   = false;

        targets.bind( 'mouseenter', function()
        {
            target  = $( this );
            tip     = target.attr( 'title' );
            tooltip = $( '<div id="tooltip"></div>' );

            if( !tip || tip == '' )
                return false;

            target.removeAttr( 'title' );
            tooltip.css( 'opacity', 0 )
                   .html( tip )
                   .appendTo( 'body' );

            var init_tooltip = function()
            {
                if( $( window ).width() < tooltip.outerWidth() * 1.5 )
                    tooltip.css( 'max-width', $( window ).width() / 2 );
                else
                    tooltip.css( 'max-width', 340 );

                var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
                    pos_top  = target.offset().top - tooltip.outerHeight() - 20;

                if( pos_left < 0 )
                {
                    pos_left = target.offset().left + target.outerWidth() / 2 - 20;
                    tooltip.addClass( 'left' );
                }
                else
                    tooltip.removeClass( 'left' );

                if( pos_left + tooltip.outerWidth() > $( window ).width() )
                {
                    pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
                    tooltip.addClass( 'right' );
                }
                else
                    tooltip.removeClass( 'right' );

                if( pos_top < 0 )
                {
                    var pos_top  = target.offset().top + target.outerHeight();
                    tooltip.addClass( 'top' );
                }
                else
                    tooltip.removeClass( 'top' );

                tooltip.css( { left: pos_left, top: pos_top } )
                       .animate( { top: '+=10', opacity: 1 }, 50 );
            };

            init_tooltip();
            $( window ).resize( init_tooltip );

            var remove_tooltip = function()
            {
                tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
                {
                    $( this ).remove();
                });

                target.attr( 'title', tip );
            };

            target.bind( 'mouseleave', remove_tooltip );
            tooltip.bind( 'click', remove_tooltip );
        });
    });


Now, in your theme's header.tpl, add in these lines (before the end of the </head>, of course):
  Spoiler: Inside header.tpl: 
HTML Code:
{$header->loadStyle("{$home}{$css}/tooltip.css")}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="{$home}{$js}/tooltip.js"></script>
<script src="{$home}{$js}/tabs.js"></script>
<script>
$(function() { $("#profile").organicTabs(); });
</script>


You now have all the necessary components for tooltips. You now also have jQuery, for future reference. If you already had jQuery, say, at the end of your </body> in your template.tpl (and if you have Bootstrap, you do), move the scripts there instead (but go ahead and leave the css in the header). These scripts must always come after your jQuery installation.

You'll notice I also have tab-related things in the above. This is because your profile tabs will have broken, and this will fix it. So now, to finish fixing up the tabs, open up inc/tabs.php and delete the contents (but not the file).

Using Tooltips:
To make tooltips elsewhere on your site, from now on, all you need to do is add title="Contents of the tooltip here!" rel="tooltip" to any element you want to have a tooltip. Could be links, divs, spans, images, etc. You can also use some basic html inside them, such as italicies, bold, and linebreaks.

For more reference on the tooltip system I just had you install, visit this link.
Section 3 - Detailed Understanding
Now, please take the time to check out the first bit of code I gave you, that new display function!

In place are two example shopkeeper NPCs. Please do not use these images and be ready to replace them with your own. My shop names are "Crossed Roads" and "Spectrum" - observe the code going on, it does have commentary! Replace these shop names with your own and don't be afraid to copy and paste to make room for more shops.

Each shopkeeper can say it's own set of random things. Can you see how there are six phrases, and a random number is being chosen between 1 and 6? Change as necessary.

Also, anywhere in a case, but before the break, you could also redefine the $npc_img. In this way, you could give your NPCs a variety of emotions, depending on their randomly selected phrase.

By default, if the script cannot find your shop's name on the list, it will display a cute kitten as a placeholder and a basic "Welcome to {$this->shopname}!". Feel free to keep on using this placeholder during your development. :3

Moving along, the page rendering will start to take place. $document->add(new Comment(" ... ")); will allow you to insert text to the current page. By default, there is a linebreak after comments inserted this way, so after each of my comments, you'll see I write FALSE to prevent this behavior, as it would produce undesired results while placing divs.

You'll see that I've inserted the css right there. Leave it, or move it to your own css file if it will be more convenient to you - the choice is yours. Adding width: 100px; to .sc_item will take longer titles down to multiple lines, but may increase the height of those item boxes. This may or may not be desired.

We're still inside the "new Comment" we're adding to the document, and you'll see that I'm adding divs just as easily as I would basic HTML. Take notice that we're inside double quotes, so the HTML must use single quotes when defining things like classes and inline styles. If double quotes are absolutely necessary, you can throw a backslash in front of them and they'll render as normal. Like this: \"This would be in double quotes.\"

Observe how the final page is rendered by visiting your shop and viewing the source (a right-click, Inspect Element anywhere in the shop area will get you in the approximate location). Because it's as easy as HTML inside these "new Comment" areas, go forth and be creative!

Our first "new Comment" ends with the start of a new div, which we'll close only after we've run a statement that will render the items, and we'll do that now.

This next bit opens up with a switch statement which will make the item function (as stored in the database) appear in a nice, plain text form that can be easily appended to the item description. It'll save you the trouble of including what an item does while writing the item's description! Not all item functions are included, so you'll want to append them with your own.

Now we're making the item. You'll see that I'm backslashes double quotes - this is so item descriptions that contain apostrophes will display without breaking anything! We wouldn't want that. <em> tags are just another way of doing italics. And, yes, some basic HTML does work inside the tooltips. {$mysidia->settings->cost} will automatically pull up the name of your site's currency, which can always be changed in the AdminCP or database.

Next the buy form is being built, added, and then the individual item's container is being closed.

Breaking out of this statement now, we'll close the div for the container that holds all the items.

If you wanted to, say, move your NPC to sit to the right of your items, you may want do your div work here, after the item containers have closed.
Section 4 - Just Items & Tooltips

The switch statement where the NPC is chosen for the shop isn't necessary, the first three css properties aren't necessary, and you can delete everything from the START Container for Text and NPC to END Container for Text and NPC. Isn't commented code nice?

Alternatively, all you need is this:
  Spoiler: Display function for just items: 
PHP Code:
    public function display(){
        
$mysidia Registry::get("mysidia");
        
$document $mysidia->frame->getDocument();              
        
$document->addLangvar($mysidia->lang->select_item);
      
        if(
$this->gettotal() == 0){
            
$document->addLangvar($mysidia->lang->empty);
            return 
FALSE;
        }
        
        
# let's begin rendering the page
        
$document->add(new Comment("
            <style>
                .sc_item {
                  display: inline-table;
                  padding: 5px;
                  text-align: center;
                  font-family: 'Trebuchet MS', Helvetica, sans-serif;
                  font-size: 14px;
                  margin-bottom: 3px;
                }
                .s_panel {
                  border-radius: 2px;
                  border: 1px solid #CCC;
                  background-color: #FBFDF2;  
                }
            </style>            
            <!-- START Container for Items -->
                  <div class='s_container'>    
        "
FALSE));     
            
        
# Now render each item the store has
        
foreach($this->items as $stockitem){
              
$item $this->getitem($stockitem);
            
              
#descriptions of the item functions
            
switch ($item->function) {
                case 
"Click1"$usage "<br/><b>use:</b> Feed a pet to give them {$item->value} EXP.";
                    break;
                  case 
"Click2"$usage "<br/><b>use:</b> Feed a pet to set their EXP to {$item->value}.";
                    break;
                  case 
"Click3"$usage "<br/><b>use:</b> Resets EXP earned today to 0.";
                    break;
                  case 
"Level1"$usage "<br/><b>use:</b> Raises the Level of your pet by {$item->value}.";
                    break;
                  case 
"Level2"$usage "<br/><b>use:</b> Sets the Level of your pet to {$item->value}.";
                    break;
                case 
"Level3"$usage "<br/><b>use:</b> Makes your pet Level 0 again!";
                    break;
                case 
"Gender"$usage "<br/><b>use:</b> Swaps the gender of your pet to its opposite!";
                    break;            
                default;
                    
$usage "";
                    break;
            }                        

            
# Now let's render each item icon, name, price and tooltip
            
$document->add(new Comment("
                <div class=\"s_panel sc_item\">
                <img rel=\"tooltip\" title=\"
{$item->description} <em>{$usage}</em>\" src=\"{$item->imageurl}\"/><br/>
                  <b>
{$item->itemname}</b>
                  <br/>
                  
{$item->price} {$mysidia->settings->cost}<br/>
                "
FALSE));


            
# Building the Buy form
            
$buyForm = new FormBuilder("buyform""../purchase/{$mysidia->input->get("shop")}""post");
            
$buyForm->setLineBreak(FALSE);
            
$buyForm->buildPasswordField("hidden""action""purchase")
                    ->
buildPasswordField("hidden""itemname"$item->itemname)
                    ->
buildPasswordField("hidden""shopname"$shop->shopname)
                    ->
buildPasswordField("hidden""shoptype""itemshop")
                    ->
buildPasswordField("hidden""salestax"$shop->salestax);
            
$quantity = new TextField("quantity""1");
            
$quantity->setSize(3);
            
$quantity->setMaxLength(3);
            
$quantity->setLineBreak(FALSE);        
            
$buy = new Button("Buy""buy""buy");
            
$buy->setLineBreak(FALSE);
            
$buyForm->add($quantity);
            
$buyForm->add($buy);

            
# Actually adding in the Quantity field Buy button now
             
$document->add($buyForm);

            
# Now we finish off the item by closing its div
            
$document->add(new Comment("</div>"FALSE)); 
        }  

        
# And that's a wrap
        
$document->add(new Comment("</div><!-- END Container for Items -->"FALSE));

    } 


You'll definitely need to read up on all the details in Section 2 regarding tooltips and installation of them.

Last edited by Kyttias; 12-23-2014 at 04:04 AM.
Reply With Quote
  #2  
Old 12-23-2014, 03:48 AM
Kyttias's Avatar
Kyttias Kyttias is offline
Premium Member
 
Join Date: Jan 2014
Posts: 839
Gender: Female
Credits: 33,897
Kyttias is on a distinguished road
Send a message via AIM to Kyttias
Default

Inventory
I'm also pleased to present a semi-matching Inventory view. The embedded stylesheet is identical to the shop mod above, therefore, if you already moved it to your actual css stylesheet, you won't need it here (my example here has .sc_item set with a width, the one in the shop mod above does not, but I did mention it's potential usage). ^^

Replace the index function in view/inventoryview.php:
  Spoiler: Index function: 
PHP Code:
    public function index(){
        
$mysidia Registry::get("mysidia");
        
$document $this->document;
        
$document->setTitle($mysidia->lang->inventory);
        
        
$inventory $this->getField("inventory");
        
        
$document->add(new Comment(" <style>
                .sc_item {
                  display: inline-table;
                  padding: 5px;
                  text-align: center;
                  font-family: 'Trebuchet MS', Helvetica, sans-serif;
                  font-size: 14px;
                  margin-bottom: 3px;
                  width: 120px;
                }
                .s_panel {
                  border-radius: 2px;
                  border: 1px solid #CCC;
                  background-color: #FBFDF2;  
                }
            </style> "
FALSE));
        
$iids $inventory->getiids();
        for(
$i 0$i $iids->length(); $i++){
            
$item $inventory->getitem($iids[$i]);
                 
            
# Descriptions of the item functions
            
switch ($item->function) {
                case 
"Click1"$usage "<br/><b>use:</b> Feed a pet to give them {$item->value} EXP."; break;
                case 
"Click2"$usage "<br/><b>use:</b> Feed a pet to set their EXP to {$item->value}."; break;
                case 
"Click3"$usage "<br/><b>use:</b> Resets EXP earned today to 0."; break;
                case 
"Level1"$usage "<br/><b>use:</b> Raises the Level of your pet by {$item->value}."; break;
                case 
"Level2"$usage "<br/><b>use:</b> Sets the Level of your pet to {$item->value}."; break;
                case 
"Level3"$usage "<br/><b>use:</b> Makes your pet Level 0 again!"; break;
                case 
"Gender"$usage "<br/><b>use:</b> Swaps the gender of your pet to its opposite!"; break;            
                default;
                    
$usage ""; break;
            }  
# End item function descriptions        

            
            # Rendering items now
            
$document->add(new Comment("
            <div class=\"s_panel sc_item\">
            <img rel=\"tooltip\" title=\"
{$item->description} <em>{$usage}</em>\" src=\"{$item->imageurl}\"/><br/>
              <b>
{$item->itemname}</b><br> Own &times;{$item->quantity}<br/>"FALSE));

            
# If item is consumable, add use button
            
if($item->consumable == "yes") {
                
$useForm = new FormBuilder("useform""inventory/uses""post");
                
$useForm->setLineBreak(FALSE);
                
$useForm->buildPasswordField("hidden""action""uses")
                        ->
buildPasswordField("hidden""itemname"$item->itemname)
                        ->
buildButton("Use""use""use");
                
$document->add($useForm);
            }

            
# Add sellback button so long as the item is not a key item
            
$sellback $item->price 2;
            
$document->add(new Comment("<hr>{$sellback} {$mysidia->settings->cost} Each "FALSE));
            if(
$item->category != "Key Items") {
                
$sellForm = new FormBuilder("sellform""inventory/sell""post");
                
$sellForm->setLineBreak(FALSE);
                
$sellForm->buildPasswordField("hidden""action""sell")
                         ->
buildPasswordField("hidden""itemname"$item->itemname);
                
                
$quantity = new TextField("quantity");
                
$quantity->setSize(3);
                
$quantity->setMaxLength(3);
                
$quantity->setLineBreak(FALSE);

                
$sell = new Button("Sell""sell""sell");
                
$sell->setLineBreak(FALSE);

                
$sellForm->add($quantity);
                
$sellForm->add($sell);
                            
$document->add($sellForm);
            }    

            
$document->add(new Comment("</div>"FALSE));   

        } 
# END item for loop

    
# END index function 
Emphasis: Please replace the index function, not the entire file.

Last edited by Kyttias; 02-15-2016 at 08:53 PM.
Reply With Quote
  #3  
Old 12-23-2014, 07:19 AM
parayna's Avatar
parayna parayna is offline
Member
 
Join Date: May 2013
Location: Devon, UK
Posts: 311
Gender: Female
Credits: 8,244
parayna is on a distinguished road
Default

Thank you Kyttias! :)
Reply With Quote
  #4  
Old 12-23-2014, 08:14 AM
Abronsyth's Avatar
Abronsyth Abronsyth is offline
A Headache Embodied
 
Join Date: Aug 2011
Location: NY
Posts: 992
Gender: Male
Credits: 38,066
Abronsyth is on a distinguished road
Default

This is absolutely fantastic! Thank you very, very much for sharing this with us!

I'll install as soon as I get my theme set up, haha.

Edit:
Just installed it and it works beautifully!

Many thanks! Just looks so awesome now! And I love the tooltips! Very cool!
__________________

Last edited by Abronsyth; 12-24-2014 at 02:01 PM.
Reply With Quote
  #5  
Old 12-30-2014, 03:46 PM
Pear's Avatar
Pear Pear is offline
Woah man.
 
Join Date: Dec 2013
Location: The Underworld
Posts: 138
Gender: Female
Credits: 3,130
Pear is on a distinguished road
Default

Ooh, I might use this in the future. :3 < 3 Thanks, Kyt!
__________________
Noot noot! Gotta get a new signooture. >->
Reply With Quote
  #6  
Old 12-30-2014, 04:39 PM
Kyttias's Avatar
Kyttias Kyttias is offline
Premium Member
 
Join Date: Jan 2014
Posts: 839
Gender: Female
Credits: 33,897
Kyttias is on a distinguished road
Send a message via AIM to Kyttias
Default

I'm glad to hear it!
Reply With Quote
  #7  
Old 01-19-2015, 07:34 AM
MikiHeart's Avatar
MikiHeart MikiHeart is offline
Premium Member
 
Join Date: Apr 2009
Posts: 187
Gender: Female
Credits: 6,893
MikiHeart
Default

Awesome mods. I've installed them both. I love the tooltips and plan to use them to display information about pets and things, to clean up the pet pages a bit more ^^
Reply With Quote
  #8  
Old 01-19-2015, 08:59 AM
MikiHeart's Avatar
MikiHeart MikiHeart is offline
Premium Member
 
Join Date: Apr 2009
Posts: 187
Gender: Female
Credits: 6,893
MikiHeart
Default

Hey Kyttias, I'm using the bootstrap theme you created. The input fields are 200px long, and not short like yours. I'm unsure to how change it. I found out it's 200px by using the inspect tool in firefox, however, I've searched the bootstrap style high and low and couldn't find it. I'm using my own generated colors for the theme, but even if I switch back to the default one you have in the header, it displays the same.

From looking at your code, this should be setting the size, I think, but it's not.
Code:
$quantity->setSize(3);
Reply With Quote
  #9  
Old 01-19-2015, 12:37 PM
Kyttias's Avatar
Kyttias Kyttias is offline
Premium Member
 
Join Date: Jan 2014
Posts: 839
Gender: Female
Credits: 33,897
Kyttias is on a distinguished road
Send a message via AIM to Kyttias
Default

The preview image was done with the main/original theme, not Bootstrap. Because of the way Bootstrap works (and not by my design), form elements are always 100% the width of their container, which was uncomfortably long for any area where all I needed/wanted was 200px - so I set the default length to 200px using css, mostly because I was loading the original copy of Bootstrap from a CDN, for speed reasons, and had no access to change it.

However, did you also see that the quantity field had an id associated with it? Fix it with css:
Code:
#quantity {width: 50px;}
By the way? It was original set with just css, anyway, in style-kyt.css, around line 56:
Code:
@media (min-width: 767px){
input.form-control, select.form-control { width: 200px; display: inline-block;}
}
That's a media query and it says if the browser window/device is at least 767px wide, all text input fields are 200px. Just above this in the file, I have this same field set to 100% width (which is default behavior) because on small screens, that's generally ok.

So, again, just make a line specifically for the quantity field.
Reply With Quote
  #10  
Old 01-19-2015, 11:46 PM
MikiHeart's Avatar
MikiHeart MikiHeart is offline
Premium Member
 
Join Date: Apr 2009
Posts: 187
Gender: Female
Credits: 6,893
MikiHeart
Default

ohh okay. Makes sense why I couldn't find it. Thank you *.*

Do you plan to make a recode to suit the adoptable shop as well? Unless you don't plan to use that feature for your site?
Reply With Quote
Reply

Tags
item display, item shop, npc, shop, shopkeeper

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Mys v1.3.4 Shop Listing Display Kyttias Mys v1.3.x Mods 13 06-13-2016 02:31 PM
Item Bug? tahbikat Questions and Supports 4 11-24-2015 06:28 PM
Changing Shop and Item Display? Abronsyth Questions and Supports 2 12-16-2014 04:25 PM
Buy X of Item A to receive X of Item B AndromedaKerova Suggestions and Feature Requests 0 11-09-2014 09:17 PM


All times are GMT -5. The time now is 07:13 AM.

Currently Active Users: 221 (1 members and 220 guests)
Threads: 3,924, Posts: 31,294, Members: 15,474
Welcome to our newest members, gdysmths01.
BER





What's New?

What's Hot?

What's Popular?


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2018, vBulletin Solutions Inc.
vBCommerce I v2.0.0 Gold ©2010, PixelFX Studios
vBCredits I v2.0.0 Gold ©2010, PixelFX Studios
Emoticons by darkmoon3636