Customize CLICK TO TWEET SHORTCODE

  • Resolved gwkopy

    (@gwkopy)


    2 years, 10 months ago

    I put a Click to Tweet for Sassy Social Share on the page above. My shortcode is

    [Sassy_Social_Click_To_Tweet text=”The Illinois Community College Board (ICCB) is picking up the cost for state residents to earn a State of Illinois High School Diploma (formerly high school equivalency certificate). “]

    Works perfectly. However, CLICK TO TWEET is a tiny font size, 4px, perhaps? How can I style the appearance of the box? I do not want to add anything to functions.php. I’m just looking for the classes I should target with custom CSS.

    (The more I see what you’ve created here, the more I like it.)

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter gwkopy

    (@gwkopy)

    2 years, 10 months ago

    I found part of what I need to change!

    .heateor-sssp-ctt-text a

{padding:15px 0;

margin:15px 0;

position:relative;

color:#000!important;

font-family:helvetica neue,Helvetica,Arial,sans-serif!important;

font-size:1.5em;

line-height:140%;

font-weight:100;

text-decoration:none!important;

text-transform:none!important;

word-wrap:break-word;

border-bottom:none!important;

box-shadow:none!important}

.heateor-sssp-ctt-text a:hover{

text-decoration:none;

color:#999!important;

}

.heateor-sssp-ctt-btn

{border-bottom:none!important;

margin:0;

padding:11px 24px 0 0;

position:relative;

display:block;

text-transform:uppercase;

font-family:helvetica neue,Helvetica,Arial,sans-serif!important;

font-size:.7em;

font-weight:700;

color:#999!important;float:right;

text-decoration:none!important;

box-shadow:none!important

}

.heateor-sssp-ctt-btn:hover

{text-decoration:none;

color:#666!important

}

    So, I wrote this so far:

    a.heateor-sssp-ctt-btn
    {font-size:1.5em;
    color:#013300 !important;}

    I want to change the background color of the box that holds the text, maybe give it rounded corners too. Gave up going dizzy trying to read the condensed CSS to find the right classes.

    Plugin Author Heateor Support

    (@heateor)

    2 years, 10 months ago

    Sure. To change the grey color, use following CSS.
    pre.wp-block-preformatted{background:#1a73e8 !important}

    To change the White color, use following CSS
    span.heateor-sssp-click-to-tweet{background-color:#ccc !important}

    Replace the color-code in the CSS mentioned above with the color of your choice.

    Thread Starter gwkopy

    (@gwkopy)

    2 years, 10 months ago

    One more question, please. How do I change the font color on mobile and tablets? The color on smaller screens is too light right now. Thank you!

    https://www.dropbox.com/s/xpis684a3mfqv4d/IMG_5901.jpg?dl=0

    Plugin Author Heateor Support

    (@heateor)

    2 years, 10 months ago

    Sure. You can use following CSS for this.
    @media screen and (max-width:783px){pre.wp-block-preformatted span.heateor-sssp-ctt-text{color:#2b2c30 !important}}

    Thread Starter gwkopy

    (@gwkopy)

    2 years, 10 months ago

    Hi: I’m getting the same results. Here’s the CSS I published:

    /Click To Tweet for Mobile/
    @media screen and (max-width:783px)
    {
    pre.wp-block-preformatted span.heateor-sssp-ctt-text
    {
    color:#000 !important;
    font-weight:700;
    }

    Screenshot

    Plugin Author Heateor Support

    (@heateor)

    2 years, 10 months ago

    The CSS you have used is working. See

    View post on imgur.com
Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Customize CLICK TO TWEET SHORTCODE’ is closed to new replies.

Tags