Jump to content

Recommended Posts

Hello all

 

I have an addon domain with a new install of Phoenix, (13.08.2020) as a test site, with just one product, (so far).

This is a clean install apart from the addon JcM Color Tweak Headder Tags, V1.1, by Zahid (JcMagpie, who sadly succumbed to Covid, and is longer with us, he will be sorely missed).

 

I have been playing around with the settings and as you can see from the attachedUntitled.thumb.jpg.78be6a0df9e38249fee23291caf02415.jpg screen shot, I have been able to change many of the colours in the header, footer and categories buttons thanks to the above addon, except the actual categories heading!  Top left red circle.

 

I have used Google developer tools to find what I think is the code responsible for the appearance and found 

 

.card-header {

1.      background-color: #dfe3ee;

2.      background-image: url() !important;

3.      color: #297bfe;

}

 

I didn’t know what to do next so I copied this code into my user.css and changed the colours to what I needed, but this did not work!

When I examined the developer tools again, as well as the above code, below it I find my new code and colours, but this text has a line through it!

 

.card-header {

1.      background-color: #F1DEAC;

2.      /* background-image: url() !important; */

3.      color: #12343B;

}

 

Can anyone throw me a lifeline?

 

How can I use the developer tools find the correct code to change the above red circled areas?

Or am I going about this the wrong way?

 

Any assistance will be greatly appreciated.

 

TIA Shaun 

Untitled.jpg

Share this post


Link to post
Share on other sites
9 minutes ago, RAC said:

When I examined the developer tools again, as well as the above code, below it I find my new code and colours, but this text has a line through it!

 

.card-header {

1.      background-color: #F1DEAC;

2.      /* background-image: url() !important; */

3.      color: #12343B;

}

 

Can anyone throw me a lifeline?

This suggests to me that something is loaded after user.css, overriding it.  I would try to confirm this by looking at your site, but you have it password protected. 


Always back up before making changes.

Share this post


Link to post
Share on other sites

Thank you for your reply @ecartz I have removed the shop side password now.

How can I find out what is being loaded after the user.css?

Share this post


Link to post
Share on other sites

Oh it seems that @burt has moved my post!

Although I am not a paid member of the Phoenix club, I still have signed up and I have questions about my Phoenix install.

Your derogatory comments about a member that is no longer with us is totally out of order! 

Share this post


Link to post
Share on other sites

There were no derogatory comments.  Support for JCM addons is not available in the Club.

Wind your neck in.


Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites
30 minutes ago, RAC said:

How can I find out what is being loaded after the user.css?

If you view the page source, it shows

<style>
      
      .navbar-header  {
    background-color: #12343B ;
    background-image: url() !important;
    color: #EFCA64 ;
} 

.navbar-light .navbar-nav .nav-link {
    /*background-image: url() !important;*/
    color: #EFCA64;
}
.bg-light {
    background-color: #12343B !important;
    background-image: url() !important;
    color: #EFCA64 ;
} 

.navbar-light .navbar-brand {
    color: #EFCA64 ;
}
.breadcrumb {
    background-color: #C5CCCB ; 
    
}   
.breadcrumb a {
      color:#12343B !important;
}
.alert-info  {
    background-color: #F1DEAC ; 
    color:#3b5998 ;
    border-color: #F1DEAC;
}   
.card-header {
    background-color: #dfe3ee ; 
    background-image: url() !important;
    color: #297bfe ; 
}

.card-body {
    background-color: #fff ; 
    color: #297bfe ; 
}

.card-footer {
    background-color: #dfe3ee ; 
    color: #297bfe ; 
}

.btn-view {
    
    background-color: #dfe3ee ; 
    color: #297bfe ; 
    border-color:#dfe3ee ;
    
}

.btn-view:hover {
    background-color: #8b9dc3 ; 
    color: #fff ; 
    border-color:#8b9dc3 ;
    
}



.btn-success {
    background-color: #3b5998 ; 
    color: #fff ; 
    border-color:#3b5998 ;
}

.btn-success:hover {
    background-color: #dfe3ee ; 
    color: #3b5998 ; 
    border-color:#dfe3ee ;
}

.btn-secondary {
    background-color:  ; 
    color:  ; 
    border-color: ;
}

.btn-secondary:hover {
    background-color:  ; 
    color:  ; 
    border-color: ;
}

.btn-primary {
    background-color:  ; 
    color:  ; 
    border-color: ;
}

.btn-primary:hover {
    background-color:  ; 
    color:  ; 
    border-color: ;
}

.btn-danger {
    background-color:  ; 
    color:  ; 
    border-color: ;
}

.btn-danger:hover {
    background-color:  ; 
    color:  ; 
    border-color: ;
}

.btn-warning {
    background-color:  ; 
    color:  ; 
    border-color: ;
}

.btn-warning:hover {
    background-color:  ; 
    color:  ; 
    border-color: ;
}

.btn-info {
    background-color: #EFCA64 ; 
    color: #12343B ; 
    border-color:#EFCA64 ;
}

.btn-info:hover {
    background-color: #F1DEAC ; 
    color: #12343B ; 
    border-color:#F1DEAC ;
}

.bm-categories .list-group-item{
    background-color: #EFCA64 ; 
    color: #12343B;
}

.bm-categories .list-group-item:hover {
    background-color:#F1DEAC ; 
    color: #12343B;
}
.bm-best-sellers .list-group-item{
    background-color:  ; 
    color: ;
}

.bm-best-sellers .list-group-item:hover {
    background-color: ; 
    color: ;
}



