Changing font

Responsive Multi-Purpose Theme Framework! ›
Forums ›
Theme Support ›
Changing font

Participant

First, thank you for your theme. I’ve been blogging since 2002 and I love how clean the look of the theme is.

I would like to change the font size of the titles of my blog posts (make it smaller) I would also like to change the colors of both the title and all the links from red to teal.

Can you tell me how I can do that?

http://www.MarketingWithIntegrity.com

Details

Ünsal Korkmaz

Keymaster

Hi,
For changing colors, i suggest to use Flatly name theme style. It seems it suits what you want. For example, you can see this post in Flatly theme:
http://theme.firmasite.com/support/topic/changing-font/?style=flatly
If you dont know how to change Theme Style, please watch the video in http://theme.firmasite.com/

For your other question, font size of the titles of my blog posts, blog title’s font size is changing, depends on where it is showing. You can use custom css to change title’s font-size:

h1 { font-size: 48px }
h2 { font-size: 36px }
h3 { font-size: 28px }
h4 { font-size: 24px }

You can reduce numbers in this to make titles smaller. For example, start with reducing h1‘s font size from 48px to 36px. If its not enough small, try 30px

Details

coachmaria

Participant

Ok I changed it to flatly. I don’t like that green in the titles or everywhere else, so I’d want to change that to teal. The font size is better on the home page but worse on the inside pages.

I would still want the line going down the page to show where the content ends and where the right side bar goes. Although later when I get online again, I’m going to see how a background color would make it all look. (I need the background of the content area to be white as many of my photos have a white background)

The photos I use all got very small on all the pages.

I would want to change the color of the navigation tab to the teal or purple that I use instead of the color that is there.

So I think it’s better if I fix the other theme Unless you think that this theme is easier to adjust.

Details

Ünsal Korkmaz

Keymaster

Lets try this:

Go to your Theme Customizer (those theme option changing page).
Theme Options tab -> Theme Style -> select United style.
Colors tab -> Select “Use alternative menu color“
Now your main navigation is purple ok?
Go to http://subtlepatterns.com/ and pick a pattern for background. For example: this site is using http://subtlepatterns.com/rocky-wall/
Upload your selected pattern from Background Image tab

Theme Settings -> Custom Css -> put those css codes in there:

a { color: #008080; }
h1 { font-size: 26px }
h2 { font-size: 26px }
h3 { font-size: 24px }
#main article {
	background: #fff;
	border-radius: 6px;
	padding: 10px;
	box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
}

Now save all changes and check your site.

Details

coachmaria

Participant

Well, I decided that the background color wasn’t helping. But the code you gave me for the lines around the content and right side bar did!

The other change I’d like to make is to turn everything that is that purple color to color: #4F3071; including the navigation bars. Is there an easy way to do that?

And where is the link to your website? I’d like to add a target attribute so that when someone clicks on it, it opens a new page.

Details

Ünsal Korkmaz

Keymaster

Changing navigation bar color is not easy job. Those are complex css codes. You can try to convert all color codes in here:

.navbar-inverse .navbar-inner {
background-color: #802c59;
background-image: -moz-linear-gradient(top,#862e5e,#772953);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#862e5e),to(#772953));
background-image: -webkit-linear-gradient(top,#862e5e,#772953);
background-image: -o-linear-gradient(top,#862e5e,#772953);
background-image: linear-gradient(to bottom,#862e5e,#772953);
background-repeat: repeat-x;
border-color: #642246;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff862e5e',endColorstr='#ff772953',GradientType=0);
}

It will not be full solution but it will get you somewhere near it.

Details

coachmaria

Participant

EGADS! yes, that is a lot of code/work.

But before I do anything regarding colors, I need to fix the navigation bar. It looks perfect in many browsers, but as one of my clients mentioned, some of the words are going to a 2nd line. She uses Firefox, so I did a browser check at http://browsershots.org/http://www.marketingwithintegrity.com/?cat=66

And sure enough, I can see it myself.

Yesterday, I added more links to the menu box because if I included less, there was a big blank area on the left side. (it wasn’t centered within the navigation box).

Off to see if I can fix this situation before I change colors

PS thank you for your very prompt and specific replies.

Details

Ünsal Korkmaz

Keymaster

2nd line navigation is not a bug or something. Its working as intended.
If screen is small and there is too many links in navigation, there will be a 2nd line and its not a problem. Its called responsive.

Details

coachmaria

Participant

Well, I removed a few nav links, and am now looking to figure out how to make that area centered within the nav bar.

Details

coachmaria

Participant

I went back to the default theme and can live with no color and their colors for navigation, etc.

I would like to center the information that appears in the navigation bar. And I think that is it! (although I did like one of the sample websites that had a slider and may try that in the future.)

Details

Ünsal Korkmaz

Keymaster

.navbar .nav,
.navbar .nav > li {
  float:none;
  display:inline-block;
  vertical-align: top;
}
.navbar-inner {
  text-align:center;
}

Details

coachmaria

Participant

Fixed.

I also fixed the link to your website so that it opened a new window and went to your blog page. Otherwise, if it goes to the home page, it looks a bit like it’s under construction.

I went to go share the blog site with my connections, but you don’t have any http://www.sharethis.com plug-in on your website. I’ll go share it manually on my blog

And I’ll work on the footer. I’d like a three column footer on the bottom; as you see on many newer or updated blog sites.

Details

coachmaria

Participant

Is there a way to move the content boxes up a bit so that they are even with the right side bar boxes?

Is there a way for me to move the entire page up; starting with the nav bar, so that it’s closer to the header photo? (this on isn’t as important as the boxes being even.

Unsal

Is there a part of the program that allows me to make a 3 column footer? i.e. section one I’d put my contact information in. Section 2 I’d put important pages from my site Section 2 I’d put something else?

Details

Ünsal Korkmaz

Keymaster

First and 2nd question’s answer:

#breadcrumbs {
  display: none;
}
#logo .page-header {
margin-bottom: 0;
}

3th question:
FirmaSite makes 3 column automatically (3 span4). So just put 3 widget to footer widget area.. thats all

Details

coachmaria

Participant

WOW! It’s look’n great and I have 3 columns. How do I make each of the columns have a white background and the shadows and stuff around them? Kinda like the content area looks.

Details

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.

Forum Statistics

Members