User Account Control Page Display Bad

-- url of the page with the problem -- : www.ariesgamesandminis.com
-- HikaShop version -- : 3.0.1
-- Joomla version -- : 3.6.5
-- PHP version -- : 7
-- Browser(s) name and version -- : Chrome

First, I know my HikaShop is out of date (as is Joomla). I need to resolve a issues with both on a test site I installed the newest version on before I update my live site.

My user account control page is not displaying properly. I have NO idea how long this has gone on...but I've tried to investigate the issue myself and need some direction.

First off, please see the attached images. This shows both before (checked) and after (unchecked) I toyed around with the investigate tool within chrome. I still cannot figure out how to make the associated images larger though.

Any direction would be helpful as I'm a bit unsure on what to do. I have (per memory) never changed the CSS for the User Account Control page...so I'm not sure why this is happening.

Thanks!

Checked


Unchecked

Hello,

You should have a customized CSS file.
Because HikaShop 3.x was a major release ; it had a lot of modifications including CSS modifications.

We now recommend to try to keep the "frontend default" CSS and use the "style" to create your customization.
Depending how your CSS is already customized, it would be easier to add the missing rules in your current used file.

Rules are around the "icon-wrapper" "icon" classnames and also the "hkIcon".

www.hikashop.com/support/documentation/1...the-display.html#css

Regards,

Jerome...thank you for your reply. Sorry for my very tardy reply myself...all sorts of bad stuff broke loose over the last few days.

So if I'm understanding you correctly, the front end CSS will now change periodaclly without warning, and as such, any modifications I do should be done to the "Styles for the front-end" section right?

If so...what would happen if I simply copied over my current front end CSS settings, and placed them into the "Styles for the front-end"?

Hello,

No, you did not understood me correctly.

HikaShop 3.0 was a major release ; with all the implications it implies.
We wrote a lot about HikaShop 3.0 and all the modifications it contains and we always write that it should not be done on a production website like that.
And you can find a lot of thread talking about these modifications in our documentation or in our forum ; HikaShop 3.0.0 has been release 6 months ago.

I gave you an advice on how you can keep your customization with all the new improvements of HikaShop 3.
It was just an advice with no single implication or else.
It's your choice to have false conclusions.
But please, don't make me "say" what I didn't.

Regards,

Jerome, not sure why...but you seem offended. I am simply not understanding you. I'm not a webmaster. I am still learning as much as I can, so I'm asking questions.

You said...

"We now recommend to try to keep the "frontend default" CSS and use the "style" to create your customization.
Depending how your CSS is already customized, it would be easier to add the missing rules in your current used file."

I'm asking you...can I copy the current Front End CSS items over to the style sheet? What would happen if I did? I don't plan on doing this to the live site yet...I'm asking for what can happen, if it is recommended, what would your advice be...etc.

Hi,

Nothing bad will happen. You can try. That might help. You'll always be able to revert if necessary and it might fix the issue.

It's indeed better to not directly edit the "frontend" CSS but instead to add your custom CSS as a style or even in your template's CSS.
That way, you automatically get all the CSS modifications and additions we do in the frontend CSS.
That was already the case before. Jerome was answering to this:

the front end CSS will now change periodaclly without warning

HikaShop 3 was a big release so a lot of things had to be changed in that file. But even before, we had to change things in that file in almost each release, be it because of a new feature or because of changes or even fixes.

Jerome and/or Nicolas...I'm still oddly having this issue. Attached are new images.

I know where to change the CSS file, but...of course when I do, and there's an update, all changes revert to their original state.

So where exactly should I copy these changes to? I'm using a Rocket Theme template if that matters. I have tried all the previous posts, and it doesn't seem to work for me, or...I'm doing it wrong.

Images attached are as follows:

User Control Panel - This is how it looks to customers (on a computer) when they access it
BEFORE Editing User Control Panel - The red circled area is the part that I need to edit
EDITED User Control Panel - This is how I'd like it to look and the red circled area are the changes I made

Thank you!

Hi,

As we said previously, you should add your CSS custom code in the "style" CSS file and not the "frontend" CSS file (the option below). OR you can also add your custom CSS code to your template. Some templates provide a way to add your custom CSS somewhere. You have to check with your template provider regarding that.

