Docs

[Referee]

Hi,

I would like to change a few things at the Blog page of Band Demo template:

1) Background color of the header with site title and menu items shall not be transparent as it is on other regular pages. Is that the customization of the Band demo of standard behavior for Integrity Stack?
2) How to change tags background or their semitransparancy level in normal state and in hover state? Is that also Band’s customization?
3) How to change hover color for posts featured images?

Thanks.

[Referee]

This reply has been marked as private.

[Paul R]

Hi,

Thanks for writing in!

Add this in Custom > Edit Global CSS in the customizer.

1.

.blog .x-navbar, .single .x-navbar {
    background-color: #fff;
}

2.

/* normal state */
.blog .p-meta a {
        color:red;
}

/* hover state */
.blog .p-meta a:hover {
     color: blue;
}

3.

.blog .entry-thumb {
        background-color: red;
}

Hope that helps.

[Referee]

Hi,

Points 1 and 3 are working great but the second one is not.

[Jade]

Hi there,

Please try this:

/* normal state */
.entry-footer a {
        color:red;
}

/* hover state */
.entry-footer a:hover {
     color: blue;
}

Hope this helps.

[Referee]

Selectors are correct, thanks a lot. Maybe you could also provide right selectors for pagination in the bottom of the blog?

[Rue Nel]

Hello There,

If you want to change the colors of the pagination in the bottom of the blog page, please use this code:

.x-pagination span.current {
	color: white;
    background-color: red;
}

.x-pagination a, .x-pagination span {
	color: green;
    background-color: yellow;
}

Feel free to change the color that will match with your site. I have used the colors so that you can easily see which one applies to what.

Hope this helps.

[Referee]

Thanks, I haven’t checked that but I just noticed that I also need selector for selected/active state for both Meta Tags and Pagination.

[Rue Nel]

Hello Again,

For the meta tags:

.entry-footer a{
    background-color: blue;
    color: yellow;
}

.entry-footer a:hover {
    background-color: green;
    color: red;
}

For the pagination;

.x-pagination span.current {
	color: white;
    background-color: red;
}

.x-pagination a, .x-pagination span {
	color: green;
    background-color: yellow;
}

Feel free to change the color that will match with your site. I have used the colors so that you can easily see which one applies to what.

[Referee]

OK, cool. However on mobile it looks like there is additional state for active (selected) Meta Tag for posts when you touch hem.

One more thing related to posts. As I understood selector to change background for single post is:

.blog .entry-wrap {
  background-color: rgba(255, 255, 255,0.8);
}

But for Archive posts (selected by Post Category), Tagged post (selected by Meta Tag) and for Portfolio Items there shall be different classes for each case to put them before .entry-wrap. How can I find them?

[Referee]

And another question about blog page:

I use Header and Subheader with custom classes applied to them for each page (as it is done in Band Demo). If I activate Blog Title and Blog Subtitle in X Customizer then it has another styling. I would like to apply my custom classes with adaptive text to those blog headers if possible. If I just use the same CSS it looks more or less the same at big screens but at mobiles the look completely broken. The same thing for each results, blog archives etc. Shall I edit some template through child theme?

[Referee]

I also added widgets with Categories and Tag Cloud and would like to style them the same way as Meta Tags under posts. Which selectors shall I use for normal and hoover states for these two widgets?

[Rad]

Hi there,

1. You can try this,

.entry-footer a{
    background-color: blue;
    color: yellow;
}

.entry-footer a:hover, .entry-footer a:active, .entry-footer a:focus {
    background-color: green;
    color: red;
}

2. And this too

.blog .entry-wrap, .category .entry-wrap, .tag .entry-wrap, .single-x-portfolio .entry-wrap {
  background-color: rgba(255, 255, 255,0.8);
}

3. Would you mind providing some mockup how those headers should look like?

4. Sure, please add this

.widget ol a, .widget ul a{
    background-color: blue;
    color: yellow;
}

.widget ol a:hover, .widget ul a:hover {
    background-color: green;
    color: red;
}

Thanks!

[Referee]

Hi,

1. Request is solved, thanks.

2. Also closed but I used this selector:
.blog .entry-wrap, .single .entry-wrap, .has-post-thumbnail .entry-wrap

3. They look like you can see them here for instance: https://sport.center/lab/facilities/
Two different adaptive text classes – one for each of the headers types are applied and there is some CSS in Global CSS for each of those set as well. If it is to complicated to make build in page headers for Blog, Portfolio and their Archives look just the same forget that I can disable them.

4. The selectors you provided for categories widget selects not the the full background behind links. It looks like this sector works better for normal state (it applied here at the moment https://sport.center/lab/blog/):

.widget .cat-item {
  background-color: rgba(255, 255, 255,0.7);
}

But I can not figure out what is active/hover states for those.

5. The same thing like in point 4 is faced for Tags Cloud Widget. I want them to look like and behave like Tags Under posts where they exist.

[Christopher]

Hi there,

#3 You can’t add class to page’s heading but you can use following code to change color and font size :

h1.h-landmark, p.p-landmark-sub {
    color: red;
    font-size: 12px;
}

#4 Please add this :

.widget ul li a, .widget ol li a {
    border-bottom: none;
}
div#categories-3 li {
    float: left;
    margin: 3px;
    border-radius: 3px;
    padding: 0.692em 1.154em 0.769em;
    height: 1;
    line-height: 1.3;
    font-size: 13px;
    text-decoration: none;
    border-bottom: none;
border: 1px solid rgba(0,0,0,0.125);
text-shadow:none;

}
.widget ul, .widget ol {
    border: none;
    box-shadow: none;
}
div#categories-3 li:hover {
    background-color: rgba(247, 102, 101,0.8);
    color: #fff;
}

Active state doesn’t apply to category widget.

#5 Add this one too :

.tagcloud a {
    background-color: rgba(255, 255, 255,0.7) !important;
    color: #484e4c !important;

}

Hope it helps.

[Author]

Posts