Weaver II Unofficial User Guide: How to Customize LInks

weaver blue subtheme

weaver blue subtheme

Internal website links are the glue that holds your website together. You must Customize internal links so they provide good navigation through your content. Good navigation is extremely important.  With Weaver you have control over every aspect of how your links work, and how they look on the page. Good link navigation is especially important if you have a large amount of Content on your site.  Poor link navigation can result in readers choosing to click away in micro-seconds, rather than struggle with a navigation system they find difficult to use.

The Importance of Consistency in Web Design

People who know about Web design – not me (yet), but I’m happy to believe them – always say that having consistency throughout your blog or website design is important. Consistency can be a consistent overall color palette, but is also the layout and overall structure of your Content.

The Weaver theme makes it really easy to have site wide consistency.  You don’t need to know anything about CSS, or HTML, or even web design – with Weaver you have total control using only check boxes, color pickers (an infinite palette of colors to pick from) and Help pages.  Anyone can easily set up a website using Weaver II if they can read and wield a mouse.  No other skill is required.

It’s a fact of life that we fear the unknown. Hopefully this guide will give you an insider’s view of what you can expect if you decide to use Weaver II as your WordPress Theme.

How To Customizes Links In Weaver Admin Option Panel

Here is where the Weaver Links Admin Options are found: Dashboard>Appearance>Weaver Admin>Main Options>Links.

weaver admin links

If you click on that yellow question mark next to Main Options, you get taken to the relevant Weaver Help Pages: here is a short extract from the Weaver Help pages.

weaver Links help

The first Link option in the Weaver Admin Links section is The Standard Link.

Before discussing color choices, we need to know what a Standard Link is:

What is a Standard Link and Where Do You Find Them?

This Standard Link option controls the characteristics of all links that are not controlled by other Admin Settings.  I always use the Trial and Error (aka the Suck It And See) Method of revealing the location of Admin Options that like to remain a little bit mysterious….

It’s a lot of fun, especially for any poor unsuspecting visitors at your site while you are conducting your ‘research’.  You simply select a bright green color for the Link in question, (or other highly visible color), Save Settings for the particular Link, and go on a search for some Bright green text at your website.

Here’s what I tracked down using my ‘Bright Color Detection Method’, for a Standard Link on My Second Million: it controls the Previous and Next article navigation above the current Post pages:

Standard Link: Example 1:

standard link top

Standard Link: Example 2: The Weaver Standard Link also controls the same Previous and Next navigation links at the end of a Post: No 1:

standard link foot

Standard Link: Example 3: You can also see from this screenshot that the Colors selected for your Standard Link also apply to any external link, not otherwise controlled by other Settings. In this case it shows the link to the My Second Million RSS Feed (No 2).

(see How to Add Feedburner RSS Feed to Your Blog and How to Add Socialize Plugin Like Buttons to Your Blog).

Standard Link: Example 4:The Standard Link colors also apply to your Continue Reading links that are automatically added to your Home Page at the end of the first couple of paragraphs – if you are using the HTML <more /> option for your posts.

Tip: You make this break in your posts, and add the Continue Reading link in WordPress, by changing your WordPress Edit page screen to the HTML version (not Visual), place your cursor at the end of the paragraph where you want to add the Continue Reading link, and click the ‘more’ formatting icon in the row of formatting icons above the writing space).

Here’s what it looks like when the Standard Link option in Weaver Admin>Main Options>links>Standard Link,  is set to luminous green:

..continue reading link

OK, now we know what a Standard Link is and where you see them on the page.

Next, here is how you Customize your Standard Links in Weaver Admin>Main Options>Links

1. How To Customize The Weaver II Standard Link

weaver standard link

Standard Link:

If you have read any other articles in this guide, you will recognize the standard Weaver layout and option check boxes, of Weaver Admin.

There are many different Link options to customize in this Admin section.  I have the same consistent color settings for all of them. So I will explain the colors I’ve used for this Standard Link, and then, when I cover the other Link options, I will show you only what they are, and what they do, because the color settings will be the same.

That blue text at the top of the above screenshot reads:  Default for links – colors used if not overridden by other link settings. Bold, Italic, and Underline are set per link type.

No 1. Link Text Color: When I’m not testing links (above) by using Lime Green, I normally select the same blue color #357A03 that I used for the Main Menu Text color.

No 2: Here is the familiar CSS+/- option that is common throughout the Weaver admin panel.  If you click on that + sign, the CSS Styling text box (No 3) opens up. The text above the CSS Styling text box says:

“You can enter CSS rules, enclosed in {}’s and separated by ; See CSS Help (No 4) for more details”

If  you don’t know what that means it doesn’t matter at all. CSS (Cascading Style Sheets) is the language of website designers.  This CSS styling text box allows designers fluent in CSS to strut their stuff and make the rest of us feel inferior.  But do we care?  No We Don’t!  Why? Because Weaver has been designed so we can make beautiful websites without any design skills or knowledge of CSS at all!

However, if you want to brush up on some CSS lingo and impress your friends at your next dinner party (or website launchSmile ), click on the CSS Help link and you are taken to the CSS Help Section of Weaver Help Pages.

Here is a screenshot of the CSS Help Index:

weaver css help

Other settings in Main Options>Links control the text of the links, not the colors.

Bold: I have not checked this link which makes the Standard Link text bold.

