Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 20, 2016 at 7:36 am #688980
    philoakley

    Hi

    I am trying to style text in a table to make some of the text red with HTML but as an example when I use the HTML below only the first option is red and the rest is black. Is there a better solution to make some text a different colour in a table. Many thanks.

    <p style=”text-align: left;”><span style=”color: #a81010;”>CONTACT</span>
    <span style=”color: #a81010;”> FACEBOOK</span>
    <span style=”color: #a81010;”> TWITTER</span></p>

    September 20, 2016 at 9:33 am #689028
    Guenni007

    did you use copy paste from f.e. word ? because it seems that there is something with your quotes not working.
    Try inserting this:

    <p style="text-align:left"><span style="color:#a81010">CONTACT</span>
<span style="color:#a81010">FACEBOOK</span>
<span style="color:#a81010">TWITTER</span></p>

    by the way – this should work as well:

    <p style="text-align:left; color:#a81010"><span>CONTACT</span>
<span>FACEBOOK</span>
<span>TWITTER</span></p>

    to your question if you only want to make one word in a different color – the inline css method is best
    if you have this very often – you can create a custom class for it like :

    .red {
text-transformation: upperclass;
color: #a81010;
letter-spacing: 1px;
}

    than you only have to do:

    <p class="red"><span>contact</span>
<span>facebook</span>
<span>twitter</span></p>

    if you have to colorize all in that table or only every 2nd, 3rd etc field there are selectors which might help (nth-child selectors)

    September 20, 2016 at 11:24 am #689066
    philoakley

    Thanks Guenni007

    That’s helpful but I think I see the issue now – when I apply my href link the style is overridden by the link style so the red disappears again. So I am looking to remove/alter the link styling to keep the text red.

    Any help appreciated.

    September 20, 2016 at 11:29 am #689068
    philoakley

    I can have been able to see in other posts to change the link color but I just want to change it for this table text (not for all links) and can not see how to do this?

    September 20, 2016 at 11:41 am #689070
    Guenni007

    so you have a link on those Twitter … ?

    by default an inline css should overwrite all styles – but try please first with important:

    
<p style="text-align:left; color:#a81010 !important"><span>CONTACT</span>
<span>FACEBOOK</span>
<span>TWITTER</span></p>

    edit : does not work so

    give the table a custom class f.e. nolinkcolor and than via quick css

    .nolinkcolor a {
    color: inherit !important;
}

    and to make it visual that there is a link you can show an icon after those links:

    .nolinkcolor a::after {
    content: " \00a0 \e822";
    font-family: entypo-fontello;
}
    • This reply was modified 8 years, 3 months ago by Guenni007.
    September 20, 2016 at 1:03 pm #689143
    philoakley

    Thanks so much Guenni007

    Unfortunately still not working for me. As soon as I add the link text goes black.

    September 20, 2016 at 2:27 pm #689241
    Guenni007

    and you have done the custom class on the table?

    http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    did you realy read all i wrote on thread before?

    see result here – allthough there is a link on contact it is red font color and to show that there is a link after the link an icon (you don’t need that – but how should visitors know that there is a link if no difference between the other table element is seen)

    http://webers-testseite.de/elegant/table-with-links-inside/

    September 20, 2016 at 6:16 pm #689466
    philoakley

    Hi Guenni007

    Yes to custom class (great feature) but I think you have the solution as I was breaking it using <strong> tags. Should have used the ‘code’ post feature in the first post. When I took the <strong> tags out it worked straight away and then I added bold to the <p> as html below.

    Thank you so much Guenni007 your perseverance has been invaluable and hopefully this post may also help others. Finally to answer an earlier question I created the code using the WordPress Visual Editor to create colours, bold and alignment and then copied the code from the WortPress text editor. I can see not a good idea now.

    <p style="text-align:left;font-weight: bold;">
<span style="color:#a81010"><a href="URL">CONTACT</a></span>
<span style="color:#a81010"><a href="URL">FACEBOOK</a></span>
<span style="color:#a81010"><a href="URL">TWITTER</a></span>
</p>
    • This reply was modified 8 years, 3 months ago by philoakley.
    September 20, 2016 at 6:58 pm #689479
    Guenni007

    yes strong has its own rule so we than had to set a rule similar to 

    .nolinkcolor a {
    color: inherit !important;
}
    September 22, 2016 at 3:05 pm #690285
    Yigit

    Hi,

    Please try adding following code to Quick CSS

    .main_color a,.alternate_color a { color: inherit !important; }

    Best regards,
    Yigit

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.