SideKick Dan

Hello,

Can you specify what page as an example? I saw one of the header title’s in the comments title that was black. If that is the issue try this

a, h1, h2, h3, h4, h5, h6 {color:#ffffff !important;}

It can be a bit of a learning curve with css. It actually can be quite easy and fun once you wrap your head around it’s basic concepts; although it always has its frustrations. I’d recommend playing with firebug for firefox or chrome’s built in css inspector. Learn how to use it, how it works. Go to a site and see what you can do to change things on the fly for fun. Second, become familiar with CSS inheritance (priorities). Third become familiar with html css div layouts and positioning. Fourth get familiar with some of the most common css rules for colors, backgrounds, etc. These are kind of the things to specifically learn and play with, google, youtube, etc. Lynda.com has some awesome classes too.

One little exercise to have fun with and play with using the browser inspectors is to go to a random website and edit the looks along with images to anything you’d like. It would be best to find a really well designed website done with mobile responsiveness. I found that playing with well designed layouts helps with learning things the right way. A good example of would be wordpress’s Responsive template, free. Another would be Twitter Bootstrap layouts like here https://getbootstrap.com/examples/carousel/ . Just play with the css inspector, change colors, links, etc. Great things to do to learn

Best Regards,
Danny ??

Hello,

Try this code to play with. If it works without the !important, the remove it ??

Danny

#primary .entry-meta a {
color: #5e5e5e !important;
}
#primary .entry-meta a:hover {
color: #ffffff !important;
}

.entry-meta {
color: #5e5e5e !important;
}

Hello,

It looks like the theme developer used background images for the navigation shape and color rather than css3. One of the easier ways to change the color in this case would be to edit the image file they used. It is located at this file path

/themes/themia-lite/images/nav.png

Download and open it. You should see the images that make up the nav. If you can change the color of the green, it should work if you reupload the editted graphic. The trick is to place the replacement images for the green into the exact same places. If it’s off the nav graphics will be off. If off by a little though, you could edit the css background property that shifts it up/down, left/right a smidge.

Best regards,
Danny ??

Hello bigdog61,

It was a curious difference for sure. It looks like this id/class in your style.css file (line #2269 according to ie inspector) is causing an issue in ie.

#main .last {
margin-right: 0 !important;
clear: right;
}

Remove the clear:right. When i did in ie, the page looked the same as Chrome. and when i removed it in chrome, it still looked good. Let me know if it helps ??

Danny

Hello,

Here is some css code to place in your active child theme style.css file or your custom css plugin area. The font sizes are exaggerated so you can tell if it works right away. have fun.

Danny ??

#logoContainer h1 {
font-size: 70px;
}

#logoContainer p {
font-size: 40px;
}

Hello Mongoid,

Those are great questions. And with all things coding, I’d say it depends on the circumstances. For a great article to read about the balance, check this one out that did a good job explaining. Smashing Magazine !important Article Link

In short the answer is that in general it’s to be avoided where possible. Since it’s such a powerful declaration, it can make things harder for ‘end users’ of templates to make changes easily and predictably.

So far a theme maker, to use them could make life a nightmare when an end-user tries to modify a theme.

How about for the end-user or the person attempting to customize it without reselling it for others to develop? Ideally, it would be great to follow the inheritance rules and avoid it where possible. Thankfully WordPress not only follows these rules, but also has a css file heirarchy that also does. So a child theme css stylesheet will override (in most cases) the parent or main theme css. So will css placed in most custom css plugin editors. Child themes are nice in that you can easily track what changes you make as an end-user if something goes awry after you add custom css.

However, sometimes there could be inheritance issues with how a theme was setup, various browser display issues – mobile’s included, etc. Also, some saas based systems, cms’s and custom websites might not have child theme capability easily built in. In such cases, making lots of changes to 4 or 5 different stylesheets where anyone could get overwritten with upgrades could become a nightmare to redo, fix, troubleshoot, etc. And again, this does not necessarily apply to wordpress. But it can be typical of other types of systems you might later encounter in your design career. !important statements can help you in such cases to separate final customization in a way you can track and ‘rinse-and-repeat’ on any similar theming system later. In the case of recommendations i make, it can be hard for some beginners to know where to put things, and I don’t know whether they’ve done child themes, etc. So I’ll usually give them the code with !important in it so that the change takes effect. Often on here i’ve been reading how a person seems to actually have the right code, but it isn’t working-which means it’s either in the wrong place or something else. FOr those persons understanding css like yourself better, if you can do it without the !important in a way you can track your changes, avoid get overwritten on theme updates, and respect inheritance issues then that would be preferrable. But in a lot of cases you are the end-user, usually !important in a child theme isn’t going to cause you much confusion or issues anyways since they’re all in one place and you know where they are ??

Danny ??

Hello,

From what i can see from their demo site, you might try using another class i found that the slider is using to create an opacity.

I saw this

.nivo-caption {
background-color: rgba(0,0,0,0.7);
}

change it directly or even easier, just override it by adding this css to your custom css file

.nivo-caption {
background-color: rgba(0,0,0,0.2) !important;
}

Seems to work in firebug without affecting the text. By using background-color and an rbga color code that includes alpha transparency as the last value, you get the opacity effect without the whole box changing to invisible.

Danny ??

Hello,