Italic: I haven’t checked this Italic box either.

No 5. Visited: this is the Admin option located just above the Hover Option.  The Weaver Admin text explaining this link option says:

“Color when link has been visited (this option is generally falling out of use).

I followed Weaver Admin’s advice and made this option the same color as the Link (No 1 above), so the color of the text of the Standard Link does not change color after anyone has clicked on it.

Tip: if you change the top Link settings (No 1 in the above screenshot), but don’t change the Visited color (No 5 in the screenshot above), the links on your blog will not change – unless you have not visited them, which is unlikely if you are flipping back and forth to check how your tweaks look on the page.

So….if you want to change the text color or your Standard Link (or any of the following types of links, you must also change the Visited color or you will not be able to see your changes on the page.

Yes, I learned that the hard way, and was rescued by Scrambler on the Weaver Forum with some timely advice: thanks scrambler.

No 6. Hover: this is the same deal we covered in the Menu article: the hover color is the color you see when you hover your mouse over the line of text in question.  In this case of the Standard Link, it’s the text Continue Reading and the other examples listed above..  At My Second Million, this text is normally blue on the Home page, but if you hover your mouse over it, it changes to Red.

Standard link customization is now finished, next down the Admin Links Options page is the: Post Entry Title Link.

2. How to Customize The Weaver Post Entry Title Link

Here is an excerpt from the Weaver Help Pages:

weaver post entry help

That is clear I think but I’ll do my Bright Green Detection Method to make sure we are all talking about the same thing.

Here’s a screenshot to illustrate the Post Entry Title link: It controls the color of your Post Titles.

post title link

The options available on the Admin page for Post Entry Links are the same as explained above for Standard Links: you have Settings for: Title color, Visited color, Hover color, Bold and Italic.

The next link to customize is the Post Link Info link:

3. How To Customize the Post Info Link

1. Home Page Post Info Links:

post info link

This screen shot above is from my Home Page. It shows the Post Info Links at the end of one post extract (No 1) and the Post Info Link at the top of your next Post (No 2).

This is how the Post Info Link shows up on a Category Page:

2. Category Page Post Info Link:

category post info

Next Link to optimize is Dashboard>Appearance>Weaver Admin>Main Options>>inks> Widget Link.

4. How to Customize Weaver II Widget Links

Don’t forget that as with all these links, you have to change the Visited Color choice as well as the Link Text color, for you color changes to show up on the page when testing and tweaking.

Here’s a screen shot of where your Widget Links show up on the page:

widget link

So, a Widget Link color selection choice, shows up for any text in any of your sidebar widgets.

Again, the options available in your Weaver Admin Links are all the same for all the types of Links: Title link, Visited, Hover, Bold and Italic.

Next Link option to customize is the Info Bar Link.

5. How to Customize the Weaver II Info Bar Link

First thing to know is what your Info Bar is: it’s an optional navigation bar you can choose to run across the top of your posts.

Here are 2 screenshots that show the left and right ends of an Info Bar here at My Second Million: these links on the left of screen are known as Breadcrumbs, because they show the ‘trail’ of breadcrumbs (links) that show the location of the page you are currently viewing.

For more details about setting up Breadcrumbs and the Info Bar see Breadcrumbs And Web Design.

info bar link

 

 

 

 

 

On the far right hand side of the Info Bar is where the numbers of the pages available, are displayed above the right hand side bar (if you have your sidebar on the right of your pages)

info bar page number

 

 

 

 

 

Note: When I’m not testing and demonstrating these link options for this User Guide, I usually choose to Hide the Info Bar. So if you are reading this article at some point in the future, the webpages you see here at My Second Million may not have the Info Bar visible.But these screen shots demonstrate what an Info Bar looks like.

The option to Hide or Show the Info Bar is controlled in the Menu Options section of Weaver II Admin.

The Next and Final Smile Link to customize is the Footer Link.

6. How To Customize Your Weaver II Footer Link

My color settings for this link are different to the consistent color schemes I have for the other links (blue text, and red hover color). That is because I have set my Footer Area to dark blue.

Therefore I have customized my Footer Text Color to be white (#FFFFFF)

Here’s a screenshot of my Footer Link Settings:

footer link

I have the Title Link #FFFFFF (No 1).

I have the Visited color (No 2) as …blank.  OK, that must mean you can leave these Visited options blank and it doesn’t block your color choice at Link (No 1).

I also have left the Hover Color blank – I was probably a bit unfocused by the time I’d got down to this last Link Setting.  I don’t think it matters.  The main thing is that I’ve set the Text color to white, so it shows up against the dark blue background of the Footer.

The background color for your Footer is customized in Dashboard>Appearance>Weaver Admin>Main Options>Footer.  I’ll cover the Footer Area options in a separate post.

If you enjoyed this post, please click the Like button on the Left. And consider subscribing to the RSS feed to have future articles delivered to your feed reader, or by Email.

Comments

Weaver II Unofficial User Guide: How to Customize LInks — 2 Comments

  1. Pingback: Weaver II Unfofficial User Guide: Content Area Options

  2. Pingback: Weaver II Theme: Unofficial User Guide: Index & Links

Leave a Reply

Your email address will not be published. Required fields are marked *


*

* Copy This Password *

* Type Or Paste Password Here *

621,313 Spam Comments Blocked so far by Spam Free Wordpress