In Development

New Theme Available

The new Big Scene theme is here. If you like the Big Bob theme, then you should try out the new Big Scene theme. It’s like the Big Bob theme, but it contains new customizer controls and a simplified user interface, and it resolves a lot of the problems referenced below.

Check Out the Big Scene Theme

Introduction

It is much easier to write custom code for a specific site than it is to create generalized options for a WordPress theme. However, I always want my users to have the latest options available. So I decided to create this page.

Although some customization options require the marriage of CSS, HTML, Javascript, and PHP; other customization options only require using PHP to modify CSS. That means as a user, you could hypothetically just add the CSS code into the Additional CSS section and get the same result as clicking a button in the customizer.

However, when deciding to add customization options I need to consider user friendliness, and I need to make sure that I don’t create any options that could make existing options harder to use. Therefore, whenever I have some CSS that I am testing on my own sites with the Big Bob theme, and it has passed preliminary testing, I will share it with my users.

A Word of Caution

I need to stress that this CSS has only passed preliminary testing. It is unlikely that all of it will be usable for all sites. I still have not determined how this CSS might be able to be broken down into customization options, or if all of it can be broken down into customization options.

Test Test Test

If you are going to try adding this code make sure you test how it performs both before and after you publish it, and you need to be ready to delete it as well. If I find any problems, I will try to update it ASAP, but you still need to perform your own due diligence.

How to Add the Code

All you have to is copy and paste this code into the Additional CSS section of the customizer.

Reading the Rest of This Page

The rest of this page is written in the reverse order of my updates. In other words, the latest updates come first, and as you continue to scroll down, you will find items that already have UI controls, which means you will not need to update the Additional CSS section to achieve the desired results; you can just use the customizer controls.

Underline the Menu Item for the Current Page

This first method works well if you only have single pages to define, but it can get tricky to implement if your menu items are nested.

.current_page_item,
.current-menu-item a {
	text-decoration: underline; 
	-webkit-text-decoration-color: #fff !important; /* Safari */  
        text-decoration-color: #fff !important;
}

Or you can use:

.current_page_item,
.current-menu-item  {
	text-decoration: underline; 
}
a {
	-webkit-text-decoration-color: #fff !important; /* Safari */  
        text-decoration-color: #fff !important;
}

However, you should be aware that this second method will impact the color of other underlined links.

UPDATE
The instructions for the next two pages were written prior to version 2.7.1. Version 2.7.1 introduced the ability to widen pages which creates a look with dimensions that are similar to the looks of the next two pages. At the time of the writing of this update, it is the look that is utilized by the page that you are currently reading.
7/3/21

The Video and Image Instructions Page

The video and image instructions page utilizes a more traditional layout. Please note that you will have to adjust the page id to suit your page. You can find a page id by using these instructions.

/*Start Video Image Instructions Page*/
.page-id-94 .bb-aligncenterstyle{
		background: rgba(0,0,0,1) !important;
		width: 100%;
		margin-top: 0;
		margin-bottom: 0;
		padding-bottom: 50px;
	}
.page-id-94 .site-footer {
	max-width: 100%;
	padding-bottom: 20px;
	padding-top: 20px;
	margin-bottom: -100px;
	margin-top: -25px;
	background: rgba(15,15,15,1) !important;
}

@media screen and (min-width: 1064px) {
.page-id-94 .bb-aligncenterstyle ol,
	.page-id-94 .bb-aligncenterstyle ul,
	.page-id-94 .bb-aligncenterstyle dl,
	.page-id-94 .bb-aligncenterstyle address
	.page-id-94 .entry-content pre,
	.page-id-94 .entry-content p,
	.page-id-94 .site-footer form,
	.page-id-94 .entry-content cite
	{
		width: 55%;
	}
}
/*End Video Image Instructions Page*/

The Gutenberg Page

You may have noticed that the Gutenberg page looks pretty distinct from other pages on this site. If you want to see how to create diagonal lines and a full screen width background, then you can utilize the code below. Please note that you will have to adjust the page id to suit your page. You can find a page id by using these instructions.

/*Start of CSS used to create a slant*/
.page-id-696 .bb-aligncenterstyle {
	transform: skewY(-2deg);
} 

