Advanced modifications of Spun theme

  • Resolved Gueno87

    (@gueno87)


    9 years, 9 months ago

    Hello,

    I’ve build a blog and I wondered if it is possible to border the circle in which we click in order to access to the posts with a color. The color have to be different depending on the category in which the post is.

    I have created the css class for each of the categories. I know that the modifications had to be done here in style.css :
    .blog .hentry a .attachment-home-post,
    .archive .hentry a .attachment-home-post,
    .search .hentry a .attachment-home-post {
    border-radius: 180px;
    opacity: .8;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    width: 100%;
    height: 100%;
    z-index: 1;

    But I don’t know how.

    Thanks you in advance for your help

Viewing 2 replies - 1 through 2 (of 2 total)
  • CrouchingBruin

    (@crouchingbruin)

    9 years, 9 months ago

    It can be done, but you have to make sure the theme options are set to always display color circles (Appearance > Customize > Theme Options, then check the box labeled Always show colored circles). Otherwise, the borders are going to be in black & white until the user hovers over the circle with the mouse.

    Each article element will have a category class name assigned to it, that looks like category-category_slug. For example, if you have a category called Dogs with a slug of dogs, then the class name would be category-dogs.

    So you can add a rule like this in your custom CSS (do not modify the theme’s style.css file, because those changes will be lost the next time the theme gets updated. Instead, either create a child theme or use a CSS plugin like Custom CSS Manager):

    .blog .hentry.category-dogs a .attachment-home-post,
.archive .hentry.category-dogs a .attachment-home-post,
.search .hentry.category-dogs a .attachment-home-post {
   border: 5px solid #ff0;
}

    This will create a yellow border around buttons with the category dogs.

    Thread Starter Gueno87

    (@gueno87)

    9 years, 9 months ago

    Thanks you very much, it works perfectly ! 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Advanced modifications of Spun theme’ is closed to new replies.

Tags