News:

Support the VirtueMart project and become a member

Main Menu

Style Cart Page-[SOLVED]

Started by Ffragrances, October 06, 2012, 21:39:13 PM

Previous topic - Next topic

Ffragrances

Ok, I am still getting used to the new views method. I like it very much. But for some crazy reason I am still having some difficulty nailing this one down. I am sure that it is me and it something stupid that I am just not figuring out. I have the latest version of both Jomla 2.5 and the latest Virtuemart 2 as well. On the standard cart page you will see in the cart-summary area the section for selecting your shipping and your payment. I only have one payment and it is locked in as PayPal, so that is not an issue. However you will see also the text output " No shipment selected", and below that the link text " Select shipment"

This is pretty straight forward. So while inspecting these items with Firebug, or Chrome DevTools, I see that both are getting styled from the (jstuff.css:98). Most template overrides I would copy the default php and edit from there. I cannot seem to locate where this text is being generated from,....It is driving me nuts! I just want to change them respectively from "No shipment selected" to > " No Shipping Option Selected", and change the color to RED. I can do this with DevTools, but Where is the text coming from for me to change? I also want to add the simple border code to simulate a button using this:
"display: inline-block;
padding: 3px 8px 1px;
border: solid #CAC9C9 1px;
border-radius: 4px;
-webkit-border-radius: 4px;"

around the second text mentioned above " Select Shipment". I would also like edit that text to be "Please Select Shipping Method".

I am sure that I am just missing something here. Normally I do not have issue with this, but it is evading my brain. I have been looking for the location for awhile. Any assistance would be greatly appreciated.

ie. What files need editing and which ones to copy to my Template "html" folder. Obviously there will probably be two at least. One for the generated text, and the other for styling, and I assume I need to create an additional class for just this text. I can add my code and edits to the (jstuff.css) but of course that changes all areas on the cart page that have the class tr,td "sectiontableentry1" ..  Anyhow, Thanks in advance......

Click "View Full Size"

Going Crazy over here......LOL

P.S. I did discover the Language Overide. That is both awesome, and much needed. Glad to see they incorporated that. So the text edit is done, but I still need to style it as described above ..... :)

K&K media production

You can inspect with firebug where the jstuff.css is stored and change it there or add the styles in your own template css.

bytelord

Hello,

You can also find useful information how to create a custom cart template here: http://forum.virtuemart.net/index.php?topic=106459.0

Regards
Production: Joomla 2.5.8 | VM 2.0.14 | PHP 5.3.13
Testing     : Joomla 2.5.8 | VM 2.0.16 | PHP 5.3.8
Testing     : Joomla 2.5.8 |    VM 2.1   | PHP 5.3.8

- Don't Forget to mark thread as solved when it is solved!
- Please do not PM with support questions, use the forum!

Ffragrances

#3
Well, I guess at this point I am pretty sure I have a grasp on what to do as far as how to implement the override but, what I am missing is the file to override. The code that is being generated for the two lines in question is here:

<tr class="sectiontableentry1">
                   
<td colspan="4" align="left">
No Shipping Method Selected     <br>
<a href="/upgradetest/jupgrade/component/virtuemart/cart/edit_shipment?Itemid=0" class="">Select shipping method.</a>
                                      </td><td align="right"><span class="priceColor2"></span> </td>
                                <td></td>
<td align="right"> </td>
</tr>


So the "tr" is being generated with a class of class="sectiontableentry1". My question is what file is generating this code with this class. While in Firebug, or well I prefer Chrome DevTools, I simply added the class "outline" to the first portion like this:

<tr class="sectiontableentry1 outline"> and then added the new element style outline, like this in my template.css :

.sectiontableentry1.outline {
display: inline-block;
padding: 3px 8px 1px;
border: solid #CAC9C9 1px;
border-radius: 4px;
-webkit-border-radius: 4px;
}

And on the next line I edited this "<td colspan="4" align="left">" to this "<td class- red colspan="4" align="left">

and then once again added this to the template.css:

.red {
color: red;
}

So having added the code to my template.css I went back into the page and refreshed
then I once again pulled up DevTools, and edited the html output as described above  to test it, and it works just fine as shown here:



So, as I have explained I hope in enough detail, I just need to now what file is generating this code. I have looked at the default.php and .css. Either I am not understanding it or these are not the files. If one of them is, then I gues I am asking if someone could point me to where I can add in the two new suffix's of "outline", and "red"?.....


Thanks for your initial help, and I hope we can get this figured out. I am really trying to learn all of this, and most of the time need no assistance. But this one has me stumped completely.

Thanks again in advance.

[attachment cleanup by admin]

K&K media production

The file to override is stored here:

components/com_virtuemart/views/cart/default_pricelist.php

Copy this to

your_template/html/com_virtuemart/cart/default_pricelist.php

as template override and make your changes.

Ffragrances

Quote from: kkmediaproduction on October 08, 2012, 07:55:18 AM
The file to override is stored here:

components/com_virtuemart/views/cart/default_pricelist.php

Copy this to

your_template/html/com_virtuemart/cart/default_pricelist.php

as template override and make your changes.

Thank you so much. I knew how to do it, but was having one heck of a time finding it. I guess when I saw "pricelist" in my mind it simply made no sense for me to look in there. But alas, I have learned yet another valuable lesson in that what you are looking for may not always be in a logical place. Or at least not in my mind.. LOL :)

Thanks again, and I will mark this as resolved.

bytelord

Hello,

You can also find here useful information regarding template overrides, joomla template system and using firebug:

Template overrides: http://forum.virtuemart.net/index.php?topic=98505.0
Using firebug to examine your code & css styling: http://forum.virtuemart.net/index.php?topic=102850.0
Template system: http://dev.virtuemart.net/projects/virtuemart/wiki/Hints_for_the_use_of_the_template_system


Regards
Production: Joomla 2.5.8 | VM 2.0.14 | PHP 5.3.13
Testing     : Joomla 2.5.8 | VM 2.0.16 | PHP 5.3.8
Testing     : Joomla 2.5.8 |    VM 2.1   | PHP 5.3.8

- Don't Forget to mark thread as solved when it is solved!
- Please do not PM with support questions, use the forum!