On the blank page (or any individual page)…I suppose I can set the background-image via div class?
Thanks in advance.
My menu doesn’t show up in mobile (android phone).
Also, image slider doesn’t show as well.
Source: HoodandHeist.com
Thanks much
Andy
Hello,
I have 2 sections on my site (www.lchapmandesigns.com) with a “portfolio” — design & writing. I would like to either limit or remove the ability to click left and right between portfolio posts.
1. If possible, I’d like to limit the left & right tabbing only to the items that are under the same page. So when you are on “writing” you can only click left and right between the portfolio items on that page. Right now, it will take you to other portfolio items that aren’t on the writing page. Here is an image of what I mean: http://www.lchapmandesigns.com/wp-content/uploads/2013/05/Screen-Shot-2013-05-18-at-7.01.09-PM.png
2. If that ability is not possible, I’d like to remove the ability to click left & right entirely. I don’t want to do this, but if there is no way to change this, how can I turn it off?
Thank you!
Hi!
Great, I’ll ask Kriesi to add this fix to the next update. I even found a better (more efficient) solution – in avia.js replace:
if(!link.css('display') || link.css('display') == 'inline') { link.css({display:'inline-block'}); }
with
if(!link.css('display') || link.css('display') == 'inline') { link.css({display:'block'}); }
and
var link = $(this),
current = link.find('img:first'),
url = link.attr('href'),
span_class = "overlay-type-video",
opa = 0.7;
with
var link = $(this),
current = link.find('img:first'),
url = link.attr('href'),
span_class = "overlay-type-video",
opa = 0.7;
if(current.hasClass('alignleft')) link.addClass('alignleft').css({float:'left', margin:0, padding:0});
if(current.hasClass('alignright')) link.addClass('alignright').css({float:'right', margin:0, padding:0});
if(current.hasClass('aligncenter')) link.addClass('aligncenter').css({float:'none','text-align':'center', margin:0, padding:0});
The changes I posted before are not required.Imo this solution is a bit better because it takes advantage of the default wp classes.
Best regards,
Peter
How can I set the image as a featured?
Try following – in enfold/avia.js replace:
var link = $(this),
current = link.find('img:first'),
url = link.attr('href'),
span_class = "overlay-type-video",
opa = 0.7;
with:
var link = $(this),
current = link.find('img:first'),
url = link.attr('href'),
span_class = "overlay-type-video",
floatdirection = 'none',
textalign = '',
opa = 0.7;
if(current.hasClass('alignleft')) floatdirection = 'left';
if(current.hasClass('alignright')) floatdirection = 'right';
if(current.hasClass('aligncenter')) textalign = 'center';
and:
if(!link.css('display') || link.css('display') == 'inline') { link.css({display:'inline-block'}); }
with
if(!link.css('display') || link.css('display') == 'inline')
{
link.css({display:'block', float:floatdirection});
}
if(textalign != '') link.css({'text-align':textalign});
(originally posted on another topic – posting here after Peter’s message https://kriesi.at/support/topic/images-and-text-jumps-when-moused-over#post-112110 )
Hi Team,
An image uploaded via Advanced Layout Editor goes from right to left after clicked or hoovered in Firefox.
Screenshot: http://demo.globalads24.com/wp-content/uploads/2013/05/Picture26adj.jpg
Live pages:
a.) http://babyblueshelp.com
b.) http://babyblueshelp.com/baby-blues
Can this be corrected with css or it would be fixed in the next update?
thx
jasmine
No problem Peter will post a new topic.
thx
jasmine
Now I see I was searching for some perfectness we cannot reach. The images on the demo are not sharper then mine. So I shoud use what I have.
Thanks for trying to help.
Hi,
I’m sorry but I refreshed the page over and over but I can’t catch the blurriness on the images. They are exactly 227px in width.
Regards,
Ismael
Hi Devin,
I understand what you say and that is a solution for my picture size problem.
But independently from that picture problem, what if i want to have on the right of my page a 1/2 page with icon box and directly on the leftt (face to face) a team member module but not as big as a 1/2 page…Is it possible?
Kind regards.
First I wanted all my portfolio works to be 200×200 px. Now I see it’s impossible, because, as Dude said
Quote:
“Actually you can’t re-size the portfolio grid – this will probably break the layout.”
So The solution is to use 227×227 px images.
What I have done:
1) Set all sizes connected to portfolio to 227×227 via Simple Image Sizes plugin.
2) Disabled flexebility of the theme(it’s a pity I need to disable it, but having a clear portfolio images is more important)
Now I see interesting effect(here on portfolio page: http://www.zink.by/portfolio/ ): when I reload the portfolio page first time all images are shown ideal and clear, but the next second something changes. seems like browser makes them 1 pixel smaller and they all get blyrred.
I have I task close to this one: https://kriesi.at/support/topic/blurry-portfolio-item
Dut I did not understood how to solve my task…
Actually you can’t re-size the portfolio grid – this will probably break the layout. However maybe we can center the images (white space/padding on the left/right). Can you post a link to your portfolio page please?
Hello
I have already select all categories as you can see it in the image below :
http://devis-facture.com/cat.jpg
No, that’s another issue imo. You can try it but it seems like the jumping image issue is related to the display attribute (display:inline vs display:block-inline). please do not use this thread for your questions – I don’t want to mix things up.
Hi!
I tagged this thread for Ismael.
Best regards,
Peter
It would be very nice if Moderator Nick can help me – he is specializing on image problems=)
Nick – Just had a thought and wondered if I could kill two birds with one stone without having to go live…
If this doesnt help you then let me know and ill get the first few pages uploaded
Here’s my thoughts
I’ve attached a link to a set of images that outline three things
a) what I want to achieve overall with the nav (look n’ feel) as created in Photoshop
b) what I’ve achieved thus far (still missing the feint grey line we’ve discussed before)
c) whats going wrong in responsive mode
Here’s the link to the images I’ve grabbed:
http://www.clipular.com/c?6044013=M66Ac_fn-H0sYdLewieu-vVGIMA&f=eb6d72c77f6f72f1ab09eaf9b55d3d7c
so…….
two things:
1) Can you help me create the feint line still missing from the top of the nav (see image). Its 1 px deep and spans the width of my menu, its grey, should be responsive and allow the HIGHLIGHT BLOCK to travel along it. Obviously, I may add sections so it needs to adapt when I add or take away pages
2) Can you help me remove the superfluous thick line that appears in the slide out responsive menu. I don’t want it at all in this mode. I just want the menu to behave/look like yours in the demo.
Here’s the code I’m using to adapt the nag (as requested)
/* MENU BORDERS */
#top .main_menu .menu ul li:last-child>a {
border-bottom-style: solid;
border-bottom-color: #33302b;
border-bottom-width: 1px;
border-top-style: solid !important;
border-top-color: #33302b !important;
border-top-width: 1px !important;
}
#top .main_menu .menu ul li a {
border-right-style: solid;
border-right-color: #33302b;
border-right-width: 1px;
border-left-style: solid;
border-left-color: #33302b;
border-left-width: 1px;
}
#top .header_color .main_menu ul:first-child >li > ul, #top .header_color .avia_mega_div > .sub-menu {
border-top-color: #423e38; !important;
border-top-style: solid;
border-top-width: 1px;
}
/* Top Menu width spacing */
#top .main_menu ul:first-child > li > a {
margin-top: 1px;
padding: 0 10px;
}
#top .container_wrap {
border-top-width: 2px;
}
/* Main Menu - ROLLOFF TEXT */
#top .header_color .main_menu ul:first-child>li>a {
padding-top: 7px !important;
color: #eee6de ;
font-size: 1.4em;
letter-spacing: 0.0em;
font-weight:400;
}
/* Main Menu - ROLLOVER TEXT */
#top .header_color .main_menu ul:first-child>li>a:hover {
color: #d83300;
font-size: 1.4em;
letter-spacing: 0.0em;
font-weight:400;
}
/* Main Menu - SUB MENU OFF */
#top .main_menu .menu ul li>a {
color: #e2e2e2;
font-size: 1.2em;
letter-spacing: 0.0em;
font-weight:400;
}
/* Main Menu - SUB MENU HOVER */
#top .main_menu .menu ul li>a:hover {
color: #e2e2e2 !important;
background-color: #d83300;
}
/* Main Menu - HIGHLIGHT BLOCK */
#top .avia-menu-fx {
display:block;
position:absolute;
top: 28px;
border-style:solid;
border-width:2px;
}
/* HEADER - BOTTOM LINE (attached to slider) */
#header_main {
border-bottom-style: solid;
border-bottom-color: #3b3330;
}
Sorry, previos code is about the overlay image, but no the prewiev.
A found the problem in shortcodes.css. See the screenshot: https://dl.dropboxusercontent.com/u/21689806/problem.JPG
So I change one value:
.grid-image img{width:200px; display: block;}
Now image is correct, but container’s size is the same, so there is blank space: https://dl.dropboxusercontent.com/u/21689806/problem2.JPG
Hi,
I don’t see anger from Google, but love and respect, even an award and stock options, company jet … nah its hate alright…
You should take out my code and use Dude’s . Though I don’t see any problems with centered images http://polettofit.com/2013/free-fitness-coaching in chrome.
Thanks,
Nick
Hi Hotel,
On issue 1:
To fix your header, please add this to Quick CSS or to /css/custom.css file
.fixed_header #header {
top: 0px !important;
}
=============
on the hotel page, you also have 1 error on that url with the following image not loading.. i put xxxx in image name ,. but you can figure it out.
Failed to load resource: the server responded with a status of 404 (Not Found) http://xxxxxxx/wp-content/uploads/2013/05/Luxxxx-kamexxxx-slider3.png
=============
Add this css because on page you showed in issue 1, the drop down boxes and input boxes on right side cut name in Chrome browser ( http://www.clipular.com/c?6130100=8VLx1E7WjCdXQ4BhhFBEAvDKeIQ&f=.png )
#checkout-select, #checkin-select, #adults, #children, #rooms {
height: 2.5em;
}
=============
On issue two are you sure that is the right link, I see a Japanese website with nothing about a Dutch hotel :) ?
I looked on the first URL and I found the Boek Nu but i don’t see where the meer information is.
THanks,
Nick
I changed all values to 200, uploaded new images, but nothing changed.
Images have following properties:
style="opacity: 0; left: 0px; top: 0px; display: block; height: 257px; width: 257px;"
So the size is 257*257, not 200*200.
Is there any other place, where the size is set to 257?
Hi,
I also noticed this issue. Look at his page : http://mz.muze1.de/unterricht/gitarre/#tab-id-1
The same behaviour is found with the default installation of enfold. The portfolio images overlap the caption from the row above in 1200px layout. This doesn’t happen when shrinking the browser to 1000px and going back. So it’s the initial load of the page that sets the images wrongly.
Hi iqueda,
Do you mean the tabs widget? If so, the thumbnails will only appear if you set a featured image for a post.
Regards,
Devin
Hey Nick,
Dude seems to be addressing the same problem here: https://kriesi.at/support/topic/images-and-text-jumps-when-moused-over
Should I try that fix?
Hi chryseis,
Typically, I would suggest to regenerate your thumbnails. Since you said that cause issues earlier, my guess is that a setting for the thumbnails somewhere has been changed OR that the original image sizes were generated incorrectly and that when you re-generated them the elements you had already added them to were now incorrectly sized for the container.
So what I would suggest from here is to try deleting the photos you want to use from your wordpress Media section and then re-uploading them when you go to create the member section.
Just make sure they are large enough for the size you are setting them for so there are no stretching issues.
Regards,
Devin
Same issue as you Jasmine: https://kriesi.at/support/topic/problem-when-hover-on-image-alignement-with-firefox-and-opera-mac
Also wondering if this is the fix. My issue only occurred in FF and not Chrome.
Thank Nick. It fixed it for FF, but Chrome then became angry. If you check out this page and scroll down to the centered images…
The top 2 images I left as centered image links. When you hover over them, they break the centering and left justify (like they did previously in FF).
The next 2 images I put the links in paragraphs with: <p style=”text-align: center;”> That at least centers them in Chrome, but as it was with the centered images in FF, if you hover over them, the image moves down several pixels.