Home>Support>Changing colour font in titles and excerpt in Circle Grid blog Layout

Changing colour font in titles and excerpt in Circle Grid blog Layout

Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

I could change both through the custom CSS plugin in NORMAL GRID mode (squares thumbnails), but I cant do the same when selecting the circle mode.
Can u please, send me the css code I need to use to change both titles and excerpt in such Layout?

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 7 months ago Support Assistants

    Sure :)

    Try the following at Appearance > Custom CSS. Edit the color values as required:

    /* Circle Icon Loop */
    
    .widget_circleicon-widget .circle-icon-box h4 {
        color: #3b3b3b;
    }
    
    .widget_circleicon-widget .circle-icon-box p.text {
        color: #5e5e5e;
    }
  2. 9 years, 7 months ago Antonio Prado-Processing Raw

    Thnaks, it works.
    Is it possible changing the size of the circle thumbs?

  3. 9 years, 7 months ago Support Assistants

    You can try:

    .widget_circleicon-widget .circle-icon-box.circle-icon-position-top .circle-icon {
        margin-left: -32.5px;
    }
    
    .widget_circleicon-widget .circle-icon-box .circle-icon {
        width: 65px;
        height: 65px;
    }

    The second two values, currently 65 and 65 must be the same as each other. The most you can increase them to is 150 and 150. The first value, currently -32.5 must be half whatever you set the second two values to. For example:

    .widget_circleicon-widget .circle-icon-box.circle-icon-position-top .circle-icon {
        margin-left: -40px;
    }
    
    .widget_circleicon-widget .circle-icon-box .circle-icon {
        width: 80px;
        height: 80px;
    }
  4. 9 years, 7 months ago Antonio Prado-Processing Raw

    Thanks, it perfectly works, but with one handicap, when u make the icon largers, they get overlapped with the title of the post.
    Are ther eany way of avoiding this overlapping?

  5. 9 years, 7 months ago Support Assistants

    Try adjusting the width of each column using:

    .vantage-circleicon-loop .widget_circleicon-widget {
        width: 33.333%;
    }

    Change the percentage value as required.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More