Need Help Picking Out What. I need


(Michelle Anderson) #1

I guess I’ve realized that I’m going to have break down and buy some Stacks to do what I need to do.

What I need to do is:

  1. create a sidebar which shows up on each page; and

  2. allows me to override the existing footer and replace it with a few links and get rid of the footer that has dumb information there.

Can someone please tell me what I need in order to do these things?

Thanks.


(Rob Beattie) #2

Hi Michelle,

lots of ways to do this but will depend on the theme you’ve decided to use. If it’s a standard theme, the simplest way is to use the built-in sidebar and then remove the footer information in Settings and replace it with the info you want to display. No need to buy any stacks.

But a bit more info about your setup and what you’re trying to achieve would be helpful.

Rob


(Michelle Anderson) #3

Hi robbettle,

Pretty much every time I’ve asked a question here, people tell me that I should get stacks for whatever the task is, so I figured things cannot be done without it. "-)

I’m using Bootstrap because I am new to RapidWeaver and don’t quite understand RapidWeaver. yet, let alone the concept of Stacks.

The site is at https://pir2peer.org if looking at it would help.

My main problem is that when I went to add a new page the navigation bar started wrapping, and Contacts and I can’t get it out of the banner where it cannot be seen unless you know it’s there. So what I’d like to do is put Contacts, Who We Are, Media, and whatever else I have to in the footer to un-squeeze the top.

Thanks.


(Rob Beattie) #4

If I were you I’d turn some of those top level menu items into drop downs, consolidate them under a single heading. Then you’ll be able to add more top level items.

Since you’re using a theme I’m not familiar with, I’ll flag @willwood to see if he can offer any extra advice.

Rob


(Will Woodgate) #5

Some people fall into a trap of believing they have to buy X, Y, or Z to achieve anything with RapidWeaver. But throwing money at problems won’t necessarily give a positive outcome all the time.

The reality is that RapidWeaver on its own is more than capable of building a decent enough website, without needing to go out and buy additional addons. Otherwise if you don’t fully understand what you’re buying, it can become an expensive, time consuming and frustrating experience for the novice weaver.

These forums are also the best place to ask for advice, if you make clear to others that you have limited budget or experience using RapidWeaver.

So starting with free my Bootstrap theme, the easiest way to create a sidebar that shows on all pages would be to utilise something called ExtraContent. I already document this heavily on my website. The Bootstrap theme has an ExtraContent container within the sidebar (ExtraContent 11). Therefore if you go to Settings > Code > Body you can enter something like this:

Now on every page of your website, will be printed the words Hello Michelle! in the sidebar:

You just use two simple HTML tags to denote the ExtraContent container you want to use; an opening tag and a closing tag:

<div id="myExtraContent11">
Hello Michelle!
</div>

Of course you can replace that text with your own text or introduce some other simple HTML markup like links.

I want to stress that HTML is incredibly simple to learn and very-much a ‘skill for life’. So even if you came to RapidWeaver gullibly believing you would enjoy a 100% code-free experience, the reality is that anybody building websites with almost any platform will encounter code sooner or later! Simply because HTML is the underlying fabric of the whole internet.

You have presumably already copied and pasted the HTML code PayPal gave you for donation button, so this is concrete proof that HTML is everywhere.

In your website footer, the ‘currently viewing’ text can be turned off by unchecking the breadcrumbs option in the theme style settings (within the Miscellaneous group). Or if you do wish to display a simple breadcrumb navigation trail (recommended) go into Settings > Advanced > Display breadcrumb trail to have RapidWeaver generate those links for you:

Again if you want to be putting additional content in your footer, ExtraContent is your friend. Let’s assume we wanted to put the following text in your footer on every page:

If you wish to help us, you can make a donation of any size by clicking the DONATE button on this page.

We could enter this again in the Settings > Code > Body box:

And I made the text ‘on this page’ a clickable link by wrapping it inside HTML anchor link tags. The exact code to copy and reuse yourself would be this:

<div id="myExtraContent19">
If you wish to help us, you can make a donation of any size by clicking the DONATE button <a href="https://example.com">on this page</a>.
</div>

Here’s the final result, with this additional content and link in your footer:

A bonus of using a theme like Bootstrap is that the footer has a flexible height. You could put quite a lot of content and links down here, without fear of stuff getting cropped or distorted.

The footer copyright text ‘© 2019 Pir2Peer’ can be amended in Settings > General > Footer.

The ‘page last updated’ element can be hidden in the theme style settings, if you do not want it shown.

My credit in the footer is removable upon payment, discussed on the website already.

Moving onto the theme navigation bar, you will find that any RapidWeaver theme with a horizontal bar only has limited space for only about 4 - 6 links, of about two words each. Otherwise if the links start to wrap and reflow onto multiple lines, it can make navigation through drop-downs extremely tedious and it can look ugly.

Consider shortening the length of page names or explore making some of these links subpages of a parent page. If you structure your website to include subpages, you will find the Bootstrap theme automatically gives you those rather attractive drop-down menu panels which look smart, as shown here, when you hover over the link ‘sub pages’.

Another idea I have for you is that you could set some of these less important pages to show in your sidebar. In the Page Inspector, you can disable links from showing within the normal page navigation menu RapidWeaver generates. Again I’ll demonstrate some incredibly simple HTML code here that will give you a list of links to some of your existing webpages:

<div id="myExtraContent11">
<br>
<br>
You might want to learn more...<br>
<a href="https://pir2peer.org/whoweare/">Who we are</a><br>
<a href="https://pir2peer.org/peopleinrecovery/">What's in our name?</a><br>
<a href="https://pir2peer.org/dreams/">Our Dreams</a><br>
<a href="https://pir2peer.org/help/">How You Can Help</a><br>
</div>

The <br> tag is another new HTML tag I want to introduce you to. It simply signifies where to have a line break - the equivalent of pressing the return key on your keyboard.

The end result would look something like this:

See those 4 new blue links in your sidebar under the little subheading? This is really good design. We are not simply seeking to fill empty space with more content! But rather we are looking at this through the eyes of a professional web designer and seeking to create flow through the website - i.e. small chunks of content and links that the user can click and follow. It adds interaction and therefore improves the user experience.


So there you go. This post should hopefully provide solutions to everything you want to do, without needing to buy anything extra. It introduces you to some concepts like ExtraContent, the RapidWeaver settings, site structuring / navigation design and some entry-level HTML tags. All this information would be synonymous with nearly ANY RapidWeaver theme you choose to use.

Of course, once you have learnt the fundamentals of RapidWeaver and good web design, you have the freedom to buy other addons; like more powerful themes or plugins like Stacks. That’s the clear advantage a modular web design tool like RapidWeaver brings.

-Will.