Forum Support

Shape 5
March 29, 2024, 06:08:54 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: background color of Image and Content Fader + responsiveness of it  (Read 631 times)
mrweb
Jr. Member
**
Offline Offline

Posts: 28



« on: June 30, 2014, 02:43:16 AM »

Hi,
I tried to set the background of the image and content fader in the Corpway template to white, but it stays black. How do I change this background? I used the Image and Content Fader settings to change the backgroudn color, but that doesn't seem to work.

This problem should not have to be a problem if the Image Fader should be perfectly responsive, but when I make my screen smaller the image scales but the container of the Image fader stays bigger and shows black bars above and below the image. How can I make this work well?

Regards,
Marcel

-------------------------------------

Sorry, already solved this problem  Grin
« Last Edit: June 30, 2014, 04:17:46 AM by mrweb » Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 on: June 30, 2014, 07:06:07 AM »

Hello,

Please post a url to where this occurs.
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
infinita
Jr. Member
**
Offline Offline

Posts: 16



« Reply #2 on: August 27, 2014, 09:17:47 PM »

I have same problem.

How to fix?


http://sockenplansthai.com/site2014/
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: August 27, 2014, 11:17:07 PM »

Hello,

The reason you see the black bars is because the picture is rescaling itself to remain proportionately accurate. If you want to remove the black bars you can adjust the background color CSS here:

Code:
s5imagecontent.css - line 25

.jdGallery .slideElement {
    background-color: #000;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    z-index: 0;
}

Another option would be to adjust the coding below to background-size: cover; which would fill the entire container but disregard your images proportional values.

Code:
Template.CSS - Line 986

.jdGallery .slideElement {
    background-size: 102% auto !important;
}
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
infinita
Jr. Member
**
Offline Offline

Posts: 16



« Reply #4 on: August 28, 2014, 01:12:09 AM »

How to config this module?

I just install latest version

1. Height (automatic if the setting below is set to 100% )
- Can I  leave blank to make automatic?

2. Background Color (leave blank for none) ex:FFFFFF
- I put FFFFFF, it doesn't work
Do I have to fix in "modules/mod_s5_image_and_content_fader/css/s5imagecontent.css" only ?

 
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #5 on: August 28, 2014, 01:18:05 AM »

Hello,

1) The height you don't need to Responsive Websites. This was a feature included in the module for non responsive themes that are using this module

2) You would want to change the background color in the CSS I provided above. You can also use Firebug to isolate any CSS on the site and modify its inherit CSS
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.