Robert Bardall

Mishan,

Sorry that it has taken me so long to get back to you, I’ve been a bit busy today.

1. In your child theme css find:

#nav .menu > ul > .current_menu_item > a,
#nav .menu > ul > .current_page_item > a,
#nav .menu > ul > .current_menu_item > a:hover,
#nav .menu > ul > .current_page_item > a:hover,
#nav .menu > ul > .current_menu_item > a:focus,
#nav .menu > ul > .current_page_item > a:focus,
#nav .menu > ul > .current_page_ancestor > a {
    background-color: transparent;
    background-image: none;
}

and add:

color: #f96eec;

after the “background-image: none;” property

2. Adding the following to your child theme’s CSS will take care of the outline:

a {
   outline: 0;
}

More information on that can be found here: CSS Tricks – Removing the Dotted Outline

I hope that helps!

In your child theme’s css file under
#nav a{
add
font-size: 14px;
and just change the pixel size to suit you.

I’d be happy to help with whatever you need. But, I believe that the forum rules would dictate that each issue needs to be addressed in its own thread so that it can benefit anyone else looking for a solution to the same problem.

Mishan,

Would you please paste the following into your child-theme’s css file, and let me know when you’ve done that, so that I can take a look and see where it’s being overridden?

Thank you.

@import url("../blaskan/style.css");

#nav a{
	border-radius: 0;
	background-image: none;
	background-color: transparent;
	border: none;
	text-shadow: none;
	color: rgb(0,0,0);
}

#nav a:focus,
#nav a:hover{
	background-image: none;
	background-color: transparent;
	color: #F4691A;
}

#nav .menu > ul:hover > li {
	opacity: 1;
}

#nav .menu > ul:hover > li:hover {
	opacity: 1;
}

#nav li:hover > a,
#nav li:focus > a {
	background-color: transparent;
	background-image: none;
	filter: none;
}

#nav li li:hover > a,
#nav ul ul :hover > a,
#nav li li a:focus {
	background-color: transparent;
	background-image: none;
	filter: none;
	color: #000;
	top: 0;
}

#nav .menu > ul > .current_menu_item > a, #nav .menu > ul > .current_page_item > a, #nav .menu > ul > .current_menu_item > a:hover, #nav .menu > ul > .current_page_item > a:hover, #nav .menu > ul > .current_menu_item > a:focus, #nav .menu > ul > .current_page_item > a:focus, #nav .menu > ul > .current_page_ancestor > a {
    background-color: transparent;
    background-image: none;
}

Hi,

In your child-theme’s css file this line:

#footer {
border-top: 12px solid LightGray;

Is missing the closing bracket }

So it should look like this:

#footer {
border-top: 12px solid LightGray;
}

Let me know if that fixes your problem. If not, we’ll take a deeper look.

li:last-child:before{
content:”.”;
}

Hi Mark,

Change this:

header.tc-header {
    background: none repeat scroll 0 0 white;
    border-bottom: 10px solid #E9EAEE;
    border-top: 5px solid black;
    min-height: 45px;
}

To this:

header.tc-header {
    background: none repeat scroll 0 0 white;
    border-bottom: none;
    border-top: 5px solid black;
    min-height: 45px;
}

That should do it. I hope that helps!

Hi egilarntzen,

I’m actually doing something like this for a client. I’ve created a static home page, with custom text widget areas. I taught the client how to update the widget areas.

I also used this plug-in to give them a little more control over formatting.

This tutorial is where I learned how to add custom widget areas, and you may find it useful.

I hope I’ve been helpful!

Hi John,

Find this:

img.alignright, .wp-caption.alignright {
    margin: 0.857143rem 0 0.857143rem 1.71429rem;
}

Changing it to the following code fixed it for me.

img.alignright, .wp-caption.alignright {
    margin: 0.857143rem 0 0.857143rem 0rem;
}

I hope that helps!

Hi haldav,

I have installed the theme on my test server and taken a look at it.

Assuming that you are adding your logo as a background image in the header, and text is covering it up because it’s too far to the left. You’ll need to find the #logo div in style.css and add, then increase the “margin-left” property. In this instance #logo is what they are blocking out the header text with, not the logo image.

If I’m wrong about how you are adding your logo, you’ll need to tell us how you’re doing it, or give us a link to the site so that we’re not flying totally blind.

I hope this helps.

In your child theme’s style.css add the following code(change the x’s to the hex code for the color of your choice):

/*Targets the main navigation menu*/
.main-nav ul.menu a {
   color: #xxxxxx;
}

