-
AuthorPosts
-
May 1, 2019 at 9:01 am #1096087
Hi,
I’m trying to change the h1, h2 and h3 font sizes and colors in Enfold. I tried using the advanced styling panel but the changes won’t apply. Is there anything that overrides those settings?
I also looked at the style.css file in our enfold-child theme but there was nothing in there on headers. Should I look at a .css file in the enfold’s css folder? (I also copied that folder into the child-theme in case I have to make any changes.
Thanks,
RobertaMay 1, 2019 at 9:22 am #1096093First : the place of advanced styling should work. i always use quick css for this because i like to have all changings on one place.
Second : After setting up on Advanced styling – did you refresh the merged files in Enfold ( Enfold-Child / Performance / ) ?
Third : Did you cleared all cache ( The browser cache can sometimes be very persistent.)On General : The use of child-theme
A child-theme uses all settings of the parent theme and is for having not lost settings when updating the parent theme.
Most Settings (CSS) on Child-Theme are loaded after the parent theme css files – so on caskading rules the later one are the one that works ( if the rules are more or equal specific than parent rules)
there is one child-theme file ( the functions.php ) that did not overwrite parent theme but will add rules to it on general ( rules can be forced in there to overwrite ).So if there is a rule on f.e. base.css of parent theme like:
h1 { font-size: 34px; line-height: 1.1em; margin-bottom: 14px;}
it will be overwritten by child-theme css:
h1 { font-size: 40px}
but f.e. if there is a rule like :
.responsive .logo img{margin:0; }
and you have on your child-theme quick css
.logo img{margin:0; }
the first rule is more specific ( has a higher value : see here https://specificity.keegan.st/ )For Changings: Enfold got this quick css field ( on Enfold-Child / General Styling )
there you can read as description:Quick CSS
Just want to do some quick CSS changes? Enter them here, they will be applied to the theme. If you need to change major portions of the theme please use the custom.css file or the Enfold Child theme.so to overwrite use quick css ( or the advanced styling) and be more or equal specific.
If you like to show your page – we can give more help to your code on detail.
May 1, 2019 at 9:27 am #1096095Hi,
Thank you so much for your quick response and clarifying the child-theme versus the parent theme uses.
I did clear all cache several time with no avail.
Would you be able to elaborate on your second point? “After setting up on Advanced styling – did you refresh the merged files in Enfold ( Enfold-Child / Performance / )” I’m not sure I fully understand what this means.
The first thing I did is what you mentioned in step one, I used the advanced styling, looked for each header and edited it there. Nothing changes though. I sent you the credentials in my previous message in case you want to have a look. In terms of the page I’m looking at, it’s: https://myelitis.org/resources/skin-health-prevention-and-treatment-of-skin-breakdown/?message=pantheon-cleared-url-cache (it has several header types in it to see whether the changes apply).
Thank you!
May 1, 2019 at 9:31 am #1096096By the way: a lot of very specific changings here on support are little snippets that comes to child-theme functions.php
On general they can be applied via : Dashboard – Appearance – Theme Editor.
There is a list of child-theme files on the right side – click on functions.phpi always have on this file ( just add snippets here – the first line has to be untouched here ):
function admin_head_mod() { echo '<style type="text/css"> #avia_quick_css .avia_description {float: none;margin-bottom: 20px !important;padding-left: 0 !important;width: 98%} #avia_quick_css .avia_control {float: left;max-width: 98% !important;width: 98% !important} .avia_footer_links li {float: left;padding-right: 20px} .avia_footer .avia_footer_save {float: left} .avia_reset {pointer-events: none !important } </style>'; } add_action('admin_head', 'admin_head_mod');
this file maximises the quick css input field to the whole width – for me it is to narrow to use it with nice haptik
And it deactivates the Reset button – because some unexperienced users have pressed that button accidentally and lost all quick css data and enfold settings.- This reply was modified 5 years, 7 months ago by Guenni007.
May 1, 2019 at 9:37 am #1096097did you refresh the merged files in Enfold ( Enfold-Child / Performance / )” I’m not sure I fully understand what this means.
Enfold got this merging of css an js Files to increase the performance – they create a one file of all f.e. singular css files enfold got. ( base.css, layout.css, shortcodes.css, custom.css etc. pp and quick css). So if you have the settings on (Performance Tab) to build such files these where take to be active.
New entries in f.e. quick css are saved but if the field on performance setting : Delete old CSS and JS files? is not marked they have no influence on your frontend till you do that.May 1, 2019 at 9:50 am #1096100Something very peculiar just happened. The file compressionn under the performance tab was disabled for both css and js. I enabled it for both and refreshed the page. The changes that I applied in the advanced styling tab showed up on the page. I’m now trying to change the color and font again to make it what I want it to be (I previously used bright colors to make sure I was able to see the changes easily) and when I save them and refreshed the page, the changes are no longer applying. I refreshed cache and still nothing.
Any chance someone knows what might be going on?
May 1, 2019 at 9:53 am #1096101So now to the page you give me the link.
btw. : i’m participant as you – so i can not see private content messagesFirst : this h1 heading you created in a text-block element. You can do that – but enfold has that heading ALB Element to do it in a better way
There you have all the possibilities to set up the color and size and and …
click to enlarge the image:
But on that page i see that you are not using merging. So long you have changings and stylings – this is better.
i only see the base.css entry for the h1 – so if you have set h1 on your advanced styling and saved the settings they must be visibile in your code.
try in quick css field:
( you see this is more specific than the base.css rule ).avia_textblock h1 { font-size: 45px; } .avia_textblock h2 { font-size: 36px; }
May 1, 2019 at 9:59 am #1096103Thanks for sending over the special heading, that is definitely helpful! But since there are many pages we already created I wanted a quick way to change the style of the headers all at once for the entire website. I tried adding what. you sent in our quick css field and I don’t think it worked :(
May 1, 2019 at 10:32 am #1096118A quick follow up question on the special header screenshot you sent. I see that you have a “for developer ID” section and a “custom css class” section. Those do not show up in my special header window. It says I’m running the latest version (4.5.4). Any ideas why those two sections don’t show up for me?
May 3, 2019 at 5:37 pm #1096947Hi rpesce,
You can enable them in the theme options.
Here is how to do it
Best regards,
VictoriaMay 14, 2019 at 6:51 pm #1100730Thanks for letting me know!
Roberta
May 15, 2019 at 8:21 am #1100892Hi Roberta,
Thanks for the feedback. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
RikardMay 15, 2019 at 9:35 am #1100926No further help needed, thanks!
May 15, 2019 at 2:25 pm #1101062Hi,
If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon -
AuthorPosts
- The topic ‘Changing h1, h2, h3, etc in Enfold’ is closed to new replies.