[Ish]

How do I move the location of the Entry Container for the slider? I’m looking move it just below the images instead of on top of them or at least change the opacity of it.
I would also like to be able to change the color of the Entry Container and Menu.
the site is wp.sca-caid.org

[Ish]

I found the option for changing the menu color

[Mahesh]

@webrightcaid: The entry container within the featured slider is already at the bottom please clarify. For changing opacity, go to Dashboard=> Appearance=> Customize=> Additional CSS box and add the following CSS:

#feature-slider .entry-container {
    background: rgba(0, 0, 0, 0.4);
}

Note: Please adjust the opacity as required. Please change the last property in the above (range: 0.0 to 1.0)

Regards,
Mahesh

[Ish]

To clarify, I want the box below the image so that the text is not on top of the image. Kinda like subtext under the image.

[Ish]

Additionally I have tried the opacity adjustment and it does not seem to be working

[Ish]

Adding the following gives somethign similar to what I’m looking to do with moving the text below the image, but If I do too much, it gets cut off

#feature-slider .entry-container { bottom: -20%; }

[Mahesh]

webrightcaid: Please use the following CSS:

#feature-slider .entry-container {
    left: unset;
    width: 100%;
    position: unset;
    padding: 20px;
}

And about opacity, there was a typo in the above code it should be rgba instead of rbga. I’ve corrected it now. Sorry for that.

Regards,
Mahesh

[Ish]

That code didn’t seem to work, here is currently what I had

/* Padding around text in slider box*/
#feature-slider .entry-container {
padding: 0;
left: 33%; /* Increase to push text further right */
width: 35%; /* Increase/decrease this % to increase/decrease the width of text. Leave this line out if you do not want to change width */
background: rgba(0, 0, 0, 0.0);

/* works but not well */
/* bottom: -20%; */

}

Even removing my code it seems to make the box move out of a visible area

[Mahesh]

@webrightcaid: With the CSS I’ve provided above will display the caption under the image as you’ve said. Please check the image in the link below:
http://bit.ly/2p4eNdt

Regards,
Mahesh

[Ish]

When I add the code you provide me this happens
https://www.dropbox.com/s/wug92ecppsetpfl/Screen%20Shot%202017-05-03%20at%206.43.59%20PM.png?dl=0
You’ll notice the text is not showing.
If I change the padding to 0px this is what I see
https://www.dropbox.com/s/a4gsup4vp7i9e3y/Screen%20Shot%202017-05-03%20at%206.49.20%20PM.png?dl=0

If it helps, here is the entirety of the custom CSS I have

/*
You can add your own CSS here.

Click the help icon above to learn more.
*/

/*
Padding around logo
*/
#masthead, #site-branding { padding-top: 0; padding-bottom: 5; }

/* Adjust Featured Slider’s header font size */
#feature-slider .entry-title {
font-size: 15px;
}
/* Adjust Featured Slider’s content font size */
#feature-slider .entry-content {
font-size: 10px;
}
/* Remove dots */
#feature-slider .cycle-pager {
display: none;
}

/* Padding around text in slider box*/
#feature-slider .entry-container {
padding: 0;
left: 33%; /* Increase to push text further right */
width: 35%; /* Increase/decrease this % to increase/decrease the width of text. Leave this line out if you do not want to change width */
background: rgba(0, 0, 0, 1.0);

/* works but not well */
/* bottom: -20%; */

}

/*
Adjust Logo size
*/
#masthead #site-logo img,
#masthead.fixed-header #site-logo img {
max-width: 60%;
}

/* Center Header */
/*
#site-logo, #site-branding {
text-align: center;
width: 100%;
}
*/
/* Sidebar Header Right */
/*
.sidebar-header-right {
clear: both;
display: inline-block;
float: none;
text-align: center;
width: 100%;
}

#masthead .search-field,
.sidebar-header-right .widget-wrap {
float: none;
}

*/

@media screen and (max-width: 1060px) {
/* Add here css for maximum screen size of 1060px */

/* For footer Widget Title */
#supplementary .widget-title { font-size: 14px; }
/* For footer Widget Content */
#supplementary .widget { font-size: 10px; }

}
@media screen and (max-width: 960px) {
/* Add here css for maximum screen size of 960px */

/* For footer Widget Title */
#supplementary .widget-title { font-size: 12px; }
/* For footer Widget Content */
#supplementary .widget { font-size: 10px; }
}
@media screen and (max-width: 767px) {
/* Add here css for maximum screen size of 767px */

/* For footer Widget Title */
#supplementary .widget-title { font-size: 10px; }
/* For footer Widget Content */
#supplementary .widget { font-size: 8px; }
}
@media screen and (max-width: 480px) {
/* Add here css for maximum screen size of 480px */

/* For footer Widget Title */
#supplementary .widget-title { font-size: 10px; }
/* For footer Widget Content */
#supplementary .widget { font-size: 8px; }
}
@media screen and (max-width: 320px) {
/* Add here css for maximum screen size of 320px */

/* For footer Widget Title */
#supplementary .widget-title { font-size: 10px; }
/* For footer Widget Content */
#supplementary .widget { font-size: 8px; }
}

/* hide post on homepage */
.home #content { display: none; }

[Mahesh]

@webrightcaid: The code in the thread https://catchthemes.com/support-forum/topic/move-feature-slider-entry-container-change-color-of-menu-and-entry-container/#post-115159 works fine if you want the caption to be just below the image and not over it. You’ve changed the CSS and not its over the image again. How can I help you further. Can you please make an image to show where really want the text on the slider to be?

Regards,
Mahesh

[Ish]

What you have pictured https://www.dropbox.com/s/yt8fyed3b6heoy1/slider-caption.png?dl=0 is exactly what I’m trying to do.
This is what happens when I use just your code
https://www.dropbox.com/s/ixs82n563370w3h/Screen%20Shot%202017-05-06%20at%209.32.30%20AM.png?dl=0

Is this being impacted by my image side or some other setting?

[Mahesh]

@webrightcaid: Can you please paste in the exact CSS code that I’ve provided and let me check your site so that I can check for the actual issue.

Regards,
Mahesh

[Ish]

I apologize for the delay, I’ve been on a work trip.

I have just your CSS code added to the page now

[Mahesh]

webrightcaid: Please remove the following CSS:

/* Padding around text in slider box*/
#feature-slider .entry-container { 
    padding: 0;
    left: 33%; /* Increase to push text further right */
    width: 35%; /* Increase/decrease this % to increase/decrease the width of text. Leave this line out if you do not want to change width */
    background: rgba(0, 0, 0, 0.0);

/* works but not well */
/* bottom: -20%;      */

}

And add the following:

#feature-slider .entry-container {
    left: unset;
    width: 100%;
    position: unset;
    padding: 20px;
}

As you put the CSS let me know and I’ll check your site for any issue.

Regards,
Mahesh

[Ish]

My apologies it did not appear to save the update.

I now only have the following code in my additional CSS section

#feature-slider .entry-container {
left: unset;
width: 100%;
position: unset;
padding: 20px;
}

[Ish]

I found the problem, it was in the preview screen while editing Additional CSS.

I need to leave the page and reload it for it to display properly

[Mahesh]

@webrightcaid: Checked your site and seems caption is now on the place where you wanted. Let me know if any problem.

Regards,
Mahesh

[Author]

Posts