.page-id-696 .bb-aligncenterstyle p,
.page-id-696 .bb-aligncenterstyle #search-8,
.page-id-696 .bb-aligncenterstyle .site-info,
.page-id-696 .bb-aligncenterstyle cite,
.page-id-696 .bb-aligncenterstyle .bb-social-media-icons,
.page-id-696 .bb-aligncenterstyle h2{
	transform: skewY(2deg);
}
.page-id-696 .bb-aligncenterstyle .bb-social-media-icons p {
	transform: skewY(0deg);
}
.page-id-696 #bb-back-to-top,
.page-id-696 .bb-back-to-top{
	display: none !important;
}

.page-id-696 .bb-aligncenterstyle .site-info {
	margin-bottom: 15px;
}
/*End of CSS used to create a slant*/
/*Start of CSS that makes the screen wide*/
.page-id-696 .bb-aligncenterstyle {
		width: 100%;
		margin-top: 0;
		margin-bottom: 0;
		background: rgba(0, 0, 0, 1) !important;
	}
@media screen and (min-width: 1064px) {
	.page-id-696 .bb-aligncenterstyle .bb-topPar {
	margin-top: 30px;
}
.page-id-696 .bb-aligncenterstyle ol,
.page-id-696 .bb-aligncenterstyle ul,
.page-id-696 .bb-aligncenterstyle dl,
.page-id-696 .bb-aligncenterstyle address
.page-id-696 .entry-content pre,
.page-id-696 .entry-content p,
.page-id-696 .entry-content cite
	{
		width: 55%;
	}
}
/*End of CSS that makes the screen wide*/

Menu Spacing

UPDATE
Menu spacing options were updated with version 2.5.2.
6/7/2021

Here are a few quick tips that can make text more readable when using some fonts, but it will also take up more page space.

/*Add Space in between Menu Items*/
.main-navigation li {
	margin-left: 18px;
}
/*Add space in between slide panel lists from the sidebar*/
#bb-sideSlide li {
	margin-bottom: 20px;
}

The Navbar Background and Tagline Background

I really wish I could come up with some simple controls to adjust the background opacity of the tagline and navbar. I will concede that the default settings are somewhat limiting in their ability to create readable text under some link colors, especially with respect to their ability to provide readability under certain link colors when the background image is bright. So the following is a generalized explanation with specific examples of how you can add CSS to refine the look of your tagline and navbar backgrounds. Hopefully, I will have an epiphany in the future and I will be able to create some controls that won’t require CSS, but since this has been an ongoing problem for some time and it may be quite some time before that epiphany hits me, this may be a great opportunity for you to learn some CSS.

UPDATE:
Version 2.3.2 added an Extra Dark control. It does not have the ability to refine opacity to the degree explained below, but it will increase the variety of link colors that are readable.
4/12/21

General

Here is list of the different variables you can use to update the backgrounds. If this is your first time reading this, you may just want to skim to the next section.

/*Selectors*/
#site-navigation {
#site-navigation.scrolled {
.home #site-navigation {
.blog #site-navigation {
.blog #site-navigation.scrolled {
.site-branding {
.home .site-branding {

/*Screen Widths*/
@media screen and (min-width: 1065px) {
@media screen and (min-width: 1150px) {

/*Properties (with example values)*/
background: rgba(0, 0, 0, 0.7) !important;
transition: 1200ms ease;
box-shadow: none;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 1);

Three Examples

The next three sections each show an example of how I updated a site. Feel free to just copy and paste each example into your Additional CSS section to see what happens. If it doesn’t work for you, then you can just delete it. Hopefully, the combination of these sections of code will give you an idea of how to refine your CSS to get your backgrounds exactly the way you want them. Please keep in mind that I may update my CSS in the future, so it won’t exactly match the results referenced, but the logic will still be valid (4/8/21).

Site 1

/*Arcade (this site)*/
#site-navigation {
	background: rgba(0, 0, 0, 0.7) !important;
}

.home #site-navigation {
	background: rgba(0, 0, 0, 0.3) !important;
}

#site-navigation.scrolled {
    transition: 1200ms ease;
    background: rgba(0, 0, 0, 0.9) !important;
}
.main-navigation ul ul {
	background: rgba(0, 0, 0, 0.9);
}

