I can’t add a classes in historystyle.css
- to give me better h4 leading (bottom of the page) for
Watercolors portrait commissions
or historic portrait T-shirts - to add a creme hover for a center buttons at top.
You’ll have to give a little more info. Why can’t you add a class? What are you trying that isn’t working?
1 Like
I’ve tried various combinations in historystyle.css
Watercolors portrait commissions
or historic portrait T-shirts on Amazon
led {
line-height: 1.5;
color: #552a2a;
}
filter=“art”>Artists
<button class=“button hollow filter-button”
.button {
hover-backround-color: #fccd79;
Sorry, still not quite getting it @kat.
You code is a mix of HTML and (partially incorrect, I think) CSS.
The led CSS looks mostly correct - it should have a dot before it because it is a class.
For the button you want
.button:hover {
backround-color: #fccd79;
}
Both should be in your stylesheet for the project.
1 Like
Neither work. Thanks for you patience.
here is the button in foundation.css
.button.hollow,.button.hollow.disabled,.button.hollow.disabled:focus,.button.hollow.disabled:hover,.button.hollow:focus,.button.hollow:hover,.button.hollow[disabled],.button.hollow[disabled]:focus,.button.hollow[disabled]:hover
background-color: transparent;
i don’t have answers for you, as i’m not familiar at all with foundation, but i do have a comment on presentation style for questions here and elsewhere. the backtick is your friend (upper left most key of the keyboard)
when quoting and inline bit of code use a single backtick to open and then one to close
it will show up like this in nice mono-spaced font for easy reading.
background-color: transparent;
if want to quote an entire section of code use tripple backticks to open and to close, like this
.button.hollow,
.button.hollow.disabled,
.button.hollow.disabled:focus,
.button.hollow.disabled:hover,
.button.hollow:focus,
.button.hollow:hover,
.button.hollow[disabled],
.button.hollow[disabled]:focus,
.button.hollow[disabled]:hover {
background-color: transparent;
}
so it will be much easier to read and find the problem, so you can get the help you need.
sorry to but in.
2 Likes
So, for the h4 styling. You need to think about what other rules are being applied to your text. Foundation has a number of rules, several of which are added to the h4 through the selector .panel h4. This has a higher specificity than your single class. So, in this case, changing it to h4.led gives it a high enough specificity because it is being loaded AFTER the foundation CSS. If it was loaded befor it would have to have a higher specificity because of the cascade.
There are two ways to handle this. First, use the developers tools to examine your page to see what actual CSS is being applied. You can open this by right clicking on the pinecone at the upper left and selecting “Inspect”.
You can see that your
.led rule is over-ruled by the .panel h4 rule sets.The second way is to use the Pinegrow Styles panel
Here, I’ve mocked up the relevant parts of your site. You can see that if we have the h4 with a class of led selected, the rule is crossed out and third on the list. It doesn’t have enough specificity to be applied. You have two choices here - either delete and recreate the rule with higher specificity, or edit the code of the selector.
To recreate, I recommend first creating the new rule so that you can copy your old rule set. With the h4 selected, click on the three dots to the right of the text box in the Style panel.
Then click on the h4 then the .led from the list of selectors, finally click on “Create”. You can see this ruleset is added at the top, indicating it will be the one that overrules any other rule-sets.You can then add your desired styling.
The other way is to directly edit the code of the existing rule. If you hover over the rule you will see a symbol appear,
</>. Click that and then change the selector to h4.led.
The same sort of thing is going on with your button - not enough specificity. change your rule to something like .button-group .button.hollow:hover {background-color: #fccd79; }. You will have to be careful with this because there are also rules for several other button states that you may need to change. Again, you can check that from either the developers tools or the Pinegrow Styles panel.
1 Like
This give me something to practice on. Totally appreciate it!
Also really like the uptick advice- `- under the escape key. If that’s not it please let me know.
1 Like
clicking the upper left pinecone takes me to the pingrow web site. Clarification please
Make sure you are right-clicking. Not sure your OS - on my mac I have it set up that if I do a two-finger click it is the same as clicking the right button on a mouse. I think ‘CTRL’-click will also work.
1 Like
Specificity - everything works!
But I don’t understand how you narrowed down to .button-group .button.hollow from
.button.hollow,.button.hollow.disabled,.button.hollow.disabled:focus,.button.hollow.disabled:hover,.button.hollow:focus,.button.hollow:hover,.button.hollow[disabled],.button.hollow[disabled]:focus,.button.hollow[disabled]:hover
Well, there are actually about 9 rules there if I count correctly. Each is separated by a comma. They are all targeting elements with the .button.hollow classes. In addition, the selectors are targeting these same elements when they have a class of .disabled, or an attribute of [disabled], or a pseudo-class of :focus, or a pseudo-class of :hover.
The CSS selector that I selected had greater specificity for only the hover state. If you need to change the styling for focus you will have to modify your selector to something like:
.button-group .button.hollow:hover, .button-group .button.hollow:focus {xxxx}
Make sense?
1 Like
1 Where is my interactions panel? 
2.I want to add an index.html page at the top level of my site. Should I create a folder and put everything in that, css, js, etc or just leave them at the top level. Lots of other items at top level.
Hi
Did you purchase the Interactions add-on? If so It looks like this:
The one to the left of the interactions panel is the TailwindsCSS classes panel. If you have bought it and not activated it go to the “Support” menu and click on “Purchase and Activate”.
You then enter your info and click “activate”.
With regards to the second question, it is developer’s choice. I like to have a “Resources” folder, with folders inside that for JS and styling.
Bob
1 Like
I’ve been watching the interactions new tutorials and thought I’d missed something. Don’t want to add anything as Pinegrow Pro is a challenge.
Your help is invaluable, Robert, and yes I will use a Resources folder.
1 Like
Hmmm, not sure of your project structure. All of your project files and folders should be in a single folder. That single folder gets opened as a project.
So for example:
My Web Page
|
L index.html
|
Lsubpage.html
|
L resources folder
|
L CSS folder
| L style.css
|
L JS folder
L scripts.js
In this example, the topmost My Web Page folder would be opened as the Project folder.
Bob
1 Like
I tried your way initially, but the top level of my site is cluttered, I’d hoped for a neater solution. Maybe I’ll start my resource folder with an i
Thanks you for the clarification.
You can structure your project in any way that is both
- Logically pleasing to you
- A structure which your end server supports.
The second is important. If your server needs you index.html exposed or in a folder is important to keep in mind.
1 Like
Is there a way to get Pinegrow to understand that resources is the project folder for index2020.html or do I have to open resources folder and index2020.html separately. Eventually the goal is to replace my index.html,
