[Andykev]

Line 1037 of your css

.site-header > .wrap {
	padding: 20px 0;
	border-bottom: 5px solid #20b57e;
}

If you use "inspect element" and mouse over the area on the page you are focused on (the header), you can see the section highlight. This is the container or <div> area, etc. you are targeting. You want to add a border to that container and it's on the bottom, so "border-bottom" is used..and then the width (px) and type (solid) and then the color.

You really can find all this all over the web via google....there are great website flooded with everything about .css.
For example this: http://www.cssbasics.com/chapter_13_css_borders.html
Or this is great too: http://www.w3schools.com/css/default.asp
There are many others. There are also well respected contributors to this forum who have their own websites with tons of resource info.

[Andykev]

Line 1406 of your css

/* # Sidebars
---------------------------------------------------------------------------------------------------- */

.sidebar {
	font-size: 16px;
	font-size: 1.6rem;
	margin-bottom: 40px;
	color:#0000ff;
	background-color: #c1c1c1;
}

.sidebar .widget {
	background-color: #c1c1c1;
	padding: 40px;
}

adding "color" changes the text, in this example to blue
adding "baclground-color" here shown gray.. changes the "spaces" part of your sidebar.

So you have to worry about the color inside the widgets themselves or else you will have color bars
separating the widges. Thus you change existing background-color from #fff, to match the color you put
in the line above (#c1c1c1)

You can use "inspect element" on your browser to identify the proper css area you are targeting and actually make changes to test what you are trying to do, or experiment with colors, text, etc. The changes will not "stick" once you refresh the page. It's the simplest way to quickly identify the container/section/code you want to modify.

[Andykev]

Your link does not show a Slider. Your site looks normal with the posts/sidebar.
Where is your slider?

[Andykev]

/* # Site Header
---------------------------------------------------------------------------------------------------- */

.site-header {
	background-color: #ef0a0a;
}

Line 1034 of your css.
In this example, changed it to red.

Be sure to clear your cache, and browser cache, esp. Chrome.

[Andykev]

This is one of the most asked questions. If you are not familiar with the WordPress Codex, look here on this topic:

https://codex.wordpress.org/Playing_With_Fonts

The Codex has "everything" under the sun you might need.

Also, Google "Google Fonts" and you can spend all day looking at the search results!
Also, many, many sites cover this.

For an EASY solution, you can use a plugin: Easy Google Fonts

Easy Google Fonts

[Andykev]

The middle line doesn't work. You have it linking to email. Try this.

Copyright [footer_copyright] <a href="http://www.bothbarrelspromotions.com/wp/">BOTH BARRELS PROMOTIONS </a> - All Rights Reserved | <a href=" http://wpchicthemes.com/">MINIMALISTA SHOP DESIGN BY MWHD </a> | [footer_loginout]

Your footer has a "lot" of stuff in it. Perhaps you might un-crowd the text spacing:

I tried this to widen the text and spacing, and remove "all caps".

.site-footer {
	background-color: #fff;
	color: #333;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.25;
	padding: 15px 0;
	text-align: center;
	text-transform: none;
	letter-spacing: 3px;
}

[Andykev]

WordPress 4.7 and sidebar issues – please upgrade Genesis

It's been covered. This should help.

[Andykev]

I ran a website using a photo gallery plugin..and almost daily they sent an "update", which made it worse and ended up being a disaster. I used the original version of the gallery plugin and used this "DISABLE UPDATES" plugin to control which of my plugins, core, or themes were updated.

https://wordpress.org/plugins-wp/disable-wordpress-updates/

or this one.

Easy Updates Manager

[Andykev]

Did you upgrade to the latest Genesis? GenesisVersion: 2.4.2
By StudioPress

The post below this one has this topic covered. Folks haven't updated. You must update Theme before WP.

Layout broken – Latest WP update 4.7

[Andykev]

Go to the "Shop for Themes" tab on the menu above and look at the Studio Press themes. All have a "demo" where you can see what each looks like. There is also a Showcase where you can see what others have done using child themes to design, modify, craft a theme to customize it for their specific needs.

[Andykev]

You can also add styling to your form to make it look any way you wish. Here is an example.

/* Contact Form 7 Styling
--------------------------------------------  */

.wpcf7-form { 
	background:#c0e0f1; 
	padding:20px; 
	border:3px solid #0000bb; 
	margin-bottom:30px; 
	border-radius:7px; 
        box-shadow: 10px 10px 10px rgba(0,0,0,.5);
}
 
.wpcf7-form input { 
	background:#fff; 
	padding:5px 7px; 
	border:2px solid #0000bb; 
	margin-bottom:8px; 
	border-radius:7px;
        color:#000;
}
 
.wpcf7-form textarea { 
	background:#fff; 
	padding:5px 0px 5px 7px; 
	border:2px solid #0000bb; 
	border-radius:7px;
        color: #000;
}
 
.wpcf7-form p { 
	color:#000; 
	margin-top:10px; 
}
 
.wpcf7-form .wpcf7-submit { 
	background:#ff0000; 
	cursor:pointer; 
	padding-left:15px; 
	padding-right:15px; 
	color:#fff; 
	border-radius:7px;
        border:2px solid #000;
}

You can play with the colors to suit your theme. Adding a "shadow" makes the form "pop out" or float.

It's magic!

[Andykev]

div.wpcf7 {
width: 70%;
margin-left:15%!important;
}

Add to your style.css

Play with % to get it fine tuned to your liking.

It's magic.

[Andykev]

I use Table Press. https://wordpress.org/plugins/tablepress/

You can edit it, vary the columms.. pretty nice.

[Andykev]

Line 1742 of your .css

background-color: #fff;

And change your social icon to a different color, as white on white won't show. I used blue, but you can change it as you wish.
Both the background of the square and the "f" letter.

.simple-social-icons ul li a, .simple-social-icons ul li a:hover {
    background-color: #3114da !important;
    border-radius: 3px;
    color: #fff !important;
    border: 0px #0a0a0a solid !important;
    font-size: 18px;
    padding: 9px;

You can use "inspect element" on your website to look at any area you want to change colors, etc. and see where to look in your .css, BTW.

[Andykev]

You can easily create a "child theme" from Outreach Pro. Here is how you do it:

https://www.carriedils.com/genesis-child-theme-development/

Child themes do not "update". The Genesis framework does, not the child theme. This is the beauty. It's the "engine" which runs your theme...
the "theme" is the design and look which can be customized to your hearts desire.

The "home page" is unique...the "inner pages" can be made to look any way you want..using .css, column classes..and so on. You can change backgrounds (images or colors) for every different page on your site.

There are a TON of very good tutorials and community support for almost anything related to Genesis and WordPress.

[Andykev]

.entry-title {
		display: none;
		
}

Put this in your .css

FYI you can also select certain pages if you wish by using .page-id

.page-id-7205 .entry-title {
		display: none;
		
}

This turns it "off" on your About Roger page.

[Andykev]

body {
	background-image: url("http://YOUR-URL-GOES HERE.jpg")!important;
	background-repeat: no-repeat;
        background-size: cover!important;
        background-position: center center !important;
	background-attachment:fixed;
	color: #222;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.625;
}

On line 144 of your .css you can change or add this to it. Your image should be sized and optimized to fit the screen, typially 1980px wide or so. I use a background image and using photoshop, make it "opaque"..then save it. The result is a full sized "washed out" image. You can use a regualr image also if you desire.
This image "floats" in the background and your text and other content shows up on top. You can adjust it depending on your theme containers. "Cover" vs "Contain" as an example. One fills all visible space, the other keeps within the container.

It is not quite like the example your shared, but it looks very nice. You can also use .page-id to add separate images to different pages if you wanted to do that as well.

[Andykev]

.site-container {
background-image: url(http://www.fishing4tackle.com/wp-content/uploads/2016/09/underwater-view-of-wave-dave-fleetham-768x511.jpg);
opacity: .6;
margin: 0 auto;
}

The above is a "basic" example of adding a background image to your website. I pulled an image out of your file and used it for this example. Your image can be a repeating pattern which will "tile", or you can use a properly sized image to fit this particular container as your website is designed.

You can also use a solid color. To "blend" the color or the image, you will need to use a gradient to make the color dark on edges and fade to light in the midddle

https://css-tricks.com/css3-gradients/

[Andykev]

I just fixed the same issue with my website. Our logo is 960px?— 200px, and works great on desktop
and down to the Ipad size. However when you get to the small Iphone, the image shrinks
to fit the container (responsive). Hard to see.

So we removed our text and used just the logo, and loaded that image into our
media library. Then used that file in the media only..so when the screen size
sizes down to 480px, it triggers the new logo which fits much better.

IF YOU ADD THIS:

@media only screen and (max-width: 480px) {

.header-image .site-title a {
	background-position: center !important;
	background-size: cover !important;
	max-width: 100%;
}

You can see that your logo as it exists "fills" the space on an Iphone, but it's not scaled exactly. Some
gets cut off, but you can see the effect you're looking for.

BETTER to make a new logo image that is smaller than the original, use that second image URL
to "trigger" with the code below. This substitutes your "big" logo to a "mobile logo". Depending
on the design... (in our case we used a full image logo only, no text so it was 480X480), you might
have to play with the size. Your logo works well if you simply size it for small screens.

@media only screen and (max-width: 480px) {

.header-image .site-title > a {
background: url(http://THE-URL-FOR-YOUR-IMAGE-GOES-HERE.png) no-repeat !important;
background-position: center !important;
background-size: contain !important;
height: 100%;
width: 100%;
}

[Andykev]

Change the content of the widgets. Look at what your CP shows under Widgets and see the different placements on the home page.

ie. top, middle, bottom, the footers 1, 2, and 3...etc.

You can put anything you want in the widget. And the sidebar.

[Author]

Posts