View Replies (9)

Resolved Formatting the Articles Addon

  1. Issue
  1. smouellette
    smouellette
  2. Wayne Corp
  3. Monday, 10 August 2020
Site in question is here:
https://www.roi-ally.com/index.php/en/

If you look under "Current Article" the title of the article shows up as a large header:
articlesformat.jpg

Is there a way to format this to be normal text size?

I tried adding this into custom CSS in Style:

.small {
font-size: small !important;
}

and then adding:

small

to the CSS box in General. But when I inspect it, it is being overridden.

Probably I am doing something dumb - please let me know what it is!
Attachments (1)
articlesformat.jpg articlesformat.jpg
Accepted Answer
smouellette
smouellette
Accepted Answer Pending Moderation
Hey, for anyone else that runs into this, I found the solution.

You just re-define what the header style is. In this case, I put this in the Custom Code area on the front-end:



h3 {

    font-family: 'Work Sans', sans-serif;

    font-size: medium !important;

    font-weight: 300;

}


and everything worked as expected.
  1. 2 weeks ago
  2. Wayne Corp
  3. # Permalink
Responses (9)
Ofi Khan
Ofi Khan
Accepted Answer Pending Moderation
Hello smouellette,
Thank you for your question. .small is a default class of Bootstrap 4. Please name your class something different. Then it will work.

- Best regards
  1. more than a month ago
  2. Wayne Corp
  3. # 1
smouellette
smouellette
Accepted Answer Pending Moderation
Hi Ofi - I changed it to smosmall and it still doesn't work.
  1. more than a month ago
  2. Wayne Corp
  3. # 2
Ofi Khan
Ofi Khan
Accepted Answer Pending Moderation
Please point out which part you want to change the font-size. This screenshot is of your home page.
Screenshot_91.png

- Best regards
Attachments (1)
Screenshot_91.png Screenshot_91.png
  1. more than a month ago
  2. Wayne Corp
  3. # 3
smouellette
smouellette
Accepted Answer Pending Moderation
Please point out which part you want to change the font-size. This screenshot is of your home page.
[attachment]Screenshot_91.png[/attachment]

- Best regards

The title of the article: Anything Worth Doing is Worth Doing Half-Assed

:D
  1. more than a month ago
  2. Wayne Corp
  3. # 4
Ofi Khan
Ofi Khan
Accepted Answer Pending Moderation
You can use this code to Custom CSS


#sppb-addon-1597084102503 a{

    font-size: small;

}


- Best regards
  1. more than a month ago
  2. Wayne Corp
  3. # 5
smouellette
smouellette
Accepted Answer Pending Moderation
That would change all the article titles though, right? I only want it in this one spot. I must be making an error in the custom code in the item itself. Here is a screenshot.

article2.jpg article1.jpg
Attachments (2)
article2.jpg article2.jpg
article1.jpg article1.jpg
  1. more than a month ago
  2. Wayne Corp
  3. # 6
Ofi Khan
Ofi Khan
Accepted Answer Pending Moderation
No, it is applied to the specific element. It is selected by id selector (#). In your solution, please try to paste your .smosmall CSS to Extensions -> Templates (Style) -> Your Default Template -> Template Options -> Custom Code -> Custom CSS. Then check your site.

- Best regards
  1. more than a month ago
  2. Wayne Corp
  3. # 7
smouellette
smouellette
Accepted Answer Pending Moderation
Hmm, I tried it and it didn't have an effect. In inspect it shows this:

smosmall.jpg

You can see I have the CSS in both the add-on itself and in the CSS Custom Code for the template, but it is still being overwritten by something.

It looks like it is being overwritten by the heading formatting? Maybe?
smosmall2.jpg
Attachments (2)
smosmall.jpg smosmall.jpg
smosmall2.jpg smosmall2.jpg
  1. more than a month ago
  2. Wayne Corp
  3. # 8


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.

Please publish modules in sidebar position.