Styling featured hover state

Support Area Forums Bottega Styling featured hover state

This topic contains 7 replies, has 2 voices, and was last updated by  Dandelion222 10 months, 3 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
URL to the page in question: http://http://66.147.242.199/~batchba1/
  • Author
    Posts
  • #37696

    Dandelion222
    Participant

    Is it possible to style the look of the screen that comes up when I roll over my featured boxes on the homepage? I’d like to adjust the color and opacity, if that is possible.

    #37697

    Bill Robbins
    Keymaster

    You could use this in your Custom CSS to alter the color and opacity of the background that slides up there:

    
    .boxcaption {
    	background: rgba(0, 0, 0, 0.8);
    }
    

    and this for the text color:

    
    .boxgrid h4 {
    	color: #fff;
    }
    

    Hope that helps out,
    Bill

    #37698

    Dandelion222
    Participant

    Thank you! Can I also use the boxgrid h4 to change the size of the text there without effecting other text in other areas?

    #37699

    Dandelion222
    Participant

    Something interesting happened when I added the .boxgrid h4 definition and changed the color to a blue. It only effected the first featured box. And it dropped the drop shadow. (Not that i’m sure I need it.) All the rest of the boxes have the same text style as before.

    #37700

    Bill Robbins
    Keymaster

    I believe there are two spots for the color there. Add this as well:

    
    .boxcaption a, 
    .boxcaption a:visited {
    	color: #fff;
    }
    

    and see if that doesn’t help set those colors.

    #37702

    Dandelion222
    Participant

    Yes! It is getting there! Now I need to lose the shadow, make the text bigger, and I think center it.

    #37703

    Bill Robbins
    Keymaster

    I try to set my themes up so that most changes can be made by overriding something in the style.css file. The way that works is you locate the section in the stylesheet that goes with the spot you want to change. You copy that section out and place it in the custom CSS box where you can edit and/or override what is there.

    The way CSS works, the last style loaded will be the one that gets used on the site. The Custom CSS is the last styling that makes the cut so what you place there will take priority unless there is something more specific out there (like with an !important declaration).

    If you’ve ever edited a stylesheet, this works the same. The only difference is you can’t remove something just by deleting it out. You’ll have to zero that value out or set it back to the default.

    Here’s the section that goes with the featured row. Try adding it to the Custom CSS and see what you can cook up by editing it:

    
    
    .boxgrid { 
    	width: 167px; 
    	height: 167px; 
    	float: left; 
    	overflow: hidden; 
    	position: relative; 
    	display: inline;
    	margin: 0 0 21px 21px;
    	z-index: 1;
    }
    
    .boxgrid img { 
    	position: absolute; 
    	top: 0; 
    	left: 0; 
    	border: 0;
    	padding: 0;
    	width: 100%;
    	height: 100%;
    }
    
    .boxgrid p { 
    	margin-bottom: 10px; 
    	color: #fff;   
    }
    
    .boxgrid h4 {
    	color: #fff;
    	background-color: transparent;
    }
    		
    .boxcaption { 
    	float: left;
    	text-align: left;
    	position: absolute;
    	background: #000; 
    	height: 167px;
    	padding: 15px; 
    	width: 85%;
    	background: rgba(0, 0, 0, 0.8); 
    	/* For IE 8 */
    	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    }
    
    .captionfull .boxcaption {
    	top: 167px;
    	left: 0;			
    }
    
    .boxcaption a, 
    .boxcaption a:visited {
    	color: #fff;
    	padding-bottom: 167px;
    	padding-right: 167px;
    	text-shadow: #000 2px 2px 3px;
    }
    
    .boxcaption a:hover {
    	color: #ccc;
    }
    
    

    Enjoy your weekend,
    Bill

    #37704

    Dandelion222
    Participant

    Wow. Thanks for sharing the whole toolbox Bill. And for the tip about checking the style sheet. I have written CSS from scratch, but don’t have much occasion to in recent years. I’ll have some fun with this. Thank you!

    Have a great weekend!

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Styling featured hover state’ is closed to new replies.