Some tweaks to layout on two pages only

  • Posts: 190
  • Thank you received: 2
9 years 2 months ago #244524

-- url of the page with the problem -- : www.veggievore.com/advice/half-hour-cust...oaching-consultation
-- HikaShop version -- : 2.6.3
-- Joomla version -- : 3.5.1
-- PHP version -- : 7.0.6
-- Error-message(debug-mod must be tuned on) -- : No error message although a popup I would like to change. :-)

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-cust...oaching-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:

element.style {
}
td, th {
    padding: 8px;
}

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>

Please Log in or Create an account to join the conversation.

  • Posts: 4820
  • Thank you received: 654
  • MODERATOR
9 years 2 months ago #244554

Hello,

I have to say that this forum's aim is to help people to configure and custom HikaShop, that can be in some case, some tips and suggestions with Css code.

For answer to 1, 2, 3 and 4:
And so, I will do these for your different questions, but without lots of details, for more elements and find Css command, here .

1 & 3) write a more precise selector, of course use class (.class) or id (#id), but you can add the parent element like this :
#grandparent .parents #child
Where the grandparent is page id (or name given by HikaShop) and so this Css will only works on THIS page

2) Use display: inline Css command ( doc ), and maybe text align ( doc ).

4) Increase margin value Css command.

5) : the most simple is to custom your language file, in order to change the dynamic translation.
You have some "keys" and the value, in order to dynamically translated, just change the value in order to have your required message.



6) tihs point is a little tricky, 2 steps :

1 steps :
- go to Components => HikaShop => Configuration, and on Display dropdown select Views

- Use the dropdown filters with product /your front end template /front-end select among show_default, show_reversed, show_tabular (depends which configuration you choose)
- and custom it, duplicate your price, more precisely put the copy where you want it.
- BUT don't erase the original price, and here the little tricks !

2 steps :
- Add on of both price different id, one for all product page (original price position) and one for your two specific product page (copied price position)
- And add some custom Css with the same way as told in your first question in order to display: none; for the unwanted position price based from page context, and of course display: block or inline for wanted one.

Regards.

Attachments:
Last edit: 9 years 2 months ago by Philip.
The following user(s) said Thank You: scarney

Please Log in or Create an account to join the conversation.

  • Posts: 190
  • Thank you received: 2
9 years 2 months ago #244617

Philippe,
I am SO grateful for your help. You pointed me in all the right directions and the pages are looking great.
Sean

Please Log in or Create an account to join the conversation.

Time to create page: 0.065 seconds
Powered by Kunena Forum