BlogHarbor Home Page
FAQFAQ  SearchSearch  MemberlistMemberlist  UsergroupsUsergroups  UsergroupsRSS   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
Working with Custom CSS
Goto page 1, 2  Next 
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> General Discussion
View previous topic :: View next topic  
Author Message
phil arnold



Joined: 12 Jul 2007
Posts: 53

PostPosted: Wed Dec 23, 2009 9:58 am    Post subject: Working with Custom CSS Reply with quote

Hello John:

I am not happy with the look of the left column of my blog, www.elvisblog.net. To correct this, I have gone to Templates/Style/Edit and then scanned all the Current CSS. I just can't seem to figure out which ones to copy to Custom CSS so I can make changes. Perhaps if I list the changes I want to make, you could tell me which items to move to Custom CSS and change.

Component Titles:
1) All have black backgrounds -- I want to change to dark gray
2) Fonts are too small -- Want to enlarge
3) One font is red, the rest are gold -- Want to make all the same

Compnent Content:
1) Fonts are all red -- Want to change

I have successfully changed the size and style of my article titles, so I believe I understand the Custom CSS process. I sure will appreciate you guiding me to the correct CSS items to make these Component changes.

Phil Arnold
Back to top
View user's profile Send private message
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Thu Dec 24, 2009 3:26 pm    Post subject: Re: Working with Custom CSS Reply with quote

This page:

http://demo.blogharbor.com/blog/_archives/2006/1/26/1725319.html

Should be the reference you need...

You should also download one of the Firefox plugins Web Developer or Firebug so you can see the styles used on any page.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
phil arnold



Joined: 12 Jul 2007
Posts: 53

PostPosted: Mon Dec 28, 2009 9:37 pm    Post subject: Reply with quote

John, thanks for the prompt answer. On Christmas Eve, no less.

Unfortunately, I think we have to dig deeper to find the answer I need. I did click the link you gave me, and it opened to “Style Template CSS Reference.” There were six options. I scanned them to see which would help me change the font size and color of my Component Titles, left column, Bold Yellow style.

#2, Changing the Default Font” sounded promising, but this covered only Article Content Font. I need Component Title Font.

I eliminated 1, 3, 4 and 6, because I’m not centering my blog, or doing boxes around the date, or changing the column background color, and I’ve already accomplished changing Article Title Font. So, that leaves #5, “Changing the Background Color of Your Component Titles.”

I checked it out, and noticed that you said, “… Let’s add this code,” and solved the person’s problem. That’s what I was hoping for with my question about changing the font size and color in Component Titles.

Could you please give me a code to add, or at least indicate which code I need to move from Current CSS to Custom CSS and modify?

I appreciate all the help. Thanks,
Phil Arnold www.ElvisBlog.net
Back to top
View user's profile Send private message
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Mon Dec 28, 2009 9:46 pm    Post subject: Reply with quote

Phil -

Do you realize you just need to View Source in the browser and scroll to the section you are looking to change, and check out the class that's listed in the DIV?

I think if you know enough to edit CSS, it should be absolutely trivial for you to figure out which CSS class to edit... You just look at the HTML source code...

Do you see what I am saying?
Back to top
View user's profile Send private message Send e-mail Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Mon Dec 28, 2009 9:54 pm    Post subject: Reply with quote

Just did a View Source and it looks like componentHead and componentContent are likely the classes you need to change...
Back to top
View user's profile Send private message Send e-mail Visit poster's website
phil arnold



Joined: 12 Jul 2007
Posts: 53

PostPosted: Tue Dec 29, 2009 5:56 am    Post subject: Reply with quote

Thank you, John. Before I can check View Source, I need to find it. Please advise where it is located. Also what is DIV?

I haven't found anything about working with CSS trivial. I spent quite a lot of time figuring out how to change Article Title Font. I'm sorry that I'm having trouble figuring out which CSS Class to edit to change Component Title Font size and color..

Thanks for suggesting that componentHead is the likely class I need to change. I wish you had gone one step farther and suggested the actual code in that class, but I will begin the search for it.

Please tell me what I need to know about View Source and DIV.

Phil Arnold
Back to top
View user's profile Send private message
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Tue Dec 29, 2009 9:22 am    Post subject: Reply with quote

Before I can check View Source, I need to find it. Please advise where it is located.

Viewing the source of the HTML is something your browser does. I don't know where it is on every browser but you can check the Help for your browser to find out where it is on the browser you use.

Also what is DIV?

That's an HTML code. Teaching what a DIV is would be beyond the scope of the the support I can provide here, please try to find some kind of HTML book or tutorial so you can start to learn the basics of HTML and CSS. That would be the best way to grasp it.

I'm sorry that I'm having trouble figuring out which CSS Class to edit to change Component Title Font size and color..

I noted in my previous reply the class is componentHead.

I wish you had gone one step farther and suggested the actual code in that class, but I will begin the search for it.

Some kind of CSS tutorial or book is really going to help you... Here is the default CSS code for the componentHead class:

Code:
#leftcol .componentHead {
    margin: 0 0 3px 0;
    padding: 3px 10px 3px 15px;
    font-size: 10px !important;
    font-weight: bold;
    background-color: #000;
    color: #FFCC33;
    white-space: nowrap;
}


Override the color as follows:

Code:
#leftcol .componentHead {
    color: #000000;
}


Override the size as follows:

Code:
#leftcol .componentHead {
    font-size: 12px !important;
}


Override both as follows:

Code:
#leftcol .componentHead {
    color: #000000;
    font-size: 12px !important;
}
Back to top
View user's profile Send private message Send e-mail Visit poster's website
phil arnold



