Custom Header on Blog Page using Goran

  • Unknown's avatar
    clundmark · Member ·

    I am experimenting with the Goran theme and have noticed an inconsistency with the Custom Header Image on Blog pages. Sometimes it shows and sometimes not. For example, looking at an individual post the custom header image does not show, but when l click the category in metadata the list of posts for the category does show the custom header image, but the list of all posts does not show it. The inconsistency makes the user experience clunky. Is it a bug or by design? Is there any way to fix it?

    Blog Page (all posts)- No
    Individual Post -No
    Author list – Yes
    Category archive – Yes
    Tag list – Yes
    Post Format List – Yes

    Thanks in advance,
    …
    clint

  • Unknown's avatar
    thistimethisspace · Member ·

    Your username is linked to a site wearing the Twenty Eleven theme. I’m sorry but we cannot provide accurate answers to any blogger who fails to provide the exact URL starting with http:// for the exact blog they refer to so we can verify where it is hosted. Please do that now.

  • Unknown's avatar
    clundmark · Member ·

    Sorry. I didn’t think it was necessary to give a site since it happens consistently with the theme. I am experimenting using another site. http://tnici.wordpress.com.

  • Unknown's avatar
    thistimethisspace · Member ·

    Thanks for that URL. I tagged this thread for Themes Staff assistance. Please subscribe to it so you are notified when they respond. Note there is a backlog so you will have to wait patiently for Staff help.

  • kathrynwp · Staff ·

    Hi Clint, I’m clarifying with our developers whether this is the intended header display in Goran and we’ll keep you posted here.

  • kathrynwp · Staff ·

    Hi Clint, I clarified directly with the theme’s creator exactly where the custom header is displayed in Goran.

    The custom header is displayed as the background in the “hero” area on which the page title is present in these areas:

    – tag/category/author/post format and other blog archive pages
    – static pages, unless you’ve uploaded your own featured image that’s large enough to meet the theme’s minimum size, in which case your featured image is displayed instead

    The custom header is not displayed on:
    – blog index page
    – individual blog posts

    I updated the theme documentation to be more explicit, as well.

    While the theme designer appreciates your feedback about apparent inconsistency, we aren’t able to modify the way Goran uses the custom header at this stage, since there are already many people using the theme.

  • Unknown's avatar
    clundmark · Member ·

    Kathryn, Thanks for the reply. Seems like a bit of a strange design choice, but I’m sure there is a reason for it and with the right site it probably makes sense. I am a little bummed because I was just about ready to start using it on another much more active site – I had even written some custom .css. However, the changing header from no image to an image along with changing header dimensions while reading the blog is kind of annoying. I’m sure another good theme will come along!

  • kathrynwp · Staff ·

    You might want to check out Edin if you haven’t already. It displays the custom header on the blog index and single blog posts, as well as pages, and is similar in look-and-feel to Goran. (In fact, in technical terms it’s the “parent” theme of Goran – most of their code is the same!)

  • Unknown's avatar
    pfhyper · Member ·

    Is it possible to add an image to the blog page via custom CSS?

    Thanks.

  • Unknown's avatar
    rachelmcr · Member ·

    You could try adding a background image to the header area (behind the site title and menu) using custom CSS. You could try something like this to do that:

    .site-header {
background-image: url(http://gorandemo.files.wordpress.com/2014/08/keyboard-338502_1920.jpg?w=1230);
}

    You can replace the URL in that CSS code to link to the header image you’d like to use there.

    You can also restrict that to just the blog page using CSS like this:

    .blog .site-header {
background-image: url(http://gorandemo.files.wordpress.com/2014/08/keyboard-338502_1920.jpg?w=1230);
}

    If you give that a try, let us know how it goes! :)

  • Unknown's avatar
    clundmark · Member ·

    So, just for “fun”, I went down the path trying to use CSS. It’s a little harder than it seems like it should be, due to lack of supporting HTML tags and the responsive design. However I got very close to matching the rest of the theme for blog posts. It is not perfect but here is what I have done…so far! To use it:
    1 – replace [image] with a full url to an image in the media library. Image should match theme’s header image specifications.
    2 – replace [color] with the same color as custom color Accent Two.

    .blog .site-header,
.single .site-header {
	background-image: url('[image]');
	background-size: cover;
	background-position: 50% 50%;
	min-height: 245px;
	}

.blog .site-logo,
.single .site-logo {
	margin: 0px auto;
	}

.blog .site-branding,
.single .site-branding{
	padding: 24px;
	background-color:[color];
	}

@media screen and (min-width: 600px) {
	.blog .site-header,
	.single .site-header	{
		min-height: 293px;
	}
}

@media screen and (min-width: 768px) {
	.blog .site-header,
	.single .site-header	{
		min-height: 389px;
	}
}

@media screen and (min-width: 1020px) {
	.blog .site-header,
	.single .site-header	{
		background-size: 100%;
		min-height: 339px;
	}
	.blog .site-logo,
	.single .site-logo	{
		margin-left: 0px;
	}
	.blog .site-branding,
	.single .site-branding{
		background: none;
		padding-left: 0px
	}
}

@media screen and (min-width: 1230px) {
	.blog .site-header,
	.single .site-header	{
		height: 435px;
	}
}
  • The topic ‘Custom Header on Blog Page using Goran’ is closed to new replies.