• Resolved LilMoke

    (@lilmoke)


    Hello,

    Love the Theme!!! I added a header image and choose none for the overlay getting. It works ok, but if the image has a white background, or a transparent background it seems to be overlaid in a gray.

    Can you please tell me if this is a known issue with an overlay setting of ‘none’, or is there something I need to do to my image?

    Thank you.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Theme Author Kyle Gabriel

    (@kizniche)

    Hi LilMoke,

    Thanks for the kind words. Currently, I have not added the customizer functionality to change the overlay. However, you can edit the theme style.css to accomplish this. It’s advisable to create a child theme if you don’t wish for this edit to be overwritten with any future updates to the theme. Find the following and change the “0.2” to “0.0” to remove the overlay.

    .overlay {
        background:rgba(0,0,0,0.2) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAQAAADYv8WvAAAADklEQVQIHWNgYGBoACMABIoBAUIssgcAAAAASUVORK5CYII=) repeat;
        min-height:200px;
        padding:10px 0 0
    }

    I hope this helps, and if you have time, please leave a rating ??

    Kyle

    Thread Starter LilMoke

    (@lilmoke)

    Sounds gods, I will try it in the AM. One last question, is there a way to decrease the spacing between the image/header on the home page and the text under it. If that does not make sense, later I can post a screenshot.

    Thank you again and I will definetly rate!!

    Theme Author Kyle Gabriel

    (@kizniche)

    LilMoke,

    Sure! There are two sections that define a top margin and padding that affects the space between the header and the content area. Just edit style.css and find the following two sections…

    Edit the margin-top in the code below and change it to 0 or something smaller than 40px:

    .site-content {
        margin-bottom:4em;
        margin-top:40px;
        //margin-left:1em;
    }

    Then, find the following…

    .content-area {
        padding: 2.0em;
    }

    and change it to…

    .content-area {
        padding: 0 2.0em 2.0em 2.0em;
    }

    There should be no space if you set margin-top:0; in the first section and change the second section to the new padding.

    Thread Starter LilMoke

    (@lilmoke)

    All the above worked great!! Thanks for the help!!! I am new to WordPress so I was wondering if the page that appears in the content are under the header can be NOT styled? I am trying to add a table and some text, but I want it to take a slightly different style. For example, the Theme tables have an alternating grey row, and bigger font size than I would like.

    Thank you

    Theme Author Kyle Gabriel

    (@kizniche)

    The gray even cells of a table is defined in style.css. You can edit or delete the following lines to change it:

    table tr:nth-child(even) {
        background:#f5f5f5
    }

    You can also edit the other table attributes in the same section of style.css:

    /* Tables */
    table {
        font-size:0.9em;
        margin:0 0 1.5em;
        padding:0;
        width:100%
    }
    
    thead {
        background:#f5f5f5
    }
    
    th {
        font-weight:700
    }
    
    td,th {
        padding: 0.5em;
    }
    
    table tr:last-child td {
        border-bottom:none
    }
    
    table tr:nth-child(even) {
        background:#f5f5f5
    }
    Thread Starter LilMoke

    (@lilmoke)

    I am also having an issue when I view it on a mobile device. The menu the shows in the upper right does not work. It also does not work on the desktop when the window is small, but the text menu works fine.

    Theme Author Kyle Gabriel

    (@kizniche)

    I’ve had multiple people experience this (mobile menu not working).

    It appears to be a conflict with a plugin. I would suggest disabling all plugins and seeing if it works. Then, enable one plugin at a time until you find the one that is causing conflicts.

    Thread Starter LilMoke

    (@lilmoke)

    Ok, I will check my plugins’s. Also, if I shrink my browser down or use mobile device, the footer also disappears. FYI. The menu shares the problem on the desktop as well, when the window is narrow.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Header Image Gray…’ is closed to new replies.