css

Phoca Cart - complex e-commerce extension
User avatar
jrjr
Phoca Professional
Phoca Professional
Posts: 114
Joined: 30 Nov 2018, 23:56

css

Post by jrjr »

Not sure if this is a cart issue or a template issue.
Using Phoca Cart and Phoca Premiere.
I see no way to change the font color for the items outlined in red.
Nothing under styles affects these words.
It seems to be set in compiled file premiere_17.css

Code: Select all

#g-header a {

    color: #fff;

}
Other styling issues too but for a later date :D
Image

Tags:
christine
Phoca Hero
Phoca Hero
Posts: 2734
Joined: 28 Nov 2010, 17:20

Re: css

Post by christine »

Hi jrjr,

I put it temporary

Code: Select all

/*2a50ffb2ad9767370cf3bb51c8b9139e*/
#g-header a {
    color: #222;
 }
and it works. You should have a custom.css.
Above 1.st line comes from custom_17.css

Kind regards
Christine
User avatar
jrjr
Phoca Professional
Phoca Professional
Posts: 114
Joined: 30 Nov 2018, 23:56

Re: css

Post by jrjr »

I had to place

Code: Select all

#g-header a {
    color: #222;
 }
in
custom_16
and
custom_17
to cover both outlines but it works
Trouble is when I click recompile css it is all erased.
Is there a file I can add my custom css to that will not get erased?
christine
Phoca Hero
Phoca Hero
Posts: 2734
Joined: 28 Nov 2010, 17:20

Re: css

Post by christine »

Hi,

Usually for a gantry template you should do it in this way: http://docs.gantry.org/gantry5/tutorial ... tyle-sheet
After entering/adding codes into the custom.scss, it will be compiled.
In connecting with phoca template, I don't know. Check, if you can create a custom.scss.

Kind regards
Christine
User avatar
jrjr
Phoca Professional
Phoca Professional
Posts: 114
Joined: 30 Nov 2018, 23:56

Re: css

Post by jrjr »

I tried the code in custom.scss but it only affects the home outline
I made a copy of the home outline and named it 'other pages' which I use for everything except for the home page.
For instance,

Code: Select all

#g-header a {
    color: #222;
 }
changes the cart font color on the home page cart but not on other pages even after compiling

Edit.... I had to compile for each outline then it works.
User avatar
jrjr
Phoca Professional
Phoca Professional
Posts: 114
Joined: 30 Nov 2018, 23:56

Re: css

Post by jrjr »

Here's another question-
What is the button name for the hover state of the navigation buttons in the cart products, such as...
In a product there is a button with back arrow to take you back to categories.

I can change the off color but haven't been able to find the hover name.
I have this so far in my custom.scss but none affect the hover state.

Code: Select all

#g-header a {
    color: #222;
 }

.btn-success {
    background: #c69e75;
    border-color: #c69e75;
}

#g-showcase a {
    color: #000000;
}

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

.btn-default {
    background: #A3601B;
    border-color: #A3601B;
  }
christine
Phoca Hero
Phoca Hero
Posts: 2734
Joined: 28 Nov 2010, 17:20

Re: css

Post by christine »

Hi,
about: home-outline, see here: https://www.phoca.cz/documents/116-phoc ... 5-template

Concerning hover, try this:

Code: Select all

.btn-default:hover {
background:#a3601b;
color:#fff !important;  
}
Kind regards
Christine
User avatar
jrjr
Phoca Professional
Phoca Professional
Posts: 114
Joined: 30 Nov 2018, 23:56

Re: css

Post by jrjr »

I've seen that link before

.btn-default:hover worked, thanks. I did discover a third button state in the product nav. Once successfully clicking a nav button it momentarily changes to the original purplish state before page change. I appreciate the help!
christine
Phoca Hero
Phoca Hero
Posts: 2734
Joined: 28 Nov 2010, 17:20

Re: css

Post by christine »

Hi,

fine, that it worked. Which "third button" resp. "nav button" do you mean? There are so many :-)

Kind regards
Christine
User avatar
jrjr
Phoca Professional
Phoca Professional
Posts: 114
Joined: 30 Nov 2018, 23:56

Re: css

Post by jrjr »

Its the same one that this works on

Code: Select all

.btn-default:hover {
background:#a3601b;
color:#fff !important;  
}
Post Reply