Thanks for importing Broadcast 🙂
Broadcast is constructed primarily using GP’s awesome built-in features with some CSS to provide custom styles.
The sections below provides a quick overview on how the site was built and some potential modifications. All the CSS mentioned below can be found in the Additional CSS field in the customizer.
Header/Navigation
The header/navigation is simply created using the customizer options. You can modify them in Site Identity, Primary Navigation and Sticky Navigation sections in the customizer.
Header Element/Page Hero
The section below the primary navigation is created using the Header Element module. You can find 4 header elements in
Appearance > Elements: Pages hero, Archives hero, Posts hero and Home hero.
CSS is used to provide a unique container width, gradient background and styles for the <h2> and <p> elements:
/* 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;
}This site is an excellent resource to tweak the gradient to your liking: https://cssgradient.io/.
General Container
The following CSS is used to style the main container, include merging with the header element above.
/* Main container styles */
.separate-containers .site-main {
margin-top: -80px !important;
}
@media (max-width: 768px) {
body .site.grid-container {
margin-left: 20px;
margin-right: 20px;
}
}
.site-content .inside-article, .sidebar .widget, .comments-area {
box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
}Posts List
The home page posts list can be modified using our Blog module.
Here is the CSS used to style them:
/* 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
The plugin Recent Posts Widget With Thumbnails is used in the left sidebar widgets area to show recent posts in single posts.
The first sidebar widget is colored with this CSS below:
/* Sidebar styles */
.sidebar .widget:first-child {
background-image: linear-gradient( 145deg, rgb(164,218,216) 0%, rgb(228,243,242) 100%);
}