Log in

View Full Version : Same code but different font & color etc ?



theremotedr
09-01-2016, 01:23 PM
I currently have the below code on my ebay page which looks after the text assigned blinking.


.blinking {
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
/* order: name, direction, duration, iteration-count, timing-function */
-moz-animation:blink normal 2s infinite ease-in-out; /* Firefox */
-webkit-animation:blink normal 2s infinite ease-in-out; /* Webkit */
-ms-animation:blink normal 2s infinite ease-in-out; /* IE */
animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
color: #000099;
font-weight: bold;
font-size: 14px;
text-align: center;
}

I now need to highlite another part of my text BUT with a different font color & size so do i have to copy & paste all the above & make the changes or can an edit bee added to the above code.
I was thing along the lines of different text that needs this doing would then make the code on the page longer & longer every time.

Beverleyh
09-01-2016, 04:06 PM
It's hard to say without seeing the markup of the element this is applied to, or the markup of the element you now want to target, but I try applying this .blinking class to the new element but also add a second class with a different colour defined in the CSS. Example;

<div class="blinking red-text">stuff that blinks</div>

.blinking.red-text { color:red }

theremotedr
09-01-2016, 04:17 PM
Hi,
Here is a page that i will change.
http://www.ebay.co.uk/itm/112117075721?ssPageName=STRK:MESELX:IT&_trksid=p3984.m1558.l2649

Two lines of blue blinking text.
The first line Remote not included in sale will be changed to white & 20px

Thanks

Beverleyh
09-01-2016, 04:31 PM
I'm on mobile so the link doesn't mean much, but have you tried what I suggested? Give it a go - it may need adapting using the normal rules of CSS selectors though.

If you are still experiencing problem, shows us what you've tried in a reduced demo using JSBin, JSFiddle or CodePen (I don't fancy poking through dozens of unknown elements and assets in the developer console). Help us to help you - the easier you make it for us by providing the pertinent HTML and CSS upfront, the faster we can make suggestions.

theremotedr
09-01-2016, 05:12 PM
Hi,
Your advised code worked fine.

Many thanks & have a nice evening.