[CleanPageDom]

Hi Steve

I think you're looking for this in style.css

/* Inner
------------------------------------------------------------ */

#inner {
	-moz-box-shadow: 0 0 0 1px #fff;
	-webkit-box-shadow: 0 0 0 1px #fff;
	background-color: #fff;
	box-shadow: 0 0 0 1px #fff;
	clear: both;
	margin: 0 auto;
	overflow: hidden;
}

The white border is actually the box-shadow, so either delete or comment out those three lines.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi there

You could try this. You may need to change the bit about posts per page to more than 1.

if( $query->is_main_query() && !is_admin() && is_home() ) {
		$query->set( 'posts_per_page', '<strong>1</strong>' );
	}

---

Let’s build a website together…

[CleanPageDom]

Hi Lisa

Think this is what you are looking for, in style.css

.sidebar .widget {
	margin-bottom: 0;
	margin-top: 30px; /*Play around with this*/
	padding: 30px 10px; /*And this*/
	padding: 3rem 1rem; /*And this*/
	word-wrap: break-word;
}

You've essentially got 60 points of padding and margin between each widget. If you remove margin-top, you may need to add it back to the widget at the top or it will butt up against the header.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi there

Quick fix may be a plugin. I've used one called Squelch Tabs and Accordions Shortcodes on my homepage. You can do quite a bit with it in the CSS to make it match your site.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

That's excellent, David. I'll be adding this one to my cheatsheet.

---

Let’s build a website together…

[CleanPageDom]

Cool. Good luck. You may also find the Genesis Visual Hook Guide useful. Essentially, you can place a widget area anywhere on any page (or pages) using the relevant hook. It's opened up loads of possibilities for my designs.

---

Let’s build a website together…

[CleanPageDom]

I see what you mean. You can either search for .nav-secondary - it's a little below Site Navigation, under Secondary Navigation, or, and this is the quicker way that I mentioned earlier, you can add background-color: #000; to .genesis-nav-menu, and this should change the background on both Primary and Secondary.

You're certainly a lot more organised than me with your changes. I just ride roughshod over everything.

---

Let’s build a website together…

[CleanPageDom]

Hi Faisal

I'm not sure if some of the changes you've made won't affect the DB, so copying the CSS etc across may not take all of the changes. You can do as you suggest and then correct any mismatches between the test and live sites (I've done this in the past). In fact, this is what it says in the codex:

Keeping Your Domain Name and URLs
Moving your domain without changing the Home and Site URLs of your WordPress site is very simple, and in most cases can be done by moving the files.

If database and URL remain the same, you can move by just copying your files and database.
If database name or user changes, edit wp-config.php to have the correct values.
If you want to test before you switch, you must temporarily change "siteurl" and "home" in the database table "wp_options" (through phpMyAdmin or similar).
If you had any kind of rewrites (permalinks) setup you must disable .htaccess and reconfigure permalinks when it goes live.

Best of luck
Dom

---

Let’s build a website together…

[CleanPageDom]

Exactly. CSS is kind and doesn't judge you. Worst you can do is undo what you did. Now, if we were dealing with functions.php, that's another story. One misplaced comma and BANG! White screen of death.

Good luck.

---

Let’s build a website together…

[CleanPageDom]

Ha ha. Sorry. What I mean by that is up until recently I've only used Framework to build sites, so I'm not familiar with the terminology in the other Studiopress themes. But I checked out the style.css file on your site and it is definitely under Site Navigation, just as in Framework, as I copied above.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

It's all under Site Navigation, I think. All within this part of the style.css:

/*
Site Navigation
---------------------------------------------------------------------------------------------------- */

.genesis-nav-menu {
	clear: both;
 	color: #000;
	font-size: 12px;
	font-weight: 600;
/* --- changing from 1.3 down to 1.2 ------DW --- */
	line-height: 1.2;
	width: 100%;
}

.genesis-nav-menu .menu-item {
	display: inline-block;
	text-align: center;
	margin-right: -4px;
}

.genesis-nav-menu a {
	border-right: 1px solid #e3e3e3;
 	color: #000;
	display: block;
	padding: 10px 24px;
	position: relative;
}

.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a {
	background-color: #000;         
	color: #fff;         
}

.genesis-nav-menu > .menu-item > a {
	text-transform: uppercase;
}

.genesis-nav-menu .sub-menu {
	border-top: 1px solid #e3e3e3;	
	left: -9999px;
	opacity: 0;
	position: absolute;
	-webkit-transition: opacity .4s ease-in-out;
	-moz-transition:    opacity .4s ease-in-out;
	-ms-transition:     opacity .4s ease-in-out;
	-o-transition:      opacity .4s ease-in-out;
	transition:         opacity .4s ease-in-out;
	width: 200px;
	z-index: 99;
}

.genesis-nav-menu .sub-menu a {
 	background-color: #fff;   
        border: 1px solid #e3e3e3;
	border-top: none;
	padding: 12px 24px;
	position: relative;
/* --- DW --- adding two following lines; width was already here. ---- */
        text-align: left;
        font-size: 12px;
	width: 200px;
}

.genesis-nav-menu .sub-menu a:hover,
.genesis-nav-menu .sub-menu .current-menu-item > a {
 	background-color: #000;   
	color: #fff;        
}

Had me worried for a sec. My initials are DW, and I definitely haven't been tampering with your site! 🙂

---

