5 questions for Dazzling Child theme customization

Hi Support. First, thanks for creating such terrific themes. I started with Sparkling and then I discovered Dazzling :slight_smile:
I have set up your Dazzling Child on my test blog https://www.nevillehobson.com/sb03/. I’m doing some simple customization, and I’m close (80%) to preparing to use this on my primary site. 80% is good enough to go; I can tweak things after that.
I have just 5 questions that I hope you can help me with:

  1. How to remove top nav menu hover colour and replace with underline on each menu item text as you hover over each one?
  2. How to remove individual items from post-meta beneath post title? Eg, comments text and link
  3. How to change attributes of ol, ul and blockquote to be same as body text, ie, same font, colour and size?
  4. How to indent blockquote to same indent as ol and ul?
  5. How to change the width percentage of featured images on the home page to be 100%? If I play with this code for the first image as identified by Inspect (in Chrome), it works:
@media (min-width: 768px)
bootstrap.min.css?ver=4.8.1:5
.col-sm-6 {
    width: 100%;
}

but I cannot see how to code this for the style sheet. Would such a change have any negative effect on seeing the site on a mobile device (smaller screen)?
Thank you, I appreciate your support!

Hello there,

I hope you are doing well today.

You can use the following CSS code to makes the changes requested by going to Appearance > Customize > Additional CSS and pasting it there.

1./*Menu underline*/ .navbar-default .navbar-nav>li>a:hover { color: #000; background-color: #fff; text-decoration: underline; }

  1. `/Comments and category removal/
    span.comments-link, span.cat-links {
    display: none;
    }


3.

/Blockqoute and list items/
li, blockquote p {
font-size: 20px;
font-family: serif;
color: black;
}`

  1. /*Text indentation*/ blockquote p{ margin-left: 12px; }

  2. It would be best to copy and add this CSS code to the Additional CSS section so that you can ensure the changes you make to the CSS are saved in an update.This CSS code should not affect the mobile version of the site too much because when you change the width, in most cases the other elements would be pushed down.

Please make and use a child theme to contain the changes that you make to the theme because the changes can be removed when the theme updates. Here is a plugin to help you create a child theme:

Best Regards,
Support

Thank you for all of your suggestions. Everything works.
Yes, I am using a child theme, based on the Dazzling Child Theme you made. A big help for starting!

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support