SOLVED h2 article title too big...again
-
-
- EPIC Web
- Jr. Rocketeer
- Posts: 34
- Thanks: 3
-
Hey guys!
This question comes up every so often, so I've managed to find an answer but it's not working totally.
I want to set up my blog articles to show as content on the frontpage. All is good, except the article titles on my live site homepage are humongous. Following guidance I found here, I have created an asset on my base outline which worked like a champ on my sandbox site (url in secure). It also worked on my live site except on my home page (url in secure). I've tried creating the same assets (for h1 and h2) in the home outline (specifically for my homepage), but that doesn't work either. I want the homepage of my live site to have the same look as the homepage of my sandbox. They both have the same asset which is all I've changed.
Do you have any idea what's up and why it would work in most places but not on the homepage? What setting have I changed that I'm forgetting about?
Thanks in advance for any ideas you might have. - Last Edit: 7 years 9 months ago by EPIC Web.
- Betty K.
Barely competent webdrone, but willing to learn!
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22283
- Thanks: 3227
- messin' with stuff
-
There is different CSS loading between the 2 sites... I would assume you're using a different Layout Preset (would be visible in the upper left of your Layout Manager next to the Layout name in parenthesis) on the Outline...
ultimately, you just need to be more specific on your CSS on your live site...
this CSS is winning:
.page-header h2 {
you can highlight, right click, and go to inspect in your browser... then you can see the styling that's being applied there... along with your simple h2 { selector you've made which is being superseded by .page-header h2 { because it's more specific.
google "CSS specificity" if you're curious
and get familiar with your browsers dev tools (I prefer Chrome, Moz is good too) so you can simply inspect our CSS and copy+paste it in your custom css to override/change it
Inspect HTML and CSS in real-time with Developer Tools:
developers.google.com/chrome-developer-tools/
developer.mozilla.org/en-US/docs/Tools
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- EPIC Web
- Jr. Rocketeer
- Posts: 34
- Thanks: 3
-
Thanks for the quick response, Matt!
Here's the thing. I test everything on my sandbox before I try them on the live site. So I applied the asset on the base outline as I think you suggested to another poster. Worked great. So I went to my live site and did exactly the same thing -- added an asset on my base outline, exactly the same. Didn't change the font on the home page which is on its own outline. So, I copied the same asset to the home outline. Didn't change the title fonts. I even viewed the page in another browser just in case I had a cache issue.
A poster had the same issue and the suggestion was to add page-header. So I tried that as well.
I'm going to get the developer tools and see if I can figure out why it's working the way it is. - Betty K.
Barely competent webdrone, but willing to learn!
-
-
-
- EPIC Web
- Jr. Rocketeer
- Posts: 34
- Thanks: 3
-
Update. I examined my sandbox and the live site homepage. I hadn't looked at the atoms so I looked at the css atom and the homepage was set to inherit the asset from the base outline. I removed the asset from the homepage outline and saved. Cleared gantry cache.
I went to the home outline and deleted the css atom. Created H1 and H2 titles with preferred sizes, 2.0em and 1.6em respectively. H1 displays properly in 2.0em. H2 still shows 3+em. The CSS for H1 (in the inspector) shows 2.0em. The CSS for H2 shows the 3+em.
I'd much prefer to use gantry to do these things, as I don't like to muck around with the css files. But it may be time to just bite the bullet and make a custom css sheet to do this.
I just don't like it when things don't work like they're supposed to, but only in one place. This problem is only on the homepage as far as I can tell. - Betty K.
Barely competent webdrone, but willing to learn!
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22283
- Thanks: 3227
- messin' with stuff
-
My answer remains the same... I don't see anything different from last time I looked.
Be sure and clear out the Gantry cache is you're using a custom.scss file when you make changes - SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- EPIC Web
- Jr. Rocketeer
- Posts: 34
- Thanks: 3
-
Howdy, all!
Matt, I'm still trying to find exactly where the issue is and I admit that I'm a total amateur and very dangerous. So I ask questions when I don't understand something.
You are right that the two sites (sandbox and live) are pulling css for titles from two different places:
Sandbox is pulling from: templates/rt_topaz/custom/css-compiled/topaz_27.css
Live is pulling from: templates/rt_topaz/custom/css-compiled/topaz-joomla_22.css?595c1777
That's on the homepage. Other pages from both sites are pulling from other compiled files on the live site. This appears to affect articles only and not other components like my FAQ component.
It appears to me that the topaz-joomla files on my main site are not picking up the css changes I make in Gantry. I have been clearing the Gantry cache.
Now, if I look at the topaz_27.css file (sandbox), I see (edited the color stuff for space)
line 249, templates/rt_topaz/scss/topaz-joomla/_core.scss */
.page-header h2 {
font-size: 3.8rem;
But the front page article headers look great, exactly like I want them to.
In the topaz-joomla_22 file, There are several page-header h2 entries.
Is there a way to clear the compiled files so they start fresh? Dare I suggest deleting the offending file? - Last Edit: 7 years 9 months ago by EPIC Web.
- Betty K.
Barely competent webdrone, but willing to learn!
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22283
- Thanks: 3227
- messin' with stuff
-
You can recompile css from the Styles Tab... button on right... that will flush the files in the /css-compiled/ folder and rebuild new ones from the various scss stylesheets in the template and gantry as well as any custom css you may be loading user one manner or another...
the _ID (27 and 22 here) correlates to the Outline ID... topaz_27 would be css that Topaz is loading... so I'm assuming it's the layout preset for the Outline or something on the Outline's Page Settings tab (Assets or an Atom) that's causing the difference in the css being loaded on the 2 sites
If you can't resolve it after some poking around do post admin details in the secure tab of a full reply and I'll check them out and see if I can find the cause/difference - Last Edit: 7 years 9 months ago by Matt.
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- EPIC Web
- Jr. Rocketeer
- Posts: 34
- Thanks: 3
-
Aha! I've found the reason the two pages look different.
My sandbox was set to display featured articles. The titles had a class of item-title. The live site was set to category blog and the titles had a class of page-header. When I changed the sandbox to category blog, it looks like the live site.
I finally found the recompile css button and cleared cache and got a more reasonable, though not exactly what I want. If I change the pae-header to the smaller, less weighty size I like, it'll also affect the article titles throughout the site. This appears to me to be a Joomla thing, no?
It now looks reasonable to me, so I'll mark this one solved. Thanks so much for your patience and guidance, Matt.
Once again the wizards of smart here at Rockettheme have helped me make my site more gorgeous! - Betty K.
Barely competent webdrone, but willing to learn!
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 22283
- Thanks: 3227
- messin' with stuff
-
Glad you got it resolved... as to your question... it depends where you apply the custom css... if you're using the global custom/scss/custom.scss file then yes, it'll be site wide... but if you're using the Page Settings Tab then the CSS is only applied to the pages that Outline is assigned to.
There are several ways you can add custom CSS into Gantry 5:
On the Base Outline or Per Outline Level:
Page Settings > Assets
Page Settings > Atoms
docs.gantry.org/gantry5/configure/page-settings#assets
docs.gantry.org/gantry5/configure/page-settings#custom-css-js
or at a global custom file level
[template-name]/custom/scss/custom.scss
docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet - SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
Time to create page: 0.085 seconds