Let’s build a website together…

[CleanPageDom]

I'm not 100% familiar with the theme, but in Framework it's under "Site Navigation", in there is genesis-nav-menu a and beneath that is genesis-nav-menu a:hover.

---

Let’s build a website together…

[CleanPageDom]

No problem. There might be an easier way, looking at it now. And you'll need to do something about the dropdowns:
.genesis-nav-menu .sub-menu a - change background-color: to #000;

Do you mean like this:

Dom

---

Let’s build a website together…

[CleanPageDom]

Hi Cathy

Think you need to add:

/* Primary Navigation
——————————————— */

.nav-primary {
background-color: #000; /*add black to the background - currently there is no color set*/
border-bottom: 1px solid #e3e3e3;
}

/* Secondary Navigation
——————————————— */

.nav-secondary {
background-color: #000; /*add black to the background - currently there is no color set*/
border-bottom: 1px solid #e3e3e3;
}

Then you'll need to change, I think genesis-nav-menu a to have color: #fff;

Then find:

.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover {
	color: #333;
}

and change color to #ff0000.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

OK, I see. Reading the SO post you linked to, I think this is the order of things. You're going to need to get into your functions.php file, so it'd be good to have ftp access in case you misplace a comma or something and get the white screen of death.

What the commenter on SO seems to be saying is you need to add that script, add a class to <body> and then apply that CSS (although I'm a little unclear as to what he means with the CSS comment). If I understand correctly, this is how I would go about it, but I am a little hazy on adding javascript.

1. Via ftp, go to your child theme folder and create a folder named "lib", then, inside this, create another folder called "js" (this is not essential, but a couple of things I read about inserting other bits of javascript suggest this is a way to keep things neat).

2. Open Notepad or similar and copy this in, save it as something like "nohover.js" and upload it to the js folder you created:

if ('ontouchstart' in document) {
    Y.one('body').removeClass('no-touch');
}

3. Referencing this, and butchering it a little , enqueue your nohover.js by adding this to your functions.php:

// Register no hover script
add_action( 'wp_enqueue_scripts', 'PREFIX_enqueue_scripts' );
function PREFIX_enqueue_scripts() {
 
	wp_enqueue_script( 'PREFIX-responsive-menu', get_stylesheet_directory_uri() . '/lib/js/nohover.js', array( 'jquery' ), '1.0.0', true ); //change PREFIX to the name of your child theme
 
}

(3a - Just a note on this; I believe you could add: <script type="text/javascript" src="/lib/js/nohover.js"></script> into your <head> through Genesis > Theme Options.)

4. Add a class to <body>, as explained here, in functions.php:

//* Add custom body class to the head
add_filter( 'body_class', 'sp_body_class' );
function sp_body_class( $classes ) {
	
	$classes[] = 'no-touch';
	return $classes;
	
}

5. Now the final part, which I'm not 100% clear on, is adding the CSS he mentions:

.no-touch my:hover{
   color: red;
}

I think he means to add that above any instance of an a:hover command that you want to overrule (so in .entry a, for example) but I'm not sure.

I hope this sets you on the right path. Don't know how familiar you are with functions.php, but it can be pretty terrifying when you hit save and the screen goes white. Just go in to the file via ftp and remove the code you just added (or double check it to see if I missed out something). Might be an idea to copy your working functions.php somewhere so you can restore the original if necessary.

Good luck.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Oh, and I may be wrong, but I think the full-size background image in the first area may be dynamically resized with javascript. It's an effect I'd like to try too.

Dom

---

Let’s build a website together…

[CleanPageDom]

Hi there

Can you do this with column classes in the last widget on the home page? The footer on the site you linked to is just much shorter than that on Parallax, so it's still there.

Try adding:

<div class="one-third first">
CONTENT
</div>
<div class="one-third middle">
CONTENT
</div>
<div class="one-third">
CONTENT
</div>

Into a Text widget in the relevant widget area. I've added the "middle" class to the second <div> as this will then allow you to target it in style.css and add border-left: and border-right:.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

I'm not sure which theme you're using, so this may differ slightly, but in Frameowrk, near the bottom of style.css you'll see:

/*
Media Queries
---------------------------------------*/

where all of the device-specific CSS needs to go. Way down at the bottom is:

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

This is where styling for smaller devices goes (767px is one px narrower than a portrait iPad). You could either put your phone -specific CSS in here, or, if you want to target smaller devices than that, create a new media query, say:

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

.nav-primary .wrap {
border: none;
}
.nav-primary a:hover,
.nav-primary .current-menu-item > a,
.nav-primary .sub-menu a:hover,
.nav-primary .sub-menu .current-menu-item > a:hover {
color: #ed702b;
text-decoration:none;
}

}

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi Marina

You can certainly add extra widget areas to specific pages. You'd need to be comfortable editing functions.php and style.css to do it, though.

My favourite tutorial for adding widgets is Carrie Dils' (which she credits to someone whose name I forget). I haven't used Enterprise Pro yet, so I'm not familiar with the widget areas in that theme.

Check out Carrie's example here and see what you think.

Thanks
Dom

---

Let’s build a website together…

[CleanPageDom]

Hi Jamie

Do you mean like "primary sidebar" and "secondary sidebar", or specific widgets within the sidebar?

You may need to be more specific with your CSS command to get it to work.

Thanks
Dom

---

Let’s build a website together…

[Author]

Posts