.jumbotron {
    background-color: #f7f7f7 ; 
    background-image: url() !important;
    color: #EFCA64;
}

.footer a, h4 {
     
    color: #EFCA64;
}

.footer-extra  {
    background-color: #EFCA64 ; 
    background-image: url() !important;
    
    color: #12343B !important;
}   
</style>

Note that that includes CSS for card-body, which is what you're trying to change.  That's not core, so it most likely comes from the App that you installed.  You can either remove it and pursue supported paths or try to get support from other users of the App in its support thread. 


Always back up before making changes.

Share this post


Link to post
Share on other sites

Ah there we go, this comment is much better, this now is certainly not derogatory.

"Wind your neck in", HaHa thats funny.

Share this post


Link to post
Share on other sites

Hello Shaun,

The problem with changing the style of the site, and as a result - the template is in the core.

The first thing that was done was changed the file name to user.css
In recent releases, the file has been moved from includes / template_top.php and template_top.php has been hidden away and is constantly being modified. This is the second trick.

After that, we started creating templates. This is an old dream of the guys. The style file was hidden even further and linked to templates. Nobody has seen new templates yet, but work is underway.

What needs to be done to make your style appear on the screen?

A little trick from me. The link to your stylesheet should be located above the links to other styles. You can do it like this:
Correcting the file:  templates\default\includes\hooks\shop\siteWide\bootStrap.php

<?php
/*
$Id$
osCommerce, Open Source E-Commerce Solutions
http://www.oscommerce.com
Copyright (c) 2020 osCommerce
Released under the GNU General Public License
*/

class hook_shop_siteWide_bootStrap {
 public $version = '4.5.3';
 public $sitestart = null;
 public $siteend = null;

function listen_injectSiteStart() {
$this->sitestart .= '<link href="user.css" rel="stylesheet">' . PHP_EOL;
$this->sitestart .= '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g==" crossorigin="anonymous" />' . PHP_EOL;
return $this->sitestart;
}
function listen_injectSiteEnd() {
$this->siteend .= '<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>' . PHP_EOL;
$this->siteend .= '<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js" integrity="sha512-8qmis31OQi6hIRgvkht0s6mCOittjMa9GMqtK9hes5iEQBQE/Ca6yGE5FsW36vyipGoWQswBj/QBm2JR086Rkw==" crossorigin="anonymous"></script>' . PHP_EOL;
return $this->siteend;
}
}

You just add the line:

  $this->sitestart .= '<link href="user.css" rel="stylesheet">' . PHP_EOL;

Now you can do whatever you want with your stylesheet and your site will process your stylesheet first, and then everything else. Now your file is user.css, the main one on the site. 😊

 


Support forum for osCommerce in russian language - from Ashkelon. Support since 2002.

Best regards,

Fredi

Share this post


Link to post
Share on other sites
2 hours ago, Fredi said:

Nobody has seen new templates yet, but work is underway. 

There are currently 2 alternative templates and no reason an owner couldn't create their own.

Share this post


Link to post
Share on other sites

Hello dear Lee!

I'm glad to see you!
We haven't communicated for a long time.
Perhaps there are 2 alternative templates in the secret vault of the Secret Club. But I don't know anything about them ...

Therefore, I have to work as I can ... I beg your pardon, my dear friend!


Support forum for osCommerce in russian language - from Ashkelon. Support since 2002.

Best regards,

Fredi

Share this post


Link to post
Share on other sites
9 hours ago, Fredi said:

Hello dear Lee!

I'm glad to see you!
We haven't communicated for a long time.
Perhaps there are 2 alternative templates in the secret vault of the Secret Club. But I don't know anything about them ...

Therefore, I have to work as I can ... I beg your pardon, my dear friend!

You don't seem very appreciative (as normal) of all the work the two core developers have done to separate and move the code to allow a simple way of creating templates and changing the look of the store. No files that are supplied in core need to be changed to create a new look or template, that is why the user.css was moved, and lots of other files were moved into the template folder. Its what people asked for and its what people got.

Anyone is free to create a template. So far I see none in the addons section so may be its not that big a deal to most or people are like always wanting someone else to do it for them.

Just to put something right. The user.css stylesheet should be the last stylesheet called as that will be the last stylesheet read and will have all the changes in which will over ride all the bootstrap styles. If its first all the changes will get changed by later called stylesheets. Altering the user.css stylesheet works as it should if you put the time into finding the correct code to add to target what you want to change, but you know that already.


REMEMBER BACKUP, BACKUP AND BACKUP

Get the latest Responsive osCommerce CE (community edition) here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
Share on other sites

Dear Steve, I am also very glad to see you!
I am very grateful to our great developers of a secret commercial product called Phoenix!
They became my PHP teachers!
I am also very grateful to you, the person who provoked me to one of the discussions, which, to the great joy of the Great Teacher, helped him joyfully expel me from the Club.
Therefore, Thank you very much to all of you!

I don't know what is being discussed in our secret club, what concepts are being developed, so I have to master Phoenix using my primitive, stupid methods. Yes. They are probably not correct, erroneous, stupid, but I have no choice without access to the secret information that is hidden in the club.

Excuse me, dear Steve!

Unfortunately, I had to move the user.css file to where I moved it so that the styles on my test site would be displayed as I needed. I guess I did everything wrong, but it works for me.

Thanks Steve for your message.


Support forum for osCommerce in russian language - from Ashkelon. Support since 2002.

Best regards,

Fredi

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×