@media screen and (min-width: 1065px) {
	
.home #site-navigation {
	background: rgba(0, 0, 0, 0.2) !important;
}
	#site-navigation.scrolled {
    transition: 1200ms ease;
    background: rgba(0, 0, 0, 0.9) !important;
}
	.home .site-branding {
		background: rgba(0, 0, 0, 0.2);
	}
}

Site 2

/*BBB (Dark Style Sample)*/
#site-navigation {
	background: rgba(0, 0, 0, 0.7) !important;
}
.home #site-navigation {
	background: rgba(0, 0, 0, 0.5) !important;
}
.home #site-navigation.scrolled,
.blog #site-navigation.scrolled {
    transition: 1200ms ease;
    background: rgba(0, 0, 0, 0.8) !important;
}
@media screen and (min-width: 1150px) {
.site-branding {
	background: rgba(0, 0, 0, 0.5);
}
	.home .site-branding {
		background: rgba(0, 0, 0, 0);
		box-shadow: none;
	}
.home #site-navigation {
	background: rgba(0, 0, 0, 0) !important;
	box-shadow: none;
}
	.home #site-navigation.scrolled {
	background: rgba(0, 0, 0, 0.9) !important;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 1);
}

.blog #site-navigation {
	background: rgba(0, 0, 0, 0.6) !important;
	}
}

Site 3

/*WordPress Test*/
.home #site-navigation {
	background: rgba(0, 0, 0, 0) !important;
}
#site-navigation.scrolled {
	background: rgba(0, 0, 0, .9) !important;
}

The Demo Sites

UPDATES:
Version 2.2.2 added controls to create different navbar options. If you look at my demo sites, the only things that they currently do that you can’t do without the Additional CSS section of the customizer is I changed the opacity and display of a few of the background areas on two of my demos. I would like to add controls to the customizer to facilitate these changes, but I think it would require the addition of quite a few controls. So if I add the controls, I want to first make sure that adding them would be simpler than using the Additional CSS section. Also the changes are pretty site specific, and I’m not sure how useful they would be in a generalized context.
3/25/21

As I think more about adding controls for the remaining site specific adjustments referenced above, I am now leaning toward seeing what opportunities are presented when full site editing is released with WordPress 5.8 in June.
4/2/21

There’s a lot in this demo site right now (as of 3/12/21) that is not feasible without Additional CSS. The following updates create different darkness in the background shadow, and change the title positioning and what is displayed in the navbar on scrolling. Note that if you implement this, the behavior will be different when the wp admin bar is being displayed:

@media screen and (min-width: 1065px) {
	a:hover {
		color: #377fbf !important;
	}
}

#site-navigation {
	background: rgba(0, 0, 0, 0.7) !important;
}

.home #site-navigation {
	background: rgba(0, 0, 0, 0.3) !important;
}

#site-navigation.scrolled {
    transition: 1200ms ease;
    background: rgba(0, 0, 0, 0.9) !important;
}

@media screen and (min-width: 1065px) {
	#site-navigation ul {
		font-size: 23px;
		margin-bottom: 0px;
	}
	#site-navigation.scrolled ul {
		font-size: 18px;
	}
	/*for new nav-menu*/
	#site-navigation.scrolled {
		top: -80px;
	}
}
/*nav-menu updates*/
/*It will perform differently
 * when the wp admin bar is
 * displayed
 */
@media screen and (min-width: 1065px) {
.bb-top-padding, .top-padding {
	margin: 300px;
	}
	.search-results .sideStick{
		top: 150px;
	}
.custom-logo-link {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-bottom: 10px !important;
	margin-top: 10px!important;
}
.main-navigation ul{
	justify-content: center;
}

.nav-menu, .custom-logo-link {
	float: none;
	padding: 0px !important;
}

	#bb-popout ul {
		margin: 0px;
		margin-bottom: 10px;
	}
}

@media screen and (max-width: 1064px) {
	.bb-fixed-top {
		position: absolute;
	}
}

.main-navigation ul ul {
	background: rgba(0, 0, 0, 0.9);
}

Two features I am working on right now are the ability to highlight links when you hover over them, and the ability to lighten and darken the navbar to specific pages. The code below is pretty specific, but if you know a little bit about CSS, then you may be able to modify it to suit your purposes.

