Motif theme, menu & widgets font color, size, style changes

shockinyall · Member · Jul 23, 2015 at 3:06 pm
Copy link

Add topic to favorites
Hi, I have a few questions. I’ve tried to list them all now, so this thread is not five miles long. Thank you in advance!

1. I want to change the font-style and size of the navigation menu. I have read through the Motif-tagged forums and the only suggestion I found was the following inserted into the CSS editor, which I tried, but it did not work.
.widget-title {font-size: your font size} …and yes, I did insert several outrageous font sizes and regular sizes, to no avail. Any suggestions as to what I am doing wrong?

2. I would like for the Links widget to display the links closer together-right now it looks like they are double-spaced, but I would like it single-spaced. I thought it was something to do with line-height, but I cannot make a change occur. Suggestions to solve this problem?

3. I also would like the option to change the color and font of the footer widget headings. Is this possible?

4. Next, comparing the navigation menu to the content box and sidebar, the navigation menu is wider and the content box and sidebar is narrower. I would like for these to be equal width. I really do not care which one gets narrowed or widened. Is this possible?

5. Finally, I would like to adjust the line spacing in the footer widgets. It seems to me the lines are too far apart. Is this possible?

Thanks again,
Rebecca

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 23, 2015 at 8:02 pm
Copy link
Hi Rebecca,

1. I want to change the font-style and size of the navigation menu. I have read through the Motif-tagged forums and the only suggestion I found was the following inserted into the CSS editor, which I tried, but it did not work.
.widget-title {font-size: your font size} …and yes, I did insert several outrageous font sizes and regular sizes, to no avail. Any suggestions as to what I am doing wrong?

Since you are using Custom Fonts, we have to use a slightly different CSS selector. Add the following to your custom CSS and then adjust the font size as desired.
```
.wf-active .widget-title {
    font-size: 2.39064rem;
}
```
2. I would like for the Links widget to display the links closer together-right now it looks like they are double-spaced, but I would like it single-spaced. I thought it was something to do with line-height, but I cannot make a change occur. Suggestions to solve this problem?

There was 12px of top and bottom padding for the entries in the links widgets. The following cuts that in half to 6, and you can adjust as you desire.
```
.widget_links ul > li {
    padding-bottom: 6px;
    padding-top: 6px;
}
```
thesacredpath · Member · Jul 23, 2015 at 8:38 pm
Copy link
3. I also would like the option to change the color and font of the footer widget headings. Is this possible?

This will allow you to change the footer widget title colors.
```
.footer-widget-area .widget-title {
    color: #fff;
}
```
On changing the font, you can set two fonts at Appearance > Customize > Fonts. Headings sets the font for the widget titles. Only those two fonts will be loaded. We can use a more standard font, but we have to keep in mind that there is a limited amount of fonts that are installed on all computer systems, and if it isn’t a custom font, we need to use one of those cross-system fonts, otherwise your font choice won’t show up for everyone. Here is a table that shows which fonts are installed on Linux, Mac and Windows. If you notice in the CSS you will see several fonts specified in a row. That is called a font stack and the browser will try and find the first, then go to the second and so on and finally if nothing is on the computer, it will substitute the standard serif or sans-serif font the browser has. Here is an example with the standard sans-serif fonts installed on virtually all computers.
```
.wf-active .footer-widget-area .widget-title {
    font-family: Helvetica, Arial, Verdana, , sans-serif, ;
}
```
4. Next, comparing the navigation menu to the content box and sidebar, the navigation menu is wider and the content box and sidebar is narrower. I would like for these to be equal width. I really do not care which one gets narrowed or widened. Is this possible?

This will make the navigation the same width as the content area.
```
.main-navigation {
    margin-left: 34px;
    margin-right: 34px;
}
```
thesacredpath · Member · Jul 23, 2015 at 8:40 pm
Copy link
5. Finally, I would like to adjust the line spacing in the footer widgets. It seems to me the lines are too far apart. Is this possible?

This will tighten up the spacing in the Blogs I follow and Archives widgets in the footer.
```
.footer-widget-area .widget ul > li, .footer-widget-area .widget ol > li {
    padding-bottom: 6px;
    padding-top: 6px;
}
```
If you wish to tighten line spacing on the other widgets, let me know and I’ll work out the code for you.
shockinyall · Member · Jul 23, 2015 at 11:14 pm
Copy link
Thank you! You truly live up to the name, Happiness Engineer!! All of your suggestions worked for me the first time and I”m a novice at coding!!

I’m pretty much happy with my site for the time being, but I will mention two more things.

1. I want to change the color of the Home and Blog buttons in the main navigation menu. Is this possible?

2. I would like to tighten the line spacing in the footer Contact widget, Blogs I Follow widget, and the Text box widget I have inserted.

Thank you so much for the previous help and advance thanks on these two current items.

Rebecca
ehtis · Staff · Jul 24, 2015 at 12:26 am
Copy link
Let me chip in as I was going through the threads.

1. It sure is:
```
.main-navigation a{
	color: red !important;
}
.main-navigation a:visited{
	color: red !important;
}
```
2. The following should tighten up the line spacing on the widgets you mentioned:
```
.first.footer-widgets ol{
	line-height: 1.3;
}

.third.footer-widgets .textwidget p{
	line-height: 1.3;
}
```
Goes without saying that you can adjust the link colors and line spacing as desired!
shockinyall · Member · Jul 24, 2015 at 1:44 pm
Copy link
Thank you, ehtis! All of your suggestions worked for me except

.first.footer-widgets ol{
line-height: 1.3;
}

this code did not tighten the spacing in the footer section for the “Posts I like” section. This is my fault, I mistyped in my last posting here that I needed the “Blogs I Follow” widget line spacing adjusted. I should have typed “Posts I Like”. Will you please help again?

Thank you,
Rebecca
ehtis · Staff · Jul 25, 2015 at 3:24 am
Copy link
Not a problem Rebecca! And here’s the code for “Posts I Like”:
```
.second.footer-widgets ul{
	line-height: 1.1;
}
```
shockinyall · Member · Jul 26, 2015 at 3:44 pm
Copy link
Thank you, ehtis- works great!!
Rebecca
thesacredpath · Member · Aug 4, 2015 at 6:36 pm
Copy link
You are welcome.

No items found.