-
Posts
-
Hi,
We have a site that is designed quite nicely on the Enfold theme. While the fonts, styles, colors, and all design elements look good on the home page and other page layouts, it does not look great on the blog. Mainly, the individual blog posts are hard to read and the fonts and spacing make the article content look very different than designed in Gutenburg editor.Is there a way to visually edit the styling of the blog and posts? Can I change the template or theme even to something completely different for the blog page?
Blog page: sonderworks.com/blog
Thanks!
Hey Josh,
We can help you out with small CSS changes, though I’m not sure exactly what you are looking to change? Please post screenshots highlighting the changes you want to make.
You can only run one theme at a time in WordPress.
You can use the Layout Builder in Enfold to change the layout of your blog posts on the backend.
Best regards,
RikardHi Rikard.
Here is a screenshot of the last blog post as it is displayed currently: https://gyazo.com/410b9f5e72b36af704c1261b36119415
Here is a screenshot of the Gutenberg editor’s original design: https://gyazo.com/d2d38f18d990d20d28b77f21608ef9b0Besides the obvious font styles and colors, the spacing and margins make the Gutenberg version easier to read, and the Enfold version is very cramped and not readable.
I don’t think I can change styling like this in the Visual Builder? Seems like a CSS issue…
Hi jgmediasol,
You have a dark website in general and so the blog is following the general css ruled set for the website. Do you want you blog pages have a white background and different looks?
Best regards,
VictoriaHi,
Yes, it’s a CSS “issue”. So what exactly do you want to change, the background only? Please turn off your autoptimse plugin.
Best regards,
RikardI want to change fonts, styling, colors, etc. I want the blog to be more reader-friendly which is currently is not. I’m not sure what turning off “auto-optimize” plugin will do to help or change this? Where would make styling adjustments and/or change CSS to achieve the desired changes stated above?
Thanks.
Hi,
You can use a plugin like https://www.csshero.org/
which cna hlp you do such modificationsBest regards,
BasilisHey guys, thanks to @Basilis so much for referring CSS hero! I love it and it has helped me make very desirable “front-end” styling changes to this Enfold site!
I am however having a problem now on the “Services” page of our site. On the home and services pages, I was able to apply predefined “snippets” of CSS style code to each module I’ve developed. With one click I can change the styling of the heading, sub-heading and body text of each module’s content.
That is until I get to “360 Tours” section/module and below. The styling won’t change when the CSS rules are applied via CSS hero. I have tried deleting the modules and rebuilding them, and still nothing!
Please help! You can see attached screenshot. See how the heading/sub-headings and body text of “360 Tours” does not match “Floor Plans” above it? https://gyazo.com/05d989b883f0e8c09ab2c6fd9ac5e7bf
Is there a conflict of styling code? I don’t see anything in the CSS box under Enfold menu. Thanks for the help!
Hi,
Glad we could help.
Can you please provide us with Admin Details so we can login and try get it shorted out?Best regards,
BasilisHi,
Thank you for the info. I don’t know why the succeeding sections are not editable so we used this css code to apply the same csshero style for every h1 element in the “our-services” page.
#top.page-id-18 #wrap_all .av-special-heading h1.av-special-heading-tag { font-size: 20px; color: #000000; font-weight: 400; letter-spacing: 2px!important; font-family: Lato; line-height: 28px; }Best regards,
IsmaelThanks but now it’s worse. All headings have changed to the above code, even after I deleted this new css code snippet. The headings should instead match the section heading styles on the Home page, fonts and colors. Also, the main page heading “This is what we do” should be the theme’s orange.
Now I can’t change the colors or fonts on any of them.
Hi,
I just copied the css code that csshero applied to the initial headings. I also added the page id selector so it should not affect other pages. How do you want the headings to look like?
Best regards,
IsmaelIsmael,
The text styling for each item should be the same as the front page. Please see CSS below and this screenshot (taken from front page)
HEADING:
font-family:Lato;
letter-spacing:2px!important;
font-weight:300;
color:rgb(0,0,0);
font-size:24px;
.heading-2();SUB-HEADING:
font-weight:300;
font-family:Playfair Display;
line-height:23px;
font-size:20px;
margin-bottom:18px;
color:rgb(161,161,161);BODY:
font-weight:300;
font-size:16px;
.swbody();Hi,
Thanks for the update. Please try this css code.
#top.page-id-18 #wrap_all .av-special-heading h1.av-special-heading-tag { font-weight: 300; font-family: Playfair Display; line-height: 23px; font-size: 20px; margin-bottom: 18px; color: #a1a1a1; } #top.page-id-18 .av-special-heading .av-subheading p { font-size: 20px; color: #000000; font-weight: 400; letter-spacing: 2px!important; font-family: Lato; line-height: 28px; text-transform: uppercase; }We just applied the css styling of the heading and subheading from the front page.
Best regards,
Ismael
- You must be logged in to reply to this topic.