Joined: 12 Jul 2007
Posts: 53

PostPosted: Tue Dec 29, 2009 11:55 am    Post subject: Reply with quote

OK, I have had partial success. As you suggested, I went to:

#leftcol .componentHead

I copied it to Custom CSS, and I changed the font size for 10 to 16px. That looks great. All of the Component Titles are gold font, except Main Page, which is in red. I tried changing the font in the code to #FFD700 and Gold, but Main Page remained red. Can you give me a suggestion here?

The second thing I tried was your suggestion:

#leftcol .componentContent

The only thing in the code was padding, nothing about color. So, I copied it to Custom CSS and added: color. black; That didn't change to component content font color, nor did #000000;

So, can you tell me anything different to do here, too?

Thanks for helping me change my Component Title font size. A few more messages and maybe I'll get all the changes I want made.

Phil Arnold www.ElvisBlog.net
Back to top
View user's profile Send private message
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Tue Dec 29, 2009 2:18 pm    Post subject: Reply with quote

If I understand you correctly, you are trying to change the color of links in the left column? Links are Anchor tags or A's. Try this:

Code:
#leftcol a:link, #leftcol a:active, #leftcol a:visited {
YOUR ATTRIBUTES HERE
}
Back to top
View user's profile Send private message Send e-mail Visit poster's website
phil arnold



Joined: 12 Jul 2007
Posts: 53

PostPosted: Tue Dec 29, 2009 4:30 pm    Post subject: Reply with quote

John, I guess your last question confuses me. I am trying to change the color of two fonts:

Left Column Compnent Titles -- want all to be gold
Left Column Component Content -- want all to be black

You just asked if I was "trying to change the color of links in the left column?" I am trying to change the color of all Component Content to black: "Recent Articles," "Main Page," " and "My favorite Links." Does that answer your question? If not, please advise why you just asked about links. Should I still try your suggestion to copy this to Custom CSS and modify.

#leftcol a ; link

Or would something else be better to change all Component Title fonts to gold?

And, I'm still hoping to heard back why you think the attempt I made with

#leftcol .componentContent

Did not work for me.

Is there perhaps a different code I should modify to change all the Component Content fonts to black? Thanks for all your help.

Phil Arnold
Back to top
View user's profile Send private message
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Tue Dec 29, 2009 6:59 pm    Post subject: Reply with quote

You just asked if I was "trying to change the color of links in the left column?" I am trying to change the color of all Component Content to black: "Recent Articles," "Main Page," " and "My favorite Links." Does that answer your question?

Links are controlled in CSS separately from plain text. So if you want all the content plus all the links in the component to be black, then you probably need to override the componentContent and the A links as well. So yes, you need to override the plain text color as well as the link colors.

And, I'm still hoping to heard back why you think the attempt I made with #leftcol .componentContent Did not work for me.

It did work for you. Plain text would appear black. I just tested it on your blog. But for the reason I explained above, your links are not going to appear black with that code. So follow my earlier instructions for changing the color or the links if you wish them to be black as well.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
phil arnold



Joined: 12 Jul 2007
Posts: 53

PostPosted: Wed Dec 30, 2009 11:26 am    Post subject: Reply with quote

John, let me see if I understand "Links" as you reference them in your last response.

In my left column, I have three major Component Titles: Recent Articles, Main Page, and My Favorite Links. If a reader clicked on any of these titles, nothing happens, so I assume you are not talking about the titles when you say "Links." Correct?

However, under each title are a list of choices, which I have been referring to as Component Content.. If you click on one, it takes you somewhere, so I assume these are the "Links" you refer to. Correct?

Please answer these two questions, and I will try to move on.

Thanks, Phil Arnold
Back to top
View user's profile Send private message
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Wed Dec 30, 2009 11:34 am    Post subject: Reply with quote

In my left column, I have three major Component Titles: Recent Articles, Main Page, and My Favorite Links. If a reader clicked on any of these titles, nothing happens, so I assume you are not talking about the titles when you say "Links." Correct?

Correct.

However, under each title are a list of choices, which I have been referring to as Component Content.. If you click on one, it takes you somewhere, so I assume these are the "Links" you refer to. Correct?

Yes. A link is something you can click on in a web browser and it will take you somewhere on the web...
Back to top
View user's profile Send private message Send e-mail Visit poster's website
phil arnold



Joined: 12 Jul 2007
Posts: 53

PostPosted: Wed Dec 30, 2009 7:54 pm    Post subject: Reply with quote

John:

It looks like I'll just live with the red font on the Component Content (or, Links, as you say). It looks like a job for later.

Thanks for helping me get the Component Title font size corrected.

And someday, I'll come back and ask you how to change that Left Column Main Page Component Title from red to gold.

Phil Arnold
Back to top
View user's profile Send private message
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Wed Dec 30, 2009 9:20 pm    Post subject: Reply with quote

Phil, all the answers you need are here in this thread, how to change the color of the "Main Page" text (hint that's a link), how to change the colors of the red text in the component content area (again, they are links) but I don't think any of this will be useful to you until you have a solid grasp of the basics of HTML and CSS. Work through some online tutorials or some of the HTML/CSS 101 -type books and then come back to this and I think it will all make much more sense. Until then I'm afraid we won't be speaking the same language, quite literally.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Search all BlogHarbor support resources.
View previous topic :: View next topic  
Display posts from previous:   
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> General Discussion All times are GMT - 5 Hours
Goto page 1, 2  Next
Page 1 of 2

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum