Hi Nick,
the css doesn’t work. The image is still on the left as it was. Besides, the page keeps showing the entire articles instead of the excerpts as it was before. How do I fix that?
As I said, I am going to revert to the ‘old’ view (the one with the incorrect link), because at least it shows the page exactly as it should be.
If there is a further fix you can provide me with I’ll wait for that, then try it out.
Thanks!
Antonio
I’m writing to ask for recommendations on how to change the layout of Enfold. I would like to make these changes in a way that will enable me to be able to update the theme as new versions come out.
EASY SLIDER
– set minimum height
I am using an images that 1500 x 440px with captions. When it gets to the small mobile size, the image is scaled down to the point that it is only 115px tall. I would like to set a minimum height of 150px instead, and the image could be cropped on the right and left to accommodate this.
The reason I would like to change this is becasue 115px does not leave enough room for the captions and navigation, it’s just not tall enough.
– png overlay
I would like to be able to add a PNG overlay repeating background to some of the slides.
PORTFOLIO COLUMNS – I would like to change the number of columns used in the portfolio area to the following:
4 on widest
3 in ipad size
2 on large mobile
2 on small mobile
STORE COLUMNS – For the store, I just want to change it so that when it gets wider than an iPad size, 4 columns show in the store.
4 on widest – current is 3. needs to be 4.
3 in ipad size – current is correct.
2 on large mobile – current is correct.
2 on small mobile – current is correct.
Hi Nick , what do you mean about the artifact ?
I reinstalled wp super cache ( wasn’t aware it was deleted or might have happened when I messed up my old thematic theme before ).
I don’t want to change the header effect ( it works fine in web but in phones or tablets ) For example in the iphone 5 landscape , it repeats 20 percent of the bg size to the bottom or in the nav area.
I’m either thinking either removing the background image in mobile or fix the repeating background ?
I want to allign the logo horizontally how do i do that ?
And also the widgets don’t have padding. Can you guys point me out where I can find the codes for mobile ? So I can play around and tweak stuff.
Lastly for the transparent png effect or ” laser effect ” . It’s the effect that you see in the layer slider animation, two lines coming from left and right, top line remains and the bottom one fades away. In mobile you don’t see it happen not sure why.
Hi Rob & Adrian,
Alright. I got it working. Took me 20 minutes. Not gonna hustle you, since my World of Warcraft guild-master said it may lower my defensive spells and I need those. ;)
Please open up gallery.php and find line 173 that looks like this
$prev = wp_get_attachment_image_src($attachment->ID, $preview_size);
and now find line (not sure which one) but probably 191 that looks like
//generate thumb width based on columns
Delete everything *between* those two lines above (or better yet comment it out) but leave the two lines themselves intact .
Paste the code below in between 173 and 191? without harming those 2 lines.
$caption = trim($attachment->post_excerpt) ? wptexturize($attachment->post_excerpt) : "";
//$tooltip = $caption ? "data-avia-tooltip='".$caption."'" : "";
$alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
$alt = !empty($alt) ? esc_attr($alt) : '';
$title = trim($attachment->post_title) ? esc_attr($attachment->post_title) : "";
$description = trim($attachment->post_content) ? esc_attr($attachment->post_content) : "";
$tooltip = "data-avia-tooltip='".$title."'";
if($style == "big_thumb" && $first)
{
$output .= "<a class='avia-gallery-big fakeLightbox $imagelink' href='".$link[0]."' data-onclick='1' title='".$description."' ><span class='avia-gallery-big-inner'>";
$output .= " <img src='".$prev[0]."' title='".$title."' alt='".$alt."' />";
if($caption)
{
$output .= " <span class='avia-gallery-caption>{$title}</span>'";
} else {
$output .= " <span class='avia-gallery-caption>{$title}</span>'";
}
$output .= "</span></a>";
}
if ($caption) {
$thumbs .= " <a href='".$caption."' data-rel='gallery-".self::$gallery."' data-prev-img='".$prev[0]."' {$class} data-onclick='{$counter}' title='".$description."' ><img {$tooltip} src='".$img[0]."' title='".$title."' alt='".$alt."' /></a>";
$first = false;
} else {
$thumbs .= " <a href='".$link[0]."' data-rel='gallery-".self::$gallery."' data-prev-img='".$prev[0]."' {$class} data-onclick='{$counter}' title='".$description."' ><img {$tooltip} src='".$img[0]."' title='".$title."' alt='".$alt."' /></a>";
$first = false;
}
}
$output .= "<div class='avia-gallery-thumb'>{$thumbs}</div>";
$output .= "</div>";
Add the url to the caption in this format for videos (vimeo ok too)
http://www.youtube.com/watch?v=W0MBzxFHOyo
leave caption blank for normal images.
and add the caption itself (the words that display in the tooltip) in the title tag of the images. ( http://i.imgur.com/V1dW0zm.png ) In the alt text below the title tag (see previous image) you can enter a title i guess that will float above to the left of the lightbox
The End.
Thanks,
:)
Nick
Hi,
You are correct. Blog link is pointing where its supposed to. Nice. You can use this css to center your images
#top .fullsize .template-blog .big-preview.multi-big {
width: 50% !important;
margin-right:auto;
margin-left:auto;
}
Thanks,
Nick
Ya, I am in SE Asia on the beach with a beer and a laptop
Hi Nick,
it was the first one you mentioned which was not set correctly! In the Enfold > Theme Options I had not selected any page in the Blog section. Now that I set “Blog” each first image in each post appearing on the main blog page is no longer centered, as it was nicely before with the nice author circular thumbnail appearing below. Now the image is on the left. How do I make them centered again all of them?
Besides, there is again something that I don’t seem to understand: if I select the Blog page in the Enfold > Theme Options as per your screenshots, now the page shows again not just the list of blogposts with the excerpt as it was before (which is exactly what I wanted). It shows each article complete, one after the other, and without any possibility to add comments. I just simply want it to revert to the way it was before, so I guess I will “unselect” the Blog page in the Enfold > Theme Options, because I am currently getting a few visitors to the site and I don’t want to mess up too much!
I’ll wait for your advice on how to fix the image and excerpts displaying as you will see them now that I will again “deselect” the Blog page option, rather than on the left (the image) and the full articles on such page.
Thanks for your awesome help!
Antonio
Thanks for the interim solution! Can I change what the post slider image links to? Or does it have to go to the post itself always?
Appreciate it!
Might be a little confusing because the description talks about preview images but actually means the grid images, not the ajax preview. WIll rename that and add a filter to the size, since I dont want to add yet another option to the grid element.
Lets keep it simple for the average user ;D
Hey Guys! Just worked out a solution for this. Since this is very random and seems to be connected to the fact that it only appears when a slideshow is used on the same page I am not sure if the solution I used will fix the problem for everyone.
The next update will include the bugfix (will be released during the next few days). If you still encounter any issues please open up a new thread then ;)
But for the majority of you the problem should be gone and it should work fine on all desktop browsers. As for fixed images on iOS: still havent seen a site that was able to pull this off, also the demos linked here that claim to work on iOS dont work for me…
Perfect Ismael,
The width helped. Thank You sooo much for your help ^.^
Best Regards,
jasmine
Hey Nick,
your tip on the size of my images in the blog is absolutely outstanding! THANK YOU SO MUCH!
It looks way better now! If I were to make the images slightly bigger would it be possible? Should I just change the max width say to 450px?
For the “Blog-Latest News” how do I make it to redirect to the blog main page instead of my site’s homepage? It’s something I should definitely change. If someone wants to get back to the general blog while reading a single post and they click on the “Blog-Latest News” they’ll get to the homepage instead of the main Blog page.
Any clue?
Awesome help, thank you so much!
Antonio
How do I do this? I have a 114×114 image created but I don’t know where to install it. As a favicon?
Hi,
If you want your images to be not so much blown up on the blog page. http://vacationrentalsecrets.com/blog/ Because some of your images you upload at 400px width and they get stretched out and become blurry. http://www.clipular.com/c?7530087=NjKFX29L_zQPxqkzE2m1jJz7mFE&f=.png Up to you.
#top .fullsize .template-blog .big-preview.multi-big a, .fullsize div .template-blog .big-preview.multi-big a img {
max-width: 400px;
}
“Blog – Latest News” can be accessed on line number 9 of single.php in root folder of the website:
$title = __('Blog - Latest News', 'avia_framework'); //default blog title
Thanks,
Nick
Hi,
The side images doesn’t shrink. Actually, the code increased the size of the one_half column then decrease the left margin, so technically the red shoes is much bigger.
.page-id-1668 .av_one_half {
margin-left: 0.0001%;
margin-right: -3%;
width: 50%;
}
This code decrease the left margin of one_fourth column, I will add the code to make them bigger.
.page-id-1668 .av_one_fourth {
margin-left: 3%;
width: 23.5%;
}
This code makes sure that the first column has no left margin
.page-id-1668 .av_one_fourth.first {
margin-left: 0;
}
This code to decrease the top padding
.page-id-1668 .template-page.content.twelve.alpha.units {
padding-top: 10px;
}
Regards,
Ismael
Hello,
Please add this on your custom.css or Quick CSS
.attachment-square.wp-post-image {
width: 100% !important;
height: 100% !important;
}
Regards,
Ismael
Why would my content be overlapping in mobile view: http://cl.ly/image/3O0A100n2B25
hmtl
<p style=”text-align: center;”><span style=”color: #333; font-family: ‘League Gothic’, auto; font-size: 50px;”>Example Content</span></p>
<p style=”text-align: center;”><span style=”color: #333; font-family: ‘League Gothic’, auto; font-size: 30px;”>Example Content More Content</span></p>
All is fine on computer, tablet.?
Thanks Ismael,
this worked perfectly only one thing the side images shrink see this screenshot the green arrow in the middle shows the Red shoes image stays the same size while the side images shrink in size (top image is as in dashboard original size and bottom is on live website)
* screenshot: http://demo.globalads24.com/wp-content/uploads/2013/06/Screen-Shot-2013-06-15-at-11.24.04-AM-2.jpg
so i need the images to stay the same size as in dashboard and the margins to be on left and right of the page aligned to left and right and middle image to stay aligned in the center. Would this be possible?
i adjusted some numbers below is the css code as i have it now and here is a live page http://www.omglovetwins.com/a-magento
.page-id-1668 .av_one_half {
margin-left: 0.0001%;
margin-right: -3%;
width: 50%;
}
.page-id-1668 .av_one_fourth {
margin-left: 3%;
}
.page-id-1668 .av_one_fourth.first {
margin-left: 0;
}
.page-id-1668 .template-page.content.twelve.alpha.units {
padding-top: 10px;
}
PS. and thanks for pointing out about .page-id-1668 as this is just a test site i made a mistake was suppose to upload to a demo one as this website will be for our music and film so will be deleting it as soon as we finish testing for woocomerce :-)
Regards,
jasmine
Hello, not only Opera and XP – look at Enfold Theme in IE8 – glyphs problem and navigation icons as well http://www.eurokreator.eu/images/enfold-IE8.jpg. Tested on windows 7. Maybe You try to find any solution. I understand the statistic argument, but in Poland we have today 5,8% Opera and 5,7% IE8 users. Regards
We’ll probably add a content slider to the layout builder – I can’t promise that it will be in the next update though. For now you can only use the post slider – eg create a post for each logo, assign it to a “logo” category and set the logo as featured image. Then create a post slider element and select the “logo” category for it.
Hi,
Try this on your custom.css or Quick CSS
.page-id-1668 .av_one_half {
margin-left: 3%;
width: 50%;
}
.page-id-1668 .av_one_fourth {
margin-left: 3%;
}
.page-id-1668 .av_one_fourth.first {
margin-left: 0;
}
.page-id-1668 .template-page.content.twelve.alpha.units {
padding-top: 20px;
}
.page-id-1668 is the unique id of the link you us. You can remove it if you want to apply the style throughout the site.
Regards,
Ismael
Hi,
Open header.php then find this code on line 104
$phone = avia_get_option('phone');
$phone_class = !empty($nav) ? "with_nav" : "";
if($phone) echo "<div class='phone-info {$phone_class}'><span>{$phone}</span></div>";
Cut it then place it below this code on line 135
echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png', false, 'strong');
Then add this on your custom.css or Quick CSS
.social_header .phone-info {
float: right;
margin-top: 40px;
margin-right: 120px;
}
#header_meta {
display: none;
}
Regards,
Ismael
Hi,
1.) I suggest to use the same dimension for your images, I mean the same size. The alignment of the image depends on the left padding, it will be different for images with different width.
2.) To fix the blog grid image, please add this on your custom.css or Quick CSS
.attachment-portfolio.wp-post-image {
width: 100%;
}
3.) For the logo, use this
.logo a img {
width: 350px;
height: 77px;
max-height: 77px;
max-width: 350px;
}
Good thing you have a non-fixed header. :)
Regards,
Ismael
Hello,
I would like my thumbnails all to be in the square format. currenty it is not cropping and just resized. so if the image is not square there is a grey space on the bottom.

