I would like help to make some layout changes on the following two pages that use the Rasa2 template and HikaShop

www.veggievore.com/advice/half-hour-custom-coaching-consultation
HikaShop Product Page (Menu ID 612)

www.veggievore.com/advice/one-hour-custom-coaching-consultation
HikaShop Product Page (Menu ID 613)


1)
Adding Padding Between Columns
In order to add padding between the columns in the customtext area on these pagea I added the following code but it will effect every page and I would like to make this change only for these two pages above in case it might cause me problems elsewhere. It would be nice to only add padding on the right side of the left column if that was possible.

Here is what I added just to make it look nicer:

This section of the page is:

<tr id="hikashop_item_customtext_158_10_58_25" class="hikashop_item_customtext_158_10_58_25_line">

I think this is how to reference the class:

#hikashop_item_customtext_158_10_58_25

Would you be willing to show me how to customize this in my custom.css file so that I would be restricting where that code is implemented?


2)
Align Checkbox, Instruction and Period on One Row
I would like to align the check box and the checkbox label to be side by side instead of above and below.

Just below this section there is

<tr id="hikashop_item_agreementapprovalcheckbox" class="hikashop_item_agreementapprovalcheckbox_line">

I think this is how to reference the class:

#hikashop_item_agreementapprovalcheckbox_line

Would you be able to show me a way to align this in my custom.css file so that the checkbox, the text and text would be on one line? It also looks like we a have a period below that should also be on the same line.


3)
Reduce Spacing Between Customtext and Approval Checkbox
I would also like to reduce the padding between these two sections so that the checkbox would appear just below the customtext.

Would you know how to reduce that padding, again just for these two pages?


4)
Add Space Between Agreement Checkbox and Comments
How to add spacing below the agreement checkbox area to move the comments area further below?


5)
How can I change the text in the popup window when clicking on the "Add to cart" button before having checked the approval checkbox. Presently it says:

"www.veggievore.com says:
Please enter a value for the field Agree"

I would love to make it say something more like:
"Thank you for your interest:
Please check the acceptance box below to proceed"

Again I only need to make this happen for these two pages.


6)
I wish that I could move the price below the description just for these two pages and would love to know how to do that. I can edit the HikaShop layout to move the price below but then it puts the price below on every item and I only want it on these two items in order for the price to be just above the custom text and agreement checkbox.

This is the div for the price that I moved around while testing:

<div id="hikashop_product_description_main" class="hikashop_product_description_main" itemprop="description">
<?php
echo JHTML::_('content.prepare',preg_replace('#<hr *id="system-readmore" */>#i','',$this->element->product_description));
?>
</div>

Hi Sean,

You might need to spread this thread over a couple of threads as it get a little confusing

Especially for a friday afternoon

Looking at 1. it seems to currently use the longest word as the width

and then the padding you mentioned above

for one page it would be

.itemid-612 #hikashop_item_customtext_158_10_58_25 td {padding: 8px}

.itemid-613 #hikashop_item_customtext_158_10_58_25 td {padding: 8px}

#hikashop_item_agreementapprovalcheckbox td.key {vertical-align: top;}

label[for="agreementapprovalcheckbox_agreementapproval"] {display:inline;padding-left:1em}

if you wanted to target the specific pages then it would mean adding the itemids as per above

I do see another stray period not exactly sure that is supposed to be

Paul,

As always your help was fantastic. With the pointers you gave me I was able to get what I asked about and more more to a point where I feel the pages are looking great.

Thanks!!!!!

Sean

What I thought were periods are Astrix marks in the custom fields to denote they are required fields. I will ask the folks at HikaShop how to not display those. Or at least not the one for the custom text which has the asterix symbol display a couple lines below the last sentence.

Thanks Sean

For the other questions could you open a new thread

Cheers
Paul