comment button not affected by css

  • Unknown's avatar
    moshekahol · Member ·

    Hi it seems that the comment button in my post not affected by css changes.. it is round and not square, color etc…
    you can see it try commenting here: https://kahol.co.il/2016/08/05/%d7%90%d7%99%d7%9a-%d7%9c%d7%94%d7%99%d7%95%d7%aa-%d7%aa%d7%97%d7%a8%d7%95%d7%aa%d7%99/#more-327

    how can I target it with css?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    innisfreehomestead · Member ·

    Hello Moshekahol!

    It looks like this would target it (still need to make sure the CSS is set as important to overrule the previous “important” styles)

    #page #comments #respond p.form-submit input#comment-submit {
	border-radius: 0px !important;
	background-color: #f2d747 !important;
}

    Let me know whether that works or not,
    Sage

  • Unknown's avatar
    moshekahol · Member ·

    Hi it worked :)
    Im trying another similar thing.. maybe you know what to do :)
    I used this: a:hover {
    color: #ffcc00 !important;
    }
    to change the text hover color in a side bar button and in one button in my home page… but it also changed the menu text color…
    how can I target the menu color or maybe restrict the css code I gave just to the side bar button and home page button?

    thank you very much!!

  • Unknown's avatar
    innisfreehomestead · Member ·

    That’s great!

    a.button {
color: #ffcc00 !important;
}

    Should do it, targeting just the buttons.

    Sage

  • Unknown's avatar
    moshekahol · Member ·

    it didnt work… made the button the color of text
    I used this:

    .widget a:hover {
    color: #ffcc00 !important;
    }

    .widget-footer-area
    a:hover {
    color: #000000 !important;
    }

    hope it wont make a mess with css or make it to comlicated in the future…

    if there is simpler way I will be happy to know :) thanks sage

  • Unknown's avatar
    innisfreehomestead · Member ·

    Hey there,

    If you’d like the background affected then this would work better: 

    a.button {
background-color: #ffcc00 !important;
}

    Does that work better?
    Sage

  • Unknown's avatar
    moshekahol · Member ·

    no it mess it up.. it should be black text on gold and then when over gold text on black

  • Unknown's avatar
    innisfreehomestead · Member ·

    Ah, how about this?

    a.button {
background-color: #fc0 !important;
color: #000;
}

a.button:hover {
background-color: #000 !important;
color: #fc0;
}

    Sage

  • Unknown's avatar
    moshekahol · Member ·

    dont know why… but this the only one seems to work:

    #post-1685 a:hover {
    color: #ffcc00 !important;
    }

    .widget a:hover {
    color: #ffcc00 !important;
    }

    .widget-footer-area
    a:hover {
    color: #000000 !important;
    }

    hope there will be no css complication with this in the future

  • Unknown's avatar
    innisfreehomestead · Member ·

    :) If that works for what you’d like to do, great!

    It will only affect the link in that one particular post and any links in the widget areas, can always tinker with it further should the need come up in the future. I doubt you’ll have complications unless you want a different coloured link in your widgets, in which case you could always do inline styling as a workaround. Example:
    <a href="http://wordpress.com" style="color:red;">Example Link Text</a>

    Glad it’s sorted,
    Sage

  • Unknown's avatar
    moshekahol · Member ·

    thanks sage, only thing is when I hover on the link it dissappear (same color black when hover) how can I fix it?

  • Unknown's avatar
    innisfreehomestead · Member ·

    Hey there,

    I can’t seem to find the button you’re referring to, would you mind pointing me to which one isn’t working properly?

    Thanks,
    Sage

  • Unknown's avatar
    moshekahol · Member ·

    Hi sage :) you are so kind to help!

    in the buttom here: kahol.co.il
    you can see now 3 text widgets in the buttom fotter. Im trying to do the foloowing:
    1. align the text widgets titles to the center
    2. target only the buttons in that area to change thier color etc…
    3. align every button there to the center under the text

    thank you so much!! :)

  • Unknown's avatar
    innisfreehomestead · Member ·

    Hey, my pleasure!

    This should address all three points: 

    .widget-footer-bottom-area .widget-title {
	text-align: center;
}
.widget-footer-bottom-area .button {
	background-color: #000 !important;
	color: #ffcc00 !important;
	margin: 0 auto !important;
	display: block !important;
	max-width: 128px !important;
}
.widget-footer-bottom-area .button:hover {
	background-color: #ffcc00 !important;
	color: #000 !important;
}

    Let me know if that doesn’t work,
    Sage

  • Unknown's avatar
    moshekahol · Member ·

    Yes it works :)
    dont know if it happened because of recent changes I made or it always was like this: I did some fonts changes in my theme with css but now it looks like it doesnt affect phone screens. do you know how to fix it sage?

    thank you very much! you are helping me so much! Im really greatful for your help!!!

  • Unknown's avatar
    moshekahol · Member ·

    also sage do you know how to target the titles size of the text widgets on bottom? thanks again !

  • Unknown's avatar
    moshekahol · Member ·

    ok I used this: .widget-title {
    font-size: 100% !important;
    }

    only thing left is making the changes seen in phone screen also… really dont know why the font changes in css wont affect phone screen

  • Unknown's avatar
    innisfreehomestead · Member ·

    Glad to be of assistance!

    The font size looks to be the same to me for the footer widget titles on mobile and desktop, are you still seeing this issue?

  • Unknown's avatar
    moshekahol · Member ·

    Yes, it’s the font type which change in mobile

  • Unknown's avatar
    moshekahol · Member ·

    It in all my site.. the font won’t stay the same In phones

1 2
  • The topic ‘comment button not affected by css’ is closed to new replies.