Is there a way to fix this?
What do you want to edit? Background color , text etc ? Go to theme options > styling > underneath you can see , header , footer , main content etc. There’s an option there to edit the css, as well as add background images.
There are a few ways you can go about doing that, I have had good results by combining these two solutions
Try changing your switchwidth to a higher number so it changes to the mobile menu before it overlaps
https://kriesi.at/support/topic/making-the-responsive-dropdown-menu-appear-at-larger-resolutions
Near the bottom (Post 6)
https://kriesi.at/support/topic/header-image-2
I’m looking to remove the space/padding above and below the slider on the home page. Not sure what code to edit to accomplish this.
I’d like the bottom of the menu to align right up against the top of the slider and stay there, so there’s no white space like there is now. I’d like the same to happen right below the slider.
Also, anyone know why it looks like there’s 1 or 2 pixels added to the bottom of the slider image after scrolling (except towards the edges of the image)?
Here’s the site:
http://goo.gl/wRAKy
Thanks!
I have added a picture to help add some clarity. See top right for example.
http://postimg.org/image/6vtkfgzwh/
Hi Team,
Is it possible to make the space around images smaller (where the blue is in screenshot below) and make the size like it is between side images with the green arrow where it says “perfect”
* here is a screenshot http://www.omglovetwins.com/wp-content/uploads/2013/06/Screen-Shot-2013-06-14-at-7.24.04-PM-1.jpg
* live site http://www.omglovetwins.com/a-magento
Thanks,
jasmine
Hi Chrysies,
The footer background image is that way because its set to fixed center center. What it should be is just set to repeat:
.footer_color {
background: #021d31 url(https://www.calliframe.com/wp-content/themes/enfold/images/background-images/grunge-big-light.png) repeat;
}
The same for your navigation:
.header_color .header_bg {
background: #f8f8f8 url(https://www.calliframe.com/wp-content/uploads/2013/06/snow.png) repeat;
}
#2 – The slider adjusts after the next slide gets drawn so there will be delay when moving from portrait to landscape. The responsive change however i’m not getting the same issue. What ipad version are you working with? The retina display on mine tends to be a bit different from ipad3 or before.
1.6 is currently available from your downloads on themeforest.
Regards,
Devin
I’m not really sure what I’m doing wrong, but my featured image on my blog posts isn’t looking right. It is only showing a portion of the image in a tall rectangle. I have tried to find a place to fix this, but am not seeing it. Here is an example: http://www.payhbikeride.com/2013/06/12/training-has-begun-2013/