-
-
I have been experimenting with folie and would like to have more control over the styles of nested content. I had hoped that selecting a nested element would provide me with the ability to set a class name or ID, but so far it seems that functionality is limited to the main rows and primary columns (aka, first column within a given row). Note that in this case, I’m not referring to inner rows.
Example situation:
- row** (class=”section-content”, id=”welcome-section”)
- primary column**
- heading (i.e. “welcome”) (width: 100%)
- inner-row
- column 1 – 1/4:
- media (for photo)
- column 2 – 3/4:
- text: welcome message
- column 1 – 1/4:
- primary column**
With that setup, I can’t find a way to apply a class name or id to the welcome message’s container….or either of the two columns created within the inner-row….etc. As far as I can tell, the only elements that allow CSS identifiers are the row and the primary column.
As a result, the only way for me to apply custom CSS to nested elements would be to use overly complicated selectors. As I’m sure you can imagine, this approach could become cumbersome quite quickly depending on the number of nested elements and their complexity.
So, I’m sort of hoping I’m just stupid and missing something.
—-
Side note: I know that (in the above example) I could simplify the selectors required by dividing the previous approach into two rows: one for the header, and one for the content. More specifically:
- row (class=”section-header”, id=”welcome-header”)
- primary-column (class/id allowed)
- heading (i.e. “welcome”)
- primary-column (class/id allowed)
- row (class=”section-content”, id=”welcome-content”)
- primary-column 1 (1/4)
- photo
- primary-column 2 (3/4)
- text: welcome message
- primary-column 1 (1/4)
This is currently the setup I’m experimenting with. Unfortunately, not all setups can be simplified/rearranged in this fashion…which is what prompted me to ask about this here.
—-
I hope I am putting this question in the correct place. If I’m not, please let me know and I’ll do my best to correct it. I almost posted to the specular forum since the “ask for support” link in the right sidebar automatically forwards to that forum =P
Thanks.
- row** (class=”section-content”, id=”welcome-section”)
-
Hello,
Yes, the topic is in the right forum :)
You can add a extra class to every column. Please see this example:
Back-end screenshot: https://postimg.org/image/jnoy4o03p/
Front-end screenshot: https://postimg.org/image/51xxgf3b9/Let us know if this is what you needed.
Best regards!
-
I was already aware of the above setup and so far I’ve been able to rearrange some of the content so that it works (although it is somewhat counter intuitive). My main issue is the lack of control over nested elements. I don’t understand why it doesn’t support specifying custom classes and/or an ID for each element. If needed, I can provide screenshots.
Basic example:
- Create a new page and add a row (which automatically adds a column).
We’ll pretend this has an id of: “welcome” - To that column, add a “custom heading”.
- Below the heading, add an “inner row”. Divide that inner row into 2 columns. (1/4, 3/4)
- In “inner column 1”: add a text element (short paragraph)
- In “inner column 1”: add a second text element (short paragraph)
- In “inner column 2”: add a text element (long paragraph).
- In “inner column 2”: add a media element with a photo
- In “inner column 2”: add another text element
Let’s pretend this is an author bio. So, we’ll give this a class “author-bio”Example: How do I modify this element (#8)? What if the image (#7) is removed (or moved to another location?)? What if something is added? There are quite a few things that could happen that would make nth-child() and nth-of-type() selectors fail. etc. To make matters worse, the closest parent element with a meaningful identifier is the top level column…meaning that I’d have to start my selectors from there. I don’t know about you, but I would much rather say:
#welcome .author-bio {}
Then some crazy series of order-reliant selectors.
In summary: How do you target the individual text elements? Inner rows and columns don’t support classes or and ID…and I have no idea why. In fact, I have no idea why any html element wouldn’t support the addition of classes or an ID. I really like the way folie has finally made the customization interface actually function the way I thought it always should…but given its limitations, I’m probably going to be forced to use something along the lines of visual composer instead (or at least a combination of the two for now).
—–
A few other issues that prompted me to want custom classes/etc:
1. why is it that the “custom typography” option in the customization interface doesn’t let you specify the font-family? That seems like it would be one of the most important aspects to “custom typography”.
2. when you specify the “body typography” under “styling” (aka global styles), you provide a text box for both font-size and line-height. Why is it that the “custom typography” section uses sliders? And even worse, why does the line-height option have a minimum value of 20px while the font-size has a minimum value of 14px? This seems a bit…silly.
- Create a new page and add a row (which automatically adds a column).
-
Hello,
Sorry for the late reply.
Yes, the inner rows do not have id’s. You can easy create the scenario above, but instead of the inner row, add a new row and add the texts and media. Assign id to the row and inner columns.
Then customize them using custom css by targeting the additional css classes you set up.
Sorry but this is the structure of theme. Theme is a combination of php, html, js, AngularJs, JSON etc. Not plain strait html that you could add randomly id’s wherever you want them.1-You can change the type of typography of the custom headings. Just go to the element’s options > Title Typography > Custom Font (select this option from the drop-down), then the font settings will unfold. Chose the font you want to use here. See screenshot of the option: https://www.clipular.com/c/6252371415138304.png?k=qQUocb5OUlhMwW85Be4UhsIhZOA
2-That’s a choice of the developers. It’s theme’s style. I am sorry it’s not to your liking, but that doesn’t make it wrong or silly.
The values, 14px for the font and 20px for line height are the default values (and minimal for Headings) for 90% of available themes online now. Making them smaller, would result in an very hard to read text.
However, if you think this is not correct, you can suggest the changes in our “Suggest us features” forum. We are constantly improving theme and adding new features to it. Any suggestion is welcomed!
Let us know.Best regards!
-
You must be logged in to reply to this topic.