/*Targets the headings*/
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .heading a, .omega a, .psi a, .alpha a, .beta a, .gamma a, .delta a{
   color: #xxxxxx;
} 

/*Targets links that aren't otherwise targeted*/
a{
   color: #xxxxxx;
}

/*Targets the header*/
.header{
   background-color: #xxxxxx;
}

Glad to be of service. Good luck with your site!

Ok, here’s what you need to do:

First we’re going to create a child theme:

1. Navigate to your site’s theme directory (default is ../wp-content/themes/)
2. Create a new folder in this directory and name it “highwind-child” (without the quotes of course)
3. Create a new file in this folder called “style.css” (again, no quotes)
4. Paste the following code into your new “style.css” file
5. Go into your admin panel and activate the new child theme

/*
Theme Name:     Highwind Child Theme
Theme URI: 	https://www.ads-software.com/themes/highwind
Description: 	Child theme for the Highwind Theme;
Template:       highwind
Author: 	Mrs. Green Jeans;
Author URI: 	https://mrsgreenjeansplantsseeds.com/
Version: 	1.0;
*/ 

@import url("../highwind/style.css");

body{
	background-color: #00cd66 ;
}

.inner-wrap {
	background-color: #ffffff;
}

As long as there are no inline styles (meaning styles that are hard-coded into the page structure)that interfere with your code, this should get you the results that you desire.

Let’s see if that is enough to override what is being called on your site. I’m not intimately familiar with the Highwind theme, but I have installed it on my test blog and the code above achieves what you desire for me. I do not have the code that I referred to in my last post appearing on my site, so I don’t know exactly where it’s coming from on yours.

Let’s see if this works for you.

Well, the theme isn’t broken. This isn’t a bug. I’m sure the theme was designed by committee and this was how they decided it worked best.

This can be worked with. Here’s what I did:

First, I cropped the header image to cut off the white space on the left and right sides, leaving about 10-15px for padding so the image isn’t right up against the edge of the viewport.

Then, I created a child theme for Twenty Thirteen.

1. Create a new folder in the same folder as the twentythirteen folder (default: ../wp-content/themes/) named “twentythirteen-child”.
2. In this new folder, place your cropped header image, and create a new file called “style.css”
3. Paste the following into the new “style.css”:

/*
Theme Name:     Twenty Thirteen Child Theme
Theme URI: 	https://twentythirteendemo.wordpress.com/
Description: 	Child theme for the Tewenty Thirteen Theme;
Template:       twentythirteen
Author: 	Put your name here;
Author URI: 	Put your URL here
Version: 	1.0;
*/ 

@import url("../twentythirteen/style.css");

.site-header .home-link{
	background-image: url(web-logo.png);
	margin: 0 auto;
	padding: 0;
	max-width: 1080px;
	height: 230px;
	min-height: 100px;
	background-repeat: no-repeat;
	background-position:center;
	background-size: contain;
}

@media (max-width: 550px){
	.site-header .home-link{
		height: 150px;
	}
}

@media (max-width: 350px){
	.site-header .home-link{
		height: 120px;
	}
}

Finally activate the child theme and go into the customize panel. Remove the header text and header images.

You may or may not have to adjust the links in the style sheet to suit your environment.

You can adjust the height in the media queries (and add more for different sizes if you wish) to your liking. This will control the white space that appears above and below your header image when the page is resized.

This should work in all modern browsers (IE 9 and newer). For older browsers it will revert to cropping as before.
I’ve tested in Windows:
IE9, IE10
FF 23
Chrome 28
Opera 15
Safari 5

Arch Linux:
Chromium 28
FF 23

Android/Nexus 7:
Chrome
FF

Windows Phone 8:
Lumia 920 (IE)

Ok, so this isn’t exactly copy and paste, but it should give you a good starting point as to how to block things out and position them so that you have more control over them.

Check out this fiddle here

Basically, I took your header container and divided it up into 2 blocks:
1. left-header (green) – Contains your site title
2. right-header – Contains social media & menu

Then I subdivided right-header into 2 more blocks:
1. social-media (red) – Put your social media icons here
2. access (blue) – This contains your menu

This gives you definitive blocks to place your content into without worrying about it shifting around on you. If you don’t want the right side divided evenly on the horizon, you can just adjust the heights of social-media and access to where you like them.

When you place the elements inside of the blocks, just give them padding and/or margins to space them properly within their blocks.

Like I said, its not exactly a cut and paste solution because I don’t know all the inner workings of your template, but it should give you a good starting point to get to where you’re trying to go.

I hope this helps some.

Ok, I’ll work up a fiddle for you. Give me a few minutes.