Need help? Check out our Support site, then


Goran Theme Help

  1. Hi, I would like some help making a couple of changes to the Goran theme. I have been having a hard time finding a theme that I like but feel like this one would be it, of course with some changes. I would like to be able to make these changes if possible.

    1. Add the site tagline
    2.Make the top area where the menu & site title not transparent, if possible then change it to the color of my choice
    3. I would like the header image to be smaller in height.
    4. Place a small site logo next to the site title and tagline.

    I would appreciate your help. Thank you

    The blog I need help with is divinereconstruction.com.

  2. Hi there, the following should take care of all your request. See what you think and let me know.

    On the tagline, I set the color to white since it was a dark grey and didn't show up, and I also increased the size a bit since it was quite small. The bottom margin was adjusted as well since the font size adjustment created a slight gap at the top.

    Make sure and check at various browser window width, and also check on tablet and phone if you can. In my testing, all seems to be good with these changes.

    .site-description {
      display: block;
      color: #fff;
      font-size: .875em !important;
      margin-bottom: 15px;
    }
    .hero {
      background-color: #fff !important;
    }
    @media screen and (max-width: 599px) {
      .hero-image .hero {
        background-size: cover;
        padding-top: 100px;
      }
    }
    @media screen and (min-width: 1020px) {
      .hero-image .site-header {
        background-color: #000026;
      }
      body.hero-image .hero.without-featured-image {
        background-size: contain;
        padding-top: 190px !important;
      }
    }
    @media screen and (min-width: 1230px) {
      body.hero-image .hero.without-featured-image {
        padding-top: 130px !important;
      }
    }
  3. I love the changes so far but I would like to make a few more adjustments if possible.

    1. The site title and tagline I would like next to logo instead of on top also the logo I want it to be resized to be smaller.

    2. At the footer, there are social icons I would like to make white. I tried the color change in the customizer but the effects other aspects of the site.

    3. Is it possible to add padding around the side widgets if so, then can I adjust the color?

  4. The title/tagline go center aligned at screen/window widths 1020px and narrower, what do you want to do with the logo when that happens? With the menu being center aligned at 1020px and narrower, it, I would think, would look better to have the logo center aligned above the title/tagline, but we can keep it left aligned if you wish. Let me know.

    For #2:

    ul[id^="menu-social"] a:before {
      color: #fff;
    }

    For #3, this is a bit of a challenge as the code for the FB widget comes from FB and as such, we can't change much about it, and if we do, it ends up with things cut off. You can add the following to your custom CSS and see what I mean. The Twitter widget is a little bit more cooperative.

  5. Oops, sorry, I forgot to paste in the code for the sidebar change.

    @media screen and (min-width: 1020px) {
      #secondary .widget {
        padding-left: 15px;
        padding-right: 15px;
        background-color: #ccc;
        padding-top: 20px;
      }
      #secondary .fb-page span, #secondary .fb-page span iframe {
        max-width: 95% !important;
      }
      #secondary .twitter-timeline {
        max-width: 99% !important;
        width: 100% !important;
      }
    }
  6. Hi, Thanks for your help. I have a few more things I would like help with.

    1. Is it possible to add a small logo next to the website title and tagline only in full view/Pc version?

    2. The facebook widget seems to be small in width. Is there a way to expand the widget to show more content?

    3. in the header image is the page title, I would also like to change the color for that. I would also prefer to change the color of the footer and the widget title.

    4. Is it possible to have a sticky floating menu?

    5. Can I make the website-wide view instead of a boxed view?

  7. For the logo, this should do it. I pulled an image from your Media Library.

    @media screen and (min-width: 1020px) {
    .site-branding {
      background: url('https://divinereconstruction.files.wordpress.com/2018/02/cropped-final-logo41.jpg') no-repeat scroll left 30px / 65px;
      padding-left: 80px;
      width: 350px;
    }
    }

    On the FB widget, we can't do a lot with it since we aren't in control of the code, FB is, but replace this media query with the following. I've changed a couple of things, added a #secondary width change, and made some adjustments.

    @media screen and (min-width: 1020px) {
     #secondary .widget {
      padding-left:10px;
      padding-right:10px;
      background-color:#ff0;
      padding-top:20px
     }
     #secondary .fb-page span,#secondary .fb-page span iframe {
      max-width:97.5% !important
     }
     #secondary .twitter-timeline {
      max-width:99% !important;
      width:100% !important
     }
      #secondary {
        max-width: 290px;
        width: 100%
      }
    }

    On the page titles, this will allow you to change the color of them when there is a featured image set on that page.

    .page.hero-image .page-title {
      color: #cc0000;
    }

    If you wish to change all page titles (featured image or not) then use this instead.

    .page .page-title {
      color: #cc0000;
    }

    Widget title colors:

    .widget-title, .widget-title a {
      color: green.
    }

    A sticky menu is a bit more challenging, and due to it being in the same parent div as the title/tagline, we have to do the whole thing. I've limited this to screens/windows 1020px and wider since the header area takes up quite a bit of space on a tablet in landscape orientation. See what you think.

    @media screen and (min-width: 1020px) and (max-width: 1229px) {
      #masthead {
        position: fixed;
        width: 100%;
        max-width: 1020px;
      }
    }
    @media screen and (min-width: 1230px) {
      #masthead {
        position: fixed;
        width: 100%;
        max-width: 1230px;
      }
    }

You must log in to post.

About this Topic