1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to replace this text with CSS?

Discussion in 'CSS' started by Divvy, Aug 19, 2017.

  1. #1
    Hello guys,

    Can someone give me a little help here?
    I want to replace "Keymaster" word with CSS:

    <div class="bbpas-key">
    <span class="keymaster">Keymaster</span>
    </div>
    Code (markup):
    What am I doing wrong with this code?
    https://jsfiddle.net/fyqh0ujx/

    Thanks in advance.
     
    Divvy, Aug 19, 2017 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,498
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #2
    The display:none means nothing gets shown, the word is being appended and then hidden.

    You coud always change the colour of keymaster to the background and move the word test over the top of it.
    span.keymaster {
     color: red
    }
    
    .keymaster:after {
    content: 'test';
    color: blue;
    margin-left: -70px;
    }
    Code (markup):
    Bear in mind that search engines may think that's cloaking and it relies on you knowing how much space the hidden word took up.
     
    sarahk, Aug 19, 2017 IP
  3. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #3
    qwikad.com, Aug 19, 2017 IP
    sarahk likes this.
  4. Divvy

    Divvy Well-Known Member

    Messages:
    781
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #4
    Thank you guys!

    Worked perfectly, but I need to change multiple texts, that's why I used the other class.

    Here goes the full code:
    https://jsfiddle.net/fyqh0ujx/3/

    How can I edit each text inside the span?

    Thank you once again.
     
    Divvy, Aug 19, 2017 IP
  5. sarahk

    sarahk iTamer Staff

    Messages:
    28,498
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #5
    Do you have to use css? you can't do it on the server while the page is being generated?
     
    sarahk, Aug 19, 2017 IP
  6. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #6
    qwikad.com, Aug 19, 2017 IP
  7. Divvy

    Divvy Well-Known Member

    Messages:
    781
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    128
    #7
    I need to replace each words with different words. For example, keymaster with test1, moderator with test2, etc...
     
    Divvy, Aug 19, 2017 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    This might be a bit off a question... but...

    WHY?!?

    I can't picture the usage scenario where your LAYOUT and STYLE control should be dicking with content in this manner in the first place... It reeks of doing something horribly and horrifically WRONG... but without knowing the actual usage scenario it is hard to say for sure.

    Lemme guess, another of these scenarios where you have "no control" over the markup, at which point it's time to deep six the entire project and start over from scratch?
     
    deathshadow, Sep 8, 2017 IP
    qwikad.com likes this.
  9. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #9
    Hidden text? Obscure keyword stuffing? Who knows.
     
    qwikad.com, Sep 8, 2017 IP
    deathshadow likes this.
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    That's what I was thinking -- the types of trickery GUARANTEED to get you slapped down for abuse by search... as @sarahk suggested, this runs the risk of being treated as content cloaking.
     
    deathshadow, Sep 8, 2017 IP