Harmony

The author does say “The non-www.ads-software.com release still has a custom.css file option as well for those who prefer that over child theme, as of 2.0.2).”

So if you are downloading the theme from his site, then that is most likely why you see the extra option.

And that being case, it seems you are good to go. As long as the original style sheets aren’t touched, your custom changes won’t be affected by it.

— Jeremy

@chupele1,

Do you have the lite version (free) of Hueman? Or the premium w/ the additional features? If you see the custom css field, then you may have the premium (I only have the free/lite version since I was just testing it out for you guys).

That, or it’s a different version of the theme? I have 1.4.1 installed.

—

Also, according to the author:

Q: Where did the custom.css file option go?
A: Had to be removed in order for the update to be accepted by theme reviewers. Instead a sample child theme is supplied in the help dropdown, which is the “correct” way to modify a WordPress theme – as it won’t be overwritten by updates. (The non-www.ads-software.com release still has a custom.css file option as well for those who prefer that over child theme, as of 2.0.2)

https://www.ads-software.com/support/topic/important-for-the-coming-update-backup-your-custom-css-field?replies=3

So I think we may in fact, just have different theme versions.

– Jeremy

@chupele1,

I updated my rather long-winded post above. I included the theme’s options as an alternative:

1) Use the theme’s options.

Appearance – Theme Options – Styling

At the top, there’s a drop down list of fonts you can select from that will be applied to the site.

—-

As far as you selecting custom css (on the right bottom), that link doesn’t show for me for some reason. Could it be that you have an installed plugin doing that for you? I can’t answer whether or not that is a good solution to prevent changes when the theme updates as I can’t see it to evaluate it. I’ll continue to investigate though.

@chupele1,

Here is some information about child themes: https://codex.www.ads-software.com/Child_Themes

I’m in the process of creating an easy to follow video on child themes. Unfortunately, it’s not ready quite yet so I can’t link it.

As far as you adding it to your custom css…did you add a custom css plugin?

chupele1,

I see now. These changes are fairly simple. It’s just css. However, you should use a custom css plugin to make those changes or a child theme. If you don’t, when the theme updates, you’ll lose any and all changes made (if you edit the original files).

So…for the changes:

——

Search Box Outline

Add this to your child theme’s .css or a custom css plugin, and obviously change the border color to whatever you want:

——

/* Search Box Outline*/
.themeform input[type="text"], .themeform input[type="password"], .themeform input[type="email"],
 .themeform textarea {
border: 2px solid #FF0808;
}

——

{} with number of posts on category widget

/* Parenthesis in Widget */
.widget_links ul li { color: #FF0000; }

——

Font Styling in Pages and Posts

As far as the font on the content pages and blog, you can do that in the page/post edit area or each page/post.

If the options there are not sufficient or you want more control, then there are 4 options as I see it:

1) Use the theme’s options.

Appearance – Theme Options – Styling

At the top, there’s a drop down list of fonts you can select from that will be applied to the site.

2) Use html markup in the pages/posts for font styling.

See this page for more info: https://en.support.wordpress.com/editors/styling-individual-posts-and-pages/

3) Use the custom .css plugin mentioned above, in combination with #1 OR if you are sure you only want a particular style (size, font, color, weight, etc.) you can set it globally for the text in the custom .css plugin.

4) Use a plugin that can easily customize the text in any page/post. I’ve not searched for any, but I’m sure there are some out there (free and premium).

– Jeremy

fireonline,

You need to edit the Sidebar.php and sidebar-2.php files. It’s highly discouraged to do so directly. You should always create and use a child theme when modifying files so any changes you make are not lost when the theme is updated.

That sort of help should be in its own thread however.

chupele1, it looks like your side bar w/ the gray color has been resolved. I see that it is on the right, and the background color of that sidebar is white (which is the same as your site’s bg color.

It looks like you made several other changes as well (to the font color and size). The site looks good. Was there anything you still needed help with?

wonders41,

There are 2 sidebars (under “Follow” {social media icons} and “More”), are you wanting to have both have the same color or each have different colors?

Hi chupele1, I’d be happy to help.

Would you mind posting a link to your site so I can see the code to change?

** EDIT **

oops! Just saw that you already linked it at the bottom of your post. Taking a look now. =)

And good to know it’s all sorted. That was a fun exercise. ??

I still don’t know why it changes on WordPress vs a static HTML page. Something to continue to explore it seems.

The above…or try this code:

.txt {
    font-family: Constantia, Serif;
    background-color: #FFF;
    font-size: 18px;
    vertical-align: top;
    line-height: 18px;
    padding-left: 2px;
    padding-right: 2px;
}

I adjusted the font-size and line-height to match the .rand height. On my end, it looks fine. This is a screenshot of your page: https://screencast.com/t/XKZ8ACYAdRi

****** EDIT ******

Looks like you responded while I was typing this post. Leaving it here for reference.

It looks like a part of it is the font you are using: Constantia.

That’s a serif font, and it’s smaller than the non-serif family I am using. See what happens when you remove it and use this line:

font-family: Arial, Helvetica, sans-serif;

That way we can trouble shoot a bit. We can always go back to your chosen font if necessary (but if we do, we should change the font-family accordingly.

I thought we had it. To me, your linked page looks fine. I don’t see the font drop. I’m using Chrome.

We can keep working on it though.

Try this as a replacement for .txt:

.txt {
font-family: Arial, Helvetica, sans-serif;
font-color: black;
background-color: #fff8dc;
font-size: 16px;
padding: 0 8px;
line-height: 20px;
display: inline-block;
vertical-align: top;
}

Does that help?

This is the page on my temp dev site: https://www.forgeofreason.com/newspaper/ using the above .txt settings. To me, it looks fine. How does it look to you?

I’ve also tried it w/ a different theme, and it was a little off. Perhaps there is just some conflicting css w/ the theme.

Typically, I’d use Chrome Dev Tools or Firebug to make the corrections. But I’ve seen your link above, and like my link to the dev site example, it looks fine.

I see what you mean about WP rendering a bit differently. I don’t know why it is doing that, but I’m going to find out (if nothing more, for my own curiosity).

Here’s an updated version of the .txt class:

.txt {
  font-family: Arial, Helvetica, sans-serif;
  font-color: black;
  background-color:#fff8dc;
  font-size: 16px;
  padding: 0 6px;
  display: inline-block;
  vertical-align:top;
  }

It is a lot better, but not perfect. The text needs to come up just a tad. I’m a perfectionist, so it’s bothering me. lol I’m working on it and will let you know.

That pic is what I needed. Thank you.

Things to consider:

1) the font-size should be used with the text element (vs the .rand). I created a specific .txt class to do so.

2) I used a container to help keep things a bit more orderly and give the contents some necessary properties for ease of formatting.

3) to position the text on the line where you want, use the left or right property in its own id, conjunction with text-align: center in the container.

eg

.tleft {
  position: relative;
  left: -25%;
}

We set the middle of the line (.rand) as our starting point by putting text-align: center in the container id. So when we use the code above, we are saying to move our text 25% to the left. If we had “left: 25%“, it would move our text to the right by 25%. You could use px instead of % of course.

You’ll see what I mean in the link below which goes to codepen.io. It shows the html, css, and the result: https://codepen.io/HarmonyWebworks/pen/rchJf

** NOTE ** Codepen is not a personal website. It’s a code repository and editor. I linked it so you could easily see the result as well as play around w/ the code so you can get the exact result before copy/pasting into your own file.

Let me know if you have any questions.

Jeremy