CSS to modify the Textbook Template

  • Unknown's avatar
    stmoksaikung · Member ·

    Dear All,

    The new textbook template looks great, and I really want to use it on my premium website saikungpropertyhk.com (which is using Rowling now) As I am not very knowledgeable about CSS, I like to see if you can help providing the CSS to
    1) Stop showing the post details when the mouse hover the post on home page. (I want the visitor actually click to view the post for details, and not preview it)
    2) Change the intensity of the filter on pictures
    3) Change the background color of the header (the background color of site logo and site title)
    4) Change the Feature Section’s color from black to other color (it seems the in the customization of theme, I cannot change color of this section)
    5) To hide the date display on the Featured Post

    Many thanks in advance!

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

  • Unknown's avatar
    jjberg83 · Member ·

    Hi @stmoksaikung,

    To fix number 3, insert this into your CSS field:

    nav.navigation, .top-nav, header.header-wrapper {
    background: #666;
    }

    h4.site-description {
    color: #fff;
    }

    Adjust the background color of #666 to your desired color. I also made the site title white to increase the readability against the dark grey backround. Adjust this to your own liking.

  • Unknown's avatar
    jjberg83 · Member ·

    Sorry, I just realized that I inserted the CSS to change your current theme Rowling…

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @stmoksaikung, all of what you ask is very doable. I’ve worked off the demo site since you do not have the theme activated on your site, so there may be adjustments that will need to be made after you switch, but this should give you a head start on things. 

    .card .entry-content > a span {
  display: none !important;
}
.featured-content-inner .hentry .post-thumbnail:hover img {
    opacity: .87;
}
.featured-content-inner .hentry.has-post-thumbnail .entry-meta {
  display: none;
}
.header-wrap {
  background: #aa0055;
}
.featured-content {
  background: #aa5500 !important;
}
.featured-content-inner .hentry {
  padding-top: 0 !important;
}
  • Unknown's avatar
    stmoksaikung · Member ·

    Dear @thesacredpath

    Thanks a lot. I tested it and works great!

    But I guess I may not clearly communicate about my thoughts of hiding the post details (item1). Can the mouse hover effect be just fade out the image a little bit more? as I still want to keep the image and post title rather than showing a blank card.

    For the Feature Page Header background color, how can I change it to other color to match the Feature Content Section (it is still black after change of feature content color)

    I also like to find out a bit more about hiding The Date and Add Comment who show alongside with post title on the single post page. I unchecked the Display Date in Content Options under Customize, but it seems the date still shows. The following CSS in my existing rowling does not work for this textbook template.
    .single-post .post-meta {
    display: none !important;
    }

    Thank you very much for your help!

  • Unknown's avatar
    stmoksaikung · Member ·

    @jjberg83, thanks for your help too.

  • Unknown's avatar
    jjberg83 · Member ·

    I didn’t help much, but you’re welcome =)

  • Unknown's avatar
    thesacredpath · Member ·

    Getting rid of the hover effect on the posts and allowing the image to show on hover is a bit harder than what I thought it would be, so I pulled in one of our developers for help and this is what we came up with. See what you think. 

    .card:hover .entry-header {
  opacity: 1.0 !important;
}

.card:hover .entry-content {
  opacity: 0 !important;
}

.card:hover .post-thumbnail {
  opacity: 0.7 !important;
  transition: opacity .5s !important;
}

.card:nth-of-type(3n+1):hover .star {
  color: #b23f33 !important;
}

.card:nth-of-type(3n+2):hover .star {
  color: #259275 !important;
}

.card:nth-of-type(3n+3):hover .star {
  color: #7c6c9e !important;
}

    This is the CSS to change the background color of the featured content (from what I listed above). 

    .featured-content {
  background: #aa0055 !important;
}

    All you need to do is to edit the color code as desired.

  • Unknown's avatar
    stmoksaikung · Member ·

    Dear thesacredpath

    Thanks! Work great!
    I will play around with it.
    Thanks again

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘CSS to modify the Textbook Template’ is closed to new replies.