Damon Cook

1. Is it possible to change the colors of the wigly (now straight) lines?

Using the previously provided code, see the background-color line below:

.side-widget:after {
    width: 260px;
    height: 1px;
    background-color: #000; /* replace #000 with your desired hex color value */
    position: absolute;
    content: '';
    display: block;
    bottom: 0;
    left: 50%;
    margin-left: -130px;
}

2. Also the color and font of the text in the Widgets?

.side-widget h3 {
    color: #888; /* replace #000 with your desired hex color value */
}

3. The color of links in the post Eg. Comments, More etc.

a {
    color: #ff8f85; /* replace #000 with your desired hex color value */
}

Cheers.

Hi VidhiV,

“text color on the navigation Menu”

try this:

.nav a {
    color: #f00000; /* put any custom hex color you like */
}

I imagine you might want to then also change the hover color too, which would be:

.nav a:hover {
    color: #fff; /* your custom hex color here */
}

Here is a color picker for you to choose your color: https://www.colorpicker.com/

I am also looking at changing the wigly separators to a straight line.

Try this:

.side-widget {
    background-image: none;
    position: relative;
}
.side-widget:after {
    width: 260px;
    height: 1px;
    background-color: #000;
    position: absolute;
    content: '';
    display: block;
    bottom: 0;
    left: 50%;
    margin-left: -130px;
}

You can add your custom CSS with Jetpack plugin’s Custom CSS module: https://jetpack.me/support/custom-css/

I would recommend installing the Jetpack plugin, which is essentially a toolbox of mini-plugins. Once activated you can ‘Activate’ the Custom CSS mini-plugin, and it will add a Appearance -> Edit CSS menu item. You should be able to place the CSS there.

Yes, this seems possible. Go to Appearance -> Basically Theme Options, and choose the Layout Options tab along the top. Choose the middle layout, the one with left-hand sidebar, and ‘Save Changes’. This gives you a left-hand sidebar area, which you can add a menu to.

First, create your desired menu under Appearance -> Menus, and then visit Appearance -> Widgets and drag a ‘Custom Menu’ widget to the General sidebar area. Be sure to choose your previously created custom menu for the Custom Menu widget’s options, and you should have the desired left-hand menu.

You might want to verify that you’re using the is_front_page() function properly: https://codex.www.ads-software.com/Function_Reference/is_front_page

I don’t have enough information to verify for you, but you could check this specifically:

“It returns TRUE when the main blog page is being displayed and the Settings->Reading->Front page displays is set to “Your latest posts”, or when is set to “A static page” and the “Front Page” value is the current Page being displayed.”

With that being said, it might be helpful to tell us what you’re trying to accomplish as well.

There are a few ways to handle this, but first a little caveat. The F8 Lite theme (https://www.ads-software.com/themes/f8-lite) has seemed to be abandoned for development. Hence the “This theme hasn’t been updated in over 2 years.” message at the top of the theme’s WP.org page. This typically, but not always is a good indicator that it probably not a very stable theme.

A perusal of the code shows that the existing iteration of the theme has no proper check to see if there is no header image then don’t display anything, and that is why you’re seeing an HTML <img> element without a src=”” Without a header image, using this theme the code will not validate, but that does not mean your site will not work fine. It will, but just wanted to make you aware.

You can fix your immediate issue by applying img.headerimg {display:none;} in a child theme. Instructions on how to create a child theme are here: https://codex.www.ads-software.com/Child_Themes

Of course, since the f8 Lite theme has not been updated in two years, it implies that it may never be updated. Therefore, you could just customize the theme itself, which I typically wouldn’t encourage you to do, because an update would override any of your changes. If you’re comfortable customizing the original theme then you could just remove the whole header image block and be done with it, which is this part in the header.php file of the theme:

<?php
	$slideshow = $options['selectinput'];
	// Only show this is the Single Header Image is selected or if no option is set
	if ( $slideshow == 1 || !$slideshow ) {
		// Check if this is a post or page, if it has a thumbnail, and if it's a big one
		if ( is_singular() &&
				has_post_thumbnail( $post->ID ) &&
				( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( '950', '425' ) ) ) &&
				$image[1] >= HEADER_IMAGE_WIDTH ) :
			// Houston, we have a new header image!
			echo get_the_post_thumbnail( $post->ID, '950x425' );
		else : ?>
			<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="<?php bloginfo('name'); ?>" class="headerimg" />
	<?php endif;
	} // End only show if Single Header Image is selected
?>

I believe this may help you: https://nodiamonds.com/fixing-nivo-slider-bug-solution.html

The hover seems to be applied to the whole header area with this block of code from original theme:

.site-header {
	clear: both;
	display: block;
	min-height: 30px;
	padding: 30px 0;
	position: relative;
	transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	width: 100%;
}
.site-header:hover,
.site-header:focus {
	opacity: 1;
	transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
}

If we wanted to remove the entire effect from the header this would work:

.site-header {
	opacity: 1;
	transition: none;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
}

However, it sounds like you just want to remove the hover effect from the navigation, but leave on the logo. So we would have to be a little more elaborate in customizing, try:

.site-header {
	opacity: 1;
	transition: none;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
}
.header-wrapper {
        opacity: 0.5;
	transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
}
.header-wrapper:hover,
.header-wrapper:focus {
	opacity: 1;
	transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
}

Saw this related post from a year ago, and has no response: https://www.ads-software.com/support/topic/plugin-posts-list-sort-alphabetically-what-is-the-short-code?replies=1

I perused the code in the plugin quickly, and don’t believe there seems to be an option. Could be wrong though.

It looks like you’ve already managed to get your navigation centered, but try this for logo:

.header-wrapper {
    display: block;
    float: none;
    width: 100%;
}
.header-wrapper a[rel^=home] {
    display: block;
    max-width: 150px; /* your logo's desired max-width here*/
    margin: 0 auto;
}

and for navigation, which you already seem to have solved:

.main-navigation {
    float: none;
    width: 100%;
}
.main-navigation .menu > ul {
    text-align: center;
}

Can you please post link to your site that you’re having issues on?

Please try:

#site-navigation {
    background-color: #52C5FF;
}

You probably don’t need to set the background-color within the breakpoint.

Is that what you’re aiming for?

Thanks Stephen! Marking this resolved as fix is noted.

BTW – i tested to see if there was some sort of conflict with the theme by switching to TwentyThirteen, but that didn’t change/fix anything.