This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

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

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.

Need fast email support? Get SiteOrigin Premium

Replies

5
  1. Support Assistants 10 years, 2 months ago

    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. Antonio Prado-Processing Raw 10 years, 2 months ago

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

  3. Support Assistants 10 years, 2 months ago

    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. Antonio Prado-Processing Raw 10 years, 2 months ago

    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. Support Assistants 10 years, 2 months ago

    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.

Have a different question or issue?

Start New Thread