Jump to content
Sign in to follow this  
jamiewalden

Feature Slider Customization

Recommended Posts

jamiewalden

Hi guys, I've read that it isn't currently possible to simply have a full width image with no text that links to a page or post. (Or if there is, I can't figure it out.) If there isn't a way to link an image, is there a way to change the color and translucency of the overlay? Here's a link to my site: http://blog.americandatanetwork.com I'd like to be able to use a feature image with a large swath or red like on the first image because it ties the design together with the brand. Any help would be greatly appreciated. Thanks.

Share this post


Link to post
Share on other sites
cmunns

to change the overlay, use this selector: ` body #feature_slider .fcontent { background:url( black60.png) repeat; } `

Share this post


Link to post
Share on other sites
jamiewalden

so would i go into the theme's image files and replace that .png with a red one? Sorry, i'm not really a coder. somewhat self-taught to a bare minimum. thanks for your patience.

Share this post


Link to post
Share on other sites
jamiewalden

Also, how would i change the button color? As well as getting rid of the black stroke on the text that's on the overlay? Thanks so much.

Share this post


Link to post
Share on other sites
jamiewalden

Sorry to post again. Just don't want to duplicate your work. I'd like for the button to be white with red text and a slight grey hover. Thanks again.

Share this post


Link to post
Share on other sites
jamiewalden

I figured out how to remove the text shadow. Now i just need help with making the "more" button white with red text and a red arrow. Or if it's easier, can i just use the normal grey fancy box?

Share this post


Link to post
Share on other sites
timlinson

For the text: ` #feature_slider .fcontent a, #feature_slider .fcontent a:hover{ background:white; color:red; } ` The arrow is a picture located at images/more-black.png

Share this post


Link to post
Share on other sites
jamiewalden

That worked except there's still a dark grey outline on the left and top of the button. Also how would i make the text or the button darken when hovered over? Thanks, guys, for your help. it's much appreciated.

Share this post


Link to post
Share on other sites
Kate

Have you tried setting "border:none"? Also, for the hover... Change your current code to this:

#feature_slider .fcontent a{
	  background:white;
	  color:red;
	}
	#feature_slider .fcontent a:hover{
	  background: #000000;
	}
	

Or something like that ;)

Share this post


Link to post
Share on other sites
jamiewalden

putting border: none doesn't seem to get rid of the top and left border that's 1 px of #444. If its easier, how can i just change the black button to the grey button, i think its called fancy box, maybe? The one that looks like the submit box below. Thanks again guys.

Share this post


Link to post
Share on other sites
cmunns

What about: ` a.pagelines-blink.black-blink, #feature_slider .fcontent a, #feature_slider .fcontent a.post-edit- link { border:0px; } `

Share this post


Link to post
Share on other sites
jamiewalden

That takes away the border but not the single pixel lines on the top and left, which appears to be just inside the border. It's as if they are something different than a border. (I'm not a coder btw) Could i be doing something wrong with the other custom css i've put in? Here's all my custom code:

.pagelines{display:none;}
	.dcol_4 {
	width: 229px;
	margin-left: 10px;
	margin-right: 2px;
	margin-top: -12px;
	margin-bottom: -20px;
	}
	.fixed_width #branding .content-pad {
	padding: 0px 15px 15px 0px;
	}
	.fboxtitle{font-size:11px !important;}
	#feature_slider .fcontent {
	text-shadow: none;
	}
	#feature_slider .fcontent a{
	background: #ebebeb;
	color: #333333;
	text-shadow: #fff 0 1px 0;
	border-color: #dedede;
	}
	#feature_slider .fcontent a:hover{
	background: #ebebeb;
	color: #000000;
	border-color: #dedede;
	text-shadow: #fff 0 1px 0;
	}

Share this post


Link to post
Share on other sites
catrina

Could this code be what you're looking for?:

span.pagelines-blink-pad {border: 0px;}

For removing the black top and left borders in the feature slide buttons...


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jamiewalden

That worked, Catrina! Thanks! Now the only thing left to tweak is the color of the button when it's clicked on. How can i do that? Thanks for all of your help, you guys.

Share this post


Link to post
Share on other sites
Kate

Hi Jamie, Do you mean ":active" or ":visited"? Active refers to the time when the button is just clicked on (before being redirected). Visited refers to links users have already clicked on/visited. So, going off the code you have above, it would be something like this:

#feature_slider .fcontent a:active{
	background: #ebebeb;
	color: #000000;
	border-color: #dedede;
	text-shadow: #fff 0 1px 0;
	}

(That's just a copy/paste of your above code... Obviously you'd have to modify it.)

Share this post


Link to post
Share on other sites
jamiewalden

Hey Kate, Thanks for the response. I put that code in and it didn't seem to change the color the button turns with the mouse depressed. (i guess that's the active click?) Here's my custom css in case i'm doing something wrong. Like i said, i'm not a coder so i thoroughly appreciate you bearing with me.

.pagelines{display:none;}
	.dcol_4 {
	width: 229px;
	margin-left: 10px;
	margin-right: 2px;
	margin-top: -12px;
	margin-bottom: -20px;
	}
	.fixed_width #branding .content-pad {
	padding: 0px 15px 15px 0px;
	}
	.fboxtitle{font-size:11px !important;}
	#feature_slider .fcontent {
	text-shadow: none;
	}
	#feature_slider .fcontent a{
	background: #ebebeb;
	color: #333333;
	border: 1px;
	text-shadow: #fff 0 1px 0;
	border-color: #dedede;
	}
	#feature_slider .fcontent a:hover{
	background: #ebebeb;
	color: #000000;
	border-color: #dedede;
	text-shadow: #fff 0 1px 0;
	border-bottom: none;
	}
	#feature_slider .fcontent a:active{
	background: #ebebeb;
	color: #000000;
	border-color: #dedede;
	text-shadow: #fff 0 1px 0;
	}
	#feature_slider span.pagelines-blink-pad {border: 0px;}

Share this post


Link to post
Share on other sites
cmunns

This is the CSS you need to add/change in your customization: ` #feature a.pagelines-blink.black-blink:active .pagelines-blink-pad { background: black; border: 1px solid black; border-right: 1px solid #444; border-bottom: 1px solid #444; } `

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×