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 
How do I create a sub-title for my blog name?
 
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> General Discussion
View previous topic :: View next topic  
Author Message
des



Joined: 31 Dec 2004
Posts: 152

PostPosted: Sun Jul 03, 2005 10:59 pm    Post subject: How do I create a sub-title for my blog name? Reply with quote

My blog name is Thinking Home Business. I want to create a subtitle in a smaller font:
Des Walsh blogs on practical business blogging, networking and home based business

or similar

I assume it involves creating a custom component for Blog Name.

Des
_________________
Des Walsh
Gold Coast, Australia
www.thinkinghomebusiness.com
Author, 7 Step Business Blog
http://www.7stepbusinessblog.com
Back to top
View user's profile Send private message
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Sun Jul 03, 2005 11:50 pm    Post subject: Re: How do I create a sub-title for my blog name? Reply with quote

Yes, that technique would be your best bet. Try customizing the Blog Name component. Change the content from the default:

Code:
<div class="component">
<div class="componentBlogname">
<a href="{{blog.url}}">{{blog.name}}</a></div>
</div>


to something like this:

Code:
<div class="component">
   <div class="componentBlogname">
   <a href="{{blog.url}}">{{blog.name}}</a></div>
   <div>Des Walsh blogs on practical business blogging, networking and home based business</div>
</div>


Then replace the default Blog Name component in your layout with the customized one you just created.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
des



Joined: 31 Dec 2004
Posts: 152

PostPosted: Mon Jul 04, 2005 8:57 pm    Post subject: Reply with quote

Thanks John

Now I'm hoping that won't create any confusion with links I've built up with directories etc. As they would be using the url or rss, I can't see there's a likely problem.

Des
_________________
Des Walsh
Gold Coast, Australia
www.thinkinghomebusiness.com
Author, 7 Step Business Blog
http://www.7stepbusinessblog.com
Back to top
View user's profile Send private message
des



Joined: 31 Dec 2004
Posts: 152

PostPosted: Mon Jul 04, 2005 9:14 pm    Post subject: Reply with quote

I've customized the Blog Name component, but what happens is that the system creates a new customized component and leaves the default one in place. I tried moving the custom component into a column, but it just created a mess in the sidebar!

What are the actual steps to replace the default component with the custom one please?
_________________
Des Walsh
Gold Coast, Australia
www.thinkinghomebusiness.com
Author, 7 Step Business Blog
http://www.7stepbusinessblog.com
Back to top
View user's profile Send private message
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Mon Jul 04, 2005 10:40 pm    Post subject: Reply with quote

Now I'm hoping that won't create any confusion with links I've built up with directories etc. As they would be using the url or rss, I can't see there's a likely problem.

No, I would not expect any problems. This is just a change to a decorative peice of text on your blog, not a semantic one.

I've customized the Blog Name component, but what happens is that the system creates a new customized component and leaves the default one in place.

Yes, that is correct and exactly what is supposed to happen. When you customize an existing component, you get a new customized component in addition to the default one. The new component is created, but does not replace the default upon creation.

I tried moving the custom component into a column, but it just created a mess in the sidebar!

You don't want to drag it into the sidebar, you want to replace the header version.

What are the actual steps to replace the default component with the custom one please?

The process in general was described at the end of this article. Summary:

Go to Look & Feel > Layout. In the Inactive column, you should see the name of the Custom Component you just created (it will have a name like Custom: Blog Name). Drag the component into the Left or Right Column, drag the original component to the Inactive column, and click on the Save button at the bottom of the page.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
des



Joined: 31 Dec 2004
Posts: 152

PostPosted: Wed Jul 06, 2005 10:58 pm    Post subject: Reply with quote

[color=red]You don't want to drag it into the sidebar, you want to replace the header version.[/color]

OK, I sorted that out - thanks.

Go to Look & Feel > Layout. In the Inactive column, you should see the name of the Custom Component you just created (it will have a name like Custom: Blog Name). Drag the component into the Left or Right Column, drag the original component to the Inactive column, and click on the Save button at the bottom of the page.

I've done all this - a couple of times - new words are not showing up. Any more clues?

Des
_________________
Des Walsh
Gold Coast, Australia
www.thinkinghomebusiness.com
Author, 7 Step Business Blog
http://www.7stepbusinessblog.com
Back to top
View user's profile Send private message
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Wed Jul 06, 2005 11:18 pm    Post subject: Reply with quote

Actually the text is there, but the white text is appearing on a white background and appears invisible. I didn't test the code I gave you to see what it would look like in that theme.

Instead of this:

Code:
<div class="component">
   <div class="componentBlogname">
   <a href="{{blog.url}}">{{blog.name}}</a></div>
   <div>Des Walsh blogs on practical business blogging, networking and home based business</div>
</div>


Try this:

Code:
<div class="component">
   <div class="componentBlogname">
   <a href="{{blog.url}}">{{blog.name}}</a></div>
   <div class="componentBlognameAlt">Des Walsh blogs on practical business blogging, networking and home based business</div>
</div>
Back to top
View user's profile Send private message Send e-mail Visit poster's website
des



Joined: 31 Dec 2004
Posts: 152

PostPosted: Thu Jul 07, 2005 3:46 am    Post subject: Reply with quote

Thanks John
Yes, I could see the words in view source, triple checked the code. thanks for attending to this. will now go and fix.
Des
_________________
Des Walsh
Gold Coast, Australia
www.thinkinghomebusiness.com
Author, 7 Step Business Blog
http://www.7stepbusinessblog.com
Back to top
View user's profile Send private message
des



Joined: 31 Dec 2004
Posts: 152

PostPosted: Thu Jul 07, 2005 4:02 am    Post subject: Reply with quote

When I edited the code as above, it worked but the sub-title came out in yellow and was hard to read, so I added a little HTML to change the font color, thus - now a shade of blue:

<div class="component">
<div class="componentBlogname">
<a href="{{blog.url}}">{{blog.name}}</a></div>
<div class="componentBlognameAlt"><font color ="336699">Des Walsh blogs on practical business blogging, networking and home based business</font></div>
</div>

_________________
Des Walsh
Gold Coast, Australia
www.thinkinghomebusiness.com
Author, 7 Step Business Blog
http://www.7stepbusinessblog.com
Back to top
View user's profile Send private message
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Thu Jul 07, 2005 10:03 am    Post subject: Reply with quote

Here's another way to do the same thing, the CSS way :

Code:
<div class="component">
<div class="componentBlogname">
<a href="{{blog.url}}">{{blog.name}}</a></div>
<div style="color:#336699;">Des Walsh blogs on practical business blogging, networking and home based business</div>
</div>


Using CSS allows you much finer control over the presentation. For example:

Code:
<div class="component">
<div class="componentBlogname">
<a href="{{blog.url}}">{{blog.name}}</a></div>
<div style="color:#336699; font: bold 11px Verdana,Helvetica,Arial,sans-serif;">Des Walsh blogs on practical business blogging, networking and home based business</div>
</div>


There are many presentation elements which can be modified only via CSS and not (or not easily) via HTML. Line height, padding, background colors, margin, alignment, borders, all are easily managed using CSS.
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
Page 1 of 1

 
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