[Plugin: Promotion Slider] Customizing excerpt content

On the promotion editing page there is a content box, which is applied to the promotion page (not the slider). Below that there is an excerpt box, which can be pulled into the slider and is not used on the promotion page.

The excerpt can take custom HTML. To enable the excerpt, just visit the slider options.

Are there a way to put link in excerpt too?

Yes. The excerpt will support an HTML link.

great plugin, my friend! Thank you!

thank you for a spectacular slider and speaking of the excerpt box.
Is there a way to make the background of the excerpt text a little darker and change it to another color?
I am inserting it on this page https://www.ruthbutler.com/evtntest/products/
(it has a gray band on the right side unfortunately, but everything else is working out)

If you add this css to the end of your theme style.css file it should make the background transparent or set to a colour of your choice.

.promo_slider_excerpt {
background-color: transparent !important;
}

Jcashman,

Thank you! that was very nice of you to help. You are not the Micah, creator of the plugin, so that is extra nice of you to help.

why the use of ” !important; ” ?

I changed the background color leavng in the !important and now would like the text to be black but I can’t get that to work.
Also, I don’t know why the thumbnails are off center – would you?

to change the text color to black see css below..also you could change the font-size. In summary Adding !important gives the setting priority (overrides) in the CSS hierarchy. font-size does not need to be overridden in this case but the color does.

.promo_slider_excerpt {
color : #000 !important ;
font-size : 3em;
}

you could also overide the above CSS in the for an individual promotion in the excerpt using a <div></div> with an inline css style defined for example below

<div style=”color :blue ; font-size : 36px; ; “>Text you want to style</div>

Nor sure about the thumbnails..probably would need a link to see why that is.

The ‘!important’ tag is something that should rarely, if ever, be used. Using it prevents you from overriding those rules. It is better to follow CSS best practices and write a slightly more specific rule, like this:

div.promo_slider_excerpt {
    color: #000;
   font-size: 3em;
}

Thank you jcashman and Micah. I have worked some issues out and was also told I can use firebug to locate files and code.

Here is the link to view the thumbnails that are off center. https://www.ruthbutler.com/evtntest/products/ I could not google and find that others had this problem.

This is the rule that is adding extra margin to your thumbnail images (line 1425 of your style.css) :

img.wp-post-image, img.attachment-thumbnail, img.attachment-medium, img.attachment-large, img.attachment-full {
	background:#fff;
	border:1px solid #f0f0f0;
	display:block;
	margin:15px auto;
	padding:5px;
	width:auto; /*IE*/
}

You can override this by adding this rule:

.promo_slider_thumb_nav img {
    margin: 0;
    padding: 0;
}

it worked! thank you for also pointing out: (line 1425 of your style.css)!

In firebug I can change the background color of the navigation to gold. Applying the same code to the css in wordpress did not change it to gold on my site:

.promo_slider_thumb_nav {
background: #E9C623;
}
or
.promo_slider_thumb_nav {
background-color: #E9C623;
}
https://www.ruthbutler.com/evtntest/products/
What am I missing?

The reason is that when the color was originally set, it was done with the .promo_slider_thumb_nav class. In order to overwrite that rule, you have to be more specific. Since that is a div, just do this:

div.promo_slider_thumb_nav {
    background: #E9C623;
}