Build Your Own Business Website header image

Welcome to our Members Only Forum

You are welcome to view the content on our Forum, just scroll down to view this forum post.
If you like what you find and want to be able to post a question, please check out our subscription options.
Please feel free to search the forum using either the Google Site Search above or the forum search below.

Avatar
Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Feed sp_TopicIcon
Inserting 3 feature box images in Agility v 3.1.0.1?
Avatar
John Holser
Member
Community Member

Members
Forum Posts: 8
Member Since:
November 25, 2015
sp_UserOfflineSmall Offline
1
January 6, 2017 - 2:22 pm
sp_Permalink sp_Print sp_EditHistory

Agility v 3.1.0.1

I've added a large image to my feature box area in the "background style options / Feature Box Area Background / insert a Custom Background Image" but when I look at it on my cell phone it doesn't show up. 

I'm pretty sure I saw a tutorial about using three image sizes, one for each device for the feature box in Agility v 3.1.0.1

Unfortunately I can't find it or where to apply these images. I saw one tutorial for the the header image setup of 3 different size images (responsive) but nothing for feature box. 

Advice would be appreciated. I must say overall Agility 3.1 is killer, and I'm a newbie:)

http://digitalfilmfarmworkshops.com/

 

Thanks

John

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13037
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
2
January 7, 2017 - 9:26 am
sp_Permalink sp_Print

John, you need to use the Custom Media Queries for that.

FIRST - Download v3.1.0.2 and install it.  There was a glaring error in your version.

Second - under Skin Design >> Media Query Options

2017-01-07_9-18-42.pngImage Enlarger

2017-01-07_9-19-19.pngImage Enlarger

Add code to both Table Devices Landscape & Smart Phone Devices Portrait the following code

#feature_box_area{background-image:url('address to your tablet or phone image');}

Obviously you will add the tablet image address in the tablet media query and the phone image address in the phone media query

The tablet image should be 1200 px wide, The phone image should be 400px wide

sp_PlupAttachments Attachments
Avatar
John Holser
Member
Community Member

Members
Forum Posts: 8
Member Since:
November 25, 2015
sp_UserOfflineSmall Offline
3
January 7, 2017 - 10:31 am
sp_Permalink sp_Print sp_EditHistory

Thanks Rick, I'll work on that now.

I can't find the v3.1.0.2 download? 

Found it. 

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13037
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
4
January 7, 2017 - 12:02 pm
sp_Permalink sp_Print

I forgot to say that doing this is a VERY GOOD idea.  It significantly improves the mobile experience when you can downsize the images like that.

This is something on my todo list for the future.

Avatar
John Holser
Member
Community Member

Members
Forum Posts: 8
Member Since:
November 25, 2015
sp_UserOfflineSmall Offline
5
January 7, 2017 - 12:08 pm
sp_Permalink sp_Print

I'm not sure where to paste the url?  I've tried a few versions to no avail. I just get a gray background where the image is suppose to be.  

Here's what I did for tablet landscape and it's not working. 

#feature_box_area{background-image:url(‘http://digitalfilmfarmworkshops.com/wp-content/uploads/2017/01/BRE-John-Directs-Olga_Yury-1200.jpeg’);}

thanks

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13037
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
6
January 7, 2017 - 3:54 pm
sp_Permalink sp_Print

John it looks like the problem may be caused by the name of the skin folder.

Right now it is byob_agility_nude-1 - things only work right when it is byob_agility_nude

Avatar
John Holser
Member
Community Member

Members
Forum Posts: 8
Member Since:
November 25, 2015
sp_UserOfflineSmall Offline
7
January 7, 2017 - 5:35 pm
sp_Permalink sp_Print sp_EditHistory

 I made the change but it's still not giving me a a feature box image as a background on a smartphone or tablet. 

 

Please advise.

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13037
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
8
January 7, 2017 - 5:45 pm
sp_Permalink sp_Print

If you don't have FTP setup the easy way is to use your hosting control panel. 

You'll find the folder in wp-content/thesis/skins/

Avatar
John Holser
Member
Community Member

Members
Forum Posts: 8
Member Since:
November 25, 2015
sp_UserOfflineSmall Offline
9
January 7, 2017 - 6:45 pm
sp_Permalink sp_Print

 I made the change but it’s still not giving me a a feature box image as a background on a smartphone or tablet. 

 

Please advise.

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13037
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
10
January 8, 2017 - 6:32 am
sp_Permalink sp_Print

There is a problem with your quote marks before and after each url.  This is probably due to using a word processor for typing out the code. In any case replace the beginning and ending quotes.

2017-01-08_6-22-07.pngImage Enlarger

Also, you will need to adjust your padding and potentially make the images taller in the smaller view ports.  Once you fix your quotes you'll see what I mean.

sp_PlupAttachments Attachments
Avatar
Pierre Cote
Member
Members

Community Member
Forum Posts: 970
Member Since:
September 21, 2014
sp_UserOfflineSmall Offline
11
January 8, 2017 - 5:21 pm
sp_Permalink sp_Print

Hi

FIRST – Download v3.1.0.2 and install it.  There was a glaring error in your version.

Rick, I'm I understanding that v3.1.0.2 won't be an automatic update ?

Pierre ( postrophe )

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13037
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
12
January 9, 2017 - 5:45 am
sp_Permalink sp_Print

Shoot - it ought to be.  Unfortunately the 3.1 series is designed to be updated by 3.2 which will then be automatic for everyone.

I've been waiting to release 3.2 until I had this site up and running using it - sort of the ultimate beta test.  I'm almost ready for that.

Avatar
John Holser
Member
Community Member

Members
Forum Posts: 8
Member Since:
November 25, 2015
sp_UserOfflineSmall Offline
13
January 11, 2017 - 8:56 am
sp_Permalink sp_Print

Still having issues. Are you doing a live Q&A today? I'll jump on the later one if you are. 

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13037
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
14
January 11, 2017 - 9:11 am
sp_Permalink sp_Print

Wednesday sessions start next week.  However are you sure it's not working?  It seems to be working just fine on my end.

When I look at your CSS file it has properly formed background image rules and when I look at it in the responsinator the correct image seems to be delivered.

Take a look at this link

Avatar
John Holser
Member
Community Member

Members
Forum Posts: 8
Member Since:
November 25, 2015
sp_UserOfflineSmall Offline
15
January 11, 2017 - 1:54 pm
sp_Permalink sp_Print

Yes, It does seem to be working. Hmmm, seems the issue must be with my phone and Ipad. 

Thanks for your help Rick!

I've gone from zero to a pretty nice site in a matter of days with this new skin update. I'm very happy with the skin and especially your attention to detail.

Thanks again! 

Forum Timezone: America/Los_Angeles

Most Users Ever Online: 228

Currently Online:
11 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

Keith W Jones: 1156

Brian Tozer: 1004

Pierre Cote: 970

Carolin: 914

Heidi Hafner: 420

John Cunningham: 410

Newest Members:

Marcy

Katherine Sears

JD Brown

James Plunkett

Joe Remington

Masa M

Forum Stats:

Groups: 8

Forums: 46

Topics: 6618

Posts: 32733

 

Member Stats:

Guest Posters: 6

Members: 6598

Moderators: 7

Admins: 2

Administrators: Rick Anderson, Rick Anderson

Moderators: Glenn Bryan, Gelie Laxamana, Jorene, Melissa, Robert Begun, wpengine, Laura Nugent