Without having used the template before i can’t say if there are any built in settings. But you should be able to paste the following css code into your custom stylesheet plugin, or active theme’s style.css file. Tested it in firebug. so should work. also, play with the color hex codes to your liking. I just chose some ugly colors so you could see if they changed ??

Best Regards,
Danny ??

.head {
background: #90A39F !important;
}

a {
color: #202070  !important;
}

.dt {
background: #1B9CBC  !important;
}

.user {
background: #162C28  !important;
}

.commt {
background: #F54F0E  !important;
}

#article header img {
border-bottom: 5px solid #621BBC  !important;
}

Hello again,

I feel your pain ?? I took a few minutes to look again and I think i found one of the major problems. There is a missing classs called “responsive” on the <body> tag. I remember you mentioned you had disabled responsive mode in your template. I would definitely recommend turning it back on. I installed boemia’s free version to a localhost and once i did, the template bootstrapping worked as the demo site. Once you enable this it will clear up a lot of issues as i can’t get it to display right even in chrome at the moment. Once this is done, check if the “responsive” class has been added to the <body> tag. If so and the responsiveness is back, then see what doesn’t display correctly in other browsers. Only after reenabling this do i think you’ll find the source of any other issues. but I’m pretty sure almost 95% of them should be gone. Let me know ??

Danny

Hello Jasokko,

Try adding this css to your custom css file or plugin. Tested it in firebug, so it should work. Play with the colors you like using different color hex codes. Keep me posted. Hope it helps ??

body:after {
background: #3E8A3A !important;
}

.site-header {
background: #25584E !important;
}

Danny ??

Hello,

I had the chance to look over your question and there are a couple different ways you might do so. There might be a plugin somewhere that could help, but here is some css that will allow you to do what you were hoping. First for the post titles.

into your custom css file or stylesheet insert this css. You can change the font to whatever you like. Without any header link or plugin to enable google fonts for example, you can only use the web safe fonts that all browsers are capable of rendering such as arial, georgia, tahoma, times new roman, etc.

#blog_post .entry-title {
font-family: georgia !important;
text-align: center !important;
}

However, if you want to manually add support for any of the Google fonts you see in their directory, do the following. Browse their directory at https://www.google.com/fonts. Once you picked a font, click on the quick use button. Find the link to the google repo for the font. Add it to your active theme’s header file between the <head></head> tags. Then in the css to change the post title, go ahead and use the font name the same page in google fonts tells you to use to use the font. See this for example if you liked their Sigmar One font.

In the Header file…

<link href='https://fonts.googleapis.com/css?family=Sigmar+One' rel='stylesheet' type='text/css'>

In your css …

#blog_post .entry-title {
font-family: 'Sigmar One', cursive, arial !important;
text-align: center !important;
}

You might note that in the above example, i added arial after the Sigmar One, cursive. Some mobile browsers don’t like the google fonts and so it’s a good idea to give a fallback font to one you could live with if for example safari browser on ipad doesn’t want to display the font you chose from google.

Have fun playing with the different font choices out there. Oh and here is the css to do the same for your widget titles; at least the ones that i see on the page you referenced.

.widgettitle {
text-align: center !important;
font-family: georgia !important;

Also, i just noticed that when i used a google font in your site, it actually worked right out of the box. This means you likely already have ability to use all google fonts! If so, just use whatever font name you like from google fonts and see if it works.

Sorry for the long post ?? Just trying to be thorough.

Best Regards,
Danny ??

Hey Joshua,

If you need to use css, try this code to play with the color.

.site-header {
background-color: #ffffff !important;
}

Hope it helps ??

Danny

Hello gt,

I’d say that your focus wouldn’t be so much on the theme you pick as it would be on the plugin(s) you choose to install. A plugin would manage your links, and you should be able to display those links on pages, widgets, etc on most any theme you use that is built decently. Sorry i don’t have any suggestions on specific plugins that would be best suited for this. Maybe someone else can give you further direction on this part.

Danny ??

Hello Peter,

You could choose to hide the author info block using some css in a custom css plugin or in the style.css file. This should work.

.post-footer {
display: none !important;
}

Hope it helps ??

Danny

Hello,

I’m not familiar with the template you’re using, so if you aren’t finding any theme settings to change the font sizes for your paragraphs, there might just not be any.

Is so, you can install and activate a custom css plugin where you can paste in some css. Or optionally, you could create a child theme of your main template, activate the child theme, then edit the style.css file of the active child theme. Either way, paste in this css code to either the style.css file or the custom css plugin that you can find for free. It should give you control over the font size for the paragraphs.

Css is actually pretty easy once you get your feet wet. Here’s that code.

p {
font-size: 1.2rem !important;
}

Note: font-size can be defined using pixels, percentages, em’s, and rem’s. Anything but pixels is ‘dynamic’ which means fonts will auto resize with any text-size plugins and if you have a mobile responsive template. Your template uses rem’s. You can play with the font size. the following examples show examples of how.

p {font-size: 1rem !important;}

p {font-size: 1.2rem !important;}

p {font-size: 1.6rem !important;}

and so on ??

Let me know if it works!

(later edit – my bad, just noticed the theme author replied ?? However, the above code for css does let you target just the paragraphs and nothing else if that’s your desire )

Best Regards,
Danny