/*This is for links*/
@media screen and (min-width: 1065px) {
	a:hover {
		color: #377fbf !important;
	}
}

/*This rest is for the navbar*/
#site-navigation {
	background: rgba(0, 0, 0, 0.7) !important;
}

.home #site-navigation {
	background: rgba(0, 0, 0, 0.3) !important;
}

.home #site-navigation.scrolled {
    transition: 1200ms ease;
    background: rgba(0, 0, 0, 0.8) !important;
}

Menu Font Size

Here’s a sample of how you can adjust the size of the menu items in the navbar when they are displayed on wide screens. The best size tends to vary based on how many menu items you have and the font style you are using. I am still trying to create controls with intuitive and useful user interface for the customizer. Note that it isn’t a simple as just updating the font size.

@media screen and (min-width: 1065px) {
	#site-navigation ul {
		font-size: 23px;
		margin-bottom: 0px;
		padding-top: 45px !important;
	}
	#site-navigation.scrolled ul {
		font-size: 18px;
		padding-top: 36px !important;
	}
}

Strict Style CSS

The Strict Style CSS referenced below has been available as a control in the customizer since Big Bob 1.3. I recommend turning it on. It will have a significant impact on appearance, including Gutenberg blocks. You don’t need to read this to use the control found in the Body and Sidebar style of the customizer, but if you’re interested in learning more about CSS, so you can further customize the look of your site, especially as it relates to the Big Bob theme, then you may want to continue reading.

I don’t want to get too deep into the weeds of this code, but it basically makes the Big Bob theme more blog friendly by performing the following:

Narrows certain blocks on wider screens.
Widens certain blocks on narrow screens.
Reduces the Navbar to just the menu button on narrow screens (This section of code has been commented out because it was added as an option in Version 1.2. Please see the new navigation section in the customizer).
Centers some links and meta data.
Makes sure the sticky sidebar doesn’t get too large on tall screens (This was added as an update to Version 1.2 so the code below has been commented out).

Update 1.3

Version 1.3 of the Big Bob theme has all of the updates referenced below not updated in Version 1.2 as a new customizer option. It also includes some additional CSS that is not referenced below. The new control can be found in the new Body and Sidebar section of the customizer. The control is called Strict Style.

The Code

Here’s the current code. I may update it. If you find any problems with it, then feel free to let me know. I think that if you are managing a blog centric site that doesn’t use a lot of plugins to change its appearance, then you will enjoy these updates. Otherwise, you may want to wait until I add new customization options. Thanks for choosing the Big Bob theme.

code {
	width:75%;
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.entry-title {
	width:75%;
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.bb-center-image img {
	width: 75%;
}
.wp-block-video video {
	max-width: 75%;
}

.wp-block-image {
	max-width: 75%;
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.home .bb-fv,
.home .bb-fv video {
	width:75%;
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.entry-meta,
.entry-footer,
.page-links {
	width:75%;
	float: none;
	text-align: center;
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#secondary ul,
#secondary ol {
	max-width: 100%;
}

@media screen and (max-width: 500px) {
	.entry-content p,
	.entry-title,
	.bb-center-image img,
	.home .bb-fv,
	.home .bb-fv video,
	code {
			width: 100%;
		}
	.wp-block-video video {
		max-width: 100%;
	}
	
	.wp-block-image {
		max-width: 100%;
	}
	.entry-content ul,
	.entry-content ol{
		max-width: 100%;
	}
	
	.entry-meta,
	.entry-footer,
	.page-links {
		width: 100%;
	}
	
	/*This was added as an option to version 1.2*/
	/*.bb-fixed-top{
		position: absolute;
	}*/
}

/*This was addded to version 1.2*/
/*@media screen and (min-height: 1000px) {
	#secondary {
		max-height: 500px;
	}
}*/

Loading...

(Just one moment)

In Development

In Development

New Theme Available

Introduction

A Word of Caution

Test Test Test

How to Add the Code

Reading the Rest of This Page

Underline the Menu Item for the Current Page

The Video and Image Instructions Page

The Gutenberg Page

Menu Spacing

The Navbar Background and Tagline Background

General

Three Examples

Site 1

Site 2

Site 3

The Demo Sites

Menu Font Size

Strict Style CSS

Update 1.3

The Code