About headlines

Hi,

me again.

So I wonder how to change the size of headlines?
I tried to change it in using the override.css. I did a few things using the override.css and it is working. But not the headlines.

I'd like to have h1 - h6 in a smaller size. So I reduced the count of px. Uploaded override.css in the right place, but nothing happend.
So, what did I missing? (1. at screenshot)

Another question about headlines:
If I choose a category or a post, the new side appears and below the menu area the headline of that category, tag, page or post appears in white letters. The slider is pushed down a little. How can I stop that? I don't want that appearing. (2. at screenshot)

Thanks for helping!!!

cheers
Alex

And just another quick question:

Where can I change the space for the headline within the slide?
I mean the part you can see in may attachement "Spitzstein - Dem Himmel so nah!"
Where below the time bar is running.

I just would like to have a little more space for the huge headline. Like more than 10/11 chars.
Where is that possible to change? Any css-File?

Thanks a lot again!

cheers
Alex

Hello,

You can remove these additionall headline (2) from Template Options -> Features tab -> "Page title block" option.
Use the following code to change article headlines:

Code: Select all

#gk-mainbody article > header h1,
#gk-mainbody article > header h2 {

}


Regarding the slider headline space - add also this code into override.css:

Code: Select all

.gk-is-wrapper-gk-game figcaption > div {
   width: 65%;
}


If it's not enough, you can also decrease the font size of this headline:

Code: Select all

.gk-is-wrapper-gk-game figcaption h2 {
   font-size: 80px
}


Hi Piotr,

thanks for helping. Works very well!

But the thing about the size of headlines:
I would like to have each headline in a specific size. So the css code you told me just resizing the h1. The h2 does not change. And it's just within posts.
So, how could I set a specific size for each headline typ h1 h2 h3 h4 h5 h6?
And that for posts and pages.

Thank you!

cheers
Alex

And another question:

You set single-post like in that attachment "Single-Post".
I'd like to have it the same way:

1. Headline of Category
2. Background-Image
3. Margin between menu-area and mainbody

Where can I find that settings?
How do you set it?

Thank you for your help!

cheers
Alex

Headers in the page/post you can change using these selectors:

Code: Select all

.content h2,
.content h3,
.content h4,
.content h5,
.content h6


Regarding your second post:

Headline of category - it's not possible, because you've disabled this option: Template Options -> Features tab -> "Page title block".
You can enabel it and manually change Game/layouts/before.php and this fragment :

Code: Select all

if (is_category() || is_single()) {
         echo '<h2 class="gk-page">' . get_the_category_list(' ') . '</h2>';
      }

change into

Code: Select all

if (is_category() ) {
         echo '<h2 class="gk-page">' . get_the_category_list(' ') . '</h2>';
      }


and remove other conditions.

Background you can choose in Template Options -> Basic tab and "Background image file" option. (first you have to disable image show on these pages - using widget rules you can specify on which pages header slider should be visible - i.e. only on homepage)
https://www.gavick.com/documentation/wo ... get-rules/

After that margins should be also the same as on our demo website.

Hi Piotr,

thanks! But it's funny.
I did like you told me about page title block and before.php. Got a black screen.
As I used page title block enabled and the original before.php it worked! Great

About the background image:
Is it possible to af a specific image for each category?

Guess I have to use image show without animation and widget rule to show a image for a specific category.
That was my first idea about. But maybe I loose some perfomance???

I prefer some common solution before changing php-code. It is because I want to avoid more work after updating

Thanks

Alex

So, different image shows for different categories don't work.
So how to I have one background images for every page. Is there a chance to have one specific image for the different categories?

And I just do not understand that whole thing about selectors.

I would like to change the size of a headline. For example I'd like to have h1 smaller. Or h2.
So I finde the selectors you told me int shortcode.typography.css. Is this right? But I do not know how to change the size of h1???

Isn't it in template.css - 1.2. Base typography elements)
There I have all headlines. For example h1:

h1 {
font-size: 44px;
font-weight: 500;
}

So, I would think, changing font-size: 44px to 34px would effect, that h1 is becoming smaller on pages. But it won't.
Tried that with the override.css. But no effect.

So, what can I do?

Thank you!
Alex

Hi,

In the Game theme there's default h1,h2,h3.. selectors - but there's also cusotmized version of the headlines, so you have to know exactly which headline do you want to change, are you using Firebug or Google Dev Tools to inspect elements on your website (using mentioned tools you can find the correct selector), then you have to copy this selector into override.css file and add the same properties e.g. font-size but with another values (bigger/smaller font). CSS rules from override.css are more important than others and you'll have no problem with future updates. If you'll still have problem with that - please provide a screenshot or more details which headlines do you want to change.

Regarding the category images - you can use category slug as a css class, so i.e. for the burgentouren category - use this css:

Code: Select all

.category-burgentouren #gk-bg {
background-image:  url('../images/header_bg.jpg');
}


And use other images with other css, like .category-kleine-burgenkunde etc.

Regarding the category images - you can use category slug as a css class, so i.e. for the burgentouren category - use this css:

Code: Select all

.category-burgentouren #gk-bg {
background-image:  url('../images/header_bg.jpg');
}


And use other images with other css, like .category-kleine-burgenkunde etc.

Hi Piotr,
well, it does not work. Could you please tell me, how exactly I have to set this css code and where???
I just get gray backrground but no images.

this path form my code - ../images/header_bg.jpg is an image with grey background - you have to replace this path to your image URL - if you have image uploaded in the media library, please edit this image and on the right column you'll have Image URL - copy the URL and use it instead of ../images/header_bg.jpg, that's all.

Good morning Piotr,

sorry, I don't get it work ...

That is, what I put into override.css:


#gk-bg {
background: #ababab url('../images/header_bg.jpg') no-repeat center 0;
background-size: 1680px 1000px;
overflow: hidden;
}



.category-burgentouren #gk-bg {
background-image: url('http://work.luftschubser.de/wp-content/uploads/2014/09/bg-burgen3.jpg');
}

.category-bergtouren #gk-bg {
background-image: url('http://work.luftschubser.de/wp-content/uploads/2014/09/bg-berge4.jpg');
}

.category-bergtouren #gk-bg {
background-image: url('http://work.luftschubser.de/wp-content/uploads/2014/09/bg-outdoor2.jpg');
}


I also deleted the first - original - #gk-bg part. But it does not work.
Just grey background ...

What did I miss?

Thank you.

cheers
Alex

On you category page here: http://work.luftschubser.de/category/burgentouren/ I see this image as a backgorund:
http://work.luftschubser.de/wp-content/ ... urgen3.jpg

So it's ok I think, please refresh your browser's cache or check another browser.

And another question:

You set single-post like in that attachment "Single-Post".
I'd like to have it the same way:

1. Headline of Category
2. Background-Image
3. Margin between menu-area and mainbody

Where can I find that settings?
How do you set it?

Thank you for your help!

cheers
Alex

Just get back to point 3. Margin between menu-area and mainbody.
In the screenshot above, in your demo, the space between menu area and the headline news is bigger than it is in my example:
http://work.luftschubser.de/zenokopf-zw ... amsknogel/

Where can I increase space between menu-area and the headline "Bergtouren"?

thanks
Alex

Try to add this code into override.css file:

Code: Select all

#gk-head h2.gk-page {
   padding-top: 120px;
}


Unfortunately it's not possible to have the background on the single posts (depends on the category) without a lot of additional modifications.

Good morning and thanks you!
I will try that.

In the end, I have chosen a unique bg image for all categories. Better that, than the lot of work for just a few images.

Thanks and have a nice day!

cheers
Alex