Regarding the user control panel, if you reverted to the "default" selection of the "frontend" HikaShop CSS file and you still have a display issue, then please also delete the file templates/YOUR_TEMPLATE/com_hikashop/user/cpanel.php in order to use the default view file of HikaShop.

nicolas wrote: Hi,

As we said previously, you should add your CSS custom code in the "style" CSS file and not the "frontend" CSS file (the option below). OR you can also add your custom CSS code to your template. Some templates provide a way to add your custom CSS somewhere. You have to check with your template provider regarding that.

Regarding the user control panel, if you reverted to the "default" selection of the "frontend" HikaShop CSS file and you still have a display issue, then please also delete the file templates/YOUR_TEMPLATE/com_hikashop/user/cpanel.php in order to use the default view file of HikaShop.

Ok...I have GOT to be doing this wrong. Re-reading what you both have said, and the documentation I can find...it's still not working and it changes the rest of my site.

I've attached 2 images (split screens since the page is longer than the image), you will see in the AFTER Edit one, fonts are changed, sizing has changed, things are italicized when they were not before, and the color of wording is now grey.

BEFORE Edit - this is how my live site looks, as well as the staging site before copying & editing the style sheet.
AFTER Edit - this is how the staging site looks after I include the following code

So what am I doing wrong? Here's the steps I took:
Created the staging site, which is a direct copy of the live site
Went into the admin panel, to HikaShop configuration, then Display, then CSS
I opened "Styles for the front end" and selected "custom", then clicked edit.
I entered the above code at the bottom of the new custom front end css and hit save

Then I get the messed up look on the site.

How can I change JUST the User Control Panel screen and not the rest of the site?

Thanks

Hello,

You use a too generic selector, and of course that will modify the whole site page.
You have to create a more specific selector :

.specific_page_class .html_element_class {
/* Your command css */
}

And so, your custom code will be applied only on the page with that specific page.
Regards

Philip wrote: Hello,

You use a too generic selector, and of course that will modify the whole site page.
You have to create a more specific selector :

.specific_page_class .html_element_class {
/* Your command css */
}

And so, your custom code will be applied only on the page with that specific page.
Regards

Hello Phillip,

Ok, that makes sense...but I have no clue what the page class or element class is.

Just spit-balling here...is it this?

or is it something completely different?

Hello,

You can use your inspector tool to get the specific page class (or better id), for this you have to right click and select inspect, inspector too or else (depends from your navigator), see my screenshot :



Hope this will help you.
Regards

That helps...I think...

In the attached images, which of the the highlighted area is the one I need to list?

Image 1


Or would it be...

Image 2



Number 1 correct? If so (or if it is Image 2)...what is the ID? I don't see anything specifically stating an ID. Sorry...I'm still rather new at this, and Coding is definitely not something I'm great at yet.

Hello,

I will suggest you to use this Id :



This Id will be present only on this HikaShop page, and so your custom css will be only apply in this area.
Regards

Ok...so I put this in the custom CSS and it isn't working. What am I not understanding?

Hello,

Basis of CSS rule :
Regards,

Jerome, I'm sorry, but I don't know what any of that means. Can you please elaborate and help me get this working? Thank you

Hello,

First you can have a look on this Css reference .

From the code you have provided, your selector aim the container, and not directly the concerned html element, your span.
By example :

.page_id .container_class .html_element_class {
// Your Css command
}

Hope this will help you.
Regards

Philip wrote: Hello,

First you can have a look on this Css reference .

From the code you have provided, your selector aim the container, and not directly the concerned html element, your span.
By example :

.page_id .container_class .html_element_class {
// Your Css command
}

Hope this will help you.
Regards

I'm sorry...this doesn't help me at all. I've tried all sorts of combinations and it doesn't work. I don't understand what you are showing me and I cannot seem to correlate it to the CCS Selector Reference chart you gave me. Can you please tell me what to do?

Hello,

I restart from my previous message :

.page_id .container_class .html_element_class {
// Your Css command
}

And see this image to better understand the selector with here 3 levels :



Here, with the code you target, first the page, and in this the container and finally the element in this container, and so the Css command will only apply here on the green html element.

Regards