Can I add content elements to the Avia layout builder?
In particular I need to use image_with_text_over title code
as in :
[image_with_text_over title=’BACKGROUND / HISTORY’ image_link=’http://nitzaflantz.com/wp-content/uploads/2013/07/02-history.jpg’]
What did I know about painting by then?
[button size=’tiny’ color=” background_color=” box_shadow=” font_size=” line_height=” font_style=” font_weight=” text=’MORE’ link=”http://nitzaflantz.com/background-history/”]
[/image_with_text_over]
Can I add content elements to the Avia layout builder?
In particular I need to use image_with_text_over title code
as in :
[image_with_text_over title=’BACKGROUND / HISTORY’ image_link=’http://nitzaflantz.com/wp-content/uploads/2013/07/02-history.jpg’]
What did I know about painting by then?
[button size=’tiny’ color=” background_color=” box_shadow=” font_size=” line_height=” font_style=” font_weight=” text=’MORE’ link=”http://nitzaflantz.com/background-history/”]
[/image_with_text_over]
Kriesi used following code to build the page
You can insert it into the default editor, the save the page and switch to the advanced editor to import it.
The “the office” section uses a fixed background image – you can edit the color section to set a bg image. The settings are:
background-repeat: no-repeat;
background-image: url(http://kriesi.at/themes/enfold/files/2013/04/photodune-1011301-city-skyline-m1.jpg);
background-attachment: fixed;
background-position: center center;
The problem is that you can’t determine a “correct” resolution because it’s a fullwidth slider which will always scale the image based on the screen resolution (eg retina display with 2560px vs a small 1280px screen, etc.). Personally I’d suggest to use a reasonable resolution of 1500px or 1920px which will display just fine on standard screens and smaller screens and it shouldn’t be blurry on retina displays.
Hi Peter
Nearly there. And thanks to your teams help.
Ive worked out a way / fix to add a horizontal version of the logo as a background image.
However, it seems to repeat in two other places.
Is there a way to remove from behind menu & search panel / on click?
Here’s the live site: http://www.thenaturalpharmacie.co.uk/hidden/
Here’s a screenshot: https://dl.dropboxusercontent.com/u/226695/smallheader-example-tile-error.gif
Thanks in advance. Rich
Below is my custom css
/* Pages */
.page-id-5 .title_container {
display: none;
}
/* Header */
div .logo img {
position: fixed;
padding: 0px;
top: -2px;
}
.header-scrolled div {
background-image: url(http://www.thenaturalpharmacie.co.uk/hidden/wp-content/uploads/2013/08/tnp-smalllogo-header3.gif);
background-repeat: no-repeat;
background-position: left top;
}
.header-scrolled div .logo img {
height: 75px;
}
#header_main {
border-bottom-width: 8px;
border-bottom-style: solid;
border-bottom-color: #060;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
/* Naviagtion */
/* Mobile */
@media only screen and (max-width: 768px) {
div .logo img {
position: relative;
height: 100px;
}
Simple question because I’m a novice. I am attempting to change the background image the large sliders on my homepage. To ensure I have consistent results and a non pixilated image on any machine I decided to purchase a very high resolution image. Needless to say it doesn’t fit in the slider well.
What is the correct resolution that I should resize the image for the large slider?
How do I know what my native resolutions are? Is it in the css code?
See my issue on the homepage here. http://www.d2rcareers.com
Thanks!
Hey guys.
Some one recently posted a website showcase to this forum. On the home page he had his clients business logos scrolling across the page from left to right in an infinite loop. Some one on that forum thread asked how this was done and told to contact the admin of that website. I did this and didn’t hear back from them. I think they have also removed their website, perhaps he was getting too many requests from people asking the same question. Ismael, on the of the mods posted how to do it this way…. “Hi,
The rotating company logos are made using the Layer Slider. It is a very wide single image with the logo laid out, moving from right to left on an infinite loop.
Regards,
Ismael”
However, this only explains the obvious but not what settings were used or which slider to use.
Can someone please shed some light on this. I am building a client website now who has requested this feature. I’ve been at it for 8 hours now and cannot figure it out.
Regards
Jamie Russ
I forgot to mention that i would like the same effect: the images moves when we scroll, thanks
Hi
I would like to know how to make the effect of type with background image like this page:
Pages – Meet the Team
The words are:
THE OFFICE
we recently moved the team to New York. Here is how it looks like if you work with us.
The background: image of a city.
thanks
Hey, thanks for looking at this, the url to my site is: http://tinyurl.com/oxun6xl towards the bottom of my page i have images that link to various logins, also on most of my pages i’ve used jpegs for my twitter and facebook links, in ie8 when you hover over these they disappear. I’ve used images to link to stuff quite a bit so a lot of the site is disappearing for ie8 users. Thanks again, any help is much appreciated!
Sorted it. It is the large size that sets the lightbox max :-)
This may be a bit clearer. I have upload images that are 3004 px in width. When I view in lightbox the largest image that will show is 1351 px width and 901 px height. What sets this limit? Can you make it larger?
Is it set by the standard wordpress image sizes?
Thumbnail size 80 Width 80 Height
Medium size 300 Max Width 300 Max Height
Large size 1500 Max Width 1500 Max Height
Please link this http://chriswardphotography.net/galleries/kids/ and open the image in lightbox and you will see.
I also updated my wordpress right away, won’t do that again! For the slider, I used the jQuery Updater plugin, it fixed the slider with one click. I hope this helps.
Now I have a problem with my portfolio page. The portfolio items are not showing up. The boxes are there, the titles are there, but no images (the most important part of a portfolio). Can anyone help me with this? The portfolio gallery on my homepage shows up fine. I even tried to create a new portfolio page, no luck.
Any help would be appreciated.
PS here is alink to the troubled portfolio: http://onesourcegraphics.org/portfolio/
And a link to the homepage where the gallery IS still working: http://onesourcegraphics.org/
Hi,
Thanks Ismael, but I would like to have a caption on my lightbox image not only on thumbs and it doesn’t work with gallery images, only on single image…
Regards,
Jul…
Hi,
Insert the Gallery element under the Media Elements tab. Add / Edit gallery images, under each image you can add a caption. It will show as a tooltip when you hover each gallery thumbnails.

Regards,
Ismael
How do I make the full size image larger in prettyphoto.
option – Choose image size for the Big Preview Image
I used to be able to have the image with a zoom option in the lightbox (prettyphoto) in the top right-hand corner. It is still there if I make the browser window smaller but the max size for the standard image display is a little small for me. Its 1030 px. Can I make it 1210 the full gallery width?
Does that make sense lol ?
Hi,
How can I add captions on my lightbox images from a gallery? There is caption on a single image with lightbox but not if it is a gallery…
Thanks.
Jul…
Hi,
I can not see the items you’ve uploaded to the gallery of images from the posts, pages or elements of the portfolio. I have found that disabling WPML everything works OK but if I leave the plugin enabled I can not see any images.
Can you help me?
Thanks
Hey!
Can you post a link please? jta’s link doesn’t help me because I can’t investigate the source code with IE Tester.
Regards,
Peter
perhaps you misunderstand.. I really have to have the captions.. but the text just to be aligned center under each thumbnail
Most of the images are really huge and way over 300px – it does appear that the ones less than 300px are causing the problem ! I will try fixing the sizes and see where I go…
help with the caption alignment would be great thanks !
Hi,
This code will remove the captions that appear on the sides
#top .visible-caption {
display: none;
}
You also need to create some rules about types of images that get uploaded. For example , never upload images that are less than 300px wide. So even if they are portraits, they need to be at least 300px wide and if bigger, they should get resized lower by the theme. You can change the setting using http://wordpress.org/plugins/simple-image-sizes/ this plugin in Settings > Media. Set width at 300px , no crop and set height at 9999. And as long as you upload image 300px and wider, you will be ok.
Thanks,
Nick
Hi,
The code works fine. I just tested it on your site as I have before giving to you. The problem is that the code I gave you is not found on your website, thus the buttons remain where they are as opposed to being no longer there once the code I provided is actually inserted into either Quick CSS or /css/custom.css . Here is the copy of it this time ran with a spelling checker, lol
#top .ls-nav-prev, #top .ls-nav-next {
display:none !important;
visibility:none !important;
}
.ls-bottom-nav-wrapper {
display: none;
}
Tested here: http://www.col323webdesign.com/projekt61/
and tested here
http://www.aarhustolkeservice.dk/
Browser: Google Chrome
Please leave the code in so we can see it.
Thanks,
Nick
more specifically how do I remove avia_animate_when_visible only on galleries
Hi,
I created a page with a gallery on it, however when it loads there is white image overlay that will disappear when I scroll down.
How can I disable this for galleries?
thanks,
MJ
We moved some of the website online for testing. Here is a link to the blog: http://vmwpprod.mantis-tgi.com/?page_id=2650
I got also a problem like this.
Everything worked fine, but now the slider get’s stucked on the second image.
You can’t navigate to the others, and the autoslide also won’t pass the second image.
I am not sure but i think it is since i upgraded to the latest wordpress version.
Hi,
That main image on your homepage, you can compress it a lot more without losing quality. Please try this http://jpeg-optimizer.com/ at 65 compression, and turn off size change. Its quite good.
This css will do the trick, its targeted only for the home page
#top.home .avia_image.avia-align-center {
width: 270px;
}
`
Thanks,
Nick
Hi,
1. Please add this to /css/custom.css OR to Quick CSS
.flex_column .widget .widgettitle, .content .widget .widgettitle {
margin-bottom: 1em;
}
#top .widget ul {
list-style-type: none;
list-style-position: outside;
margin-left: 7px;
}
2. Here is the css that is used on the blue button on the page you linked to
.avia-button-wrap {
display: inline-block;
}
#top .main_color .avia-color-theme-color {
color: red; /*color of button text*/
}
body .avia-button.avia-color-theme-color, body .avia-button.avia-color-theme-color:hover {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);/*text shadow rgb, 0.1 transparent*/
}
.main_color .avia-color-theme-color{
background-color: #2D5C88; /*main button background color*/
border-color: #2D5C88;/*main button border color*/
}
.avia-button.avia-size-large { /*size, can change large to medium or small*/
padding: 13px 30px;
font-size: 14px;
min-width: 127px;
}
.avia-button.avia-position-left {/*position, can change left to right or center*/
float: left;
display: block;
}
body div .avia-button {
border-radius: 3px;
background-image: url("../images/layout/bg-button.png");
background-repeat: repeat-x;
background-position: 0 0;
padding: 10px;
font-size: 12px;
text-decoration: none;
display: inline-block;
border-style: solid;
border-width: 1px;
margin: 3px 0;
line-height: 1.2em;
position: relative;
font-weight: 600;
text-align: center;
max-width: 100%;
}
4) It’s a text font, so you would write it.( ♥ <— heart ) so just copy whatever you need to use by selecting it on a page and copy the glyph itself and paste it as you would paste any letter or word , and then style it with font size and color, etc..
Thanks,
Nick
Make sure your images are all under 200kb each so that there isn’t an issue with loading large images.
In addition, check through the extensions documentation for any mentions on speed issues or optimization.
Hi,
The temporary solution above doesn’t work. The problem is with all background images that are set using the Color Selection in Layout Elements. Problem is consistent with all Apple devices (i.e iPad, iPhone, and Safari on Desktop).
Link to website:
http://goo.gl/p8pRvQ