Balbooa Help Center: A suggestion about Theme Text Alignment (1/1)

5 days 8 hours ago #1

Ivo
Posts: 99

First I would like to congratulate you for choosing to use "CSS Units", this is really fantastic and necessary. But another css-level thing that I always have to tweak in css is text alignment.

Think with me:
I think it would be VERY interesting if there was an option to leave the "Inherited" alignment in the Global settings. Even because the alignment can be defined in the plugin.

Ex:

<div class="align-right">
     <h1 style="text-align: right">Test</h1>
     <p style="text-align: right">My text aligned to right</p>
</div>

Whenever I create or copy an html code or use custom classes I have to make adjustments to the tags (h1, h2..., p) because the alignment is assigned directly to them, which I think is unnecessary...

5 days 3 hours ago #2

Artem Posts: 10812	Hi there, You will need to use align-right in any way since if we will set inherit for Gridbox Global text-align, styles will come from the browser styles Regards, Artem, Balbooa.com
	The administrator has disabled public write access.

4 days 9 hours ago #3

Ivo
Posts: 99

Hi Artem!

Sorry, I think you misunderstood... In the previous example I show that if I define the alignment in a parent DIV, I have to define the alignment in ALL the internal items, understand? if it were inherit I wouldn't need the "styles" in the <h1> and <p>.

Note that global settings affect the theme and not just Gridbox pages.
Recently I used a joomla component and I had to adjust all the (h1, h2, p) in the css because these elements don't receive the alignment defined in the parent div...

See, the point is to make it optional. If I want all Headers (h1, h2...) to be aligned in the center I can set them globally. But I might want to just set its style and leave the parent element's default alignment. So I only need to adjust if necessary.

If you analyze the various css frameworks (bootstrap, material, bulma...) none of them defines the global alignment of the element.

Of course it's just a suggestion, but from my experience, it would be quite helpful.

2 days 23 hours ago #4

Artem Posts: 10812	I'm sorry, but I still don't understand. Let's back to Gridbox theme settings How does its work now. Gridbox plugin text and headline inherit alignment from theme settings until you have not chosen alignment in the plugin settings. After selecting alignment in the plugin (text and headline), alignment is not inherited from theme settings. What is wrong here? Regards, Artem, Balbooa.com
	The administrator has disabled public write access.

2 days 8 hours ago #5

Ivo
Posts: 99

Ok Artem, I'll clarify more...

Important:
You are considering Theme with Grixbox plugins only. But the theme is used in any other Joomla component. I think you have to take that into account.
When the alignment is "inherit" it doesn't mean that it will use the browser's default alignment, but that it will take the alignment of the parent element. As the theme's config "forces" the alignment globally, any element that does not user the gridbox is also impacted and this is no longer possible.

What I'm trying to tell you is that if global alignment is optional, I can just set it in the plugin if needed. And it will no longer impact other components.

See this example:
It has a component that defines the right alignment for the inner elements. But as the Gridbox Theme "forces" the alignment in the <h1, h2..., p> tags, I have to adjust the css to correct the alignment.

<div style="text-align: right"> //Has no effect
    <h1>aligned text as defined in the gridbox theme</h1>
    <p>aligned text as defined in the gridbox theme</p>
    <p>aligned text as defined in the gridbox theme</p>
    <p>aligned text as defined in the gridbox theme</p>
</div>

That way I have to tweak them all in the code or create a css for it.

<div>
    <h1 style="text-align: right">right-aligned text</h1>
    <p style="text-align: right">right-aligned text</p>
    <p style="text-align: right">right-aligned text</p>
    <p style="text-align: right">right-aligned text</p>
</div>

See, by default the Gridbox Theme aligns the (h1, h2...) in the center. I usually align to the left, as it is more common in blogs, news, etc... I believe that many people do this. In that case, it would be enough to leave inherit and define only when necessary.
What needs to be clear is that any settings defined in the Theme will have a Global effect (including other components or frameworks).
I just think "alignment" should be optional as in frameworks (material, bootstrap...)
I have several other examples, but it would be too long here, and my purpose is just to leave a suggestion that would help to use the Theme with other components and frameworks...

Believe me, "Inherit" would be the most used format

Regards,
Ivo Junior