-
Posts
-
Hello, been using Enfold for quite sometime now and still very happy with it. But now I have 2 questions / issues.
1. How can we achieve a blog page where the blog preview text has a white background, equal width to the blog image above. So like here: https://kriesi.at/themes/enfold/blog/ but with for example a grey page background, with a blog preview text background in white (padded).
2. When we edit icon shortcodes in a widget and add _blank to a link, the icon dissapears. This only seems to work when target is set to linktarget=’’.
Thanks!
Hi PresentIT,
I have checked the shortcode you used and it worked fine on my end but surprisingly it’s the linkedin icon is not working when linktarget is set to _blank on your site.
The facebook icon works fine on your site even when linktarget is set to _blank.Best regards,
NikkoI’ve just tested the LinkedIn icon on another website too, with different hosting and that also dissapears with link blank. Please provide a solution.
Hi PresentIT,
I apologize for not being able to come up with a solution yet.
It’s a weird issue since the code for facebook and linkedin are the same, also in my local server it does work fine even if linkedin’s linktarget is set to blank.
As for your other website, is it on the same hosting?Best regards,
NikkoHi PresentIT,
I apologize for that :(
Can you tell us what PHP version is used on that other site?
Seem’s really weird, the Linkedin icon works fine on your site until it’s passed on the widget and data-av_icon is lost in the process but seems to be works properly on my local installation.Best regards,
NikkoI don’t know, probably 7.1 or 7.3. Can you also respond to issue 1?
1. How can we achieve a blog page where the blog preview text has a white background, equal width to the blog image above. So like here: https://kriesi.at/themes/enfold/blog/ but with for example a grey page background, with a blog preview text background in white (padded).
Hi PresentIT,
I apologize for forgetting to answer issue #1, try adding this CSS code in Quick CSS, located in Enfold > General Styling:
.page-id-945 #main .main_color { background-color: #f0f0f0; } .page-id-945 #main .main_color .container { background-color: white; }Best regards,
NikkoHi Nikko,
That’s not what I mean. If you look at homepage, you see a collection of blogs. We would like the background of the preview text white. Just like ‘over ons’ banner at the right side of the blogs.
Thank you.
Hi PresentIT,
I see, can you try to add this CSS code instead:
.home .av-alb-blogposts.template-blog { background-color: white; padding: 30px; }Best regards,
NikkoHi PresentIT,
Thanks for providing the screenshot, this CSS code should help achieve it:
.home .av-alb-blogposts.template-blog article.post-entry { background-color: white; margin-bottom: 40px; } .home .av-alb-blogposts.template-blog article.post-entry .entry-content-wrapper { padding: 0 30px 24px; } .home .av-alb-blogposts.template-blog article.post-entry .post_delimiter { display: none; }Best regards,
NikkoHi PresentIT,
Please regenerate the shortcode and add it to the widget.
If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria, I’ve tried that already and just now again. This does not work. I’ve added the schortcode in the footer widget and the icon is not displayed when the link is set to blank.
Also: how can I vertical align the footer widget content?
Hi PresentIT,
Please update to Enfold 4.7.3 and see if the issue persists.
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (min-width:1024px) { #custom_html-3 .textwidget { margin: 0.85em 0; } }If you need further assistance please let us know.
Best regards,
VictoriaHi Nikko,
With your help we achieved the grey page background with the blog excerpt with white background. I expected the CSS to also work for an indivual blog page, but that is not the case. How can we get a blog post to look the same as the archive page?
Hi,
Thank you for the update.
Try to add this css code to apply a white background behind the entry content, and padding around it.
.single .template-blog .post .entry-content-wrapper { background: #ffffff; padding: 30px; margin-top: -10px; margin-right: 50px; }Best regards,
IsmaelHi Ismael,
Thank you, but for some reason the text field is now not straight below the image (see link below).
I’m also wondering how these changes will all look on mobile.Hi,
Can you provide a screenshot of the alignment issue? We added padding or spaces around the text so it won’t necessarily align with the image. And for mobile, you can use this css code..
@media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ .single .template-blog .post .entry-content-wrapper { margin-right: 0; } .single .template-blog .big-preview.single-big { padding: 0; } }.. to make it look like this.
Screenshot: https://imgur.com/a/Oisai0o
Best regards,
IsmaelI’ve added a link to the specific page in my previous message. Logins in Private content.
http://empforce.nl/2020/02/11/website-empforce-live/Hi,
Did you try the css code or media query above? It should adjust the style of the single post page on mobile view.
We don’t really see the alignment issue on our end. Please provide a screenshot.
Best regards,
Ismael
- You must be logged in to reply to this topic.