Site logo

Archived topic

Sider template - but i wanna post template from Broadcast

7 replies · Started by Gabriel on March 28, 2021

Viewing posts 1–8 of 8

Hi, i instaled Sider template but i wanna have post look like in Broadcast its possible to make?

Hi there,

It's possible. But you'll have to do things manually like copying necessary CSS or Elements.

Example/s:

Here's what Broadcast uses for its Header Element as its setting:
Page Hero tab settings - https://share.getcloudapp.com/WnuY4d7X
Display Rule settings - https://share.getcloudapp.com/7KuPgv6r

And this is ALL the custom CSS it uses:

/* GeneratePress Site CSS */ /* Page hero styles */
.page-hero.gradient {
    background-image: linear-gradient( 145deg, transparent 0%, rgba(255,255,255, 0.5) 100%);
    max-width: 1440px;
    margin: auto;
}
.inside-page-hero h2 {
    font-size: 40px;
}
.inside-page-hero p {
    font-size: 20px;
}

/* Main container styles */
.separate-containers .page-hero + #page .site-main {
    margin-top: -80px !important;
}
@media (max-width: 768px) {
    body .site.grid-container {
        margin-left: 30px;
        margin-right: 30px;
    }
}
.site-content .inside-article, .sidebar .widget, .comments-area {
    box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
}

/* Posts grid styles */
@media (min-width: 769px) {
    .generate-columns .inside-article {
        transition: all 0.2s ease-in;
        transform: scale(1);
    }
    .generate-columns .inside-article:hover {
        transform: scale(1.01);
        box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
    }
    p.read-more-container {
        opacity: 0;
        transition: all 0.3s ease-in-out;
    }
    .generate-columns .inside-article:hover p.read-more-container {
        opacity: 1;
    }
}
.generate-columns .inside-article {
    display: flex;
    flex-direction: column;
    border-radius: 3px;
}
.generate-columns .inside-article .entry-summary {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.entry-summary p:not(.read-more-container) {
    display: none;
}
.read-more-container {
    margin-top: auto;
    text-align: center;
}
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited {
    border-width: 1px;
    border-style: solid;
    border-color: inherit;
    border-radius: 3px;
}
.blog footer.entry-meta, .archive footer.entry-meta {
    margin-top: 0;
}

/* Sidebar styles */
.sidebar .widget:first-child {
    background-image: linear-gradient( 145deg, rgb(164,218,216) 0%, rgb(228,243,242) 100%);
} /* End GeneratePress Site CSS */

Note: You may have to play around with this CSS and remove things that may be conflicting with Sider template.

Thank You for the answer, its possible to add widgets left or right in post?

Thank You for the answer, its possible to add widgets left or right in post?

By widgets, did you mean the sidebar?

If so, then yes you can add one. You can set it on the customizer setting. And make sure that any Layout Element doesn't disable it. :)

How can i change color of sidebar?

Hi there,

you can change the background color in Customizer > Colors > Sidebar Widgets.

its possible to change one one sidebar widget color?

You can with some CSS - for example this is for the first widget in the right sidebar:

.sidebar .widget:first-child {
    background-color: #ff0000;
}

If you wanted to change a different widget for example the 2nd widget you would use:

.sidebar .widget:nth-child(2) {
    background-color: #ff0000;
}

You can change the 2 for any number to target different widgets.

This archived topic is closed to new replies.